-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo-angular.html
executable file
·236 lines (183 loc) · 9.83 KB
/
demo-angular.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!--
Copyright (c) 2015 Stephan Schmitz, <https://eyecatchup.github.io/>, <[email protected]>. All rights reserved.
This code may only be used under the MIT license found at <http://eyecatchup.mit-license.org/>.
--><!doctype html>
<html ng-app="toggleDemoApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>AngularJS Draggable Toggle Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- jQuery plugin styles -->
<link rel="stylesheet" href="dist/angular-draggable-toggle.css">
<!-- Demo-only styles -->
<style>
* {box-sizing: border-box;}
body {font-family: Arial, 'Sans serif'; overflow-x: hidden;}
h1 {font-size: 1.8em; margin-bottom: .4em; text-decoration: underline; color: rgb(17, 17, 17);}
h2 {font-size: 1em; font-weight: normal; margin: .2em 0; color: rgb(83, 83, 83);}
h3 {font-size: 1.2em; color: rgb(83, 83, 83);}
h5 {font-size: .9em; font-weight: normal; margin: 10px 0;}
hr {margin: 2.1em 0;}
p {margin: 10px 0 15px;}
em {color: rgb(117, 117, 117);}
pre {background: rgb(252, 252, 252); color: rgb(0, 0, 125); padding: 5px; margin-bottom: 15px; margin-left: 15px; border: 1px dashed #ccc; overflow-x: auto;}
code {font-family: 'Courier New', 'Courier', monospace; font-size: 16px; line-height: 20px; letter-spacing: .05em;}
.container {padding: 0 0 25px;}
.demo {background: rgb(252, 252, 252); margin-bottom: 25px; margin-left: 15px; padding: 1px 10px 15px; border: 1px dashed #ccc;}
.trigger {font-size: 14px; cursor: pointer;}
.small {max-width: 200px;}
.github-btns {float: left; width: 100%; overflow: hidden; position: relative; height: 30px; margin: 25px 0;}
.github-btns ul {clear: left; float: left; list-style-type: none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center;}
.github-btns ul li {display: inline-block; float: left; list-style-type: none; margin: 0 20px 0 0; padding: 0; position: relative; right: 50%;}
.copy {text-align: right; right: 15px; margin: 35px 0 0; font-size: .8em;}
</style>
</head>
<body>
<hgroup>
<h1>Angular Draggable Toggles</h1>
<h2>A lightweight, flexible jQuery/Zepto/ender toggle-button plugin, wrapped in an AngularJS directive.</h2>
</hgroup>
<div class="github-btns">
<ul>
<li><a class="github-button" target="_blank" href="//github.com/eyecatchup/angular-draggable-toggle/fork" data-icon="octicon-git-branch" data-style="mega" aria-label="Fork eyecatchup/angular-draggable-toggle on GitHub">Fork</a></li>
<li><a class="github-button" target="_blank" href="//github.com/eyecatchup/angular-draggable-toggle#installation" data-icon="octicon-cloud-download" data-style="mega" aria-label="Download eyecatchup/angular-draggable-toggle on GitHub">Download</a></li>
<li><a class="github-button" target="_blank" href="//github.com/eyecatchup/angular-draggable-toggle" data-icon="octicon-star" data-style="mega" aria-label="Star eyecatchup/angular-draggable-toggle on GitHub">Star</a></li>
<li><a class="github-button" target="_blank" href="//github.com/eyecatchup" data-style="mega" data-count-href="/eyecatchup/followers" data-count-api="/users/eyecatchup#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @eyecatchup on GitHub">Follow @eyecatchup</a></li>
</ul>
</div>
<hr/>
<div ng-controller="ToggleDemoController" class="container">
<!-- Example 1 -->
<h3 name="example-0">Ex. #1: Default / No Options: Draggable handle & clickable labels*</h3>
<h5 name="source-0">Source:</h5>
<pre><code ng-non-bindable><p>Toggle-State: {{ toggleState.0 }}</p>
<div ng-model="toggleState.0" draggable-toggle="{}"></div></code></pre>
<h5 name="result-0">Result:</h5>
<div class="demo">
<p><b>Toggle-State</b>: {{ toggleState.0 }}</p>
<div class="small">
<div ng-model="toggleState.0" draggable-toggle="{}"></div>
</div>
</div>
<p><small><em>* Only the outer element width (200px) is defined via custom CSS here. All other styles are plugin defaults.</em></small></p>
<hr/>
<!-- Example 2 -->
<h3 name="example-1">Ex. #2: Draggable handle & clickable labels + custom handle width & element height*</h3>
<h5 name="source-1">Source:</h5>
<pre><code ng-non-bindable><p>Toggle-State: {{ toggleState.1 }}</p>
<div ng-model="toggleState.1" draggable-toggle="{handleWidth: 120, height: 30}"></div></code></pre>
<h5 name="result-1">Result:</h5>
<div class="demo">
<p><b>Toggle-State</b>: {{ toggleState.1 }}</p>
<div class="small">
<div ng-model="toggleState.1" draggable-toggle="{handleWidth: 120, height: 30}"></div>
</div>
</div>
<p><small><em>* Only the outer element width (200px) is defined via custom CSS here. All other styles are plugin defaults.</em></small></p>
<hr/>
<!-- Example 3 -->
<h3 name="example-2">Ex. #3: Draggable handle & clickable labels + clickable trigger-element & custom label texts*</h3>
<h5 name="source-2">Source:</h5>
<pre><code ng-non-bindable><p>Toggle-State: {{ toggleState.2 }}</p>
<div class="clicker">
<span>Click this text to toggle!</span>
<div ng-model="toggleState.2"
rel="clicker"
draggable-toggle="{text: {on: 'AN', off: 'AUS'}, handleWidth: 120, height: 30}"></div>
</div></code></pre>
<h5 name="result-2">Result:</h5>
<div class="demo">
<p><b>Toggle-State</b>: {{ toggleState.2 }}</p>
<div class="small clicker">
<p><span class="trigger">Click this text to toggle!</span></p>
<div ng-model="toggleState.2"
rel="clicker"
draggable-toggle="{text: {on: 'AN', off: 'AUS'}, handleWidth: 120, height: 30}"></div>
</div>
</div>
<p><small><em>* Only the outer element width (200px) is defined via custom CSS here. All other styles are plugin defaults.</em></small></p>
<hr/>
<!-- Example 4 -->
<h3 name="example-3">Ex. #4: Draggable handle, click handler disabled + custom handle width & animation speed</h3>
<h5 name="source-3">Source:</h5>
<pre><code ng-non-bindable><p>Toggle-State: {{ toggleState.3 }}</p>
<div ng-model="toggleState.3"
draggable-toggle="{click: false, handleWidth: 250, animation: 400}"></div></code></pre>
<h5 name="result-3">Result:</h5>
<div class="demo">
<p><b>Toggle-State</b>: {{ toggleState.3 }}</p>
<div ng-model="toggleState.3"
draggable-toggle="{click: false, handleWidth: 250, animation: 400}"></div>
</div>
<hr/>
<!-- Example 5 -->
<h3 name="example-4">Ex. #5: Clickable labels, drag handler disabled + predefined init state (On), custom element height & /wo On/Off text-labels</h3>
<h5 name="source-4">Source:</h5>
<pre><code ng-non-bindable><p>Toggle-State: {{ toggleState.4 }}</p>
<div ng-model="toggleState.4"
draggable-toggle="{drag: false, on: true, text: {on: ' ', off: ' '}, height: 30}"></div></code></pre>
<h5 name="result-4">Result:</h5>
<div class="demo">
<p><b>Toggle-State</b>: {{ toggleState.4 }}</p>
<div ng-model="toggleState.4"
draggable-toggle="{drag: false, on: true, text: {on: ' ', off: ' '}, height: 30}"></div>
</div>
<hr/>
<p class="copy">Made with ♥ in Cologne, Germany. - © 2015 Stephan Schmitz, <[email protected]></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery plugin script -->
<script src="dist/angular-draggable-toggle.min.js"></script>
<!-- jQuery plugin wrapper for Angular /w data-binding -->
<script>
var App = angular.module('toggleDemoApp', []);
/**
* Plugin-Wrapper Angular directive
*/
App.directive('draggableToggle', function($parse) {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
// jQuery plugin invocation
var opts = $scope.$eval($attrs.draggableToggle);
if (angular.isDefined($attrs.rel)) {
opts.clicker = $('.' + $attrs.rel);
}
$scope.initState($attrs.ngModel.split('.')[1],
((opts.on && opts.on === true) ? true : false));
$($element).addClass('toogle toggle-clean');
$($element).toggles(opts);
// Custom event handler to handle $scope updates.
$($element).bind('toggle', function() {
$scope.$apply(function() {
$scope.toggle($attrs.ngModel.split('.')[1]);
});
});
}
};
});
/**
* Angular Demo-Controller
*/
function ToggleDemoController($scope) {
$scope.toggleState = [];
$scope.$watch('toggleState.1', function (val, oldVal) {
if (val !== oldVal) {
console.dir('Toggle 1 was changed from ' + oldVal + ' to ' + val + '.');
}
});
$scope.initState = function(i, val) {
//console.log('Called $scope.initState for elem ' + i);
$scope.toggleState[i] = (val === true) ? 'On' : 'Off';
}
$scope.toggle = function(i) {
console.log('Called $scope.toggle for elem ' + i);
$scope.toggleState[i] = $scope.toggleState[i] === 'Off' ? 'On' : 'Off';
}
}
</script>
<script async defer id="github-bjs" src="//buttons.github.io/buttons.js"></script>
</body>
</html>