Skip to content
This repository was archived by the owner on Feb 12, 2021. It is now read-only.

Implement gridstack min/max item dimension #8

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Implement gridstack min/max item dimension #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
af92722
implement min/max and width/height of gs-items
May 25, 2016
df2bc9d
update demo with min/max and with/height of gs-items
May 25, 2016
8d7491e
[ UPDATE ] : dist files
May 26, 2016
69e6ec8
[ FIX ] : indentation
May 27, 2016
0a407c7
[ FIX ] : indentation#2
May 27, 2016
0495f6b
[ ADD ] : gulpfile
Jun 13, 2016
c12ed85
[ UPDATE ] : restore gridstack exposition by directive
Jun 13, 2016
adbbe64
[ UPDATE ] : demo
Jun 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
node_modules
/bower_components
.bowerrc
gulpfile.js
264 changes: 161 additions & 103 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,112 +1,170 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gridstack-angular demo</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/gridstack/dist/gridstack.css"/>
<link rel="stylesheet" href="bower_components/gridstack/dist/gridstack-extra.css"/>

<style type="text/css">
.grid1 {
background: #c6ecf1;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #732145;
}
</style>
</head>
<body ng-app="GridStack" ng-controller="DemoCtrl">
<div class="container-fluid">
<h1>gridstack-angular demo</h1>
<p>{{widgets}}</p>
<div>
<a class="btn btn-primary" ng-click="addWidget()" href="#">Add Widget</a>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div gridstack class="grid-stack grid1" options="options" on-change="onChange(event,items)" on-drag-start="onDragStart(event,ui)" on-drag-stop="onDragStop(event,ui)" on-resize-start="onResizeStart(event,ui)" on-resize-stop="onResizeStop(event,ui)">
<div gridstack-item ng-repeat="w in widgets" class="grid-stack-item" gs-item-x="w.x" gs-item-y="w.y"
gs-item-width="w.width" gs-item-height="w.height" gs-item-autopos="1" on-item-added="onItemAdded(item)" on-item-removed="onItemRemoved(item)">
<head>
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gridstack-angular demo</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/gridstack/dist/gridstack.css"/>
<link rel="stylesheet" href="bower_components/gridstack/dist/gridstack-extra.css"/>

<style type="text/css">
.grid1 {
background: #c6ecf1;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #732145;
}

</style>
</head>
<body ng-app="GridStack" ng-controller="DemoCtrl">
<div class="container-fluid">
<h1>gridstack-angular demo</h1>
<p>{{widgets}}</p>
<div>
<a class="btn btn-primary" ng-click="addWidget()" href="#">Add Widget</a>
<a class="btn" ng-class="disabled ? 'btn-success' : 'btn-danger'" ng-click="disabled ? enable() : disable()" href="#">{{disabled ? "enable" : "disable"}}</a>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div gridstack gridstack-handler="gridstacker" class="grid-stack grid1" disabled="disabled" options="options" on-change="onChange(event,items)" on-drag-start="onDragStart(event,ui)" on-drag-stop="onDragStop(event,ui)" on-resize-start="onResizeStart(event,ui)" on-resize-stop="onResizeStop(event,ui)">
<div
gridstack-item
ng-repeat="w in widgets"
class="grid-stack-item"
gs-item-x="w.x"
gs-item-y="w.y"
gs-item-max-width="w.maxWidth"
gs-item-max-height="w.maxHeight"
gs-item-min-width="w.minWidth"
gs-item-min-height="w.minHeight"
gs-item-width="w.width"
gs-item-height="w.height"
gs-item-autopos="1"
on-item-added="onItemAdded(item)"
on-item-removed="onItemRemoved(item)">
<div class="grid-stack-item-content">
<a class="btn btn-primary" ng-click="removeWidget(w)" href="#">remove</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/lodash/dist/lodash.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/gridstack/dist/gridstack.js"></script>
<script src="../src/gridstack.controller.js"></script>
<script src="../src/gridstack.directive.js"></script>
<script src="../src/gridstackitem.directive.js"></script>

<script type="text/javascript">
var app = angular.module('GridStack', ['gridstack-angular']).
controller('DemoCtrl', function($scope, $log) {

$scope.widgets = [{ x:0, y:0, width:1, height:1 }, { x:0, y:0, width:3, height:1 }];

$scope.options = {
cell_height: 200,
vertical_margin: 10
};

$scope.addWidget = function() {
var newWidget = { x:0, y:0, width:1, height:1 };
$scope.widgets.push(newWidget);
};

$scope.removeWidget = function(w) {
var index = $scope.widgets.indexOf(w);
$scope.widgets.splice(index, 1);
};

$scope.onChange = function(event, items) {
$log.log("onChange event: "+event+" items:"+items);
};

$scope.onDragStart = function(event, ui) {
$log.log("onDragStart event: "+event+" ui:"+ui);
};

$scope.onDragStop = function(event, ui) {
$log.log("onDragStop event: "+event+" ui:"+ui);
};

$scope.onResizeStart = function(event, ui) {
$log.log("onResizeStart event: "+event+" ui:"+ui);
};

$scope.onResizeStop = function(event, ui) {
$log.log("onResizeStop event: "+event+" ui:"+ui);
};

$scope.onItemAdded = function(item) {
$log.log("onItemAdded item: "+item);
};

$scope.onItemRemoved = function(item) {
$log.log("onItemRemoved item: "+item);
};

});
</script>

</body>
</html>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/lodash/dist/lodash.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/gridstack/dist/gridstack.js"></script>
<script src="../src/gridstack.controller.js"></script>
<script src="../src/gridstack.directive.js"></script>
<script src="../src/gridstackitem.directive.js"></script>

<script type="text/javascript">
var app = angular.module('GridStack', ['gridstack-angular'])
.controller('DemoCtrl', function($scope, $log) {

$scope.widgets = [
{
x: 0,
y: 0,
width: 1,
height: 1,
maxWidth: 3,
minWidth: 1,
maxHeight: 3,
minHeight: 1
}, {
x: 0,
y: 0,
width: 3,
height: 1,
maxWidth: 3,
minWidth: 1,
maxHeight: 3,
minHeight: 1
}
];

$scope.disabled = false;

$scope.gridstacker = null;

$scope.options = {
cell_height: 200,
vertical_margin: 10
};

$scope.addWidget = function() {
var newWidget = {
x: 0,
y: 0,
width: 1,
height: 1,
maxWidth: 3,
minWidth: 1,
maxHeight: 3,
minHeight: 1
};
$scope.widgets.push(newWidget);
};

$scope.removeWidget = function(w) {
var index = $scope.widgets.indexOf(w);
$scope.widgets.splice(index, 1);
};

$scope.onChange = function(event, items) {
$log.log("onChange event: " + event + " items:" + items);
};

$scope.onDragStart = function(event, ui) {
$log.log("onDragStart event: " + event + " ui:" + ui);
};

$scope.onDragStop = function(event, ui) {
$log.log("onDragStop event: " + event + " ui:" + ui);
};

$scope.onResizeStart = function(event, ui) {
$log.log("onResizeStart event: " + event + " ui:" + ui);
};

$scope.onResizeStop = function(event, ui) {
$log.log("onResizeStop event: " + event + " ui:" + ui);
};

$scope.onItemAdded = function(item) {
$log.log("onItemAdded item: " + item);
};

$scope.onItemRemoved = function(item) {
$log.log("onItemRemoved item: " + item);
};

$scope.enable = function(){
$scope.gridstacker.enable();
$scope.disabled = false;
console.log("enabled");
};

$scope.disable = function(){
$scope.gridstacker.disable();
$scope.disabled = true;
console.log("diasbled");
};

});
</script>

</body>
</html>
Loading