macbury-metro-ui-rails 0.15.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +21 -0
- data/.gitmodules +3 -0
- data/Gemfile +4 -0
- data/README.md +44 -0
- data/Rakefile +74 -0
- data/lib/generators/metro/layout/layout_generator.rb +19 -0
- data/lib/generators/metro/layout/templates/layout.html.erb +92 -0
- data/lib/metro/ui/rails/engine.rb +16 -0
- data/lib/metro/ui/rails/metro.rb +2 -0
- data/lib/metro/ui/rails/version.rb +7 -0
- data/lib/metro-ui-rails.rb +10 -0
- data/metro-ui-rails.gemspec +20 -0
- data/vendor/assets/fonts/metro-ui/iconFont.eot +0 -0
- data/vendor/assets/fonts/metro-ui/iconFont.svg +2005 -0
- data/vendor/assets/fonts/metro-ui/iconFont.ttf +0 -0
- data/vendor/assets/fonts/metro-ui/iconFont.woff +0 -0
- data/vendor/assets/javascripts/metro-ui/accordion.js +44 -0
- data/vendor/assets/javascripts/metro-ui/buttonset.js +34 -0
- data/vendor/assets/javascripts/metro-ui/carousel.js +368 -0
- data/vendor/assets/javascripts/metro-ui/dropdown.js +95 -0
- data/vendor/assets/javascripts/metro-ui/input-control.js +103 -0
- data/vendor/assets/javascripts/metro-ui/pagecontrol.js +64 -0
- data/vendor/assets/javascripts/metro-ui/rating.js +249 -0
- data/vendor/assets/javascripts/metro-ui/slider.js +248 -0
- data/vendor/assets/javascripts/metro-ui/tile-drag.js +332 -0
- data/vendor/assets/javascripts/metro-ui/tile-slider.js +196 -0
- data/vendor/assets/javascripts/metro-ui.js +10 -0
- data/vendor/toolkit/metro-ui/accordion.less +69 -0
- data/vendor/toolkit/metro-ui/bricks.less +59 -0
- data/vendor/toolkit/metro-ui/buttons.less +434 -0
- data/vendor/toolkit/metro-ui/cards.less +113 -0
- data/vendor/toolkit/metro-ui/carousel.less +109 -0
- data/vendor/toolkit/metro-ui/code.less +47 -0
- data/vendor/toolkit/metro-ui/colors.less +115 -0
- data/vendor/toolkit/metro-ui/forms.less +434 -0
- data/vendor/toolkit/metro-ui/grid.less +115 -0
- data/vendor/toolkit/metro-ui/hero.less +18 -0
- data/vendor/toolkit/metro-ui/icons.less +1168 -0
- data/vendor/toolkit/metro-ui/images.less +121 -0
- data/vendor/toolkit/metro-ui/jqgrid.less +12 -0
- data/vendor/toolkit/metro-ui/layout.less +287 -0
- data/vendor/toolkit/metro-ui/listview.less +143 -0
- data/vendor/toolkit/metro-ui/menus.less +249 -0
- data/vendor/toolkit/metro-ui/modern-responsive-max480.less +147 -0
- data/vendor/toolkit/metro-ui/modern-responsive-max767.less +241 -0
- data/vendor/toolkit/metro-ui/modern-responsive-max979.less +97 -0
- data/vendor/toolkit/metro-ui/modern-responsive-min1200.less +28 -0
- data/vendor/toolkit/metro-ui/modern-responsive.less +13 -0
- data/vendor/toolkit/metro-ui/modern.less +35 -0
- data/vendor/toolkit/metro-ui/notices.less +185 -0
- data/vendor/toolkit/metro-ui/pagecontrol.less +100 -0
- data/vendor/toolkit/metro-ui/progress.less +22 -0
- data/vendor/toolkit/metro-ui/rating.less +80 -0
- data/vendor/toolkit/metro-ui/reset.less +504 -0
- data/vendor/toolkit/metro-ui/routines.less +141 -0
- data/vendor/toolkit/metro-ui/sidebar.less +136 -0
- data/vendor/toolkit/metro-ui/slider.less +67 -0
- data/vendor/toolkit/metro-ui/tables.less +164 -0
- data/vendor/toolkit/metro-ui/theme-dark.less +54 -0
- data/vendor/toolkit/metro-ui/tiles.less +285 -0
- data/vendor/toolkit/metro-ui/typography.less +347 -0
- metadata +139 -0
@@ -0,0 +1,64 @@
|
|
1
|
+
(function($){
|
2
|
+
$.fn.PageControl = function( options ){
|
3
|
+
var defaults = {
|
4
|
+
};
|
5
|
+
|
6
|
+
var $this = $(this)
|
7
|
+
, $ul = $this.children("ul")
|
8
|
+
, $selectors = $ul.find("li a")
|
9
|
+
, $selector = $ul.find(".active a")
|
10
|
+
, $frames = $this.find(".frames .frame")
|
11
|
+
, $frame = $frames.children(".frame.active")
|
12
|
+
;
|
13
|
+
|
14
|
+
var initSelectors = function(selectors){
|
15
|
+
selectors.on('click', function(e){
|
16
|
+
e.preventDefault();
|
17
|
+
var $a = $(this);
|
18
|
+
if (!$a.parent('li').hasClass('active')) {
|
19
|
+
$frames.hide();
|
20
|
+
$ul.find("li").removeClass("active");
|
21
|
+
var target = $($a.attr("href"));
|
22
|
+
target.show();
|
23
|
+
$(this).parent("li").addClass("active");
|
24
|
+
}
|
25
|
+
if ($(this).parent("li").parent("ul").parent(".page-control").find(".menu-pull-bar").is(":visible")) {
|
26
|
+
$(this).parent("li").parent("ul").slideUp("fast", function () {
|
27
|
+
$(this).css("overflow", "").css("display", "");
|
28
|
+
});
|
29
|
+
}
|
30
|
+
});
|
31
|
+
|
32
|
+
$(".page-control .menu-pull-bar").text($(".page-control ul li.active a").text());
|
33
|
+
$(".page-control ul li a").click(function (e) {
|
34
|
+
e.preventDefault();
|
35
|
+
$(this).parent("li").parent("ul").parent(".page-control").find(".menu-pull-bar").text($(this).text());
|
36
|
+
});
|
37
|
+
}
|
38
|
+
|
39
|
+
return this.each(function(){
|
40
|
+
if ( options ) {
|
41
|
+
$.extend(defaults, options)
|
42
|
+
}
|
43
|
+
|
44
|
+
initSelectors($selectors);
|
45
|
+
});
|
46
|
+
}
|
47
|
+
|
48
|
+
$(function () {
|
49
|
+
$('[data-role="page-control"]').each(function () {
|
50
|
+
$(this).PageControl();
|
51
|
+
})
|
52
|
+
$(window).resize(function(){
|
53
|
+
if ($(window).width() >= 768) {
|
54
|
+
$(".page-control ul").css({
|
55
|
+
display: "block"
|
56
|
+
,overflow: "visible"
|
57
|
+
})
|
58
|
+
}
|
59
|
+
if ($(window).width() < 768 && $(".page-control ul").css("display") == "block") {
|
60
|
+
$(".page-control ul").hide();
|
61
|
+
}
|
62
|
+
})
|
63
|
+
})
|
64
|
+
})(window.jQuery);
|
@@ -0,0 +1,249 @@
|
|
1
|
+
/**
|
2
|
+
* jQuery plugin for rating component of MetroUiCss framework
|
3
|
+
* use attribute data-role="rating" or class="rating" to initialize rating plugin for some element
|
4
|
+
* or use $(ratingElement).rating({parameters})
|
5
|
+
*
|
6
|
+
* available parameters (attributes):
|
7
|
+
* data-role-stars="integer" stars count for this rating element (default 5)
|
8
|
+
* data-role-rating="integer" current average rating (default 0)
|
9
|
+
* data-role-vote="string" ('on' or 'off') (default 'on')
|
10
|
+
*
|
11
|
+
* to control rating you can use:
|
12
|
+
* $('ratingID').RatingValue(float) - set rating
|
13
|
+
* $('ratingID').RatingValue() - return rating
|
14
|
+
* $('ratingID').RatingPercents(0 < float < 100) - set rating by percents
|
15
|
+
* $('ratingID').RatingPercents() - return rating percents
|
16
|
+
* $('ratingID').RatingVote(true or 'on') - set vote=on rating mode
|
17
|
+
* $('ratingID').RatingVote(false or 'off') - set vote=off rating mode
|
18
|
+
*/
|
19
|
+
(function($) {
|
20
|
+
|
21
|
+
$.Rating = function(element, options) {
|
22
|
+
|
23
|
+
var defaults = {
|
24
|
+
// stars count
|
25
|
+
stars: 5,
|
26
|
+
// init value
|
27
|
+
rating: 0,
|
28
|
+
// voting mode
|
29
|
+
vote: 'on'
|
30
|
+
|
31
|
+
};
|
32
|
+
|
33
|
+
var plugin = this;
|
34
|
+
|
35
|
+
plugin.settings = {};
|
36
|
+
|
37
|
+
var $element = $(element),
|
38
|
+
starElements = [],
|
39
|
+
$starElements,
|
40
|
+
$innerElement, // for vote=off mode
|
41
|
+
currentRating;
|
42
|
+
|
43
|
+
plugin.init = function() {
|
44
|
+
|
45
|
+
plugin.settings = $.extend({}, defaults, options);
|
46
|
+
|
47
|
+
currentRating = plugin.settings.rating;
|
48
|
+
|
49
|
+
if (plugin.settings.vote === 'on') {
|
50
|
+
voteOnInit();
|
51
|
+
} else {
|
52
|
+
voteOffInit();
|
53
|
+
}
|
54
|
+
|
55
|
+
};
|
56
|
+
|
57
|
+
/**
|
58
|
+
* public methods to set and get rating (value, percent)
|
59
|
+
* use it like this: $('#ratingElementID').data('Rating').setRating(4)
|
60
|
+
*/
|
61
|
+
plugin.setRating = function (rating) {
|
62
|
+
setRating(rating);
|
63
|
+
return rating;
|
64
|
+
};
|
65
|
+
plugin.setRatingPercents = function (ratingPercents) {
|
66
|
+
setRating((ratingPercents / 100) * plugin.settings.stars);
|
67
|
+
return ratingPercents;
|
68
|
+
};
|
69
|
+
plugin.getRating = function () {
|
70
|
+
return currentRating;
|
71
|
+
};
|
72
|
+
plugin.getRatingPercents = function () {
|
73
|
+
return currentRating / plugin.settings.stars * 100;
|
74
|
+
};
|
75
|
+
/**
|
76
|
+
* public method for change vote mode
|
77
|
+
*/
|
78
|
+
plugin.voteOn = function () {
|
79
|
+
plugin.settings.vote = 'on';
|
80
|
+
voteOnInit();
|
81
|
+
};
|
82
|
+
plugin.voteOff = function () {
|
83
|
+
plugin.settings.vote = 'off';
|
84
|
+
voteOffInit();
|
85
|
+
};
|
86
|
+
|
87
|
+
|
88
|
+
/**
|
89
|
+
* init vote=off mode rating
|
90
|
+
*/
|
91
|
+
var voteOffInit = function () {
|
92
|
+
|
93
|
+
var width,
|
94
|
+
settings = plugin.settings;
|
95
|
+
|
96
|
+
$element.empty();
|
97
|
+
|
98
|
+
// special class for vote=off mode
|
99
|
+
$element.addClass('static-rating');
|
100
|
+
|
101
|
+
width = ($element.hasClass('small') ? '14' : '27') * settings.stars;
|
102
|
+
$element.css('width', width);
|
103
|
+
|
104
|
+
$innerElement = $('<div class="rating-value"></div>');
|
105
|
+
$innerElement.appendTo($element);
|
106
|
+
|
107
|
+
setRating(currentRating);
|
108
|
+
|
109
|
+
};
|
110
|
+
|
111
|
+
/**
|
112
|
+
* init vote=on mode rating
|
113
|
+
*/
|
114
|
+
var voteOnInit = function () {
|
115
|
+
var settings = plugin.settings,
|
116
|
+
a, i;
|
117
|
+
|
118
|
+
$element.empty();
|
119
|
+
$element.removeClass('static-rating');
|
120
|
+
|
121
|
+
// create stars (count starts from 1)
|
122
|
+
for (i = 1; i <= settings.stars; i++) {
|
123
|
+
a = starElements[i] = $('<a href="javascript:void(0)"></a>');
|
124
|
+
a.data('starIndex', i);
|
125
|
+
a.appendTo($element);
|
126
|
+
}
|
127
|
+
|
128
|
+
// event handlers for voting
|
129
|
+
$starElements = $element.find('a');
|
130
|
+
|
131
|
+
$starElements.on('mouseenter', function () {
|
132
|
+
var index = $(this).data('starIndex');
|
133
|
+
lightStars(0, true);
|
134
|
+
lightStars(index);
|
135
|
+
$element.trigger('hovered', [index]);
|
136
|
+
});
|
137
|
+
$starElements.on('mouseleave', function () {
|
138
|
+
lightStars(0);
|
139
|
+
lightStars(currentRating, true);
|
140
|
+
});
|
141
|
+
$starElements.on('click', function(){
|
142
|
+
var index = $(this).data('starIndex');
|
143
|
+
currentRating = index;
|
144
|
+
$element.trigger('rated', [index]);
|
145
|
+
});
|
146
|
+
|
147
|
+
setRating(currentRating);
|
148
|
+
};
|
149
|
+
|
150
|
+
/**
|
151
|
+
* make stars fired (from first to (starIndex - 1))
|
152
|
+
* or turn off stars if starIndex = 0
|
153
|
+
* @param starIndex
|
154
|
+
* @param rated if true - add 'rated' class, else 'hover'
|
155
|
+
*/
|
156
|
+
var lightStars = function (starIndex, rated) {
|
157
|
+
var class_ = rated ? 'rated' : 'hover';
|
158
|
+
starIndex = Math.round(starIndex);
|
159
|
+
$starElements.removeClass(class_);
|
160
|
+
$starElements.filter(':lt(' + starIndex + ')').addClass(class_);
|
161
|
+
};
|
162
|
+
|
163
|
+
/**
|
164
|
+
* light stars and store rating
|
165
|
+
* @param rating
|
166
|
+
*/
|
167
|
+
var setRating = function (rating) {
|
168
|
+
var settings = plugin.settings,
|
169
|
+
percents;
|
170
|
+
currentRating = rating;
|
171
|
+
if (settings.vote === 'on') {
|
172
|
+
lightStars(rating, true);
|
173
|
+
} else {
|
174
|
+
percents = rating / settings.stars * 100;
|
175
|
+
$innerElement.css('width', percents + '%');
|
176
|
+
}
|
177
|
+
|
178
|
+
};
|
179
|
+
|
180
|
+
plugin.init();
|
181
|
+
|
182
|
+
};
|
183
|
+
|
184
|
+
$.fn.Rating = function(options) {
|
185
|
+
|
186
|
+
return this.each(function() {
|
187
|
+
if (undefined == $(this).data('Rating')) {
|
188
|
+
var plugin = new $.Rating(this, options);
|
189
|
+
$(this).data('Rating', plugin);
|
190
|
+
}
|
191
|
+
});
|
192
|
+
|
193
|
+
};
|
194
|
+
|
195
|
+
/**
|
196
|
+
* get or set rating value to/from first element in set
|
197
|
+
*/
|
198
|
+
$.fn.RatingValue = function(value) {
|
199
|
+
var ratingPlugin = $(this.get(0)).data('Rating');
|
200
|
+
if (typeof ratingPlugin !== 'undefined') {
|
201
|
+
if (typeof value !== 'undefined') {
|
202
|
+
return ratingPlugin.setRating(value);
|
203
|
+
} else {
|
204
|
+
return ratingPlugin.getRating();
|
205
|
+
}
|
206
|
+
}
|
207
|
+
};
|
208
|
+
/**
|
209
|
+
* get or set rating percents to/from first element in set
|
210
|
+
*/
|
211
|
+
$.fn.RatingPercents = function(value) {
|
212
|
+
var ratingPlugin = $(this.get(0)).data('Rating');
|
213
|
+
if (typeof ratingPlugin !== 'undefined') {
|
214
|
+
if (typeof value !== 'undefined') {
|
215
|
+
return ratingPlugin.setRatingPercents(value);
|
216
|
+
} else {
|
217
|
+
return ratingPlugin.getRatingPercents();
|
218
|
+
}
|
219
|
+
}
|
220
|
+
};
|
221
|
+
|
222
|
+
/**
|
223
|
+
* changes rating mode
|
224
|
+
*/
|
225
|
+
$.fn.RatingVote = function(vote) {
|
226
|
+
var ratingPlugin = $(this.get(0)).data('Rating');
|
227
|
+
if (typeof ratingPlugin !== 'undefined') {
|
228
|
+
if (vote === true || vote === 'on') {
|
229
|
+
ratingPlugin.voteOn();
|
230
|
+
} else if (vote === false || vote === 'off') {
|
231
|
+
ratingPlugin.voteOff();
|
232
|
+
}
|
233
|
+
}
|
234
|
+
};
|
235
|
+
|
236
|
+
})(jQuery);
|
237
|
+
|
238
|
+
$(function(){
|
239
|
+
var allratings = $('[data-role=rating], .rating');
|
240
|
+
allratings.each(function (index, rating) {
|
241
|
+
var params = {};
|
242
|
+
$rating = $(rating);
|
243
|
+
params.stars = $rating.data('paramStars');
|
244
|
+
params.rating = $rating.data('paramRating');
|
245
|
+
params.vote = $rating.data('paramVote');
|
246
|
+
|
247
|
+
$rating.Rating(params);
|
248
|
+
});
|
249
|
+
});
|
@@ -0,0 +1,248 @@
|
|
1
|
+
/**
|
2
|
+
* Slider - jQuery plugin for MetroUiCss framework
|
3
|
+
*
|
4
|
+
* there is "change" event triggering when marker moving
|
5
|
+
* and "changed" event when stop moving
|
6
|
+
*
|
7
|
+
* you may use this code to handle events:
|
8
|
+
|
9
|
+
$(window).ready(function(){
|
10
|
+
$('.slider').on('change', function(e, val){
|
11
|
+
console.log('change to ' + val);
|
12
|
+
}).on('changed', function(e, val){
|
13
|
+
console.log('changed to ' + val);
|
14
|
+
});
|
15
|
+
});
|
16
|
+
|
17
|
+
* and this, to retrieve value
|
18
|
+
|
19
|
+
$('.slider').data('value')
|
20
|
+
|
21
|
+
*
|
22
|
+
*/
|
23
|
+
|
24
|
+
(function($) {
|
25
|
+
|
26
|
+
$.slider = function(element, options) {
|
27
|
+
|
28
|
+
// default settings
|
29
|
+
var defaults = {
|
30
|
+
// start value of slider
|
31
|
+
initValue: 0,
|
32
|
+
// accuracy
|
33
|
+
accuracy: 1
|
34
|
+
};
|
35
|
+
|
36
|
+
var plugin = this;
|
37
|
+
plugin.settings = {};
|
38
|
+
|
39
|
+
var $element = $(element); // reference to the jQuery version of DOM element
|
40
|
+
|
41
|
+
var complete, // complete part element
|
42
|
+
marker, // marker element
|
43
|
+
currentValuePerc, // current percents count
|
44
|
+
sliderLength,
|
45
|
+
sliderOffset,
|
46
|
+
sliderStart,
|
47
|
+
sliderEnd,
|
48
|
+
percentPerPixel,
|
49
|
+
markerSize,
|
50
|
+
vertical = false;
|
51
|
+
|
52
|
+
// initialization
|
53
|
+
plugin.init = function () {
|
54
|
+
|
55
|
+
plugin.settings = $.extend({}, defaults, options);
|
56
|
+
|
57
|
+
// create inside elements
|
58
|
+
complete = $('<div class="complete"></div>');
|
59
|
+
marker = $('<div class="marker"></div>');
|
60
|
+
|
61
|
+
complete.appendTo($element);
|
62
|
+
marker.appendTo($element);
|
63
|
+
|
64
|
+
vertical = $element.hasClass('vertical');
|
65
|
+
|
66
|
+
initGeometry();
|
67
|
+
|
68
|
+
// start value
|
69
|
+
currentValuePerc = correctValuePerc(plugin.settings.initValue);
|
70
|
+
placeMarkerByPerc(currentValuePerc);
|
71
|
+
|
72
|
+
// init marker handler
|
73
|
+
marker.on('mousedown', function (e) {
|
74
|
+
e.preventDefault();
|
75
|
+
startMoveMarker();
|
76
|
+
});
|
77
|
+
|
78
|
+
$element.on('click', function (event) {
|
79
|
+
initGeometry();
|
80
|
+
movingMarker(event);
|
81
|
+
$element.trigger('changed', [currentValuePerc]);
|
82
|
+
});
|
83
|
+
|
84
|
+
};
|
85
|
+
|
86
|
+
/**
|
87
|
+
* correct percents using "accuracy" parameter
|
88
|
+
*/
|
89
|
+
var correctValuePerc = function (value) {
|
90
|
+
var accuracy = plugin.settings.accuracy;
|
91
|
+
if (accuracy === 0) {
|
92
|
+
return value;
|
93
|
+
}
|
94
|
+
if (value === 100) {
|
95
|
+
return 100;
|
96
|
+
}
|
97
|
+
value = Math.floor(value / accuracy) * accuracy + Math.round(value % accuracy / accuracy) * accuracy;
|
98
|
+
if (value > 100) {
|
99
|
+
return 100;
|
100
|
+
}
|
101
|
+
return value;
|
102
|
+
};
|
103
|
+
|
104
|
+
/**
|
105
|
+
* convert pixels to percents
|
106
|
+
*/
|
107
|
+
var pixToPerc = function (valuePix) {
|
108
|
+
var valuePerc;
|
109
|
+
valuePerc = valuePix * percentPerPixel;
|
110
|
+
return correctValuePerc(valuePerc);
|
111
|
+
};
|
112
|
+
|
113
|
+
/**
|
114
|
+
* convert percents to pixels
|
115
|
+
*/
|
116
|
+
var percToPix = function (value) {
|
117
|
+
if (percentPerPixel === 0) {
|
118
|
+
return 0;
|
119
|
+
}
|
120
|
+
return value / percentPerPixel;
|
121
|
+
};
|
122
|
+
|
123
|
+
/**
|
124
|
+
* place marker
|
125
|
+
*/
|
126
|
+
var placeMarkerByPerc = function (valuePerc) {
|
127
|
+
var size, size2;
|
128
|
+
|
129
|
+
if (vertical) {
|
130
|
+
size = percToPix(valuePerc) + markerSize;
|
131
|
+
size2 = sliderLength - size;
|
132
|
+
marker.css('top', size2);
|
133
|
+
complete.css('height', size);
|
134
|
+
} else {
|
135
|
+
size = percToPix(valuePerc);
|
136
|
+
marker.css('left', size);
|
137
|
+
complete.css('width', size);
|
138
|
+
}
|
139
|
+
|
140
|
+
};
|
141
|
+
|
142
|
+
/**
|
143
|
+
* when mousedown on marker
|
144
|
+
*/
|
145
|
+
var startMoveMarker = function () {
|
146
|
+
// register event handlers
|
147
|
+
$(document).on('mousemove.sliderMarker', function (event) {
|
148
|
+
movingMarker(event);
|
149
|
+
});
|
150
|
+
$(document).on('mouseup.sliderMarker', function () {
|
151
|
+
$(document).off('mousemove.sliderMarker');
|
152
|
+
$(document).off('mouseup.sliderMarker');
|
153
|
+
$element.data('value', currentValuePerc);
|
154
|
+
$element.trigger('changed', [currentValuePerc]);
|
155
|
+
});
|
156
|
+
|
157
|
+
initGeometry();
|
158
|
+
};
|
159
|
+
|
160
|
+
/**
|
161
|
+
* some geometry slider parameters
|
162
|
+
*/
|
163
|
+
var initGeometry = function () {
|
164
|
+
if (vertical) {
|
165
|
+
sliderLength = $element.height(); // slider element length
|
166
|
+
sliderOffset = $element.offset().top; // offset relative to document edge
|
167
|
+
markerSize = marker.height();
|
168
|
+
} else {
|
169
|
+
sliderLength = $element.width();
|
170
|
+
sliderOffset = $element.offset().left;
|
171
|
+
markerSize = marker.width();
|
172
|
+
|
173
|
+
}
|
174
|
+
|
175
|
+
percentPerPixel = 100 / (sliderLength - markerSize); // it depends on slider element size
|
176
|
+
sliderStart = markerSize / 2;
|
177
|
+
sliderEnd = sliderLength - markerSize / 2;
|
178
|
+
};
|
179
|
+
|
180
|
+
/**
|
181
|
+
* moving marker
|
182
|
+
*/
|
183
|
+
var movingMarker = function (event) {
|
184
|
+
var cursorPos,
|
185
|
+
percents,
|
186
|
+
valuePix;
|
187
|
+
|
188
|
+
// cursor position relative to slider start point
|
189
|
+
if (vertical) {
|
190
|
+
cursorPos = event.pageY - sliderOffset;
|
191
|
+
} else {
|
192
|
+
cursorPos = event.pageX - sliderOffset;
|
193
|
+
}
|
194
|
+
|
195
|
+
// if outside
|
196
|
+
if (cursorPos < sliderStart) {
|
197
|
+
cursorPos = sliderStart;
|
198
|
+
} else if (cursorPos > sliderEnd) {
|
199
|
+
cursorPos = sliderEnd;
|
200
|
+
}
|
201
|
+
|
202
|
+
// get pixels count
|
203
|
+
if (vertical) {
|
204
|
+
valuePix = sliderLength - cursorPos - markerSize / 2;
|
205
|
+
} else {
|
206
|
+
valuePix = cursorPos - markerSize / 2;
|
207
|
+
}
|
208
|
+
|
209
|
+
// convert to percent
|
210
|
+
percents = pixToPerc(valuePix);
|
211
|
+
|
212
|
+
// place marker
|
213
|
+
placeMarkerByPerc(percents);
|
214
|
+
|
215
|
+
currentValuePerc = percents;
|
216
|
+
|
217
|
+
$element.trigger('change', [currentValuePerc]);
|
218
|
+
};
|
219
|
+
|
220
|
+
|
221
|
+
plugin.init();
|
222
|
+
|
223
|
+
};
|
224
|
+
|
225
|
+
$.fn.slider = function(options) {
|
226
|
+
return this.each(function() {
|
227
|
+
if (undefined == $(this).data('slider')) {
|
228
|
+
var plugin = new $.slider(this, options);
|
229
|
+
$(this).data('slider', plugin);
|
230
|
+
}
|
231
|
+
});
|
232
|
+
};
|
233
|
+
|
234
|
+
|
235
|
+
})(jQuery);
|
236
|
+
|
237
|
+
|
238
|
+
$(window).ready(function(){
|
239
|
+
var allsliders = $('[data-role=slider], .slider');
|
240
|
+
allsliders.each(function (index, slider) {
|
241
|
+
var params = {};
|
242
|
+
$slider = $(slider);
|
243
|
+
params.initValue = $slider.data('paramInitValue');
|
244
|
+
params.accuracy = $slider.data('paramAccuracy');
|
245
|
+
|
246
|
+
$slider.slider(params);
|
247
|
+
});
|
248
|
+
});
|