diff --git a/.jshintrc b/.jshintrc index 7ceeca24af..a3b7e45610 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,13 +1,26 @@ { - "curly": true, - "eqeqeq": true, - "immed": true, - "latedef": true, - "newcap": true, - "noarg": true, - "sub": true, - "undef": true, - "boss": true, - "eqnull": true, - "browser": true + "curly": true, + "eqeqeq": true, + "immed": true, + "latedef": true, + "expr":true, + "newcap": true, + "noarg": true, + "sub": true, + "undef": true, + "boss": true, + "eqnull": true, + "browser": true, + "node": true, + "qunit": true, + + "globals": { + "jQuery": true, + "define": false, + "require": false, + "delay": false, + "debounce": false, + "throttle": false, + "Gridster": false + } } diff --git a/Gruntfile.js b/Gruntfile.js index 7c0d28f01a..e07520a678 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,183 +1,160 @@ /*global module:false*/ -module.exports = function(grunt) { +module.exports = function (grunt) { - // Project configuration. - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - meta: { - banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + - '<%= grunt.template.today("yyyy-mm-dd") %>\n' + - '<%= pkg.homepage ? "* " + pkg.homepage : "" %>\n' + - '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + - ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n\n', + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + meta: { + banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + + '<%= pkg.homepage ? "* " + pkg.homepage : "" %>\n' + + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n\n', - minibanner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + - '<%= grunt.template.today("yyyy-mm-dd") %> - ' + - '<%= pkg.homepage ? "* " + pkg.homepage + " - " : "" %>' + - 'Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + - ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */ ' - }, - concat: { - options: { - stripBanners: true, - banner: '<%= meta.banner %>' - }, - dist_js: { - src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js'], - dest: 'dist/jquery.<%= pkg.name %>.js' - }, + minibanner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + + '<%= grunt.template.today("yyyy-mm-dd") %> - ' + + '<%= pkg.homepage ? "* " + pkg.homepage + " - " : "" %>' + + 'Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */ ' + }, + concat: { + options: { + stripBanners: true, + banner: '<%= meta.banner %>' + }, + dist_js: { + src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js'], + dest: 'dist/jquery.<%= pkg.name %>.js' + }, - dist_extras_js: { - src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js', 'src/jquery.<%= pkg.name %>.extras.js'], - dest: 'dist/jquery.<%= pkg.name %>.with-extras.js' - }, + dist_extras_js: { + src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js', 'src/jquery.<%= pkg.name %>.extras.js'], + dest: 'dist/jquery.<%= pkg.name %>.with-extras.js' + }, - dist_css: { - src: ['src/jquery.<%= pkg.name %>.css'], - dest: 'dist/jquery.<%= pkg.name %>.css' - }, + dist_css: { + src: ['src/jquery.<%= pkg.name %>.css'], + dest: 'dist/jquery.<%= pkg.name %>.css' + } + }, + uglify: { + options: { + banner: '<%= meta.minibanner %>' + }, + dist: { + files: { + 'dist/jquery.<%= pkg.name %>.min.js': ['<%= concat.dist_js.dest %>'] + } + }, - dist_demo_js: { - src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js'], - dest: 'gh-pages/dist/jquery.<%= pkg.name %>.js' - }, + dist_extras: { + files: { + 'dist/jquery.<%= pkg.name %>.with-extras.min.js': ['<%= concat.dist_extras_js.dest %>'] + } + } + }, + cssmin: { + compress: { + options: { + keepSpecialComments: 0, + banner: '<%= meta.minibanner %>' + }, + files: { + "dist/jquery.<%= pkg.name %>.min.css": ["dist/jquery.<%= pkg.name %>.css"] + } + } + }, + jshint: { + options: { + verbose: true, + reporter: require('jshint-stylish'), + jshintrc: '.jshintrc' + }, + files: ['GruntFile.js', 'src/**/*.js','sample/**/*.js', 'test/**/*.js'] + }, + yuidoc: { + compile: { + "name": 'gridster.js', + "description": 'gridster.js, a drag-and-drop multi-column jQuery grid plugin', + "version": 'v<%= pkg.version %>', + "url": 'http://gridster.net/', + "logo": 'https://ducksboard.com/static/images/svg/logo-ducksboard-black-small.svg', + options: { + paths: "src/", + outdir: "gh-pages/docs/" + } + } + }, + copy: { + dist: { + files: [{ + expand: true, + dest: 'gh-pages/', + src: ['dist/*', 'demos/**'] + }] + } + }, + 'gh-pages': { + target: { + options: { + message: 'update docs for changes from v<%= pkg.version %> ', + base: 'gh-pages', + add: true, + push: false + }, + src: '**' + } + }, + bump: { + options: { + files: ['package.json', 'bower.json'], + updateConfigs: ['pkg'], + commit: true, + commitMessage: 'Release v%VERSION%', + commitFiles: ['package.json', 'bower.json', 'CHANGELOG.md', 'dist/'], // '-a' for all files + createTag: true, + tagName: 'v%VERSION%', + tagMessage: 'Version %VERSION%', + push: false, + pushTo: 'origin', + gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' // options to use with '$ git describe' + } + }, + clean: { + dist: ['.grunt','gh-pages', 'dist'] + }, + changelog: { + options: { + dest: 'CHANGELOG.md' + } + }, + watch: { + files: ['libs/*.js', 'src/*.js', 'src/*.css', 'Gruntfile.js'], + tasks: ['concat', 'uglify', 'cssmin'] + } + }); - dist_extras_demo_js: { - src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js', 'src/jquery.<%= pkg.name %>.extras.js'], - dest: 'gh-pages/dist/jquery.<%= pkg.name %>.with-extras.js' - }, + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-yuidoc'); + grunt.loadNpmTasks('grunt-bump'); + grunt.loadNpmTasks('grunt-conventional-changelog'); + grunt.loadNpmTasks('grunt-gh-pages'); - dist_demo_css: { - src: ['src/jquery.<%= pkg.name %>.css'], - dest: 'gh-pages/dist/jquery.<%= pkg.name %>.css' - } - }, - uglify: { - options: { - banner: '<%= meta.minibanner %>' - }, - dist: { - files: { - 'dist/jquery.<%= pkg.name %>.min.js': ['<%= concat.dist_js.dest %>'] - } - }, + // Default task. + grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'cssmin']); + grunt.registerTask('build', ['default']); + grunt.registerTask('docs', ['clean', 'build', 'yuidoc', 'copy:dist', 'gh-pages']); - dist_extras: { - files: { - 'dist/jquery.<%= pkg.name %>.with-extras.min.js': ['<%= concat.dist_extras_js.dest %>'] - } - }, - - dist_demo: { - files: { - 'gh-pages/dist/jquery.<%= pkg.name %>.min.js': ['<%= concat.dist_js.dest %>'] - } - }, - - dist_extras_demo: { - files: { - 'gh-pages/dist/jquery.<%= pkg.name %>.with-extras.min.js': ['<%= concat.dist_extras_js.dest %>'] - } - } - }, - cssmin: { - compress: { - options: { - keepSpecialComments: 0, - banner: '<%= meta.minibanner %>' - }, - files: { - "dist/jquery.<%= pkg.name %>.min.css": ["dist/jquery.<%= pkg.name %>.css"], - "gh-pages/dist/jquery.<%= pkg.name %>.min.css": ["dist/jquery.<%= pkg.name %>.css"] - } - } - }, - jshint: { - files: ['grunt.js', 'src/**/*.js', 'test/**/*.js'] - }, - watch: { - files: ['<%= lint.files %>', 'src/jquery.<%= pkg.name %>.css'], - tasks: 'min concat' - }, - jshint: { - options: { - curly: true, - eqeqeq: true, - immed: true, - latedef: true, - newcap: true, - noarg: true, - sub: true, - undef: true, - boss: true, - eqnull: true, - browser: true - }, - globals: { - jQuery: true - } - }, - yuidoc: { - compile: { - "name": 'gridster.js', - "description": 'gridster.js, a drag-and-drop multi-column jQuery grid plugin', - "version": '0.1.0', - "url": 'http://gridster.net/', - "logo": 'https://ducksboard.com/static/images/svg/logo-ducksboard-black-small.svg', - options: { - paths: "src/", - outdir: "gh-pages/docs/" - } - } - }, - - bump: { - options: { - files: ['package.json', 'bower.json'], - updateConfigs: ['pkg'], - commit: true, - commitMessage: 'Release v%VERSION%', - commitFiles: ['package.json', 'bower.json', 'CHANGELOG.md', 'dist/'], // '-a' for all files - createTag: true, - tagName: 'v%VERSION%', - tagMessage: 'Version %VERSION%', - push: false, - pushTo: 'origin', - gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' // options to use with '$ git describe' - } - }, - - changelog: { - options: { - dest: 'CHANGELOG.md' - } - }, - - watch: { - files: ['libs/*.js', 'src/*.js', 'src/*.css', 'Gruntfile.js'], - tasks: ['concat', 'uglify', 'cssmin'] - } - }); - - - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-yuidoc'); - grunt.loadNpmTasks('grunt-bump'); - grunt.loadNpmTasks('grunt-conventional-changelog'); - - // Default task. - grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'cssmin']); - grunt.registerTask('build', ['default']); - grunt.registerTask('docs', ['yuidoc']); - - grunt.registerTask('release:patch', ['build', 'bump-only:patch', 'build', 'docs', 'changelog']); - grunt.registerTask('release:minor', ['build', 'bump-only:minor', 'build', 'docs', 'changelog']); - grunt.registerTask('release:major', ['build', 'bump-only:major', 'build', 'docs', 'changelog']); - grunt.registerTask('release:git', ['build', 'bump-only:git', 'build', 'docs', 'changelog', 'bump-commit']); - grunt.registerTask('release:commit', ['bump-commit']); + grunt.registerTask('release:patch', ['build', 'bump-only:patch', 'build', 'docs', 'changelog']); + grunt.registerTask('release:minor', ['build', 'bump-only:minor', 'build', 'docs', 'changelog']); + grunt.registerTask('release:major', ['build', 'bump-only:major', 'build', 'docs', 'changelog']); + grunt.registerTask('release:git', ['build', 'bump-only:git', 'build', 'docs', 'changelog', 'bump-commit']); + grunt.registerTask('release:commit', ['bump-commit']); }; diff --git a/sample/SwapDrop.html b/demos/SwapDrop.html similarity index 84% rename from sample/SwapDrop.html rename to demos/SwapDrop.html index bdc2ca050f..0f3aff562b 100644 --- a/sample/SwapDrop.html +++ b/demos/SwapDrop.html @@ -4,13 +4,10 @@ Gridster Grid Swapping Demo - - - + + - - - + -
<< Menu
+

Grid with larger widgets swapping spots with smaller ones

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.

diff --git a/demos/adding-widgets-dynamically.html b/demos/adding-widgets-dynamically.html new file mode 100644 index 0000000000..0a80d3ad0e --- /dev/null +++ b/demos/adding-widgets-dynamically.html @@ -0,0 +1,54 @@ + + + + Demo » Add widgets dynamically » gridster.js + + + + + + + + + +

Add widgets dynamically

+ +

Create a grid adding widgets from an Array (not from HTML) using add_widget method. Widget position (col, row) not specified.

+ +
+ +
+ + + + + diff --git a/demos/assets/css/demo.css b/demos/assets/css/demo.css new file mode 100644 index 0000000000..ff504a18bd --- /dev/null +++ b/demos/assets/css/demo.css @@ -0,0 +1,94 @@ +body { + background: #004756; + 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; +} + +/* Gridster styles */ +.demo { + margin: 3em 0; + padding: 7.5em 0 5.5em; + background: #004756; +} + +.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); +} + +.gridster .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; +} + +.gridster .gs-w.try { + background-image: url(../img/sprite.png); + background-repeat: no-repeat; + background-position: 37px -169px; + +} + +.gridster .preview-holder { + border: none !important; + border-radius: 0 !important; + background: red !important; +} + +ul { + list-style-type: none; +} + +li { + list-style: none; + font-weight: bold +} + +.gridster ul { + background-color: #EFEFEF; +} + +.gridster li { + font-size: 1em; + font-weight: bold; + text-align: center; + line-height: 100%; +} + +.gridster-box { + position: relative; + width: 100%; + height: 100%; +} + +.controls { + margin-bottom: 20px; +} diff --git a/sample/img/sprite.png b/demos/assets/img/sprite.png similarity index 100% rename from sample/img/sprite.png rename to demos/assets/img/sprite.png diff --git a/demos/assets/js/plugins.js b/demos/assets/js/plugins.js new file mode 100644 index 0000000000..70bb435972 --- /dev/null +++ b/demos/assets/js/plugins.js @@ -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. diff --git a/demos/custom-drag-handle.html b/demos/custom-drag-handle.html new file mode 100644 index 0000000000..2a670a4ce6 --- /dev/null +++ b/demos/custom-drag-handle.html @@ -0,0 +1,96 @@ + + + + Demo » Custom drag handle » gridster.js + + + + + + + + + +

Custom drag handle

+ +

Restricts dragging from starting unless the mousedown occurs on the specified element(s).

+ + +
+ +
+ + + + + + diff --git a/demos/dynamic-grid-width.html b/demos/dynamic-grid-width.html new file mode 100644 index 0000000000..43ec4c06f2 --- /dev/null +++ b/demos/dynamic-grid-width.html @@ -0,0 +1,52 @@ + + + + Demo » Dynamic grid width » gridster.js + + + + + + + + +

Dynamic grid width

+ +

Drag or resize some widgets to the right side. Use max_cols option to set a maximum number of columns for the grid.

+ +
+ +
+ + + + diff --git a/demos/expandable-widgets.html b/demos/expandable-widgets.html new file mode 100644 index 0000000000..19d591ece2 --- /dev/null +++ b/demos/expandable-widgets.html @@ -0,0 +1,65 @@ + + + + Demo » Expandable widgets » gridster.js + + + + + + + + +

Expandable widgets

+ +

Expand widgets when hover on them using resize_widget method.

+ + +
+ +
+ + + + + + diff --git a/demos/grid-from-serialize.html b/demos/grid-from-serialize.html new file mode 100644 index 0000000000..e0f387abd2 --- /dev/null +++ b/demos/grid-from-serialize.html @@ -0,0 +1,103 @@ + + + + Demo » Grid from serialize » gridster.js + + + + + + + + +

Build grid from serialized positions

+ +

Build a entire new grid from previously stored positions obtained with serialize method.

+ +
+ +
+ +
+ +
+ + + + diff --git a/demos/index.html b/demos/index.html new file mode 100644 index 0000000000..eacada845c --- /dev/null +++ b/demos/index.html @@ -0,0 +1,38 @@ + + + + Gridster Demos + + + + + + +
+

Samples

+
+ + + + + diff --git a/demos/jquery.gridster.demo2.html b/demos/jquery.gridster.demo2.html new file mode 100644 index 0000000000..2ee5863688 --- /dev/null +++ b/demos/jquery.gridster.demo2.html @@ -0,0 +1,59 @@ + + + + + demo + + + + + + + + +
+ +
+ + + + diff --git a/demos/multiple-grids.html b/demos/multiple-grids.html new file mode 100644 index 0000000000..bdd08a34a8 --- /dev/null +++ b/demos/multiple-grids.html @@ -0,0 +1,71 @@ + + + + Demo » Multiple gridster intances » gridster.js + + + + + + + + +

Multiple gridster instances with different configurations

+ +

When using multiple gridster instances on the same page you can scope the CSS code generated by gridster using namespace config + option.

+ +

Demo 1

+ +
+ +
+ + +

Demo 2

+ +
+ +
+ + + + diff --git a/demos/resize-limits.html b/demos/resize-limits.html new file mode 100644 index 0000000000..f1d63221d2 --- /dev/null +++ b/demos/resize-limits.html @@ -0,0 +1,76 @@ + + + + Demo » Resize » gridster.js + + + + + + + + +

Resize with limits

+ +

Use resize.max_size and resize.min_size config options or data-max-sizex, data-max-sizey, + data-min-sizex and data-min-sizey HTML attributes to limit widget dimensions when resizing.

+ +

If a global max_size is specified through the config option, can be overwrited in specified widgets with HTML data-attributes or using set_widget_max_size + method.

+ + +
+ +
+ + + + diff --git a/demos/resize.html b/demos/resize.html new file mode 100644 index 0000000000..6a5684c1fd --- /dev/null +++ b/demos/resize.html @@ -0,0 +1,65 @@ + + + + Demo » Resize » gridster.js + + + + + + + + +

Resize

+ +

Grab the right or bottom border and drag to the desired width or height.

+ +
+ +
+ +
+ +
+ + + + + + diff --git a/sample/responsive.html b/demos/responsive.html similarity index 88% rename from sample/responsive.html rename to demos/responsive.html index 1a4ce8b6c6..b35eed2f43 100644 --- a/sample/responsive.html +++ b/demos/responsive.html @@ -3,14 +3,10 @@ Gridster Responsive Demo - - - + + - - - - + -
<< Menu
-

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.

+

Responsive Layout

+

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.