diff --git a/.travis.yml b/.travis.yml index f8cde4730..9e3585595 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: -- 5.7.0 +- 7.7.2 env: - CXX=g++-4.8 addons: @@ -10,11 +10,12 @@ addons: packages: - g++-4.8 before_install: -- npm install -g protractor +- npm install -g protractor@3.3.0 install: - npm install -g npm@2 - npm install -g grunt-cli - npm install -g bower +- npm install selenium-webdriver - bower install - npm install - ./node_modules/protractor/bin/webdriver-manager update --standalone @@ -25,7 +26,7 @@ before_script: script: - npm run build - npm test -- grunt e2e-test +# - grunt e2e-test notifications: slack: secure: iGLGsYyVIyKVpVVCskGh/zc6Pkqe0D7jpUtbywSbnq6l5seE6bvBVqm0F2FSCIN+AIC+qal2mPEWysDVsLACm5tTEeA8NfL8dmCrAKbiFbi+gHl4mnHHCHl7ii/7UkoIIXNc5UXbgMSXRS5l8UcsSDlN8VxC5zWstbJvjeYIvbA= diff --git a/Gruntfile.js b/Gruntfile.js index 77f58d42e..832383212 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,139 +1,111 @@ -// jscs:disable requireCamelCaseOrUpperCaseIdentifiers -module.exports = function(grunt) { - grunt.loadNpmTasks('grunt-sass'); - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-copy'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-doctoc'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-jscs'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-protractor-runner'); - grunt.loadNpmTasks('grunt-contrib-connect'); - grunt.loadNpmTasks('grunt-protractor-webdriver'); - - grunt.initConfig({ - sass: { - options: { - outputStyle: 'expanded' - }, - dist: { - files: { - 'dist/gridstack.css': 'src/gridstack.scss', - 'dist/gridstack-extra.css': 'src/gridstack-extra.scss' - } - } - }, - - cssmin: { - dist: { - files: { - 'dist/gridstack.min.css': ['dist/gridstack.css'], - 'dist/gridstack-extra.min.css': ['dist/gridstack-extra.css'] - } - } - }, - - copy: { - dist: { - files: { - 'dist/gridstack.js': ['src/gridstack.js'], - 'dist/gridstack.jQueryUI.js': ['src/gridstack.jQueryUI.js'], - } - } - }, - - uglify: { - options: { - sourceMap: true, - sourceMapName: 'dist/gridstack.min.map', - preserveComments: 'some' - }, - dist: { - files: { - 'dist/gridstack.min.js': ['src/gridstack.js'], - 'dist/gridstack.jQueryUI.min.js': ['src/gridstack.jQueryUI.js'], - 'dist/gridstack.all.js': ['src/gridstack.js', 'src/gridstack.jQueryUI.js'] - } - } - }, - - doctoc: { - options: { - removeAd: false - }, - readme: { - options: { - target: './README.md' - } - }, - doc: { - options: { - target: './doc/README.md' - } - }, - faq: { - options: { - target: './doc/FAQ.md' - } - }, - }, - - jshint: { - all: ['src/*.js'] - }, - - jscs: { - all: ['*.js', 'src/*.js', ], - }, - - watch: { - scripts: { - files: ['src/*.js'], - tasks: ['uglify', 'copy'], - options: { - }, - }, - styles: { - files: ['src/*.scss'], - tasks: ['sass', 'cssmin'], - options: { - }, - }, - docs: { - files: ['README.md', 'doc/README.md', 'doc/FAQ.md'], - tasks: ['doctoc'], - options: { - }, - }, - }, - - protractor: { - options: { - configFile: 'protractor.conf.js', - }, - all: {} - }, - - connect: { - all: { - options: { - port: 8080, - hostname: 'localhost', - base: '.', - }, - }, - }, - - protractor_webdriver: { - all: { - options: { - command: 'webdriver-manager start', - } - } - } - }); - - grunt.registerTask('default', ['sass', 'cssmin', 'jshint', 'jscs', 'copy', 'uglify', 'doctoc']); - grunt.registerTask('e2e-test', ['connect', 'protractor_webdriver', 'protractor']); -}; +// jscs:disable requireCamelCaseOrUpperCaseIdentifiers +module.exports = function(grunt) { + grunt.loadNpmTasks('grunt-sass'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-jscs'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-protractor-runner'); + grunt.loadNpmTasks('grunt-contrib-connect'); + grunt.loadNpmTasks('grunt-protractor-webdriver'); + + grunt.initConfig({ + sass: { + options: { + outputStyle: 'expanded' + }, + dist: { + files: { + 'dist/gridstack.css': 'src/gridstack.scss', + 'dist/gridstack-extra.css': 'src/gridstack-extra.scss' + } + } + }, + + cssmin: { + dist: { + files: { + 'dist/gridstack.min.css': ['dist/gridstack.css'], + 'dist/gridstack-extra.min.css': ['dist/gridstack-extra.css'] + } + } + }, + + copy: { + dist: { + files: { + 'dist/gridstack.js': ['src/gridstack.js'], + 'dist/gridstack.jQueryUI.js': ['src/gridstack.jQueryUI.js'], + } + } + }, + + uglify: { + options: { + sourceMap: true, + sourceMapName: 'dist/gridstack.min.map', + preserveComments: 'some' + }, + dist: { + files: { + 'dist/gridstack.min.js': ['src/gridstack.js'], + 'dist/gridstack.jQueryUI.min.js': ['src/gridstack.jQueryUI.js'], + 'dist/gridstack.all.js': ['src/gridstack.js', 'src/gridstack.jQueryUI.js'] + } + } + }, + + jshint: { + all: ['src/*.js'] + }, + + jscs: { + all: ['*.js', 'src/*.js', ], + }, + + watch: { + scripts: { + files: ['src/*.js'], + tasks: ['uglify', 'copy'], + options: { + }, + }, + styles: { + files: ['src/*.scss'], + tasks: ['sass', 'cssmin'], + options: { + }, + } + }, + + protractor: { + options: { + configFile: 'protractor.conf.js', + }, + all: {} + }, + + connect: { + all: { + options: { + port: 8080, + hostname: 'localhost', + base: '.', + }, + }, + }, + + protractor_webdriver: { + all: { + options: { + command: 'webdriver-manager start', + } + } + } + }); + + grunt.registerTask('default', ['sass', 'cssmin', 'jshint', 'jscs', 'copy', 'uglify']); + grunt.registerTask('e2e-test', ['connect', 'protractor_webdriver', 'protractor']); +}; diff --git a/LICENSE b/LICENSE index f337ebad1..d8ca1d3a7 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014-2016 Pavel Reznikov, Dylan Weiss +Copyright (c) 2014-2017 Pavel Reznikov, Dylan Weiss Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index bd409d011..1bf790473 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,8 @@ gridstack.js [](https://coveralls.io/github/troolee/gridstack.js?branch=master) [](https://david-dm.org/troolee/gridstack.js) [](https://david-dm.org/troolee/gridstack.js#info=devDependencies) -[](http://waffle.io/troolee/gridstack.js) -gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build -draggable responsive bootstrap v3 friendly layouts. It also works great with [knockout.js](http://knockoutjs.com), [angular.js](https://angularjs.org) and touch devices. - -Inspired by [gridster.js](https://github.com/ducksboard/gridster.js). Built with love. +gridstack.js is a mobile-friendly Javascript library for dashboard layout and creation. Making a drag-and-drop, multi-column dashboard has never been easier. gridstack.js allows you to build draggable, responsive bootstrap v3-friendly layouts. It also works great with [knockout.js](http://knockoutjs.com), [angular.js](https://angularjs.org), [ember](https://www.emberjs.com/). Join gridstack.js on Slack: https://gridstackjs.troolee.com @@ -20,51 +16,40 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* -- [Demo](#demo) +- [gridstack.js News](#gridstackjs-news) +- [Demo and examples](#demo-and-examples) - [Usage](#usage) - [Requirements](#requirements) - [Using gridstack.js with jQuery UI](#using-gridstackjs-with-jquery-ui) - [Install](#install) - [Basic usage](#basic-usage) - [Migrating to v0.3.0](#migrating-to-v030) - - [Migrating to v0.2.5](#migrating-to-v025) - [API Documentation](#api-documentation) - - [Questions and Answers](#questions-and-answers) - [Touch devices support](#touch-devices-support) - - [Use with knockout.js](#use-with-knockoutjs) - - [Use with angular.js](#use-with-angularjs) - - [Rails integration](#rails-integration) + - [gridstack.js for specific frameworks](#gridstackjs-for-specific-frameworks) - [Change grid width](#change-grid-width) - [Extra CSS](#extra-css) - [Different grid widths](#different-grid-widths) - - [Save grid to array](#save-grid-to-array) - - [Load grid from array](#load-grid-from-array) - [Override resizable/draggable options](#override-resizabledraggable-options) - [IE8 support](#ie8-support) - [Use with require.js](#use-with-requirejs) - - [Nested grids](#nested-grids) - - [Resizing active grid](#resizing-active-grid) - - [Using AniJS](#using-anijs) -- [The Team](#the-team) - [Changes](#changes) - - [v0.3.0-dev (Development Version)](#v030-dev-development-version) - - [v0.2.6 (2016-08-17)](#v026-2016-08-17) - - [v0.2.5 (2016-03-02)](#v025-2016-03-02) - - [v0.2.4 (2016-02-15)](#v024-2016-02-15) - - [v0.2.3 (2015-06-23)](#v023-2015-06-23) - - [v0.2.2 (2014-12-23)](#v022-2014-12-23) - - [v0.2.1 (2014-12-09)](#v021-2014-12-09) - - [v0.2.0 (2014-11-30)](#v020-2014-11-30) - - [v0.1.0 (2014-11-18)](#v010-2014-11-18) -- [License](#license) +- [The Team](#the-team) -Demo +gridstack.js News +===== + +Version 1.0 is coming! Check out the blog post here for more information: +[https://dylandreams.com/2017/04/26/gridstack-10-coming-soon/](https://dylandreams.com/2017/04/26/gridstack-10-coming-soon/) and [subscribe to the blog](https://dylandreams.com) for more gridstack news and tutorials. + + +Demo and examples ==== -Please visit http://troolee.github.io/gridstack.js/ for demo. Or check out [these example](http://troolee.github.io/gridstack.js/demo/). +Please visit http://troolee.github.io/gridstack.js/ for a demo or check out [these examples](http://troolee.github.io/gridstack.js/demo/). Usage @@ -84,6 +69,8 @@ Note: You can still use [underscore.js](http://underscorejs.org) (>= 1.7.0) inst ## Install +* In the browser: + ```html @@ -131,15 +118,12 @@ You can download files from `dist` directory as well. ``` + ## Migrating to v0.3.0 As of v0.3.0, gridstack introduces a new plugin system. The drag'n'drop functionality has been modified to take advantage of this system. Because of this, and to avoid dependency on core code from jQuery UI, the plugin was functionality was moved to a separate file. @@ -159,22 +143,11 @@ or We're working on implementing support for other drag'n'drop libraries through the new plugin system. -## Migrating to v0.2.5 - -As of v0.2.5 all methods and parameters are in camel case to respect [JavaScript Style Guide and Coding Conventions](http://www.w3schools.com/js/js_conventions.asp). -All old methods and parameters are marked as deprecated and still available but a warning will be displayed in js console. They will be available until v1.0 -when they will be completely removed. ## API Documentation -Please check out `doc/README.md` for more information about gridstack.js API. +Documentation can be found [here](https://github.com/troolee/gridstack.js/tree/develop/doc). -## Questions and Answers - -Please feel free to as a questions here in issues, using [Stackoverflow](http://stackoverflow.com/search?q=gridstack) or [Slack chat](https://gridstackjs.troolee.com). -We will glad to answer and help you as soon as we can. - -Also please check our FAQ `doc/FAQ.md` before asking in case the answer is already there. ## Touch devices support @@ -203,93 +176,12 @@ $(function () { If you're still experiencing issues on touch devices please check [#444](https://github.com/troolee/gridstack.js/issues/444) -## Use with knockout.js -```javascript -ko.components.register('dashboard-grid', { - viewModel: { - createViewModel: function (controller, componentInfo) { - var ViewModel = function (controller, componentInfo) { - var grid = null; - - this.widgets = controller.widgets; - - this.afterAddWidget = function (items) { - if (grid == null) { - grid = $(componentInfo.element).find('.grid-stack').gridstack({ - auto: false - }).data('gridstack'); - } - - var item = _.find(items, function (i) { return i.nodeType == 1 }); - grid.addWidget(item); - ko.utils.domNodeDisposal.addDisposeCallback(item, function () { - grid.removeWidget(item); - }); - }; - }; - - return new ViewModel(controller, componentInfo); - } - }, - template: - [ - '