-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
153 lines (129 loc) · 4.16 KB
/
index.html
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang='en-GB'>
<head>
<meta charset='utf-8'>
<title>Ractive.js sortable decorator plugin</title>
<!-- CSS -->
<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='demo/main.css'>
<style type='text/css'>
.left, .right {
width: 50%;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
padding: 0 1em 0 0;
}
.right {
padding: 0 0 0 1em;
}
.browsers {
list-style: none;
padding: 0;
margin: 0;
}
.browsers li {
position: relative;
padding: 0.5em 0.5em 0.5em 2.8em;
background-color: #eee;
margin: 0 0 0.2em 0;
line-height: 1;
background: 0.2em 50% no-repeat;
background-size: auto 80%;
border: 1px solid #eee;
border-radius: 0.2em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.reorderable li {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
background-color: #eee;
}
li.droptarget {
border: 1px dashed rgb(200,200,100);
background: rgb(240,240,200);
background-image: none !important;
color: transparent;
}
.browsers span {
font-size: 1.4em;
}
</style>
</head>
<body>
<!-- if the project is on GitHub, add a fork me button! -->
<a class='forkme' href='https://github.com/RactiveJS/Ractive-decorators-sortable'>Fork me on GitHub</a>
<header>
<h1>Ractive.js sortable decorator plugin</h1>
<p class='strap'>
<span class='download'>download: <a href='https://raw.github.com/RactiveJS/Ractive-decorators-sortable/master/Ractive-decorators-sortable.js'>Ractive-decorators-sortable.js</a></span>
<span class='more-plugins'>more plugins at <a href='http://ractivejs.org/plugins'>ractivejs.org/plugins</a></span>
</p>
</header>
<main>
<p>This plugin adds a <code>sortable</code> decorator to Ractive, which enables elements that correspond to array members to be re-ordered using the HTML5 drag and drop API. Doing so will update the order of the array.</p>
<p>When the user drags the source element over a target element, the target element will have a class name added to it. This allows you to render the target differently (e.g. hide the text, add a dashed border, whatever). By default this class name is 'droptarget'.</p>
<p>You can configure the class name with the following:</p>
<pre class='prettyprint lang-js'>Ractive.decorators.sortable.targetClass = 'aDifferentClassName';</pre>
<div id='demo' class='clearfix'></div>
<pre id='demo-template-view' class='prettyprint lang-html'></pre>
<pre id='demo-code-view' class='prettyprint lang-js'></pre>
</main>
<!-- add additional info such as your homepage here, if you want -->
<footer>
<p>Copyright © 2013 Rich Harris. Licensed MIT</p>
</footer>
<!-- Demo template -->
<script id='demo-template' type='text/ractive'>
<div class='left'>
<h2>Try reordering items...</h2>
<ul class='reorderable browsers'>
{{#list}}
<li as-sortable style='background-image: url(demo/icons/{{icon}});'>
<span>{{name}}</span>
</li>
{{/list}}
</ul>
</div>
<div class='right'>
<h2>...it mirrors automatically</h2>
<ul class='browsers'>
{{#list}}
<li style='background-image: url(demo/icons/{{icon}});'>
<span>{{name}}</span>
</li>
{{/list}}
</ul>
</div>
</script>
<!-- Dependencies -->
<script src='lib/Ractive-legacy.js'></script>
<script src='Ractive-decorators-sortable.js'></script>
<!-- Demo code -->
<script id='demo-code'>
ractive = new Ractive({
el: 'demo',
template: '#demo-template',
data: {
list: [
{ name: 'Firefox', icon: 'firefox_64x64.png' },
{ name: 'Chrome', icon: 'chrome_64x64.png' },
{ name: 'Safari', icon: 'safari_64x64.png' },
{ name: 'Opera', icon: 'opera_64x64.png' },
{ name: 'Maxthon', icon: 'maxthon_64x64.png' },
{ name: 'Internet Explorer', icon: 'ie10_64x64.png' }
]
}
});
</script>
<!-- Insert code into the page -->
<script src='demo/prettify.js'></script>
<script src='demo/demo.js'></script>
</body>
</html>