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.
Files changed (62) hide show
  1. data/.gitignore +21 -0
  2. data/.gitmodules +3 -0
  3. data/Gemfile +4 -0
  4. data/README.md +44 -0
  5. data/Rakefile +74 -0
  6. data/lib/generators/metro/layout/layout_generator.rb +19 -0
  7. data/lib/generators/metro/layout/templates/layout.html.erb +92 -0
  8. data/lib/metro/ui/rails/engine.rb +16 -0
  9. data/lib/metro/ui/rails/metro.rb +2 -0
  10. data/lib/metro/ui/rails/version.rb +7 -0
  11. data/lib/metro-ui-rails.rb +10 -0
  12. data/metro-ui-rails.gemspec +20 -0
  13. data/vendor/assets/fonts/metro-ui/iconFont.eot +0 -0
  14. data/vendor/assets/fonts/metro-ui/iconFont.svg +2005 -0
  15. data/vendor/assets/fonts/metro-ui/iconFont.ttf +0 -0
  16. data/vendor/assets/fonts/metro-ui/iconFont.woff +0 -0
  17. data/vendor/assets/javascripts/metro-ui/accordion.js +44 -0
  18. data/vendor/assets/javascripts/metro-ui/buttonset.js +34 -0
  19. data/vendor/assets/javascripts/metro-ui/carousel.js +368 -0
  20. data/vendor/assets/javascripts/metro-ui/dropdown.js +95 -0
  21. data/vendor/assets/javascripts/metro-ui/input-control.js +103 -0
  22. data/vendor/assets/javascripts/metro-ui/pagecontrol.js +64 -0
  23. data/vendor/assets/javascripts/metro-ui/rating.js +249 -0
  24. data/vendor/assets/javascripts/metro-ui/slider.js +248 -0
  25. data/vendor/assets/javascripts/metro-ui/tile-drag.js +332 -0
  26. data/vendor/assets/javascripts/metro-ui/tile-slider.js +196 -0
  27. data/vendor/assets/javascripts/metro-ui.js +10 -0
  28. data/vendor/toolkit/metro-ui/accordion.less +69 -0
  29. data/vendor/toolkit/metro-ui/bricks.less +59 -0
  30. data/vendor/toolkit/metro-ui/buttons.less +434 -0
  31. data/vendor/toolkit/metro-ui/cards.less +113 -0
  32. data/vendor/toolkit/metro-ui/carousel.less +109 -0
  33. data/vendor/toolkit/metro-ui/code.less +47 -0
  34. data/vendor/toolkit/metro-ui/colors.less +115 -0
  35. data/vendor/toolkit/metro-ui/forms.less +434 -0
  36. data/vendor/toolkit/metro-ui/grid.less +115 -0
  37. data/vendor/toolkit/metro-ui/hero.less +18 -0
  38. data/vendor/toolkit/metro-ui/icons.less +1168 -0
  39. data/vendor/toolkit/metro-ui/images.less +121 -0
  40. data/vendor/toolkit/metro-ui/jqgrid.less +12 -0
  41. data/vendor/toolkit/metro-ui/layout.less +287 -0
  42. data/vendor/toolkit/metro-ui/listview.less +143 -0
  43. data/vendor/toolkit/metro-ui/menus.less +249 -0
  44. data/vendor/toolkit/metro-ui/modern-responsive-max480.less +147 -0
  45. data/vendor/toolkit/metro-ui/modern-responsive-max767.less +241 -0
  46. data/vendor/toolkit/metro-ui/modern-responsive-max979.less +97 -0
  47. data/vendor/toolkit/metro-ui/modern-responsive-min1200.less +28 -0
  48. data/vendor/toolkit/metro-ui/modern-responsive.less +13 -0
  49. data/vendor/toolkit/metro-ui/modern.less +35 -0
  50. data/vendor/toolkit/metro-ui/notices.less +185 -0
  51. data/vendor/toolkit/metro-ui/pagecontrol.less +100 -0
  52. data/vendor/toolkit/metro-ui/progress.less +22 -0
  53. data/vendor/toolkit/metro-ui/rating.less +80 -0
  54. data/vendor/toolkit/metro-ui/reset.less +504 -0
  55. data/vendor/toolkit/metro-ui/routines.less +141 -0
  56. data/vendor/toolkit/metro-ui/sidebar.less +136 -0
  57. data/vendor/toolkit/metro-ui/slider.less +67 -0
  58. data/vendor/toolkit/metro-ui/tables.less +164 -0
  59. data/vendor/toolkit/metro-ui/theme-dark.less +54 -0
  60. data/vendor/toolkit/metro-ui/tiles.less +285 -0
  61. data/vendor/toolkit/metro-ui/typography.less +347 -0
  62. metadata +139 -0
@@ -0,0 +1,44 @@
1
+ (function($){
2
+ $.fn.Accordion = function( options ){
3
+ var defaults = {
4
+ };
5
+
6
+ var $this = $(this)
7
+ , $li = $this.children("li")
8
+ , $triggers = $li.children("a")
9
+ , $frames = $li.children("div")
10
+ ;
11
+
12
+ var initTriggers = function(triggers){
13
+ triggers.on('click', function(e){
14
+ e.preventDefault();
15
+ var $a = $(this)
16
+ , target = $a.parent('li').children("div");
17
+
18
+ if ( $a.parent('li').hasClass('active') ) {
19
+ target.slideUp();
20
+ $(this).parent("li").removeClass("active");
21
+ } else {
22
+ $frames.slideUp();
23
+ $li.removeClass("active");
24
+ target.slideDown();
25
+ $(this).parent("li").addClass("active");
26
+ }
27
+ });
28
+ }
29
+
30
+ return this.each(function(){
31
+ if ( options ) {
32
+ $.extend(defaults, options)
33
+ }
34
+
35
+ initTriggers($triggers);
36
+ });
37
+ }
38
+
39
+ $(function () {
40
+ $('[data-role="accordion"]').each(function () {
41
+ $(this).Accordion();
42
+ })
43
+ })
44
+ })(window.jQuery);
@@ -0,0 +1,34 @@
1
+ (function($){
2
+ $.fn.ButtonSet = function( options ){
3
+ var defaults = {
4
+ };
5
+
6
+ var $this = $(this)
7
+ , $buttons = $this.find("button")
8
+ ;
9
+
10
+ var initButtons = function(buttons){
11
+ buttons.on('click', function(e){
12
+ e.preventDefault();
13
+ var $a = $(this);
14
+ if ( $a.hasClass('active') ) return false;
15
+ $buttons.removeClass("active");
16
+ $(this).addClass("active");
17
+ });
18
+ }
19
+
20
+ return this.each(function(){
21
+ if ( options ) {
22
+ $.extend(defaults, options)
23
+ }
24
+
25
+ initButtons($buttons);
26
+ });
27
+ }
28
+
29
+ $(function () {
30
+ $('[data-role="button-set"]').each(function () {
31
+ $(this).ButtonSet();
32
+ })
33
+ })
34
+ })(window.jQuery);
@@ -0,0 +1,368 @@
1
+ /**
2
+ * Carousel - jQuery plugin for MetroUiCss framework
3
+ */
4
+
5
+ (function($) {
6
+
7
+ $.Carousel = function(element, options) {
8
+
9
+ // default settings
10
+ var defaults = {
11
+ // auto slide change
12
+ auto: true,
13
+ // slide change period
14
+ period: 6000,
15
+ // animation duration
16
+ duration: 1000,
17
+ // animation effect (fade, slide, switch, slowdown)
18
+ effect: 'slide',
19
+ // animation direction (left, right) for some kinds of animation effect
20
+ direction: 'left',
21
+ // markers below the carousel
22
+ markers: 'on',
23
+ // prev and next arrows
24
+ arrows: 'on',
25
+ // stop sliding when cursor over the carousel
26
+ stop: 'on'
27
+ };
28
+
29
+ var plugin = this;
30
+ // plugin settings
31
+ plugin.settings = {};
32
+
33
+ var $element = $(element); // reference to the jQuery version of DOM element
34
+
35
+ var slides, // all slides DOM objects
36
+ currentSlideIndex, // index of current slide
37
+ slideInPosition, // slide start position before it's appear
38
+ slideOutPosition, // slide position after it's disappear
39
+ parentWidth,
40
+ parentHeight,
41
+ animationInProgress,
42
+ autoSlideTimer,
43
+ markers,
44
+ stopAutoSlide = false;
45
+
46
+ // initialization
47
+ plugin.init = function () {
48
+
49
+ plugin.settings = $.extend({}, defaults, options);
50
+
51
+ slides = $element.find('.slides:first-child > .slide');
52
+
53
+ // if only one slide
54
+ if (slides.length <= 1) {
55
+ return;
56
+ }
57
+
58
+ currentSlideIndex = 0;
59
+
60
+ // parent block dimensions
61
+ parentWidth = $element.innerWidth();
62
+ parentHeight = $element.innerHeight();
63
+ // slides positions, used for some kinds of animation
64
+ slideInPosition = getSlideInPosition();
65
+ slideOutPosition = getSlideOutPosition();
66
+
67
+ // prepare slide elements
68
+ slides.each(function (index, slide) {
69
+ $slide = $(slide);
70
+ // each slide must have position:absolute
71
+ // if not, set it
72
+ if ($slide.css('position') !== 'absolute') {
73
+ $slide.css('position', 'absolute');
74
+ }
75
+ // disappear all slides, except first
76
+ if (index !== 0) {
77
+ $slide.hide();
78
+ }
79
+ });
80
+
81
+ if (plugin.settings.arrows === 'on') {
82
+ // prev next buttons handlers
83
+ $element.find('span.control.left').on('click', function(){
84
+ changeSlide('left');
85
+ startAutoSlide();
86
+ });
87
+ $element.find('span.control.right').on('click', function(){
88
+ changeSlide('right');
89
+ startAutoSlide();
90
+ });
91
+ } else {
92
+ $element.find('span.control').hide();
93
+ }
94
+
95
+ // markers
96
+ if (plugin.settings.markers === 'on') {
97
+ insertMarkers();
98
+ }
99
+
100
+ // enable auto slide
101
+ if (plugin.settings.auto === true) {
102
+ startAutoSlide();
103
+
104
+ // stop sliding when cursor over the carousel
105
+ if (plugin.settings.stop === 'on') {
106
+ $element.on('mouseenter', function () {
107
+ stopAutoSlide = true;
108
+ });
109
+ $element.on('mouseleave', function () {
110
+ stopAutoSlide = false;
111
+ startAutoSlide();
112
+ });
113
+ }
114
+ }
115
+ };
116
+
117
+ /**
118
+ * returns start position for appearing slide {left: xxx}
119
+ */
120
+ var getSlideInPosition = function () {
121
+ var pos;
122
+ if (plugin.settings.direction === 'left') {
123
+ pos = {
124
+ 'left': parentWidth
125
+ }
126
+ } else if (plugin.settings.direction === 'right') {
127
+ pos = {
128
+ 'left': -parentWidth
129
+ }
130
+ }
131
+ return pos;
132
+ };
133
+
134
+ /**
135
+ * returns end position of disappearing slide {left: xxx}
136
+ */
137
+ var getSlideOutPosition = function () {
138
+ var pos;
139
+ if (plugin.settings.direction === 'left') {
140
+ pos = {
141
+ 'left': -parentWidth
142
+ }
143
+ } else if (plugin.settings.direction === 'right') {
144
+ pos = {
145
+ 'left': parentWidth
146
+ }
147
+ }
148
+ return pos;
149
+ };
150
+
151
+ /**
152
+ * start or restart auto change
153
+ */
154
+ var startAutoSlide = function () {
155
+ clearInterval(autoSlideTimer);
156
+ // start slide changer timer
157
+ autoSlideTimer = setInterval(function () {
158
+ if (stopAutoSlide) {
159
+ return;
160
+ }
161
+ changeSlide();
162
+ }, plugin.settings.period);
163
+ };
164
+
165
+ /**
166
+ * inserts markers below the carousel
167
+ */
168
+ var insertMarkers = function () {
169
+ var div, ul, li, i;
170
+
171
+ div = $('<div class="markers"></div>');
172
+ ul = $('<ul></ul>').appendTo(div);
173
+
174
+ for (i = 0; i < slides.length; i++) {
175
+ li = $('<li><a href="javascript:void(0)" data-num="' + i + '"></a></li>');
176
+ if (i === 0) {
177
+ li.addClass('active');
178
+ }
179
+ li.appendTo(ul);
180
+ }
181
+
182
+ markers = ul.find('li');
183
+
184
+ ul.find('li a').on('click', function () {
185
+ var $this = $(this),
186
+ index;
187
+
188
+ // index of appearing slide
189
+ index = $this.data('num');
190
+ if (index === currentSlideIndex) {
191
+ return;
192
+ }
193
+
194
+ changeSlide(undefined, 'switch', index);
195
+ startAutoSlide();
196
+ });
197
+
198
+ div.appendTo($element);
199
+ };
200
+
201
+ /**
202
+ * changes slide to next
203
+ */
204
+ var changeSlide = function(direction, effect, slideIndex) {
205
+
206
+ var outSlide, // disappearin slide element
207
+ inSlide, // appearing slide element
208
+ nextSlideIndex,
209
+ delta = 1,
210
+ slideDirection = 1;
211
+
212
+ effect = effect || plugin.settings.effect;
213
+ // correct slide direction, used for 'slide' and 'slowdown' effects
214
+ if ((effect === 'slide' || effect === 'slowdown') && typeof direction !== 'undefined' && direction !== plugin.settings.direction) {
215
+ slideDirection = -1;
216
+ }
217
+ if (direction === 'left') {
218
+ delta = -1;
219
+ }
220
+
221
+ outSlide = $(slides[currentSlideIndex]);
222
+
223
+ nextSlideIndex = typeof slideIndex !== 'undefined' ? slideIndex : currentSlideIndex + delta;
224
+ if (nextSlideIndex >= slides.length) {
225
+ nextSlideIndex = 0;
226
+ }
227
+ if (nextSlideIndex < 0) {
228
+ nextSlideIndex = slides.length - 1;
229
+ }
230
+
231
+ inSlide = $(slides[nextSlideIndex]);
232
+
233
+ if (animationInProgress === true) {
234
+ return;
235
+ }
236
+
237
+ // switch effect is quickly, no need to wait
238
+ if (effect !== 'switch') {
239
+ // when animation in progress no other animation occur
240
+ animationInProgress = true;
241
+ setTimeout(function () {
242
+ animationInProgress = false;
243
+ }, plugin.settings.duration)
244
+ }
245
+
246
+ // change slide with selected effect
247
+ switch (effect) {
248
+ case 'switch':
249
+ changeSlideSwitch(outSlide, inSlide);
250
+ break;
251
+ case 'slide':
252
+ changeSlideSlide(outSlide, inSlide, slideDirection);
253
+ break;
254
+ case 'fade':
255
+ changeSlideFade(outSlide, inSlide);
256
+ break;
257
+ case 'slowdown':
258
+ changeSlideSlowdown(outSlide, inSlide, slideDirection);
259
+ break;
260
+ }
261
+
262
+ currentSlideIndex = nextSlideIndex;
263
+
264
+ // switch marker
265
+ if (plugin.settings.markers === 'on') {
266
+ markers.removeClass('active');
267
+ $(markers.get(currentSlideIndex)).addClass('active');
268
+ }
269
+
270
+ };
271
+ /**
272
+ * switch effect
273
+ */
274
+ var changeSlideSwitch = function (outSlide, inSlide) {
275
+ inSlide.show().css({'left': 0});
276
+ outSlide.hide();
277
+ };
278
+ /**
279
+ * slide effect
280
+ */
281
+ var changeSlideSlide = function (outSlide, inSlide, slideDirection) {
282
+ var unmovedPosition = {'left': 0},
283
+ duration = plugin.settings.duration;
284
+
285
+ if (slideDirection !== -1) {
286
+ inSlide.css(slideInPosition);
287
+ inSlide.show();
288
+ outSlide.animate(slideOutPosition, duration);
289
+ inSlide.animate(unmovedPosition, duration);
290
+ } else {
291
+ inSlide.css(slideOutPosition);
292
+ inSlide.show();
293
+ outSlide.animate(slideInPosition, duration);
294
+ inSlide.animate(unmovedPosition, duration);
295
+ }
296
+ };
297
+ /**
298
+ * slowdown slide effect (custom easing 'doubleSqrt')
299
+ */
300
+ var changeSlideSlowdown = function (outSlide, inSlide, slideDirection) {
301
+ var unmovedPosition = {'left': 0},
302
+ options;
303
+
304
+ options = {
305
+ 'duration': plugin.settings.duration,
306
+ 'easing': 'doubleSqrt'
307
+ };
308
+
309
+ if (slideDirection !== -1) {
310
+ inSlide.css(slideInPosition);
311
+ inSlide.show();
312
+ outSlide.animate(slideOutPosition, options);
313
+ inSlide.animate(unmovedPosition, options);
314
+ } else {
315
+ inSlide.css(slideOutPosition);
316
+ inSlide.show();
317
+ outSlide.animate(slideInPosition, options);
318
+ inSlide.animate(unmovedPosition, options);
319
+ }
320
+ };
321
+ /**
322
+ * fade effect
323
+ */
324
+ var changeSlideFade = function (outSlide, inSlide) {
325
+ inSlide.fadeIn(plugin.settings.duration);
326
+ outSlide.fadeOut(plugin.settings.duration);
327
+ };
328
+
329
+ plugin.init();
330
+
331
+ };
332
+
333
+ $.fn.Carousel = function(options) {
334
+ return this.each(function() {
335
+ if (undefined == $(this).data('Carousel')) {
336
+ var plugin = new $.Carousel(this, options);
337
+ $(this).data('Carousel', plugin);
338
+ }
339
+ });
340
+ };
341
+
342
+ // easing effect for jquery animation
343
+ $.easing.doubleSqrt = function(t, millisecondsSince, startValue, endValue, totalDuration) {
344
+ var res = Math.sqrt(Math.sqrt(t));
345
+ return res;
346
+ };
347
+
348
+ })(jQuery);
349
+
350
+
351
+ $(window).ready(function(){
352
+ var allCarousels = $('[data-role=carousel], .carousel');
353
+ allCarousels.each(function (index, carousel) {
354
+ var params = {};
355
+ $carousel = $(carousel);
356
+ params.auto = $carousel.data('paramAuto');
357
+ params.period = $carousel.data('paramPeriod');
358
+ params.duration = $carousel.data('paramDuration');
359
+ params.effect = $carousel.data('paramEffect');
360
+ params.direction = $carousel.data('paramDirection');
361
+ params.markers = $carousel.data('paramMarkers');
362
+ params.arrows = $carousel.data('paramArrows');
363
+ params.stop = $carousel.data('paramStop');
364
+
365
+ $carousel.Carousel(params);
366
+ })
367
+
368
+ });
@@ -0,0 +1,95 @@
1
+ (function($){
2
+ $.fn.Dropdown = function( options ){
3
+ var defaults = {
4
+ };
5
+
6
+ var $this = $(this)
7
+ ;
8
+
9
+ var clearDropdown = function(){
10
+ $(".dropdown-menu").each(function(){
11
+ if ( $(this).css('position') == 'static' ) return;
12
+ $(this).slideUp('fast', function(){});
13
+ $(this).parent().removeClass("active");
14
+ });
15
+ }
16
+
17
+ var initSelectors = function(selectors){
18
+ selectors.on('click', function(e){
19
+ e.stopPropagation();
20
+ //$("[data-role=dropdown]").removeClass("active");
21
+
22
+ clearDropdown();
23
+ $(this).parents("ul").css("overflow", "visible");
24
+
25
+ var $m = $(this).children(".dropdown-menu, .sidebar-dropdown-menu");
26
+ if ($m.css('display') == "block") {
27
+ $m.slideUp('fast');
28
+ $(this).removeClass("active");
29
+ } else {
30
+ $m.slideDown('fast');
31
+ $(this).addClass("active");
32
+ }
33
+ }).on("mouseleave", function(){
34
+ //$(this).children(".dropdown-menu").hide();
35
+ });
36
+ $('html').on("click", function(e){
37
+ clearDropdown();
38
+ });
39
+ }
40
+
41
+ return this.each(function(){
42
+ if ( options ) {
43
+ $.extend(defaults, options)
44
+ }
45
+
46
+ initSelectors($this);
47
+ });
48
+ }
49
+
50
+ $(function () {
51
+ $('[data-role="dropdown"]').each(function () {
52
+ $(this).Dropdown();
53
+ })
54
+ })
55
+ })(window.jQuery);
56
+
57
+
58
+ (function($){
59
+ $.fn.PullDown = function( options ){
60
+ var defaults = {
61
+ };
62
+
63
+ var $this = $(this)
64
+ ;
65
+
66
+ var initSelectors = function(selectors){
67
+
68
+ selectors.on('click', function(e){
69
+ e.preventDefault();
70
+ var $m = $this.parent().children("ul");
71
+ //console.log($m);
72
+ if ($m.css('display') == "block") {
73
+ $m.slideUp('fast');
74
+ } else {
75
+ $m.slideDown('fast');
76
+ }
77
+ //$(this).toggleClass("active");
78
+ });
79
+ }
80
+
81
+ return this.each(function(){
82
+ if ( options ) {
83
+ $.extend(defaults, options)
84
+ }
85
+
86
+ initSelectors($this);
87
+ });
88
+ }
89
+
90
+ $(function () {
91
+ $('.menu-pull').each(function () {
92
+ $(this).PullDown();
93
+ })
94
+ })
95
+ })(window.jQuery);
@@ -0,0 +1,103 @@
1
+ /**
2
+ * jQuery plugin for input elements for Metro UI CSS framework
3
+ */
4
+ (function($) {
5
+
6
+ $.Input = function(element, options) {
7
+
8
+ var defaults = {
9
+ };
10
+
11
+ var plugin = this;
12
+ plugin.settings = {};
13
+ var $element = $(element);
14
+
15
+ plugin.init = function() {
16
+ plugin.settings = $.extend({}, defaults, options);
17
+
18
+ if ($element.hasClass('text')) {
19
+ initTextInput();
20
+ } else if ($element.hasClass('password')) {
21
+ initPasswordInput();
22
+ }
23
+ };
24
+
25
+ /**
26
+ * initialize text input element behavior
27
+ */
28
+ var initTextInput = function () {
29
+ var helper,
30
+ $helper,
31
+ input;
32
+ helper = $element.children('.helper').get(0);
33
+
34
+ if (!helper) {
35
+ return;
36
+ }
37
+
38
+ $helper = $(helper);
39
+
40
+ // clear text when clock on helper
41
+ $helper.on('click', function () {
42
+ input = $element.children('input');
43
+ input.attr('value', '');
44
+ input.focus();
45
+ }).on('click', function(e){e.preventDefault(); return false;});
46
+ };
47
+
48
+ /**
49
+ * initialize password input element behavior
50
+ */
51
+ var initPasswordInput = function () {
52
+ var helper,
53
+ $helper,
54
+ password,
55
+ text;
56
+ helper = $element.children('.helper').get(0);
57
+ if (!helper) {
58
+ return;
59
+ }
60
+
61
+ text = $('<input type="text" />');
62
+ password = $element.children('input');
63
+ $helper = $(helper);
64
+
65
+ // insert text element and hode password element when push helper
66
+ $helper.on('mousedown', function () {
67
+ password.hide();
68
+ text.insertAfter(password);
69
+ text.attr('value', password.attr('value'));
70
+ }).on('click', function(e){e.preventDefault(); return false;});
71
+
72
+ // return password and remove text element
73
+ $helper.on('mouseup, mouseout', function () {
74
+ text.detach();
75
+ password.show();
76
+ password.focus();
77
+ }).on('click', function(e){e.preventDefault(); return false;});
78
+ };
79
+
80
+ plugin.init();
81
+
82
+ };
83
+
84
+ $.fn.Input = function(options) {
85
+ return this.each(function() {
86
+ if (undefined == $(this).data('Input')) {
87
+ var plugin = new $.Input(this, options);
88
+ $(this).data('Input', plugin);
89
+ }
90
+ });
91
+ }
92
+
93
+ })(jQuery);
94
+
95
+ $(function(){
96
+ var allInputs = $('.input-control');
97
+ allInputs.each(function (index, input) {
98
+ var params = {};
99
+ $input = $(input);
100
+
101
+ $input.Input(params);
102
+ });
103
+ });