initial commit
This commit is contained in:
+714
@@ -0,0 +1,714 @@
|
||||
@charset "utf-8";
|
||||
/**
|
||||
* Pure css masonary grid
|
||||
*
|
||||
* Assign width, height x and y positin for each item in the grid, for 4 screen sizes, using only css classes
|
||||
*
|
||||
* Example calsses for "lg" size:
|
||||
*
|
||||
* ┌────────────────────────┐┌─────────────┐
|
||||
* │ lt-lg-x-0 ││ lt-lg-x-2 │
|
||||
* │ lt-lg-y-0 ││ lt-lg-y-0 │
|
||||
* │ lt-lg-w-2 ││ lt-lg-w-1 │
|
||||
* │ lt-lg-h-1 ││ lt-lg-h-1 │
|
||||
* └────────────────────────┘└─────────────┘
|
||||
* ┌───────────────────────────────────────┐
|
||||
* │ lt-lg-x-0 │
|
||||
* │ lt-lg-y-1 │
|
||||
* │ lt-lg-w-3 │
|
||||
* │ lt-lg-h-1 │
|
||||
* └───────────────────────────────────────┘
|
||||
*/
|
||||
.lt-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lt {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lt-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lt-xs-x-0 {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
.lt-xs-y-24 {
|
||||
margin-top: 1696%;
|
||||
}
|
||||
|
||||
.lt-xs-y-23 {
|
||||
margin-top: 1625.33333333%;
|
||||
}
|
||||
|
||||
.lt-xs-y-22 {
|
||||
margin-top: 1554.66666667%;
|
||||
}
|
||||
|
||||
.lt-xs-y-21 {
|
||||
margin-top: 1484%;
|
||||
}
|
||||
|
||||
.lt-xs-y-20 {
|
||||
margin-top: 1413.33333333%;
|
||||
}
|
||||
|
||||
.lt-xs-y-19 {
|
||||
margin-top: 1342.66666667%;
|
||||
}
|
||||
|
||||
.lt-xs-y-18 {
|
||||
margin-top: 1272%;
|
||||
}
|
||||
|
||||
.lt-xs-y-17 {
|
||||
margin-top: 1201.33333333%;
|
||||
}
|
||||
|
||||
.lt-xs-y-16 {
|
||||
margin-top: 1130.66666667%;
|
||||
}
|
||||
|
||||
.lt-xs-y-15 {
|
||||
margin-top: 1060%;
|
||||
}
|
||||
|
||||
.lt-xs-y-14 {
|
||||
margin-top: 989.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-y-13 {
|
||||
margin-top: 918.666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-y-12 {
|
||||
margin-top: 848%;
|
||||
}
|
||||
|
||||
.lt-xs-y-11 {
|
||||
margin-top: 777.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-y-10 {
|
||||
margin-top: 706.666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-y-9 {
|
||||
margin-top: 636%;
|
||||
}
|
||||
|
||||
.lt-xs-y-8 {
|
||||
margin-top: 565.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-y-7 {
|
||||
margin-top: 494.666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-y-6 {
|
||||
margin-top: 424%;
|
||||
}
|
||||
|
||||
.lt-xs-y-5 {
|
||||
margin-top: 353.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-y-4 {
|
||||
margin-top: 282.666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-y-3 {
|
||||
margin-top: 212%;
|
||||
}
|
||||
|
||||
.lt-xs-y-2 {
|
||||
margin-top: 141.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-y-1 {
|
||||
margin-top: 70.6666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-y-0 {
|
||||
margin-top: 0%;
|
||||
}
|
||||
|
||||
.lt-xs-w-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lt-xs-h-25 {
|
||||
padding-bottom: 1762.66666667%;
|
||||
}
|
||||
|
||||
.lt-xs-h-24 {
|
||||
padding-bottom: 1692%;
|
||||
}
|
||||
|
||||
.lt-xs-h-23 {
|
||||
padding-bottom: 1621.33333333%;
|
||||
}
|
||||
|
||||
.lt-xs-h-22 {
|
||||
padding-bottom: 1550.66666667%;
|
||||
}
|
||||
|
||||
.lt-xs-h-21 {
|
||||
padding-bottom: 1480%;
|
||||
}
|
||||
|
||||
.lt-xs-h-20 {
|
||||
padding-bottom: 1409.33333333%;
|
||||
}
|
||||
|
||||
.lt-xs-h-19 {
|
||||
padding-bottom: 1338.66666667%;
|
||||
}
|
||||
|
||||
.lt-xs-h-18 {
|
||||
padding-bottom: 1268%;
|
||||
}
|
||||
|
||||
.lt-xs-h-17 {
|
||||
padding-bottom: 1197.33333333%;
|
||||
}
|
||||
|
||||
.lt-xs-h-16 {
|
||||
padding-bottom: 1126.66666667%;
|
||||
}
|
||||
|
||||
.lt-xs-h-15 {
|
||||
padding-bottom: 1056%;
|
||||
}
|
||||
|
||||
.lt-xs-h-14 {
|
||||
padding-bottom: 985.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-h-13 {
|
||||
padding-bottom: 914.666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-h-12 {
|
||||
padding-bottom: 844%;
|
||||
}
|
||||
|
||||
.lt-xs-h-11 {
|
||||
padding-bottom: 773.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-h-10 {
|
||||
padding-bottom: 702.666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-h-9 {
|
||||
padding-bottom: 632%;
|
||||
}
|
||||
|
||||
.lt-xs-h-8 {
|
||||
padding-bottom: 561.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-h-7 {
|
||||
padding-bottom: 490.666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-h-6 {
|
||||
padding-bottom: 420%;
|
||||
}
|
||||
|
||||
.lt-xs-h-5 {
|
||||
padding-bottom: 349.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-h-4 {
|
||||
padding-bottom: 278.666666667%;
|
||||
}
|
||||
|
||||
.lt-xs-h-3 {
|
||||
padding-bottom: 208%;
|
||||
}
|
||||
|
||||
.lt-xs-h-2 {
|
||||
padding-bottom: 137.333333333%;
|
||||
}
|
||||
|
||||
.lt-xs-h-1 {
|
||||
padding-bottom: 66.6666666667%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lt-sm-x-1 {
|
||||
margin-left: 51.5%;
|
||||
}
|
||||
|
||||
.lt-sm-x-0 {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
.lt-sm-y-19 {
|
||||
margin-top: 671.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-y-18 {
|
||||
margin-top: 636%;
|
||||
}
|
||||
|
||||
.lt-sm-y-17 {
|
||||
margin-top: 600.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-y-16 {
|
||||
margin-top: 565.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-y-15 {
|
||||
margin-top: 530%;
|
||||
}
|
||||
|
||||
.lt-sm-y-14 {
|
||||
margin-top: 494.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-y-13 {
|
||||
margin-top: 459.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-y-12 {
|
||||
margin-top: 424%;
|
||||
}
|
||||
|
||||
.lt-sm-y-11 {
|
||||
margin-top: 388.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-y-10 {
|
||||
margin-top: 353.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-y-9 {
|
||||
margin-top: 318%;
|
||||
}
|
||||
|
||||
.lt-sm-y-8 {
|
||||
margin-top: 282.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-y-7 {
|
||||
margin-top: 247.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-y-6 {
|
||||
margin-top: 212%;
|
||||
}
|
||||
|
||||
.lt-sm-y-5 {
|
||||
margin-top: 176.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-y-4 {
|
||||
margin-top: 141.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-y-3 {
|
||||
margin-top: 106%;
|
||||
}
|
||||
|
||||
.lt-sm-y-2 {
|
||||
margin-top: 70.6666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-y-1 {
|
||||
margin-top: 35.3333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-y-0 {
|
||||
margin-top: 0%;
|
||||
}
|
||||
|
||||
.lt-sm-w-2 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lt-sm-w-1 {
|
||||
width: 48.5%;
|
||||
}
|
||||
|
||||
.lt-sm-h-20 {
|
||||
padding-bottom: 703.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-h-19 {
|
||||
padding-bottom: 668.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-h-18 {
|
||||
padding-bottom: 633%;
|
||||
}
|
||||
|
||||
.lt-sm-h-17 {
|
||||
padding-bottom: 597.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-h-16 {
|
||||
padding-bottom: 562.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-h-15 {
|
||||
padding-bottom: 527%;
|
||||
}
|
||||
|
||||
.lt-sm-h-14 {
|
||||
padding-bottom: 491.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-h-13 {
|
||||
padding-bottom: 456.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-h-12 {
|
||||
padding-bottom: 421%;
|
||||
}
|
||||
|
||||
.lt-sm-h-11 {
|
||||
padding-bottom: 385.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-h-10 {
|
||||
padding-bottom: 350.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-h-9 {
|
||||
padding-bottom: 315%;
|
||||
}
|
||||
|
||||
.lt-sm-h-8 {
|
||||
padding-bottom: 279.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-h-7 {
|
||||
padding-bottom: 244.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-h-6 {
|
||||
padding-bottom: 209%;
|
||||
}
|
||||
|
||||
.lt-sm-h-5 {
|
||||
padding-bottom: 173.666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-h-4 {
|
||||
padding-bottom: 138.333333333%;
|
||||
}
|
||||
|
||||
.lt-sm-h-3 {
|
||||
padding-bottom: 103%;
|
||||
}
|
||||
|
||||
.lt-sm-h-2 {
|
||||
padding-bottom: 67.6666666667%;
|
||||
}
|
||||
|
||||
.lt-sm-h-1 {
|
||||
padding-bottom: 32.3333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.lt-md-x-2 {
|
||||
margin-left: 68%;
|
||||
}
|
||||
|
||||
.lt-md-x-1 {
|
||||
margin-left: 34%;
|
||||
}
|
||||
|
||||
.lt-md-x-0 {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
.lt-md-y-14 {
|
||||
margin-top: 326.666666667%;
|
||||
}
|
||||
|
||||
.lt-md-y-13 {
|
||||
margin-top: 303.333333333%;
|
||||
}
|
||||
|
||||
.lt-md-y-12 {
|
||||
margin-top: 280%;
|
||||
}
|
||||
|
||||
.lt-md-y-11 {
|
||||
margin-top: 256.666666667%;
|
||||
}
|
||||
|
||||
.lt-md-y-10 {
|
||||
margin-top: 233.333333333%;
|
||||
}
|
||||
|
||||
.lt-md-y-9 {
|
||||
margin-top: 210%;
|
||||
}
|
||||
|
||||
.lt-md-y-8 {
|
||||
margin-top: 186.666666667%;
|
||||
}
|
||||
|
||||
.lt-md-y-7 {
|
||||
margin-top: 163.333333333%;
|
||||
}
|
||||
|
||||
.lt-md-y-6 {
|
||||
margin-top: 140%;
|
||||
}
|
||||
|
||||
.lt-md-y-5 {
|
||||
margin-top: 116.666666667%;
|
||||
}
|
||||
|
||||
.lt-md-y-4 {
|
||||
margin-top: 93.3333333333%;
|
||||
}
|
||||
|
||||
.lt-md-y-3 {
|
||||
margin-top: 70%;
|
||||
}
|
||||
|
||||
.lt-md-y-2 {
|
||||
margin-top: 46.6666666667%;
|
||||
}
|
||||
|
||||
.lt-md-y-1 {
|
||||
margin-top: 23.3333333333%;
|
||||
}
|
||||
|
||||
.lt-md-y-0 {
|
||||
margin-top: 0%;
|
||||
}
|
||||
|
||||
.lt-md-w-3 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lt-md-w-2 {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
.lt-md-w-1 {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.lt-md-h-15 {
|
||||
padding-bottom: 348%;
|
||||
}
|
||||
|
||||
.lt-md-h-14 {
|
||||
padding-bottom: 324.666666667%;
|
||||
}
|
||||
|
||||
.lt-md-h-13 {
|
||||
padding-bottom: 301.333333333%;
|
||||
}
|
||||
|
||||
.lt-md-h-12 {
|
||||
padding-bottom: 278%;
|
||||
}
|
||||
|
||||
.lt-md-h-11 {
|
||||
padding-bottom: 254.666666667%;
|
||||
}
|
||||
|
||||
.lt-md-h-10 {
|
||||
padding-bottom: 231.333333333%;
|
||||
}
|
||||
|
||||
.lt-md-h-9 {
|
||||
padding-bottom: 208%;
|
||||
}
|
||||
|
||||
.lt-md-h-8 {
|
||||
padding-bottom: 184.666666667%;
|
||||
}
|
||||
|
||||
.lt-md-h-7 {
|
||||
padding-bottom: 161.333333333%;
|
||||
}
|
||||
|
||||
.lt-md-h-6 {
|
||||
padding-bottom: 138%;
|
||||
}
|
||||
|
||||
.lt-md-h-5 {
|
||||
padding-bottom: 114.666666667%;
|
||||
}
|
||||
|
||||
.lt-md-h-4 {
|
||||
padding-bottom: 91.3333333333%;
|
||||
}
|
||||
|
||||
.lt-md-h-3 {
|
||||
padding-bottom: 68%;
|
||||
}
|
||||
|
||||
.lt-md-h-2 {
|
||||
padding-bottom: 44.6666666667%;
|
||||
}
|
||||
|
||||
.lt-md-h-1 {
|
||||
padding-bottom: 21.3333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.lt-lg-x-3 {
|
||||
margin-left: 75.75%;
|
||||
}
|
||||
|
||||
.lt-lg-x-2 {
|
||||
margin-left: 50.5%;
|
||||
}
|
||||
|
||||
.lt-lg-x-1 {
|
||||
margin-left: 25.25%;
|
||||
}
|
||||
|
||||
.lt-lg-x-0 {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
.lt-lg-y-9 {
|
||||
margin-top: 154.5%;
|
||||
}
|
||||
|
||||
.lt-lg-y-8 {
|
||||
margin-top: 137.333333333%;
|
||||
}
|
||||
|
||||
.lt-lg-y-7 {
|
||||
margin-top: 120.166666667%;
|
||||
}
|
||||
|
||||
.lt-lg-y-6 {
|
||||
margin-top: 103%;
|
||||
}
|
||||
|
||||
.lt-lg-y-5 {
|
||||
margin-top: 85.8333333333%;
|
||||
}
|
||||
|
||||
.lt-lg-y-4 {
|
||||
margin-top: 68.6666666667%;
|
||||
}
|
||||
|
||||
.lt-lg-y-3 {
|
||||
margin-top: 51.5%;
|
||||
}
|
||||
|
||||
.lt-lg-y-2 {
|
||||
margin-top: 34.3333333333%;
|
||||
}
|
||||
|
||||
.lt-lg-y-1 {
|
||||
margin-top: 17.1666666667%;
|
||||
}
|
||||
|
||||
.lt-lg-y-0 {
|
||||
margin-top: 0%;
|
||||
}
|
||||
|
||||
.lt-lg-w-4 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lt-lg-w-3 {
|
||||
width: 74.75%;
|
||||
}
|
||||
|
||||
.lt-lg-w-2 {
|
||||
width: 49.5%;
|
||||
}
|
||||
|
||||
.lt-lg-w-1 {
|
||||
width: 24.25%;
|
||||
}
|
||||
|
||||
.lt-lg-h-10 {
|
||||
padding-bottom: 170.666666667%;
|
||||
}
|
||||
|
||||
.lt-lg-h-9 {
|
||||
padding-bottom: 153.5%;
|
||||
}
|
||||
|
||||
.lt-lg-h-8 {
|
||||
padding-bottom: 136.333333333%;
|
||||
}
|
||||
|
||||
.lt-lg-h-7 {
|
||||
padding-bottom: 119.166666667%;
|
||||
}
|
||||
|
||||
.lt-lg-h-6 {
|
||||
padding-bottom: 102%;
|
||||
}
|
||||
|
||||
.lt-lg-h-5 {
|
||||
padding-bottom: 84.8333333333%;
|
||||
}
|
||||
|
||||
.lt-lg-h-4 {
|
||||
padding-bottom: 67.6666666667%;
|
||||
}
|
||||
|
||||
.lt-lg-h-3 {
|
||||
padding-bottom: 50.5%;
|
||||
}
|
||||
|
||||
.lt-lg-h-2 {
|
||||
padding-bottom: 33.3333333333%;
|
||||
}
|
||||
|
||||
.lt-lg-h-1 {
|
||||
padding-bottom: 16.1666666667%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles specific to the ordering process
|
||||
*/
|
||||
.lt {
|
||||
z-index: 1;
|
||||
transition: margin-left .1s ease-out, margin-top .1s ease-out;
|
||||
}
|
||||
|
||||
.lt-ghost {
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
background-color: #f3f7f9;
|
||||
opacity: .5;
|
||||
transition: margin-left 0s ease-out, margin-top 0s ease-out;
|
||||
}
|
||||
|
||||
.lt-container {
|
||||
transition: padding-bottom .1s ease-out;
|
||||
}
|
||||
|
||||
.lt-container .lt-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
border: 1px solid #ccd5db;
|
||||
}
|
||||
+980
@@ -0,0 +1,980 @@
|
||||
// LICENSE: BSD-3-Clause
|
||||
// http://git.io/vZkLP
|
||||
|
||||
var LTGrid = (function ($) {
|
||||
|
||||
'use strict'
|
||||
|
||||
/* exported Grid */
|
||||
|
||||
/**
|
||||
* A collection of rect objects
|
||||
*/
|
||||
var Grid = (function () {
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @param {Array} rects array of Rect objects
|
||||
*/
|
||||
function Grid(rects) {
|
||||
this.rects = rects || []
|
||||
}
|
||||
|
||||
/**
|
||||
* Return all the rects that intersect with a given rect
|
||||
*
|
||||
* @param {Rect} rect
|
||||
* @return {Array}
|
||||
*/
|
||||
Grid.prototype.getIntersectingRects = function (rect) {
|
||||
return this.rects.filter(function (item) {
|
||||
return rect !== item && rect.intersect(item)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Reduce all the vertical whitespace between rects
|
||||
*
|
||||
* @return {Grid} self
|
||||
*/
|
||||
Grid.prototype.compact = function () {
|
||||
var rectsCopy = this.rects.slice(0)
|
||||
var self = this
|
||||
|
||||
rectsCopy
|
||||
.sort(function (a, b) {
|
||||
return a.y - b.y
|
||||
})
|
||||
.forEach(function (item) {
|
||||
do {
|
||||
item.y -= 1
|
||||
} while (item.y >= 0 && self.getIntersectingRects(item).length === 0)
|
||||
|
||||
item.y += 1
|
||||
})
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
* The maximum height of the rects in the grid
|
||||
*
|
||||
* @return {Number}
|
||||
*/
|
||||
Grid.prototype.height = function () {
|
||||
var hights = this.rects.map(function (item) {
|
||||
return item.bottom()
|
||||
})
|
||||
|
||||
return hights.length ? Math.max.apply(null, hights) : 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Move a rect inside the grid, or update its size
|
||||
* If there is overlap move rects downards
|
||||
*
|
||||
* @param {Rect} rect
|
||||
* @param {Object} params An object with optional keys x, y, w, h to modify the rect
|
||||
* @return {Grid} self
|
||||
*/
|
||||
Grid.prototype.updateNoOverlap = function (rect, params) {
|
||||
|
||||
var self = this
|
||||
|
||||
this.update(rect, params)
|
||||
|
||||
this.getIntersectingRects(rect)
|
||||
.forEach(function (item) {
|
||||
self.updateNoOverlap(item, { x: item.x, y: rect.bottom() })
|
||||
})
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
* Move a rect inside the grid, or update its size
|
||||
*
|
||||
* @param {Rect} rect
|
||||
* @param {Object} params An object with optional keys x, y, w, h to modify the rect
|
||||
* @return {Grid} self
|
||||
*/
|
||||
Grid.prototype.update = function (rect, params) {
|
||||
|
||||
rect.x = ('x' in params) ? params.x : rect.x
|
||||
rect.y = ('y' in params) ? params.y : rect.y
|
||||
rect.w = ('w' in params) ? params.w : rect.w
|
||||
rect.h = ('h' in params) ? params.h : rect.h
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
return Grid
|
||||
})()
|
||||
|
||||
/* exported LTData */
|
||||
|
||||
var LTData = (function ($) {
|
||||
|
||||
|
||||
|
||||
var NAME = 'ltData'
|
||||
|
||||
var LTData = {
|
||||
NAME: NAME
|
||||
}
|
||||
|
||||
LTData.getRects = function (rects) {
|
||||
return $.map(rects, function (rect) {
|
||||
return new Rect(rect.x, rect.y, rect.w, rect.h)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter / setter for rects data
|
||||
*
|
||||
* @param {string} size xs, sm, md or lg
|
||||
* @param {Array} rects Array of Rect objects
|
||||
*/
|
||||
$.fn[NAME] = function (size, rects) {
|
||||
|
||||
var ltGrid = this[LTGrid.NAME]().data(LTGrid.DATA_KEY)
|
||||
|
||||
if (undefined !== rects) {
|
||||
ltGrid
|
||||
.grid(size, new Grid(LTData.getRects(rects)))
|
||||
.update()
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
return ltGrid.grid(size).rects
|
||||
}
|
||||
|
||||
return LTData
|
||||
|
||||
})(jQuery)
|
||||
|
||||
/* exported LTGrid */
|
||||
|
||||
var LTGrid = (function ($) {
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'ltGrid'
|
||||
var DATA_KEY = 'lt.grid'
|
||||
var EVENT_KEY = '.' + DATA_KEY
|
||||
|
||||
var Event = {
|
||||
UPDATE : 'update',
|
||||
START : 'dragstart' + EVENT_KEY + ' touchstart' + EVENT_KEY,
|
||||
OVER : 'dragover' + EVENT_KEY + ' touchmove' + EVENT_KEY,
|
||||
END : 'dragend' + EVENT_KEY + ' touchcancel' + EVENT_KEY,
|
||||
DROP : 'drop' + EVENT_KEY + ' touchend' + EVENT_KEY,
|
||||
LEAVE : 'dragleave.' + EVENT_KEY
|
||||
}
|
||||
|
||||
var Selector = {
|
||||
GRID : '[data-arrange="lt-grid"]',
|
||||
WIDGET : '[data-arrange="lt-grid"] .lt'
|
||||
}
|
||||
|
||||
var Default = {
|
||||
resize: true,
|
||||
overlap: false,
|
||||
compact: true,
|
||||
params: {
|
||||
lg: {
|
||||
gap: 1,
|
||||
maxWidth: Number.MAX_VALUE,
|
||||
cols: 4,
|
||||
aspect: 2 / 3
|
||||
},
|
||||
md: {
|
||||
gap: 2,
|
||||
maxWidth: 1200,
|
||||
cols: 3,
|
||||
aspect: 2 / 3
|
||||
},
|
||||
sm: {
|
||||
gap: 3,
|
||||
maxWidth: 992,
|
||||
cols: 2,
|
||||
aspect: 2 / 3
|
||||
},
|
||||
xs: {
|
||||
gap: 4,
|
||||
maxWidth: 768,
|
||||
cols: 1,
|
||||
aspect: 2 / 3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {jQuery} element
|
||||
* @param {Object} options
|
||||
*/
|
||||
function LTGrid(element, options) {
|
||||
this.$element = $(element)
|
||||
this._options = this._getOptions(options || {})
|
||||
this.$mask = undefined
|
||||
this.$ghost = undefined
|
||||
}
|
||||
|
||||
// getters
|
||||
|
||||
LTGrid.Default = Default
|
||||
|
||||
LTGrid.NAME = NAME
|
||||
|
||||
LTGrid.DATA_KEY = DATA_KEY
|
||||
|
||||
LTGrid.EVENT_KEY = EVENT_KEY
|
||||
|
||||
LTGrid.prototype.options = function () {
|
||||
return this._options
|
||||
}
|
||||
|
||||
// public
|
||||
|
||||
/**
|
||||
* Update an option directly
|
||||
*
|
||||
* @param {String} name
|
||||
* @param {mixed} value
|
||||
*/
|
||||
LTGrid.prototype.option = function (name, value) {
|
||||
this._options[name] = value
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current screen size
|
||||
* @return {String} xs, sm, md or lg
|
||||
*/
|
||||
LTGrid.prototype.size = function () {
|
||||
var currentSize
|
||||
var windowWidth = this._windowWidth()
|
||||
|
||||
for (var size in this._options.params) {
|
||||
if (windowWidth < this._options.params[size].maxWidth) {
|
||||
currentSize = size
|
||||
}
|
||||
}
|
||||
|
||||
return currentSize
|
||||
}
|
||||
|
||||
/**
|
||||
* Compact the grid for current size
|
||||
*/
|
||||
LTGrid.prototype.compact = function () {
|
||||
var size = this.size()
|
||||
var grid = this.grid(size)
|
||||
|
||||
this.grid(size, grid.compact())
|
||||
}
|
||||
|
||||
/**
|
||||
* Resize container to match items
|
||||
*/
|
||||
LTGrid.prototype.resize = function () {
|
||||
var size = this.size()
|
||||
var rect = new Rect(0, 0, 0, this.grid(size).height())
|
||||
var modifiedClass = rect.setCss(this.$element.attr('class'), size)
|
||||
|
||||
this.$element.attr('class', modifiedClass)
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear artefacts like mask and ghost and update
|
||||
*/
|
||||
LTGrid.prototype.end = function () {
|
||||
this._removeMask()
|
||||
this._removeGhost()
|
||||
this.update()
|
||||
}
|
||||
|
||||
/**
|
||||
* Call resize and compact if allowed
|
||||
*/
|
||||
LTGrid.prototype.update = function () {
|
||||
if (this._options.compact) {
|
||||
this.compact()
|
||||
}
|
||||
|
||||
if (this._options.resize) {
|
||||
this.resize()
|
||||
}
|
||||
|
||||
this.$element.trigger(Event.UPDATE)
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter / getter of a Grid object for this Layout Grid
|
||||
*
|
||||
* @param {String} size xs, sm, md or lg
|
||||
* @param {Grid} grid
|
||||
* @return {Grid}
|
||||
*/
|
||||
LTGrid.prototype.grid = function (size, grid) {
|
||||
var $items = this.$element.children('[draggable]')
|
||||
|
||||
if (undefined !== grid) {
|
||||
grid.rects.forEach(function (rect, index) {
|
||||
$items.eq(index)[LTRect.NAME](size, rect)
|
||||
})
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
return new Grid($.map($items.toArray(), function (item) {
|
||||
return $(item)[LTRect.NAME](size)
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Move a widget within the grid, repositioning other elements
|
||||
* so there is no overlapping
|
||||
*
|
||||
* @param {jQuery} $widget
|
||||
* @param {Object} params An object with optional keys x, y, w, h to modify the rect
|
||||
*/
|
||||
LTGrid.prototype.reposition = function ($widget, params) {
|
||||
var size = this.size()
|
||||
var rect = $widget[LTRect.NAME](size)
|
||||
var grid = this.grid(size)
|
||||
|
||||
if (this._options.overlap) {
|
||||
grid.update(rect, params)
|
||||
} else {
|
||||
grid.updateNoOverlap(rect, params)
|
||||
}
|
||||
|
||||
this.grid(size, grid)
|
||||
this.update()
|
||||
}
|
||||
|
||||
// private
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Move the ghost element of a widget inside the grid.
|
||||
* Pass a mouse x and y coords, relative to the grid
|
||||
*
|
||||
* @param {jQuery} $widget
|
||||
* @param {Number} mouseX
|
||||
* @param {Number} mouseY
|
||||
*/
|
||||
LTGrid.prototype._moveGhost = function ($widget, mouseX, mouseY) {
|
||||
var size = this.size()
|
||||
var $ghost = this._getGhost($widget)
|
||||
var rect = $ghost[LTRect.NAME](size)
|
||||
var gap = this._options.params[size].gap
|
||||
var cols = this._options.params[size].cols
|
||||
|
||||
rect.x = Math.floor(mouseX / (this._itemWidth(size) + gap))
|
||||
rect.y = Math.floor(mouseY / (this._itemHeight(size) + gap))
|
||||
|
||||
rect.x = Math.min(Math.max(0, rect.x), cols - rect.w)
|
||||
|
||||
$ghost[LTRect.NAME](size, rect)
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a ghost item for a widget, cache ghost
|
||||
*
|
||||
* @param {jQuery} $widget
|
||||
* @return {jQuery}
|
||||
*/
|
||||
LTGrid.prototype._getGhost = function ($widget) {
|
||||
if (undefined === this.$ghost) {
|
||||
this.$ghost = $('<div class="' + $widget.attr('class') + ' lt-ghost"></div>')
|
||||
this.$element.append(this.$ghost)
|
||||
}
|
||||
|
||||
return this.$ghost
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the ghost element for this grid
|
||||
*
|
||||
* @param {jQuery} $widget
|
||||
*/
|
||||
LTGrid.prototype._removeGhost = function () {
|
||||
if (this.$ghost) {
|
||||
this.$ghost.remove()
|
||||
this.$ghost = undefined
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Move the widget to its corresponding ghost position
|
||||
*
|
||||
* @param {jQuery} $widget
|
||||
*/
|
||||
LTGrid.prototype._moveToGhost = function ($widget) {
|
||||
var size = this.size()
|
||||
var $parent = $widget.parent()
|
||||
var $ghost = this._getGhost($widget)
|
||||
var pos = $ghost[LTRect.NAME](size)
|
||||
|
||||
this.$element.append($widget)
|
||||
|
||||
this.reposition($widget, { x: pos.x, y: pos.y })
|
||||
|
||||
$parent.add(this.$element)[NAME]('update')
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the mask of the grid. Create one if there is none.
|
||||
*
|
||||
* @return {jQuery}
|
||||
*/
|
||||
LTGrid.prototype._getMask = function () {
|
||||
if (undefined === this.$mask) {
|
||||
this.$mask = $('<div class="lt-mask" data-lt-grid="mask"></div>')
|
||||
this.$element.append(this.$mask)
|
||||
}
|
||||
|
||||
return this.$mask
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the mask
|
||||
*/
|
||||
LTGrid.prototype._removeMask = function () {
|
||||
if (undefined !== this.$mask) {
|
||||
this.$mask.remove()
|
||||
this.$mask = undefined
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The width of a single grid count, in pixels
|
||||
*
|
||||
* @param {String} size xs, sm, md or lg
|
||||
* @return {Number}
|
||||
*/
|
||||
LTGrid.prototype._itemWidth = function (size) {
|
||||
var cols = this._options.params[size].cols
|
||||
var gap = this._options.params[size].gap
|
||||
|
||||
return (this.$element.width() - (cols - 1) * gap) / cols
|
||||
}
|
||||
|
||||
/**
|
||||
* The height of a single grid count, in pixels
|
||||
*
|
||||
* @param {String} size xs, sm, md or lg
|
||||
* @return {Number}
|
||||
*/
|
||||
LTGrid.prototype._itemHeight = function (size) {
|
||||
var aspect = this._options.params[size].aspect
|
||||
|
||||
return this._itemWidth(size) * aspect
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the current window width
|
||||
*
|
||||
* @return {Number}
|
||||
*/
|
||||
LTGrid.prototype._windowWidth = function () {
|
||||
return $(window).width()
|
||||
}
|
||||
|
||||
LTGrid.prototype._getOptions = function (options) {
|
||||
return $.extend(true, {}, Default, options)
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
LTGrid._jQueryInterface = function (config, a1, a2, a3) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data(DATA_KEY)
|
||||
var _config = $.extend(
|
||||
true,
|
||||
{},
|
||||
Default,
|
||||
$this.data(),
|
||||
typeof config === 'object' && config
|
||||
)
|
||||
|
||||
if (!data) {
|
||||
data = new LTGrid(this, _config)
|
||||
$this.data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
data[config](a1, a2, a3)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document)
|
||||
.on(Event.START, Selector.WIDGET, function (event) {
|
||||
Store.set(event.originalEvent, this)
|
||||
})
|
||||
|
||||
.on(Event.OVER, Selector.GRID, function (event) {
|
||||
var original = event.originalEvent
|
||||
var $widget = $(Store.get(original))
|
||||
|
||||
if ($widget.length) {
|
||||
var pos = original.touches ? original.touches[0] : original
|
||||
var $this = $(this)
|
||||
var mouseX = pos.pageX - $this.offset().left
|
||||
var mouseY = pos.pageY - $this.offset().top
|
||||
var grid = $this[NAME]().data(DATA_KEY)
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
grid._getMask()
|
||||
grid._moveGhost($widget, mouseX, mouseY)
|
||||
}
|
||||
})
|
||||
|
||||
.on(Event.END, Selector.GRID, function () {
|
||||
$(this)[NAME]('end')
|
||||
})
|
||||
|
||||
.on(Event.LEAVE, Selector.GRID, function (event) {
|
||||
event.preventDefault()
|
||||
|
||||
if ($(event.target).data('lt-grid') === 'mask') {
|
||||
$(this)[NAME]('end')
|
||||
}
|
||||
})
|
||||
|
||||
.on(Event.DROP, Selector.GRID, function (event) {
|
||||
var $widget = $(Store.get(event.originalEvent))
|
||||
|
||||
if ($widget.length) {
|
||||
var $this = $(this)
|
||||
var grid = $this[NAME]().data(DATA_KEY)
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
grid._moveToGhost($widget)
|
||||
grid.end()
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = LTGrid._jQueryInterface
|
||||
$.fn[NAME].LTGrid = LTGrid
|
||||
|
||||
return LTGrid
|
||||
|
||||
})(jQuery)
|
||||
|
||||
/* exported LTGridOnly */
|
||||
|
||||
var LTGridOnly = (function ($) {
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var NAME = 'ltGridOnly'
|
||||
var DATA_KEY = 'lt.grid-only'
|
||||
var EVENT_KEY = '.' + DATA_KEY
|
||||
|
||||
var Event = {
|
||||
CLICK : 'click' + EVENT_KEY
|
||||
}
|
||||
|
||||
var Css = {
|
||||
xs : 'lt-only-xs',
|
||||
sm : 'lt-only-sm',
|
||||
md : 'lt-only-md',
|
||||
lg : 'lt-only-lg'
|
||||
}
|
||||
|
||||
var Selector = {
|
||||
TOGGLE : '[data-toggle="lt-grid-only"]'
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {jQuery} element
|
||||
* @param {Object} options
|
||||
*/
|
||||
function LTGridOnly(element, options) {
|
||||
this.$element = $(element)
|
||||
this.$target = $(options.target)[LTGrid.NAME]()
|
||||
this.ltGrid = this.$target.data(LTGrid.DATA_KEY)
|
||||
}
|
||||
|
||||
// getters
|
||||
|
||||
LTGridOnly.NAME = NAME
|
||||
|
||||
LTGridOnly.DATA_KEY = DATA_KEY
|
||||
|
||||
LTGridOnly.EVENT_KEY = EVENT_KEY
|
||||
|
||||
// public
|
||||
|
||||
/**
|
||||
* Save original params for later use
|
||||
*/
|
||||
LTGridOnly.prototype.originalParams = function () {
|
||||
if (undefined === this.ltGrid.options().originalParams) {
|
||||
this.ltGrid.options().originalParams = this.ltGrid.options().params
|
||||
}
|
||||
|
||||
return this.ltGrid.options().originalParams
|
||||
}
|
||||
|
||||
/**
|
||||
* Compact the grid for current size
|
||||
* @param {String} size
|
||||
*/
|
||||
LTGridOnly.prototype.set = function (size) {
|
||||
var original = this.originalParams()
|
||||
var onlyClasses = $.map(
|
||||
Css,
|
||||
function (name) {
|
||||
return name
|
||||
}
|
||||
)
|
||||
|
||||
this.$target.removeClass(onlyClasses.join(' '))
|
||||
|
||||
if (size) {
|
||||
var params = {}
|
||||
params[size] = original[size]
|
||||
params[size].maxWidth = Number.MAX_VALUE
|
||||
|
||||
this.$target.addClass(Css[size])
|
||||
this.ltGrid.option('params', params)
|
||||
} else {
|
||||
this.ltGrid.option('params', original)
|
||||
}
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
LTGridOnly._jQueryInterface = function (config, a1) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data(DATA_KEY)
|
||||
var _config = $.extend(
|
||||
true,
|
||||
{},
|
||||
$this.data(),
|
||||
typeof config === 'object' && config
|
||||
)
|
||||
|
||||
if (!data) {
|
||||
data = new LTGridOnly(this, _config)
|
||||
$this.data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
data[config](a1)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document)
|
||||
.on(Event.CLICK, Selector.TOGGLE, function (event) {
|
||||
var $item = $(event.target)
|
||||
|
||||
$item[LTGridOnly.NAME]('set', $item.data('only'))
|
||||
})
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = LTGridOnly._jQueryInterface
|
||||
$.fn[NAME].LTGridOnly = LTGridOnly
|
||||
|
||||
return LTGridOnly
|
||||
|
||||
})(jQuery)
|
||||
|
||||
/* exported LTRect */
|
||||
|
||||
var LTRect = (function ($) {
|
||||
|
||||
|
||||
|
||||
var NAME = 'ltRect'
|
||||
var DATA_KEY = 'lt.rect'
|
||||
|
||||
var LTRect = {
|
||||
NAME: NAME,
|
||||
DATA_KEY: DATA_KEY
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter / setter for div element's rect.
|
||||
* Uses its css classes to laod the initial rect for a given size,
|
||||
* then caches in data.
|
||||
* Each screen size has its own rect
|
||||
*
|
||||
* @param {string} size xs, sm, md or lg
|
||||
* @param {Rect} newRect a Rect object to set
|
||||
* @return {jQuery}
|
||||
*/
|
||||
$.fn[NAME] = function (size, newRect) {
|
||||
if (undefined === newRect) {
|
||||
if (undefined === this.data(DATA_KEY + size)) {
|
||||
this.data(DATA_KEY + size, (new Rect()).loadCss(this.attr('class'), size))
|
||||
}
|
||||
return this.data(DATA_KEY + size)
|
||||
}
|
||||
|
||||
this.data(DATA_KEY + size, newRect)
|
||||
this.attr('class', newRect.setCss(this.attr('class'), size))
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
return LTRect
|
||||
|
||||
})(jQuery)
|
||||
|
||||
/* exported LTSize */
|
||||
|
||||
var LTSize = (function ($) {
|
||||
|
||||
|
||||
|
||||
var NAME = 'ltSize'
|
||||
|
||||
var LTSize = {
|
||||
NAME: NAME
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current size of the grid
|
||||
*/
|
||||
$.fn[NAME] = function () {
|
||||
return this[LTGrid.NAME]().data(LTGrid.DATA_KEY).size()
|
||||
}
|
||||
|
||||
return LTSize
|
||||
|
||||
})(jQuery)
|
||||
|
||||
/* exported Rect */
|
||||
|
||||
/**
|
||||
* Object that represents a rectangle with many supporting methods
|
||||
*/
|
||||
var Rect = (function () {
|
||||
|
||||
|
||||
|
||||
var paramNames = ['x', 'y', 'w', 'h']
|
||||
|
||||
/**
|
||||
* @param {Number} x default 0
|
||||
* @param {Number} y default 0
|
||||
* @param {Number} w width, default 1
|
||||
* @param {Number} h height, default 1
|
||||
*/
|
||||
function Rect(x, y, w, h) {
|
||||
this.x = x || 0
|
||||
this.y = y || 0
|
||||
this.w = w || 1
|
||||
this.h = h || 1
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {Number}
|
||||
*/
|
||||
Rect.prototype.bottom = function () {
|
||||
return this.y + this.h
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {Number}
|
||||
*/
|
||||
Rect.prototype.right = function () {
|
||||
return this.x + this.w
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if this rect is intersecting with another rect
|
||||
*
|
||||
* @param {Rect} rect
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Rect.prototype.intersect = function (rect) {
|
||||
return this.x < rect.right() && this.right() > rect.x && this.y < rect.bottom() && this.bottom() > rect.y
|
||||
}
|
||||
|
||||
/**
|
||||
* Modify a "css classes" string
|
||||
* with the pos and size of this rect,
|
||||
* for a specific screen size
|
||||
*
|
||||
* @param {String} classes html classes
|
||||
* @param {String} size xs, sm, md or lg
|
||||
* @return {String}
|
||||
*/
|
||||
Rect.prototype.setCss = function (classes, size) {
|
||||
var self = this
|
||||
|
||||
paramNames.forEach(function (name) {
|
||||
classes = classes.replace(new RegExp('lt-' + size + '-' + name + '-(\\d+)'), 'lt-' + size + '-' + name + '-' + self[name])
|
||||
})
|
||||
|
||||
return classes
|
||||
}
|
||||
|
||||
/**
|
||||
* Load data from "css classes", for a specific screen size
|
||||
*
|
||||
* @param {String} classes html classes
|
||||
* @param {String} size xs, sm, md or lg
|
||||
*/
|
||||
Rect.prototype.loadCss = function (classes, size) {
|
||||
var self = this
|
||||
|
||||
paramNames.forEach(function (name) {
|
||||
var match = classes.match(new RegExp('lt-' + size + '-' + name + '-(\\d+)'))
|
||||
|
||||
if (match) {
|
||||
self[name] = parseInt(match[1], 10)
|
||||
}
|
||||
})
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
return Rect
|
||||
})()
|
||||
|
||||
/* exported Store */
|
||||
|
||||
/**
|
||||
* A class to store / retrieve element inside of dataTransfer object of an event
|
||||
* Fall back to a static variable if dataTransfer is not available
|
||||
*/
|
||||
var Store = (function () {
|
||||
|
||||
|
||||
|
||||
var Store = {}
|
||||
|
||||
/**
|
||||
* Genrate a time based random number
|
||||
*
|
||||
* @return {Number}
|
||||
*/
|
||||
Store.getRandomNumber = function () {
|
||||
return Math.round(new Date().getTime() + (Math.random() * 100))
|
||||
}
|
||||
|
||||
/**
|
||||
* Make sure the item has an id to quickly find it
|
||||
* Do not override existing ids
|
||||
*
|
||||
* @param {Element} item
|
||||
* @return {String}
|
||||
*/
|
||||
Store.getId = function (item) {
|
||||
if (!item.id) {
|
||||
item.id = 'lt-' + this.getRandomNumber()
|
||||
}
|
||||
|
||||
return item.id
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear internal storage variable
|
||||
*/
|
||||
Store.clear = function () {
|
||||
this.item = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the element
|
||||
*
|
||||
* @param {Event} event
|
||||
* @param {Element} item
|
||||
*/
|
||||
Store.set = function (event, item) {
|
||||
|
||||
this.item = JSON.stringify({
|
||||
LTWidget: this.getId(item)
|
||||
})
|
||||
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.setData('text', this.item)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve stored element
|
||||
*
|
||||
* @param {Event} event
|
||||
* @return {Element}
|
||||
*/
|
||||
Store.get = function (event) {
|
||||
var dataString = (event.dataTransfer && event.dataTransfer.getData('text')) || this.item
|
||||
|
||||
if (dataString) {
|
||||
var data = JSON.parse(dataString)
|
||||
return document.getElementById(data.LTWidget)
|
||||
}
|
||||
}
|
||||
|
||||
return Store
|
||||
})()
|
||||
|
||||
LTGrid.Rect = Rect
|
||||
LTGrid.Grid = Grid
|
||||
|
||||
return LTGrid
|
||||
|
||||
})(jQuery)
|
||||
//# sourceMappingURL=layout-grid.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user