macbury-metro-ui-rails 0.15.9

Sign up to get free protection for your applications and to get access to all the features.
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
+ });