Mobileweb/ScrollerSample.js at master · sleepwizard/Mobileweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
enyo.kind({
	name: "enyo.sample.ScrollerSample",
	kind: "FittableRows",
	classes: "enyo-fit  enyo-unselectable",
	components: [
		{kind: "onyx.Toolbar", components: [
			{kind: "onyx.PickerDecorator", components: [
				{content:"Choose Scroller", style:"width:250px;"},
				{kind: "onyx.Picker", floating:true, maxHeight: 300, onSelect:"sampleChanged", components: [
					{content:"Default scroller", active:true},
					{content:"Force touch scroller"},
					{content:"Horizontal only"},
					{content:"Vertical only"},
					{content:"Force TouchScrollStrategy"},
					{content:"Force TransitionScrollStrategy"},
					{content:"Force TranslateScrollStrategy"}
				]}
			]}
		]},
		{kind: "Panels", fit: true, draggable: false, classes: "scroller-sample-panels", components: [
			// Default scroller (chooses best scrolling method for platform)
			{kind: "Scroller", classes: "scroller-sample-scroller enyo-fit"},
			// Forces touch scrolling, even on desktop
			{kind: "Scroller", touch:true, classes: "scroller-sample-scroller enyo-fit"},
			// Horizontal-only scrolling
			{kind: "Scroller", vertical:"hidden", classes: "scroller-sample-scroller enyo-fit"},
			// Vertical-only scrolling
			{kind: "Scroller", horizontal:"hidden", classes: "scroller-sample-scroller enyo-fit", onmousedown: "mouseDown", ondragstart: "dragStart"},
			// Force specific strategies
			{kind: "Scroller", classes: "scroller-sample-scroller enyo-fit", strategyKind: "TouchScrollStrategy"},
			{kind: "Scroller", classes: "scroller-sample-scroller enyo-fit", strategyKind: "TransitionScrollStrategy"},
			{kind: "Scroller", classes: "scroller-sample-scroller enyo-fit", strategyKind: "TranslateScrollStrategy"}
		]}
	],
	create: function() {
		this.inherited(arguments);
		var scrollers = this.$.panels.getPanels();
		for (var i in scrollers) {
			scrollers[i].createComponent({
				allowHtml:true,
				content:this.text,
				classes:"scroller-sample-content"
			});
		}
	},
	sampleChanged: function(inSender, inEvent) {
		this.$.panels.setIndex(inEvent.selected.indexInContainer()-1);
	},
	text: "Foo<br>Bar<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>" +
		"Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br>Foo<br>Bar<br>Bar<br>" +
		"Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>" +
		"Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. <br>Foo<br>Bar<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>" +
		"Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>" +
		"Foo<br>Bar<br>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. <br>Foo<br>Bar<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>" +
		"Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow<br>Foo<br>Bar<br>Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. " +
		"Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br>",
	// The following are used when this sample is called from the Sampler app
	mouseDown: function(inSender, inEvent) {
		inEvent.preventDefault();
	},
	dragStart: function(inSender, inEvent) {
		if (inEvent.horizontal) {
			// Prevent drag propagation on horizontal drag events
			return true;
		}
	}
});