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,332 @@
|
|
1
|
+
/**
|
2
|
+
* jQuery plugin for drag'n'drop tiles
|
3
|
+
*
|
4
|
+
* to init plugin just add class 'tile-drag' to your tile-group element
|
5
|
+
* or add attribute data-role="tile-drag"
|
6
|
+
*
|
7
|
+
* to handle drag/drop events use next code
|
8
|
+
|
9
|
+
$(function(){
|
10
|
+
$('#tile_group_id').on('drag', function(e, draggingTile, parentGroup){
|
11
|
+
... your code ...
|
12
|
+
});
|
13
|
+
$('#tile_group_id').on('drop', function(e, draggingTile, targetGroup){
|
14
|
+
... your code ...
|
15
|
+
});
|
16
|
+
});
|
17
|
+
|
18
|
+
*
|
19
|
+
* if you want to use drag'n'drop between groups use attribute data-param-group="any_id" to link groups
|
20
|
+
*/
|
21
|
+
(function($) {
|
22
|
+
|
23
|
+
$.TileDrag = function(element, options) {
|
24
|
+
|
25
|
+
var defaults = {
|
26
|
+
// if group sets and exists other same groups, it is possible to drag'n'drop from one group to another
|
27
|
+
group: null
|
28
|
+
};
|
29
|
+
|
30
|
+
var plugin = this;
|
31
|
+
|
32
|
+
plugin.settings = {};
|
33
|
+
|
34
|
+
var $element = $(element),
|
35
|
+
$groups,
|
36
|
+
settings,
|
37
|
+
tiles,
|
38
|
+
$draggingTile,
|
39
|
+
$parentGroup, // parent group for dragging tile
|
40
|
+
draggingTileWidth,
|
41
|
+
draggingTileHeight,
|
42
|
+
$phantomTile,
|
43
|
+
tileDeltaX,
|
44
|
+
tileDeltaY,
|
45
|
+
groupOffsetX,
|
46
|
+
groupOffsetY,
|
47
|
+
tilesCoordinates,
|
48
|
+
tileSearchCount = 0, // uses for findTileUnderCursor function
|
49
|
+
tileUnderCursorIndex,
|
50
|
+
tileUnderCursorSide;
|
51
|
+
|
52
|
+
plugin.init = function() {
|
53
|
+
settings = plugin.settings = $.extend({}, defaults, options);
|
54
|
+
|
55
|
+
// if group is set
|
56
|
+
if (settings.group) {
|
57
|
+
// search other elements with same group
|
58
|
+
$groups = $('[data-role=tile-drag], .tile-drag').filter('[data-param-group=' + settings.group + ']');
|
59
|
+
} else {
|
60
|
+
$groups = $element;
|
61
|
+
}
|
62
|
+
|
63
|
+
// any tile-group must be relative
|
64
|
+
$groups.css({
|
65
|
+
'position': 'relative'
|
66
|
+
});
|
67
|
+
|
68
|
+
// select all tiles within group
|
69
|
+
tiles = $groups.children('.tile');
|
70
|
+
|
71
|
+
tiles.on('mousedown', startDrag);
|
72
|
+
|
73
|
+
};
|
74
|
+
|
75
|
+
var startDrag = function(event) {
|
76
|
+
var $tile,
|
77
|
+
tilePosition,
|
78
|
+
tilePositionX,
|
79
|
+
tilePositionY,
|
80
|
+
groupOffset;
|
81
|
+
|
82
|
+
event.preventDefault();
|
83
|
+
|
84
|
+
// currently dragging tile
|
85
|
+
$draggingTile = $tile = $(this);
|
86
|
+
|
87
|
+
// search parent group
|
88
|
+
$parentGroup = $tile.parents('.tile-drag');
|
89
|
+
|
90
|
+
// dragging tile dimentions
|
91
|
+
draggingTileWidth = $tile.outerWidth();
|
92
|
+
draggingTileHeight = $tile.outerHeight();
|
93
|
+
|
94
|
+
// hidden tile to place it where dragging tile will dropped
|
95
|
+
$phantomTile = $('<div></div>');
|
96
|
+
$phantomTile.css({
|
97
|
+
'background': 'none'
|
98
|
+
});
|
99
|
+
$phantomTile.addClass('tile');
|
100
|
+
if ($tile.hasClass('double')) {
|
101
|
+
$phantomTile.addClass('double');
|
102
|
+
} else if ($tile.hasClass('triple')) {
|
103
|
+
$phantomTile.addClass('triple');
|
104
|
+
} else if ($tile.hasClass('quadro')) {
|
105
|
+
$phantomTile.addClass('quadro');
|
106
|
+
} else if ($tile.hasClass('double-vertical')) {
|
107
|
+
$phantomTile.addClass('double-vertical');
|
108
|
+
} else if ($tile.hasClass('triple-vertical')) {
|
109
|
+
$phantomTile.addClass('triple-vertical');
|
110
|
+
} else if ($tile.hasClass('quadro-vertical')) {
|
111
|
+
$phantomTile.addClass('quadro-vertical');
|
112
|
+
}
|
113
|
+
|
114
|
+
// dragging tile position within group
|
115
|
+
tilePosition = $tile.position();
|
116
|
+
tilePositionX = tilePosition.left;
|
117
|
+
tilePositionY = tilePosition.top;
|
118
|
+
|
119
|
+
// group element offset relate to document border
|
120
|
+
groupOffset = $parentGroup.offset();
|
121
|
+
groupOffsetX = groupOffset.left;
|
122
|
+
groupOffsetY = groupOffset.top;
|
123
|
+
|
124
|
+
// pixels count between cursor and dragging tile border
|
125
|
+
tileDeltaX = event.pageX - groupOffsetX - tilePositionX;
|
126
|
+
tileDeltaY = event.pageY - groupOffsetY - tilePositionY;
|
127
|
+
|
128
|
+
// place phantom tile instead dragging one
|
129
|
+
$phantomTile.insertAfter($tile);
|
130
|
+
|
131
|
+
/*$tile.detach();
|
132
|
+
$tile.appendTo($parentGroup);*/
|
133
|
+
|
134
|
+
// still now it absolutely positioned
|
135
|
+
$tile.css({
|
136
|
+
'position': 'absolute',
|
137
|
+
'left': tilePositionX,
|
138
|
+
'top': tilePositionY,
|
139
|
+
'z-index': 100000
|
140
|
+
});
|
141
|
+
|
142
|
+
// store it for future
|
143
|
+
$tile.data('dragging', true);
|
144
|
+
storeTilesCoordinates();
|
145
|
+
|
146
|
+
// some necessary event handlers
|
147
|
+
$(document).on('mousemove.tiledrag', dragTile);
|
148
|
+
$(document).on('mouseup.tiledrag', dragStop);
|
149
|
+
|
150
|
+
// triggering event
|
151
|
+
$groups.trigger('drag', [$draggingTile, $parentGroup]);
|
152
|
+
};
|
153
|
+
|
154
|
+
/**
|
155
|
+
* it function called on every mousemove event
|
156
|
+
*/
|
157
|
+
var dragTile = function (event) {
|
158
|
+
|
159
|
+
// all we need is index of tile under cursor (and under dragging tile) if it exists
|
160
|
+
var findTileIndex;
|
161
|
+
|
162
|
+
event.preventDefault();
|
163
|
+
|
164
|
+
// move dragging tile
|
165
|
+
$draggingTile.css({
|
166
|
+
'left': event.pageX - groupOffsetX - tileDeltaX,
|
167
|
+
'top': event.pageY - groupOffsetY - tileDeltaY
|
168
|
+
});
|
169
|
+
|
170
|
+
findTileIndex = findTileUnderCursor(event);
|
171
|
+
if (findTileIndex) {
|
172
|
+
clearPlaceForTile($(tiles[findTileIndex]));
|
173
|
+
}
|
174
|
+
};
|
175
|
+
|
176
|
+
/**
|
177
|
+
* when this function called dragging tile dropping to clear place (instead phantom tile)
|
178
|
+
* removing events
|
179
|
+
* and some other necessary changes
|
180
|
+
*/
|
181
|
+
var dragStop = function (event) {
|
182
|
+
var targetGroup;
|
183
|
+
|
184
|
+
event.preventDefault();
|
185
|
+
|
186
|
+
$(document).off('mousemove.tiledrag');
|
187
|
+
$(document).off('mouseup.tiledrag');
|
188
|
+
|
189
|
+
$draggingTile.detach();
|
190
|
+
$draggingTile.insertAfter($phantomTile);
|
191
|
+
|
192
|
+
targetGroup = $phantomTile.parents('.tile-drag');
|
193
|
+
$phantomTile.remove();
|
194
|
+
|
195
|
+
$draggingTile.css({
|
196
|
+
'position': '',
|
197
|
+
'left': '',
|
198
|
+
'top': '',
|
199
|
+
'z-index': ''
|
200
|
+
});
|
201
|
+
|
202
|
+
$draggingTile.data('dragging', false);
|
203
|
+
|
204
|
+
$groups.trigger('drop', [$draggingTile, targetGroup]);
|
205
|
+
};
|
206
|
+
|
207
|
+
/*
|
208
|
+
* stores tiles coordinates for future finding one tile under cursor
|
209
|
+
* excluding current dragging tile
|
210
|
+
*/
|
211
|
+
var storeTilesCoordinates = function () {
|
212
|
+
tilesCoordinates = {};
|
213
|
+
tiles.each(function (index, tile) {
|
214
|
+
var $tile, offset;
|
215
|
+
|
216
|
+
$tile = $(tile);
|
217
|
+
|
218
|
+
// we dont need dragging tile coordinates
|
219
|
+
if ($tile.data('dragging')) return;
|
220
|
+
|
221
|
+
offset = $tile.offset();
|
222
|
+
// it is not real coordinates related to document border
|
223
|
+
// but corrected for less computing during dragging (tile moving)
|
224
|
+
tilesCoordinates[index] = {
|
225
|
+
x1: offset.left + tileDeltaX - draggingTileWidth / 2,
|
226
|
+
y1: offset.top + tileDeltaY - draggingTileHeight / 2,
|
227
|
+
x2: offset.left + $tile.outerWidth() + tileDeltaX - draggingTileWidth / 2,
|
228
|
+
y2: offset.top + $tile.outerHeight() + tileDeltaY - draggingTileHeight / 2
|
229
|
+
}
|
230
|
+
});
|
231
|
+
};
|
232
|
+
|
233
|
+
/**
|
234
|
+
* search tile under cursor using tileCoordinates from storeTilesCoordinates function
|
235
|
+
* search occurred only one time per ten times for less load and more smooth
|
236
|
+
*/
|
237
|
+
var findTileUnderCursor = function (event) {
|
238
|
+
var i, coord,
|
239
|
+
tileIndex = false,
|
240
|
+
tileSide;
|
241
|
+
|
242
|
+
if (tileSearchCount < 10) {
|
243
|
+
tileSearchCount++;
|
244
|
+
return false;
|
245
|
+
}
|
246
|
+
tileSearchCount = 0;
|
247
|
+
|
248
|
+
for (i in tilesCoordinates) {
|
249
|
+
if (!tilesCoordinates.hasOwnProperty(i)) return;
|
250
|
+
coord = tilesCoordinates[i];
|
251
|
+
if (coord.x1 < event.pageX && event.pageX < coord.x2 && coord.y1 < event.pageY && event.pageY < coord.y2) {
|
252
|
+
tileIndex = i;
|
253
|
+
break;
|
254
|
+
}
|
255
|
+
}
|
256
|
+
|
257
|
+
// detect side of tile (left or right) to clear place before or after tile
|
258
|
+
if (tileIndex) {
|
259
|
+
if (event.pageX < coord.x1 + $(tiles[tileIndex]).outerWidth() / 2) {
|
260
|
+
tileSide = 'before';
|
261
|
+
} else {
|
262
|
+
tileSide = 'after';
|
263
|
+
}
|
264
|
+
}
|
265
|
+
if (tileSide === tileUnderCursorSide && tileIndex === tileUnderCursorIndex) {
|
266
|
+
return false;
|
267
|
+
}
|
268
|
+
tileUnderCursorSide = tileSide;
|
269
|
+
tileUnderCursorIndex = tileIndex;
|
270
|
+
|
271
|
+
return tileIndex;
|
272
|
+
};
|
273
|
+
|
274
|
+
/**
|
275
|
+
* just put phantom tile near tile under cursor (before or after)
|
276
|
+
* and remove previous phantom tile
|
277
|
+
*/
|
278
|
+
var clearPlaceForTile = function ($tileUnderCursor) {
|
279
|
+
var $oldPhantomTile,
|
280
|
+
groupOffset;
|
281
|
+
|
282
|
+
$oldPhantomTile = $phantomTile;
|
283
|
+
$phantomTile = $oldPhantomTile.clone();
|
284
|
+
|
285
|
+
// before or after, this is question ...
|
286
|
+
if (tileUnderCursorSide === 'before') {
|
287
|
+
$phantomTile.insertBefore($tileUnderCursor);
|
288
|
+
} else {
|
289
|
+
$phantomTile.insertAfter($tileUnderCursor);
|
290
|
+
}
|
291
|
+
|
292
|
+
$oldPhantomTile.remove();
|
293
|
+
// it is necessary to store new tile coordinates
|
294
|
+
storeTilesCoordinates();
|
295
|
+
// and parent group coordinates
|
296
|
+
groupOffset = $parentGroup.offset();
|
297
|
+
groupOffsetX = groupOffset.left;
|
298
|
+
groupOffsetY = groupOffset.top;
|
299
|
+
};
|
300
|
+
|
301
|
+
// return all groups involved to this plugin
|
302
|
+
plugin.getGroups = function () {
|
303
|
+
return $groups;
|
304
|
+
};
|
305
|
+
|
306
|
+
plugin.init();
|
307
|
+
|
308
|
+
};
|
309
|
+
|
310
|
+
$.fn.TileDrag = function(options) {
|
311
|
+
|
312
|
+
return this.each(function() {
|
313
|
+
if (undefined == $(this).data('TileDrag')) {
|
314
|
+
var plugin = new $.TileDrag(this, options);
|
315
|
+
var $groups = plugin.getGroups();
|
316
|
+
$groups.data('TileDrag', plugin);
|
317
|
+
}
|
318
|
+
});
|
319
|
+
|
320
|
+
};
|
321
|
+
|
322
|
+
})(jQuery);
|
323
|
+
|
324
|
+
$(function(){
|
325
|
+
var allTileGroups = $('[data-role=tile-drag], .tile-drag');
|
326
|
+
allTileGroups.each(function (index, tileGroup) {
|
327
|
+
var params = {};
|
328
|
+
$tileGroup = $(tileGroup);
|
329
|
+
params.group = $tileGroup.data('paramGroup');
|
330
|
+
$tileGroup.TileDrag(params);
|
331
|
+
});
|
332
|
+
});
|
@@ -0,0 +1,196 @@
|
|
1
|
+
$.easing.doubleSqrt = function(t, millisecondsSince, startValue, endValue, totalDuration) {
|
2
|
+
var res = Math.sqrt(Math.sqrt(t));
|
3
|
+
return res;
|
4
|
+
};
|
5
|
+
|
6
|
+
(function($) {
|
7
|
+
|
8
|
+
$.tileBlockSlider = function(element, options) {
|
9
|
+
|
10
|
+
// настройки по умолчанию
|
11
|
+
var defaults = {
|
12
|
+
// период смены картинок
|
13
|
+
period: 2000,
|
14
|
+
// продолжительность анимации
|
15
|
+
duration: 1000,
|
16
|
+
// направление анимации (up, down, left, right)
|
17
|
+
direction: 'up'
|
18
|
+
};
|
19
|
+
// объект плагина
|
20
|
+
var plugin = this;
|
21
|
+
// настройки конкретного объекта
|
22
|
+
plugin.settings = {};
|
23
|
+
|
24
|
+
var $element = $(element), // reference to the jQuery version of DOM element
|
25
|
+
element = element; // reference to the actual DOM element
|
26
|
+
|
27
|
+
var blocks, // все картинки
|
28
|
+
currentBlockIndex, // индекс текущего блока
|
29
|
+
slideInPosition, // стартовое положение блока перед началом появления
|
30
|
+
slideOutPosition, // финальное положение блока при скрытии
|
31
|
+
tileWidth, // размеры плитки
|
32
|
+
tileHeight;
|
33
|
+
|
34
|
+
// инициализируем
|
35
|
+
plugin.init = function () {
|
36
|
+
|
37
|
+
plugin.settings = $.extend({}, defaults, options);
|
38
|
+
|
39
|
+
// все блоки
|
40
|
+
blocks = $element.children(".tile-content");
|
41
|
+
|
42
|
+
// если блок всего 1, то слайдинг не нужен
|
43
|
+
if (blocks.length <= 1) {
|
44
|
+
return;
|
45
|
+
}
|
46
|
+
|
47
|
+
// индекс активного в данный момент блока
|
48
|
+
currentBlockIndex = 0;
|
49
|
+
|
50
|
+
// размеры текущей плитки
|
51
|
+
tileWidth = $element.innerWidth();
|
52
|
+
tileHeight = $element.innerHeight();
|
53
|
+
// положение блоков
|
54
|
+
slideInPosition = getSlideInPosition();
|
55
|
+
slideOutPosition = getSlideOutPosition();
|
56
|
+
|
57
|
+
// подготавливаем блоки к анимации
|
58
|
+
blocks.each(function (index, block) {
|
59
|
+
block = $(block);
|
60
|
+
// блоки должны быть position:absolute
|
61
|
+
// возможно этот параметр задан через класс стилей
|
62
|
+
// проверяем, и добавляем если это не так
|
63
|
+
if (block.css('position') !== 'absolute') {
|
64
|
+
block.css('position', 'absolute');
|
65
|
+
}
|
66
|
+
// скрываем все блоки кроме первого
|
67
|
+
if (index !== 0) {
|
68
|
+
block.css('left', tileWidth);
|
69
|
+
}
|
70
|
+
});
|
71
|
+
|
72
|
+
// запускаем интервал для смены блоков
|
73
|
+
setInterval(function () {
|
74
|
+
slideBlock();
|
75
|
+
}, plugin.settings.period);
|
76
|
+
};
|
77
|
+
|
78
|
+
// смена блоков
|
79
|
+
var slideBlock = function() {
|
80
|
+
|
81
|
+
var slideOutBlock, // блок который надо скрыть
|
82
|
+
slideInBlock, // блок который надо показать
|
83
|
+
mainPosition = {'left': 0, 'top': 0},
|
84
|
+
options;
|
85
|
+
|
86
|
+
slideOutBlock = $(blocks[currentBlockIndex]);
|
87
|
+
|
88
|
+
currentBlockIndex++;
|
89
|
+
if (currentBlockIndex >= blocks.length) {
|
90
|
+
currentBlockIndex = 0;
|
91
|
+
}
|
92
|
+
slideInBlock = $(blocks[currentBlockIndex]);
|
93
|
+
|
94
|
+
slideInBlock.css(slideInPosition);
|
95
|
+
|
96
|
+
options = {
|
97
|
+
duration: plugin.settings.duration,
|
98
|
+
easing: 'doubleSqrt'
|
99
|
+
};
|
100
|
+
|
101
|
+
slideOutBlock.animate(slideOutPosition, options);
|
102
|
+
slideInBlock.animate(mainPosition, options);
|
103
|
+
};
|
104
|
+
|
105
|
+
/**
|
106
|
+
* возвращает стартовую позицию для блока который должен появиться {left: xxx, top: yyy}
|
107
|
+
*/
|
108
|
+
var getSlideInPosition = function () {
|
109
|
+
var pos;
|
110
|
+
if (plugin.settings.direction === 'left') {
|
111
|
+
pos = {
|
112
|
+
'left': tileWidth,
|
113
|
+
'top': 0
|
114
|
+
}
|
115
|
+
} else if (plugin.settings.direction === 'right') {
|
116
|
+
pos = {
|
117
|
+
'left': -tileWidth,
|
118
|
+
'top': 0
|
119
|
+
}
|
120
|
+
} else if (plugin.settings.direction === 'up') {
|
121
|
+
pos = {
|
122
|
+
'left': 0,
|
123
|
+
'top': tileHeight
|
124
|
+
}
|
125
|
+
} else if (plugin.settings.direction === 'down') {
|
126
|
+
pos = {
|
127
|
+
'left': 0,
|
128
|
+
'top': -tileHeight
|
129
|
+
}
|
130
|
+
}
|
131
|
+
return pos;
|
132
|
+
};
|
133
|
+
|
134
|
+
/**
|
135
|
+
* возвращает финальную позицию для блока который должен скрыться {left: xxx, top: yyy}
|
136
|
+
*/
|
137
|
+
var getSlideOutPosition = function () {
|
138
|
+
var pos;
|
139
|
+
if (plugin.settings.direction === 'left') {
|
140
|
+
pos = {
|
141
|
+
'left': -tileWidth,
|
142
|
+
'top': 0
|
143
|
+
}
|
144
|
+
} else if (plugin.settings.direction === 'right') {
|
145
|
+
pos = {
|
146
|
+
'left': tileWidth,
|
147
|
+
'top': 0
|
148
|
+
}
|
149
|
+
} else if (plugin.settings.direction === 'up') {
|
150
|
+
pos = {
|
151
|
+
'left': 0,
|
152
|
+
'top': -tileHeight
|
153
|
+
}
|
154
|
+
} else if (plugin.settings.direction === 'down') {
|
155
|
+
pos = {
|
156
|
+
'left': 0,
|
157
|
+
'top': tileHeight
|
158
|
+
}
|
159
|
+
}
|
160
|
+
return pos;
|
161
|
+
};
|
162
|
+
|
163
|
+
plugin.getParams = function() {
|
164
|
+
|
165
|
+
// code goes here
|
166
|
+
|
167
|
+
}
|
168
|
+
|
169
|
+
plugin.init();
|
170
|
+
|
171
|
+
}
|
172
|
+
|
173
|
+
$.fn.tileBlockSlider = function(options) {
|
174
|
+
return this.each(function() {
|
175
|
+
if (undefined == $(this).data('tileBlockSlider')) {
|
176
|
+
var plugin = new $.tileBlockSlider(this, options);
|
177
|
+
$(this).data('tileBlockSlider', plugin);
|
178
|
+
}
|
179
|
+
});
|
180
|
+
}
|
181
|
+
|
182
|
+
})(jQuery);
|
183
|
+
|
184
|
+
|
185
|
+
$(window).ready(function(){
|
186
|
+
var slidedTiles = $('[data-role=tile-slider], .block-slider, .tile-slider');
|
187
|
+
slidedTiles.each(function (index, tile) {
|
188
|
+
var params = {};
|
189
|
+
tile = $(tile);
|
190
|
+
params.direction = tile.data('paramDirection');
|
191
|
+
params.duration = tile.data('paramDuration');
|
192
|
+
params.period = tile.data('paramPeriod');
|
193
|
+
tile.tileBlockSlider(params);
|
194
|
+
})
|
195
|
+
|
196
|
+
});
|
@@ -0,0 +1,10 @@
|
|
1
|
+
//= require metro-ui/input-control
|
2
|
+
//= require metro-ui/rating
|
3
|
+
//= require metro-ui/dropdown
|
4
|
+
//= require metro-ui/slider
|
5
|
+
//= require metro-ui/tile-slider
|
6
|
+
//= require metro-ui/tile-drag
|
7
|
+
//= require metro-ui/pagecontrol
|
8
|
+
//= require metro-ui/carousel
|
9
|
+
//= require metro-ui/buttonset
|
10
|
+
//= require metro-ui/accordion
|
@@ -0,0 +1,69 @@
|
|
1
|
+
/*
|
2
|
+
* Metro UI CSS
|
3
|
+
* Copyright 2012 Sergey Pimenov
|
4
|
+
* Licensed under the MIT Lilcense
|
5
|
+
*
|
6
|
+
* Accordion.less
|
7
|
+
*/
|
8
|
+
|
9
|
+
@acc-image-collapse: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHpSURBVEhLtZavT8JRFMXBGQgEg5FAYNNgIBAMBhpsEowEIpFgYLMYMBsMFht/gRNHgRn8EzDoCBY2CAQ3g4GAAz/ncUW+ym++nu3swnn3nfu47/se32BgDobDYRie8DEFozAiHXRhB9aDwWAFvjl1CqYWkDGhSDwjykgmL8QW1LgK7cEMPIA3jF/MKzTGYDBIwLYxbfJMkHMIm/B9YT4JWdiDZVa5Y/JCkBtizqXNPTXZCwa0ciXkTFoZFEoyvw/Vuh8wEEZUS8omrQ28Svh8wO8HYiy2iUu3ZRbw2MarMV6srV6tWbihywLPOH5qVUy9z8FXG/MNeD7A8y0+6xBVnOov7mFKBaJ2iHwFns+EqApot90JnQR9XAk2bRItikRUYBt+OukfoAIdFqCLzAOqrwSbNokIvl1XAOri8hWY7xM6KlCH3qPtD45hTZV2eV51KBIjfXOo5fj1iHEn8OUaNhFCTtgQeD3Cqn11FfUrdJ9fmrQ28CjAPp7agx8gpqF+VtKklSFTPHST5k3ygoEiVPUS1PlYGszTymV+ZdJ0kJCxxAZFRps0B+RoQ9VzPSjTV/4bJEZgGeoa161YwCgpM+MRWh7eWU4Vzdtzw9zXFibGCFnoXls4sO5fCrPv15Ya2i18kv4XgcAXTr+7IYi7bgIAAAAASUVORK5CYII%3D);
|
10
|
+
@acc-image-expand: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIzSURBVEhLtZYhSENRFIb3HgaDwWA0LAgaBBcMggu2DTQYFwwG44JBsE6MBpOwIhO0iahYJgoqBoNhFjEqaDAIBsOCsvn99509mXub080f/t33/nPuOfedd+7d82ItUK1W++AslykYh4PSwTN8gsee5x3AF6dGIDKBAjMsMS4zKpCC3DI+QNmVaBjOwFGYx77SKlGISqUyDh+NaZObAp8JeAdff/THIQPLsMAq+03+Efj2MmfN5i6aXA8MWrkc5kz6NUg0xfx3qNJ9AUMfokpSMOnPIFaOOG+w1hCh+MjYtCzY5mENOZMbgK2HWKVwsQhavUrT8gXh11YCAXuCeCrVkM+N+vzJ9/1iYO4ctOsNwznM+PxoEx3AbuMQpjwe45KMm3Ar0APwZPN26cD9JD4Ldq2NpwAhIuZPwW21571uTA+B9ivYtBBIcekqUQ/8cOo/QCW6YtzgJe8EUgCS13UK92OUQQ2h63OuL5zBwP13/yTcVYl24arpTYFz220qEHMBXqtEx7B+a3cH07Do82hq0VGyjTu5C+AJ9d+RJvaeEugMz8NtDL1y6BTE0TFxSmxtOCcM8AQ6z9ec0AGIkYXvxBwxKQBiGpYxNOyJdqGgxNBJ6jZkAzAsQWXPQe2PtsE8rVzB102KBg4z5lgiScLkpsAnju8Z1OkZvfLvwHEQFqCO8ROYJZDOFm1/MYmmPt83nyO0+pobWn62MHGIIQPdZwtd4f6lCFb7bCmqFcNuaUAs9glLFQdwvFGvGQAAAABJRU5ErkJggg%3D%3D);
|
11
|
+
@acc-image-collapse-black: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKlSURBVEhLtZY/aNNREMeTXzOYkMGxJBkymDSGDua/QyFuERTULYJLBwdBB8HiXBSc7OxQCdJBHIqpUyodClYU8geFFBwCbSB/BJ0kKuavn3t5rX+S2D+JX7jce3fvd3fv3r17MZv+Ab/fb7fZbJd7vV7CbDa7Ebn6GtNHqNLtdteRp/P5/Oe+eBBDHYhhq9V6h+FdDFRwkDYMYxuDu6JHJo5mkF+EzzJ/xHhxmKMBB5FIJIyh5zLG6PVsNptRihEIBoNnWZdiOI2jq3+vn9JcIRwOJ4lkjYUv2u32pUKhUNSqkajX6xWPx/O42Wye5Nslp9P5tVarvdXqX5DIQ6HQd5xc06Ijg+/PQS12JalTUDuQnFssllcSeS6Xu6c0xwC72XU4HFOk7KHL5VqpVqtfDFHoAzW1Wq3bwseB3W6/T6pKnKMK1Kwr5hNerxx0oIcF6T6Dgyx02pA6JzWVSRkXYOsdbJOgkwbbSUDpvmqikGpMGPy48bSthZNEkcDdZspyh8E8t3BTKxSQ9/TwUKD6/ri0sVjM3el0diRFFubtvvg/gEjfjHO5RoELNwfV5R5UoBklnSDIjA9WMajVdSb7V3tSoHAuUEAZqSIp0VnpRX3V+JADJujz2F41pIczkH6+Eo/HT+g1Y4HqSWFzQy6c6kUYX4RNNxqNYze6PXCwN7E3By3IXHVTuuA3+vh7hEt0w9fSFUV+VGDcR+TPsHOLt+SlyPYfHB6JEk5+MHwiLdfr9W6Vy+VuX3swJHJtfBnjD7R48MmUx4IKeMrCEnxeN66R0Dc2xXpJyw2ML2uVwtBHPxqNuqSf80GS6Ra0BhV5lFTqeE5d6HxSinCplg34AgXzQfS/Y6iDPQQCgVMYSWJAOq4brv62MFZ/W5hnoNXRuzSZfgLYkUQRTJGc4wAAAABJRU5ErkJggg%3D%3D);
|
12
|
+
@acc-image-expand-black: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALnSURBVEhLrZY/aNNREMeTXzPYksHBQdoMGUxbSkXSpK2gULcKCnas0MEODoIOgqWrRcHJujpEonQQh2LrVKVCgxWEtMVABMFCW0iTDg4iqNikiZ/vy2vMX2v/fOHy7t293929e/fuxe36B7q6urwtLS1DhUJh0O12+xH5ihrXFpTK5/Ovkc8sLy9/LYprUdeBDDc3N9+BHcdACgczjuN8wuC69MjkqAP5ZcZu5o/hJ+o5qnHQ29sbxtBL8Ri9Ho/H54yiAXp6es6yLgp7EkdXq9c32dEgHA4PE8ksC1/lcrkrKysrSatqiEwmkwoEAk+2t7eP8+1kW1vbj3Q6/cGq/0KRh0KhXzgZsaJ9g+8vQFl2pdQZmB0o5x6P550iX1paumc0BwC7WW9tbW0iZQ99Pt/U5ubmd0cKe6CubDZ7W2M9sMNr7K4gIsq7VlwDr9d7n1Stco4mUEfRM47rQBOJxDcJD4NYLJbD1ihORoLB4ClHdU5qUntVy36ArY8MCzgadvA0CM0UVUcKVeOghx8/9NYKS1DOLWtAEOcsq4t2plpP1E8tu4sk34y7ObQ1mFFu4YJVGOgwLftfoPoqLm1/f79/Z2dnTSnyMM8VxUcPRwesNNl5CTieKCdE5ee0UEdfATqBD/mWok9BHUZaBlJWUevKOR8MiWeMVeurwZpOBe+o5TIpXe2jAiV6CQdzSpG23q1eVFQdHjpggr6I7WlHPRxG/XxqYGDgmF1zKFA9UWzO68KZ0qK3nEDwBScRHI6ZVQcEtm4yPIJOY+uz6aZ0wZ/08QQOJumG79UVJd8vMK6DfYGdW7wlbyQrPTg8Eqs4+Q37TC23vb19cWNjI1/U7g1Fbo1HMP7AimufTD0WVMBzFq6qK9rG1RD2xkZZfx66gfGIVRnUOBD6+vp86ud8MMx0EZqFkjxKJnX2EnWqFBlVLfOMY8q59OWo62AXpp/TcjGgjqumaP62wJu/LcznoOnGu3S5/gDwHX69fcclgQAAAABJRU5ErkJggg%3D%3D);
|
13
|
+
|
14
|
+
.accordion {
|
15
|
+
.unstyled;
|
16
|
+
.clearfix;
|
17
|
+
margin-bottom: 10px;
|
18
|
+
|
19
|
+
& > li {
|
20
|
+
margin-bottom: 5px;
|
21
|
+
display: block;
|
22
|
+
//margin-left: -25px;
|
23
|
+
|
24
|
+
& > a {
|
25
|
+
display: block;
|
26
|
+
height: 32px;
|
27
|
+
background: @acc-image-expand-black 5px no-repeat;
|
28
|
+
background-color: rgba(217, 217, 217, 0.16);
|
29
|
+
padding-left: 36px;
|
30
|
+
padding-top: 5px;
|
31
|
+
#font > .navigation;
|
32
|
+
}
|
33
|
+
|
34
|
+
& > div {
|
35
|
+
border: 1px #ccc dotted;
|
36
|
+
padding: 10px;
|
37
|
+
margin-top: 5px;
|
38
|
+
display: none;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
& > li.active {
|
43
|
+
& > a {
|
44
|
+
background-image: @acc-image-collapse-black;
|
45
|
+
background-color: rgba(217, 217, 217, 1);
|
46
|
+
|
47
|
+
}
|
48
|
+
|
49
|
+
& > div {
|
50
|
+
display: block;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
&.dark {
|
55
|
+
& > li {
|
56
|
+
& > a {
|
57
|
+
background-color: #464646;
|
58
|
+
background-image: @acc-image-expand;
|
59
|
+
color: #fff;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
& > li.active {
|
63
|
+
& > a {
|
64
|
+
background-color: #1e1e1e;
|
65
|
+
background-image: @acc-image-collapse;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
@@ -0,0 +1,59 @@
|
|
1
|
+
/*
|
2
|
+
* Metro UI CSS
|
3
|
+
* Copyright 2012 Sergey Pimenov
|
4
|
+
* Licensed under the MIT Lilcense
|
5
|
+
*
|
6
|
+
* Bricks.less
|
7
|
+
*
|
8
|
+
*/
|
9
|
+
|
10
|
+
.item-margin {
|
11
|
+
margin: 0 @subunit*2 @subunit*2 0;
|
12
|
+
}
|
13
|
+
.column-margin {
|
14
|
+
margin: 0 @unit @subunit*2 0;
|
15
|
+
}
|
16
|
+
.group-margin {
|
17
|
+
margin: 0 @unit*4 @subunit*2 0;
|
18
|
+
}
|
19
|
+
|
20
|
+
[class*="-brick"] {
|
21
|
+
}
|
22
|
+
|
23
|
+
.brick {
|
24
|
+
.pos-rel;
|
25
|
+
.item-margin;
|
26
|
+
.as-block;
|
27
|
+
}
|
28
|
+
|
29
|
+
.short-brick {
|
30
|
+
.brick;
|
31
|
+
width: 150px;
|
32
|
+
height: 150px;
|
33
|
+
}
|
34
|
+
|
35
|
+
.medium-brick {
|
36
|
+
.brick;
|
37
|
+
width: 310px;
|
38
|
+
height: 150px;
|
39
|
+
}
|
40
|
+
|
41
|
+
/*
|
42
|
+
.badge {
|
43
|
+
.brick;
|
44
|
+
width: @subunit*7;
|
45
|
+
height: @subunit*6;
|
46
|
+
padding-top: @subunit;
|
47
|
+
#font > .control;
|
48
|
+
color: @darken;
|
49
|
+
text-align: center;
|
50
|
+
}
|
51
|
+
*/
|
52
|
+
|
53
|
+
.square {
|
54
|
+
display: block;
|
55
|
+
float: left;
|
56
|
+
margin-right: 10px;
|
57
|
+
height: 20px;
|
58
|
+
width: 20px;
|
59
|
+
}
|