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,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
+ });