nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-08-01 00:24:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add 'lib/gridster/' from commit 'a7ed9a4adec9f7c8361ad6f392993a1f0b9c1601'

Browse Source 
git-subtree-dir: lib/gridster
git-subtree-mainline: 80f8419dac
git-subtree-split: a7ed9a4ade
This commit is contained in:
laf
2015-11-10 21:43:44 +00:00
parent 80f8419dac a7ed9a4ade
commit c5d4c0a49f
56 changed files with 19022 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/gridster/demos/SwapDrop.html
+56
View File
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gridster Grid Swapping Demo</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var gridster = "";
$(document).ready(function () {
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
shift_larger_widgets_down: false
});
});
</script>
</head>
<body>
<style>
.gridster, .content {
width: 940px;
margin: 0 auto;
}
</style>
<div class="content">
<h1>Grid with larger widgets swapping spots with smaller ones</h1>
<p>This demo represents using the branch in swap mode. This works best with shift_larger_widgets_down set to "false". However, smaller widgets do
not displace larger ones.</p>
</div>
<div class="gridster">
<ul style="height: 480px; position: relative; ">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"></li>
<li class="try gs_w" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs_w"></li>
</ul>
</div>
</body>
</html>
lib/gridster/demos/adding-widgets-dynamically.html
+54
View File
@@ -0,0 +1,54 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Add widgets dynamically &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Add widgets dynamically</h1>
<p>Create a grid adding widgets from an Array (not from HTML) using <code>add_widget</code> method. Widget position (col, row) not specified.</p>
<div class="gridster">
<ul></ul>
</div>
<script type="text/javascript" id="code">
var gridster;
$(function () {
gridster = $(".gridster > ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [100, 55]
}).data('gridster');
var widgets = [
['<li>0</li>', 1, 2],
['<li>1</li>', 3, 2],
['<li>2</li>', 3, 2],
['<li>3</li>', 2, 1],
['<li>4</li>', 4, 1],
['<li>5</li>', 1, 2],
['<li>6</li>', 2, 1],
['<li>7</li>', 3, 2],
['<li>8</li>', 1, 1],
['<li>9</li>', 2, 2],
['<li>10</li>', 1, 3]
];
$.each(widgets, function (i, widget) {
gridster.add_widget.apply(gridster, widget)
});
});
</script>
</body>
</html>
lib/gridster/demos/assets/img/sprite.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

lib/gridster/demos/assets/js/plugins.js
+25
View File
@@ -0,0 +1,25 @@
// Avoid `console` errors in browsers that lack a console.
(function () {
var method;
var noop = function () {
};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
// Place any jQuery/helper plugins in here.
lib/gridster/demos/assets/less/demo.less
+86
View File
@@ -0,0 +1,86 @@
/*! gridster.js - v0.6.10 - 2015-05-31
* https://dsmorse.github.io/gridster.js/
* Copyright (c) 2015 ducksboard; Licensed MIT */
@bg-color: #26941f;
body {
background: @bg-color;
font-size: 16px;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #ffffff;
margin: 0;
}
h1, h2, h3, p {
margin: 10px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.demo {
margin: 3em 0;
padding: 7.5em 0 5.5em;
background: @bg-color;
}
.demo:hover {
.gridster {
margin: 0 auto;
opacity: .8;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
-ms-transition: opacity .6s;
transition: opacity .6s;
}
}
.content {
color: white;
}
.gridster {
.gs-w {
background: #61A9CF;
cursor: pointer;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.player {
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
background: #BBB;
}
.gs-w.try {
background-image: url(../img/sprite.png);
background-repeat: no-repeat;
background-position: 37px -169px;
}
.preview-holder {
border: none !important;
border-radius: 0 !important;
background: red !important;
}
ul {
background-color: #EFEFEF;
}
li {
font-size: 1em;
font-weight: bold;
text-align: center;
line-height: 100%;
}
}
ul {
list-style-type: none;
}
li {
list-style: none;
font-weight: bold;
}
.gridster-box {
position: relative;
width: 100%;
height: 100%;
}
.controls {
margin-bottom: 20px;
}
lib/gridster/demos/chaosWidget.html
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Resize &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src=//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js></script>
<script src="../dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Resize</h1>
<p>As hommage to Netflix's <a href="https://github.com/Netflix/SimianArmy/wiki/Chaos-Monkey">Chaos Monkey</a>, this demo page is for testing. It attempts to insert a widget at a random location to ensure the overlap deconfliction locic works.</p>
<div class="controls">
<button class="js-fixed-random">Insert widget at random location</button>
<button class="js-random-random">Insert random sized widget at random location</button>
</div>
<div class="gridster">
<ul style="z-index: 2; float: left;position: absolute">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
</ul>
<svg width="100%" height="800px" xmlns="http://www.w3.org/2000/svg" style="float: left;
position: relative;
z-index: 5;
margin-top: 15px;">
<defs>
<pattern id="grid" width="105" height="105" patternUnits="userSpaceOnUse">
<rect width="105" height="105" fill="url(#smallGrid)"/>
<path d="M 105 0 L 0 0 0 105" fill="none" stroke="black" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</div>
<script type="text/javascript">
Math.seedrandom();
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
<script type="text/javascript">
var gridster;
var nextSimian = 10;
$(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
avoid_overlapped_widgets: true,
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');
$('.js-random-random').on('click', function () {
gridster.add_widget('<li>' + nextSimian + '</li>', getRandomInt(1, 5), getRandomInt(1, 5), getRandomInt(1, 15), getRandomInt(1, 15));
nextSimian++;
});
$('.js-fixed-random').on('click', function () {
gridster.add_widget('<li>' + nextSimian + '</li>', 1 , 1, getRandomInt(1, 15), getRandomInt(1, 15));
nextSimian++;
});
});
</script>
</body>
</html>
lib/gridster/demos/custom-drag-handle.html
+96
View File
@@ -0,0 +1,96 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Custom drag handle &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Custom drag handle</h1>
<p>Restricts dragging from starting unless the mousedown occurs on the specified element(s).</p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<header>|||</header>
0
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
<header>|||</header>
1
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<header>|||</header>
2
</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">
<header>|||</header>
3
</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
<header>|||</header>
4
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<header>|||</header>
5
</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
<header>|||</header>
6
</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
<header>|||</header>
7
</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
<header>|||</header>
8
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
<header>|||</header>
9
</li>
</ul>
</div>
<style type="text/css">
.gridster li header {
background: #999;
display: block;
font-size: 20px;
line-height: normal;
padding: 4px 0 6px;
margin-bottom: 20px;
cursor: move;
}
</style>
<script type="text/javascript">
var gridster;
$(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 120],
widget_margins: [5, 5],
draggable: {
handle: 'header'
}
}).data('gridster');
});
</script>
</body>
</html>
lib/gridster/demos/dynamic-grid-width.html
+52
View File
@@ -0,0 +1,52 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Dynamic grid width &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Dynamic grid width</h1>
<p>Drag or resize some widgets to the right side. Use <code>max_cols</code> option to set a maximum number of columns for the grid.</p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
</ul>
</div>
<script type="text/javascript">
var gridster;
$(function () {
var log = document.getElementById('log');
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
autogrow_cols: true,
resize: {
enabled: true
}
}).data('gridster');
});
</script>
</body>
</html>
lib/gridster/demos/expandable-widgets.html
+64
View File
@@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Expandable widgets &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Expandable widgets</h1>
<p>Expand widgets when hover on them using <code>resize_widget</code> method.</p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">0</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">1</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">2</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">3</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">5</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">6</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">7</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">8</li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">9</li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1">10</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">11</li>
</ul>
</div>
<script type="text/javascript">
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
<script type="text/javascript">
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone'
}).data('gridster');
gridster.$el.ready(function () {
// resize widgets on hover
gridster.$el
.on('mouseenter', 'li', function () {
gridster.resize_widget($(this), 3, 3);
})
.on('mouseleave', 'li', function () {
gridster.resize_widget($(this), 1, 1);
});
});
</script>
</body>
</html>
lib/gridster/demos/grid-from-serialize.html
+63
View File
@@ -0,0 +1,63 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Grid from serialize &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Build grid from serialized positions</h1>
<p>Build a entire new grid from previously stored positions obtained with <code>serialize</code> method.</p>
<div class="controls">
<button class="js-seralize">Build from serialize</button>
</div>
<div class="gridster">
<ul>
</ul>
</div>
<script type="text/javascript">
var gridster;
// same object than generated with gridster.serialize() method
var serialization = [
{ col: 1, row: 1, size_x: 2, size_y: 2 },
{ col: 3, row: 1, size_x: 1, size_y: 2 },
{ col: 4, row: 1, size_x: 1, size_y: 1 },
{ col: 2, row: 3, size_x: 3, size_y: 1 },
{ col: 1, row: 4, size_x: 1, size_y: 1 },
{ col: 1, row: 3, size_x: 1, size_y: 1 },
{ col: 2, row: 4, size_x: 1, size_y: 1 },
{ col: 2, row: 5, size_x: 1, size_y: 1 }
];
// sort serialization
serialization = Gridster.sort_by_row_and_col_asc(serialization);
$(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5]
}).data('gridster');
$('.js-seralize').on('click', function () {
gridster.remove_all_widgets();
$.each(serialization, function () {
gridster.add_widget('<li />', this.size_x, this.size_y, this.col, this.row);
});
});
});
</script>
</body>
</html>
lib/gridster/demos/index.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>Gridster Demos</title>
<link rel="stylesheet" href="assets/css/demo.css">
</head>
<body>
<div class="content">
<h2>Samples</h2>
</div>
<ul>
<li><a href="adding-widgets-dynamically.html">Adding widgets dynamically</a></li>
<li><a href="custom-drag-handle.html">Custom drag handle</a></li>
<li><a href="expandable-widgets.html">Expandable widgets</a></li>
<li><a href="grid-from-serialize.html">Build grid from serialize</a></li>
<li><a href="multiple-grids.html">Multiple gridster instances on the same page</a></li>
<li><a href="resize.html">Resizable widgets</a></li>
<li><a href="chaosWidget.html">Chaos Widgets</a></li>
<li><a href="resize-limits.html">Resizable widgets with constraints</a></li>
<li><a href="serialize.html">Serialize widgets positions</a></li>
<li><a href="using-drag-callbacks.html">Using drag callbacks</a></li>
<li><a href="using-resize-callbacks.html">Using resize callbacks</a></li>
<li><a href="dynamic-grid-width.html">Dynamic grid width</a></li>
<li><a href="responsive.html">Responsive grid width</a></li>
<li><a href="SwapDrop.html">Grid with larger widgets swapping spots with smaller ones</a></li>
<li><a href="sticky-postion.html">Grid that allows widgets to be exactly placed anywhere</a></li>
</ul>
</body>
</html>
lib/gridster/demos/jquery.gridster.demo2.html
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<html>
<head>
<title>demo</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="3"></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="3"></li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1"></li>
<li data-row="4" data-col="3" data-sizex="1" data-sizey="1"></li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1"></li>
</ul>
</div>
<script type="text/javascript">
var api;
$(function () {
api = $(".gridster ul").gridster({
draggable: {
stop: function (event, ui, self) {
// $('.overlapped-area').hide();
this.$wrapper.addClass('sorting');
},
start: function (event, ui, self) {
this.$wrapper.removeClass('sorting');
// $('.overlapped-area').show();
}
},
collision: {
on_overlap_start: function (collider) {
// $(collider).data('graph').show();
//$(this).data('collision', collider);
},
on_overlap_stop: function (collider) {
//$(this).data('collision', null);
},
on_overlap: function (c) {
//$(this).data('collision', c);
}
}
}).data('gridster');
});
</script>
</body>
</html>
lib/gridster/demos/multiple-grids.html
+71
View File
@@ -0,0 +1,71 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Multiple gridster intances &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Multiple gridster instances with different configurations</h1>
<p>When using multiple gridster instances on the same page you can scope the CSS code generated by gridster using <code>namespace</code> config
option.</p>
<h2>Demo 1</h2>
<div id="demo-1" class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
</ul>
</div>
<h2>Demo 2</h2>
<div id="demo-2" class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
</ul>
</div>
<script type="text/javascript">
var gridster = [];
$(function () {
gridster[0] = $("#demo-1 ul").gridster({
namespace: '#demo-1',
widget_base_dimensions: [100, 55],
widget_margins: [5, 5]
}).data('gridster');
gridster[1] = $("#demo-2 ul").gridster({
namespace: '#demo-2',
widget_base_dimensions: [200, 110],
widget_margins: [10, 10]
}).data('gridster');
});
</script>
</body>
</html>
lib/gridster/demos/resize-limits.html
+76
View File
@@ -0,0 +1,76 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Resize &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Resize with limits</h1>
<p>Use <code>resize.max_size</code> and <code>resize.min_size</code> config options or <code>data-max-sizex</code>, <code>data-max-sizey</code>,
<code>data-min-sizex</code> and <code>data-min-sizey</code> HTML attributes to limit widget dimensions when resizing.</p>
<p>If a global max_size is specified through the config option, can be overwrited in specified widgets with HTML data-attributes or using <code>set_widget_max_size</code>
method. This page has a global max limit of 4x4</p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="6" data-min-sizex="2" data-min-sizey="6" data-max-sizex="2" data-max-sizey="6">
0
<br>
<small>Overridden to 2, 6</small>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-max-sizex="6" data-max-sizey="2">
1
<br>
<small>Overridden max-size to 6, 2</small>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
<li data-row="1" data-col="5" data-sizex="3" data-sizey="3" data-min-sizex="3" data-min-sizey="3">
9
<br>
<small>Overridden min-size to 3, 3</small>
</li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="2">10</li>
<li data-row="4" data-col="3" data-sizex="1" data-sizey="2">11</li>
<li data-row="5" data-col="4" data-sizex="1" data-sizey="1">12</li>
<li data-row="6" data-col="2" data-sizex="3" data-sizey="1">13</li>
<li data-row="4" data-col="5" data-sizex="1" data-sizey="2">14</li>
<li data-row="6" data-col="5" data-sizex="1" data-sizey="1">15</li>
<li data-row="7" data-col="3" data-sizex="1" data-sizey="1">16</li>
</ul>
</div>
<script type="text/javascript">
var gridster;
$(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true,
max_size: [4, 4],
min_size: [1, 1]
}
}).data('gridster');
});
</script>
</body>
</html>
lib/gridster/demos/resize.html
+65
View File
@@ -0,0 +1,65 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Resize &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Resize</h1>
<p>Grab the right or bottom border and drag to the desired width or height.</p>
<div class="controls">
<button class="js-resize-random">Resize random widget</button>
</div>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
</ul>
</div>
<script type="text/javascript">
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
<script type="text/javascript">
var gridster;
$(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');
$('.js-resize-random').on('click', function () {
gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
getRandomInt(1, 4), getRandomInt(1, 4))
});
});
</script>
</body>
</html>
lib/gridster/demos/responsive.html
+96
View File
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Gridster Responsive Demo</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var gridster = null;
$(document).ready(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: ['auto', 140],
autogenerate_stylesheet: true,
min_cols: 1,
max_cols: 6,
widget_margins: [5, 5],
resize: {
enabled: true
}
}).data('gridster');
$('.gridster ul').css({'padding': '0'});
});
</script>
</head>
<body>
<div class="content">
<h1>Responsive Layout</h1>
<p>This demo represents using the branch in responsive mode. This makes the grid as wide as the screen and responds to changes in browser
width.</p>
</div>
<div class="gridster">
<ul>
<li data-sizey="2" data-sizex="2" data-col="4" data-row="1">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="1" data-row="3">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="2" data-row="3">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="2" data-sizex="2" data-col="1" data-row="1">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="3" data-row="1">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="3" data-row="3">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="4" data-row="3">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="6" data-row="1">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="5" data-row="3">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="3" data-row="2">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
<li data-sizey="1" data-sizex="1" data-col="6" data-row="2">
<div class="gridster-box">
<div class="handle-resize"></div>
</div>
</li>
</ul>
</div>
</body>
</html>
lib/gridster/demos/serialize.html
+89
View File
@@ -0,0 +1,89 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Serialize &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#log {
display: block;
width: 100%;
height: 20px;
margin-bottom: 20px;
-webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-ms-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
transition: height 0.3s ease;
}
#log:focus {
height: 100px;
}
</style>
</head>
<body>
<h1>Serialize positions</h1>
<p>Use <code>serialize</code> method to get widget positions. It returns a Array of objects that can be used as a JSON object.</p>
<div class="controls">
<button class="js-seralize">Serialize</button>
</div>
<textarea id="log"></textarea>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="2">10</li>
<li data-row="4" data-col="3" data-sizex="1" data-sizey="2">11</li>
<li data-row="5" data-col="4" data-sizex="1" data-sizey="1">12</li>
<li data-row="6" data-col="2" data-sizex="3" data-sizey="1">13</li>
<li data-row="4" data-col="5" data-sizex="1" data-sizey="2">14</li>
<li data-row="6" data-col="5" data-sizex="1" data-sizey="1">15</li>
<li data-row="7" data-col="3" data-sizex="1" data-sizey="1">16</li>
</ul>
</div>
<script type="text/javascript">
var gridster;
$(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5]
}).data('gridster');
$('.js-seralize').on('click', function () {
var s = gridster.serialize();
$('#log').val(JSON.stringify(s));
})
});
</script>
</body>
</html>
lib/gridster/demos/sticky-postion.html
+50
View File
@@ -0,0 +1,50 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; sticky position widgets &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Sticky position widgets</h1>
<p>Widgets can be moved to an exact postion on the grid and the grid will not attempt to collapse it down to a smaller size. Also widgets will not move out of the way automatically, but will move only on mouse up</p>
<div class="gridster">
<ul>
<ul class="task-card-list">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="task-card">0</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1" class="task-card">1</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1" class="task-card">2</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="task-card">3</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1" class="task-card">4</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="2" class="task-card">5</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1" class="task-card">6</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="task-card">7</li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1" class="task-card">8</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="task-card">9</li>
</ul>
</div>
<script type="text/javascript">
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
shift_widgets_up: false,
shift_larger_widgets_down: false,
collision: {
wait_for_mouseup: true
}
}).data('gridster');
</script>
</body>
</html>
lib/gridster/demos/using-drag-callbacks.html
+75
View File
@@ -0,0 +1,75 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Using drag callbacks &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<style>
#log {
margin-top: 20px;
max-height: 400px;
overflow: auto;
max-width: 250px;
border: 1px solid #DDD;
}
</style>
</head>
<body>
<h1>Drag callbacks</h1>
<p>Drag some widgets and see the log below.</p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
</ul>
</div>
<h3>Log</h3>
<div id="log"></div>
<script type="text/javascript">
var gridster;
$(function () {
var log = document.getElementById('log');
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
draggable: {
start: function (e, ui, $widget) {
log.innerHTML = 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
},
drag: function (e, ui, $widget) {
log.innerHTML = 'DRAG offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >" + log.innerHTML;
},
stop: function (e, ui, $widget) {
log.innerHTML = 'STOP position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
}
}
}).data('gridster');
});
</script>
</body>
</html>
lib/gridster/demos/using-resize-callbacks.html
+78
View File
@@ -0,0 +1,78 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; Using resize callbacks &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<style>
#log {
margin-top: 20px;
max-height: 400px;
overflow: auto;
max-width: 250px;
border: 1px solid #DDD;
}
</style>
</head>
<body>
<h1>Resize callbacks</h1>
<p>Resize some widgets and see the log below.</p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
</ul>
</div>
<h3>Log</h3>
<div id="log"></div>
<script type="text/javascript">
var gridster;
$(function () {
var log = document.getElementById('log');
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
resize: {
enabled: true,
start: function (e, ui, $widget) {
log.innerHTML = 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
},
resize: function (e, ui, $widget) {
log.innerHTML = 'RESIZE offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >" + log.innerHTML;
},
stop: function (e, ui, $widget) {
log.innerHTML = 'STOP position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML;
}
}
}).data('gridster');
});
</script>
</body>
</html>