├── .bowerrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .jshintrc ├── .travis.yml ├── CONTRIBUTING.md ├── Gruntfile.js ├── README.md ├── _config.yml ├── bower.json ├── demo ├── ckeditor-custom.html ├── ckeditor.html ├── css │ ├── bootstrap.css │ ├── demo.css │ └── foundation.css ├── customcolumns.html ├── customcontrols.html ├── fluid.html ├── foundation.html ├── index.html ├── js │ ├── bootstrap.js │ ├── example-ckeditor.js │ ├── foundation.js │ ├── jquery-ui.js │ └── jquery.js ├── multiple.html ├── simple.html ├── simple_dark.html ├── simple_light.html └── tinymce.html ├── dist ├── css │ ├── jquery.gridmanager-dark.css │ ├── jquery.gridmanager-light.css │ └── jquery.gridmanager.css └── js │ ├── jquery.gridmanager.js │ └── jquery.gridmanager.min.js ├── docs ├── css │ ├── main.css │ └── syntax.css ├── dev │ ├── extending-gridmanager.html │ ├── function-reference.html │ ├── options-reference.html │ └── themeing-with-less.html ├── doc │ └── installation.html ├── index.html └── tut │ ├── basic-usage.html │ ├── fluid-widths.html │ └── using-foundation.html ├── gridmanager.jquery.json ├── index.html ├── package.json ├── src ├── .jshintrc ├── ckeditorconfig.js ├── demo.css ├── docs │ ├── .gitignore │ ├── README.md │ ├── _config.yml │ ├── _data │ │ ├── functions.yaml │ │ └── options.yaml │ ├── _includes │ │ ├── footer.html │ │ ├── header.html │ │ └── navigation.html │ ├── _layouts │ │ ├── default.html │ │ └── page.html │ ├── _posts │ │ ├── .gitkeep │ │ ├── 2014-07-06-basic-usage.md │ │ ├── 2014-07-06-extending-gridmanager.md │ │ ├── 2014-07-06-fluid-widths.md │ │ ├── 2014-07-06-function-reference.md │ │ ├── 2014-07-06-installation.md │ │ ├── 2014-07-06-options-reference.md │ │ ├── 2014-07-06-using-foundation.md │ │ └── 2014-07-27-themeing-with-less.md │ ├── bin │ │ └── jekyll-page │ ├── css │ │ ├── main.css │ │ └── syntax.css │ └── index.md ├── foundation.html ├── gridmanager.css ├── gridmanager.js ├── gridmanager_dark.css ├── gridmanager_light.css ├── index.html ├── less │ ├── core │ │ ├── core.less │ │ └── variables.less │ └── themes │ │ ├── dark.less │ │ ├── default.less │ │ └── light.less └── markup.html └── test ├── .jshintrc ├── gridmanager.html └── gridmanager_test.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /bower_components/ 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "regexp": true, 16 | "undef": true, 17 | "unused": true, 18 | "strict": true, 19 | "trailing": true, 20 | "smarttabs": true 21 | } 22 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | - '0.8' 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Important notes 4 | Please don't edit files in the `dist` or `docs` subdirectory as they are generated via Grunt & jekyll. You'll find all source code & documentation source in the `src` subdirectory! 5 | 6 | ### Code style 7 | Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.** 8 | 9 | ## Modifying the code 10 | First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. 11 | 12 | Test that Grunt's CLI and Bower are installed by running `grunt --version` and `bower --version`. If the commands aren't found, run `npm install -g grunt-cli bower`. For more information about installing the tools, see the [getting started with Grunt guide](http://gruntjs.com/getting-started) or [bower.io](http://bower.io/) respectively. 13 | 14 | 1. Fork and clone the repo. 15 | 1. Run `npm install` to install all build dependencies (including Grunt). 16 | 1. Run `bower install` to install the front-end dependencies. 17 | 1. Run `grunt` to grunt this project. 18 | 19 | Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken. 20 | 21 | #### Useful tasks: 22 | 23 | 1. `grunt dist` - Create a new version of the 'dist' folder and recompile everything from source. 24 | 1. `grunt demo` - Copies all demo dependencies into demo folder, i.e when updating to latest Bootstrap 25 | 1. `jekyll build` - Run the documentation generator. 26 | 27 | ## Submitting pull requests 28 | 29 | 1. Create a new branch, please don't work in your `master` branch directly. 30 | 1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail. 31 | 1. Fix stuff. 32 | 1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done. 33 | 1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere. 34 | 1. Update the documentation to reflect any changes. 35 | 1. Push to your fork and submit a pull request. 36 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt) { 4 | // Load all grunt tasks 5 | require('load-grunt-tasks')(grunt); 6 | // Show elapsed time at the end 7 | require('time-grunt')(grunt); 8 | 9 | // Project configuration. 10 | grunt.initConfig({ 11 | // Metadata. 12 | pkg: grunt.file.readJSON('package.json'), 13 | banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + 14 | '<%= grunt.template.today("yyyy-mm-dd") %>\n' + 15 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 16 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 17 | ' Licensed MIT */\n', 18 | // Task configuration. 19 | clean: { 20 | files: ['dist'] 21 | }, 22 | less: { 23 | themeDefault: { 24 | options: { 25 | compress: true, 26 | }, 27 | files: { 28 | 'src/gridmanager.css':'src/less/themes/default.less' 29 | } 30 | }, 31 | themeLight: { 32 | options: { 33 | compress: true, 34 | }, 35 | files: { 36 | 'src/gridmanager_light.css':'src/less/themes/light.less' 37 | } 38 | }, 39 | themeDark: { 40 | options: { 41 | compress: true, 42 | }, 43 | files: { 44 | 'src/gridmanager_dark.css':'src/less/themes/dark.less' 45 | } 46 | } 47 | }, 48 | copy: { 49 | main: { 50 | src: 'src/gridmanager.css', 51 | dest: 'dist/css/jquery.gridmanager.css' 52 | }, 53 | themeLight: { 54 | src: 'src/gridmanager_light.css', 55 | dest: 'dist/css/jquery.gridmanager-light.css' 56 | }, 57 | themeDark: { 58 | src: 'src/gridmanager_dark.css', 59 | dest: 'dist/css/jquery.gridmanager-dark.css' 60 | }, 61 | democss: { 62 | src: 'src/demo.css', 63 | dest: 'demo/css/demo.css' 64 | }, 65 | demobootstrap: { 66 | src: 'bower_components/bootstrap/dist/css/bootstrap.min.css', 67 | dest: 'demo/css/bootstrap.css' 68 | }, 69 | demofoundation: { 70 | src: 'bower_components/foundation/css/foundation.css', 71 | dest: 'demo/css/foundation.css' 72 | }, 73 | demobootstrapjs: { 74 | src: 'bower_components/bootstrap/dist/js/bootstrap.min.js', 75 | dest: 'demo/js/bootstrap.js' 76 | }, 77 | demofoundationjs: { 78 | src: 'bower_components/foundation/js/foundation.min.js', 79 | dest: 'demo/js/foundation.js' 80 | }, 81 | demojquery: { 82 | src: 'bower_components/jquery/dist/jquery.min.js', 83 | dest: 'demo/js/jquery.js' 84 | }, 85 | demojqueryui: { 86 | src: 'bower_components/jquery-ui/jquery-ui.min.js', 87 | dest: 'demo/js/jquery-ui.js' 88 | } 89 | 90 | }, 91 | concat: { 92 | options: { 93 | banner: '<%= banner %>', 94 | stripBanners: true 95 | }, 96 | dist: { 97 | src: ['src/<%= pkg.name %>.js'], 98 | dest: 'dist/js/jquery.<%= pkg.name %>.js' 99 | } 100 | }, 101 | uglify: { 102 | options: { 103 | banner: '<%= banner %>' 104 | }, 105 | dist: { 106 | src: '<%= concat.dist.dest %>', 107 | dest: 'dist/js/jquery.<%= pkg.name %>.min.js' 108 | } 109 | }, 110 | qunit: { 111 | all: { 112 | options: { 113 | urls: ['http://localhost:9000/test/<%= pkg.name %>.html'] 114 | } 115 | } 116 | }, 117 | jshint: { 118 | options: { 119 | reporter: require('jshint-stylish') 120 | }, 121 | gruntfile: { 122 | options: { 123 | jshintrc: '.jshintrc' 124 | }, 125 | src: 'Gruntfile.js' 126 | }, 127 | src: { 128 | options: { 129 | jshintrc: 'src/.jshintrc' 130 | }, 131 | src: ['src/**/*.js'] 132 | }, 133 | test: { 134 | options: { 135 | jshintrc: 'test/.jshintrc' 136 | }, 137 | src: ['test/**/*.js'] 138 | } 139 | }, 140 | watch: { 141 | gruntfile: { 142 | files: '<%= jshint.gruntfile.src %>', 143 | tasks: ['jshint:gruntfile'] 144 | }, 145 | less: { 146 | files: 'src/less/**/*.less', 147 | tasks: ['less'] 148 | }, 149 | src: { 150 | files: '<%= jshint.src.src %>', 151 | tasks: ['jshint:src', 'qunit'] 152 | }, 153 | test: { 154 | files: '<%= jshint.test.src %>', 155 | tasks: ['jshint:test', 'qunit'] 156 | } 157 | }, 158 | 159 | 160 | connect: { 161 | server: { 162 | options: { 163 | hostname: '*', 164 | port: 9000 165 | } 166 | } 167 | } 168 | }); 169 | 170 | 171 | // Default task. 172 | grunt.registerTask('default', ['jshint', 'connect', 'qunit', 'clean','copy', 'concat', 'uglify']); 173 | grunt.registerTask('demo', ['copy:demobootstrap', 'copy:demofoundation', 'copy:demobootstrapjs', 'copy:demofoundationjs', 'copy:demojquery', 'copy:demojqueryui']); 174 | grunt.registerTask('dist', ['jshint', 'clean', 'less', 'copy', 'concat', 'uglify']); 175 | grunt.registerTask('server', function () { 176 | grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 177 | grunt.task.run(['serve']); 178 | }); 179 | grunt.registerTask('serve', ['connect', 'watch']); 180 | grunt.registerTask('test', ['jshint', 'connect', 'qunit']); 181 | }; 182 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery GridManager 2 | 3 | A way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, optional TinyMCE/CKeditor 4 | 5 | ## gridmanager.js 6 | 7 | ### What is it? 8 | 9 | Gridmanager allows you to create, reorder, update & delete rows and columns in grid layouts used by frameworks such as Bootstrap 3.x or Foundation 5.x 10 | 11 | #### You can: 12 | 13 | - Drag and drop columns & rows 14 | - Resize, delete and add columns on the fly 15 | - Apply custom column and row classes 16 | - Nest rows within columns 17 | - Quickly edit the source code directly 18 | - Add row templates for common column width layouts 19 | - Add/Alter the ID of a column or row directly 20 | - Use the dynamically inserted editable regions to change column/row text 21 | - Tie in Rich Text Editors such as TinyMCE & CKEditor to those editable regions 22 | - Change layout modes for easy editing & previewing of responsive classes 23 | - Use fluid rows if you want 24 | - Create your own custom controls for easily extending functionality 25 | 26 | ## Installation 27 | See [GitHub Pages][ghp] for all [docs][docs] + [demos][demo] 28 | 29 | [ghp]: http://neokoenig.github.io/jQuery-gridmanager/ 30 | [docs]: http://neokoenig.github.io/jQuery-gridmanager/docs 31 | [demo]: http://neokoenig.github.io/jQuery-gridmanager/demo 32 | 33 | Now available via bower: 34 | 35 | ``` 36 | bower install gridmanager.js 37 | ``` 38 | 39 | #### Licence 40 | 41 | Released under the MIT licence. Go wild. 42 | 43 | #### Contributors 44 | 45 | [Tom King](https://github.com/neokoenig/) 46 | [Percy D Brea](https://github.com/pbreah/) 47 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Site title and subtitle. This is used in _includes/header.html 2 | title: 'gridmanager.js' 3 | subtitle: 'Structural editor for rows and columns in popular CSS frameworks' 4 | source: "./src/docs" 5 | destination: "./docs" 6 | # Enable/show navigation. There are there options: 7 | # 0 - always hide 8 | # 1 - always show 9 | # 2 - show only if posts are present 10 | navigation: 1 11 | 12 | # URL to source code, used in _includes/footer.html 13 | codeurl: 'https://github.com/bruth/jekyll-docs-template' 14 | 15 | # Default categories (in order) to appear in the navigation 16 | sections: [ 17 | ['doc', 'Documentation'], 18 | ['tut', 'Examples'], 19 | ['ref', 'Reference'], 20 | ['dev', 'Developers'], 21 | ['post', 'Posts'] 22 | ] 23 | 24 | # Keep as an empty string if served up at the root. If served up at a specific 25 | # path (e.g. on GitHub pages) leave off the trailing slash, e.g. /my-project 26 | baseurl: '/jQuery-gridmanager/docs' 27 | 28 | # Dates are not included in permalinks 29 | permalink: none 30 | 31 | # Syntax highlighting 32 | highlighter: pygments 33 | 34 | # Since these are pages, it doesn't really matter 35 | future: true 36 | 37 | # Exclude non-site files 38 | exclude: ['bin', 'README.md'] 39 | 40 | # Use the redcarpet Markdown renderer 41 | markdown: redcarpet 42 | redcarpet: 43 | extensions: [ 44 | 'no_intra_emphasis', 45 | 'fenced_code_blocks', 46 | 'autolink', 47 | 'strikethrough', 48 | 'superscript', 49 | 'with_toc_data', 50 | 'tables', 51 | 'hardwrap' 52 | ] 53 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gridmanager", 3 | "version": "0.3.1", 4 | "devDependencies": { 5 | "qunit": "~1.12.0", 6 | "ckeditor": "~4.4.3", 7 | "jquery": "~2.1.1", 8 | "bootstrap": "~3.2.0", 9 | "foundation": "~5.3.1", 10 | "jquery-ui": "~1.11.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /demo/ckeditor-custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CKEDITOR version with custom config - Gridmanager Demos 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
31 | 32 |

asdasda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.

ASADASD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

33 | 34 |
35 |
36 | 37 | 38 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /demo/ckeditor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CKEDITOR version - Gridmanager Demos 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
31 | 32 |

asdasda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.

ASADASD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

33 | 34 |
35 |
36 | 37 | 38 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /demo/css/demo.css: -------------------------------------------------------------------------------- 1 | /* Demo CSS */ 2 | .example-class {background-color: #e9e9e9;} 3 | .test-class p {font-weight: bold;} -------------------------------------------------------------------------------- /demo/customcolumns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Custom Columns - Gridmanager Demos 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 |

asdasda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.

ASADASD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

30 | 31 |
32 |
33 | 34 | 35 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /demo/customcontrols.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple - Gridmanager with Custom Controls 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 |

Awaiting Content

31 |
32 |
33 |

Awaiting Content

34 |
35 |
36 |
37 |
38 |

Awaiting Content

39 |
40 |
41 |

Awaiting Content

42 |
43 |
44 |
45 |
46 | 47 | 48 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /demo/fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fluid - Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 |
32 |
33 | 34 | 35 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /demo/foundation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple - Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |

Kitteh Left

36 |

Kitteh Middle

37 |

Kitteh Right

38 |
39 |
40 |

Kitteh Left

41 |
42 |

Kitteh Right

43 |
44 |
45 |
...
46 |
...
47 |
48 |
49 |
...
50 |
...
51 |
52 |
53 |
...
54 |
...
55 |
56 |
57 |
58 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gridmanager Demos 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |
30 |

Gridmanager.js v 0.3.1

31 |
32 |
33 |
GitHub 34 | Demos 35 | Docs 36 |
37 |
38 |
39 | 40 |

Demos:

41 | 42 |
43 |
44 |

Themes:

45 | 50 |
51 | 52 |
53 |

With Rich Text Editors

54 |
    55 |
  • TinyMCE Version
    - TinyMCE loaded (N.B requires jquery adapter), default config
    • 56 |
  • CKEditor Version
    - CKEditor loaded (N.B requires jquery adapter), default config
    • 57 |
  • CKEditor Custom Version
    - CKEditor loaded (N.B requires jquery adapter), with custom config file
    • 58 |
59 |
60 | 61 |
62 |

Custom

63 | 70 |
71 |
72 | 73 |
74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /demo/js/example-ckeditor.js: -------------------------------------------------------------------------------- 1 | // Example CKEDITOR config 2 | window.CKEDITOR.editorConfig = function( config ) { 3 | config.uiColor = '#999999'; 4 | // Toolbar groups configuration. 5 | config.toolbarGroups = [ 6 | { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 7 | { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 8 | { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, 9 | { name: 'forms' }, 10 | 11 | { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 12 | '/', 13 | { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, 14 | 15 | { name: 'links' }, 16 | { name: 'insert' }, 17 | 18 | { name: 'styles' }, 19 | { name: 'colors' }, 20 | { name: 'tools' }, 21 | { name: 'others' } 22 | ]; 23 | }; 24 | -------------------------------------------------------------------------------- /demo/multiple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multiple instances - Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |
30 |
I am one instance
Content here
Content here
31 |
32 |
33 |
I am a second instance
Content here
Content here
34 |
35 |
36 | 37 |
38 | 39 | 40 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /demo/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple - Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 |
36 |

Welcome to Gridmanager.js

37 |
38 |
39 |

Important bits:

40 |
GitHub 41 | Demos 42 | Docs 43 |
44 |
45 |
46 |
47 |
48 |

0.3.1

49 |

You can now have distinct editable regions - and you can have as many as you need. They're sortable, which is obviously cool.

50 |

Editable regions are stored with non-intrusive HTML comments

51 |

You don't need to go back through old markup and add them - if we don't see a comment in a column, we autowrap it. And don't worry, you can turn it off if you want.

52 |
53 |
54 | 55 |

See? check this..

56 | 57 | 58 |

Thing One here!

59 | 60 | 61 |

Thing Two here!

62 | 63 | 64 |

Thing Three here! Try dragging me around. Regions are deletable as well as draggable.

65 | 66 |
67 |
68 |

Try adding a new region here by clicking the button above

69 |

Psst, it looks like

70 |
71 |
72 |
73 |
74 | 75 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

76 |
77 |
78 |
79 |
80 |

Lots of nesting!!

81 |

Awesome. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

82 |
83 |
84 | 85 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc.  

86 |
87 |
88 |
89 |
90 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

91 |
92 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

93 |
94 |
95 |
96 |
97 | 98 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

99 |
100 |
101 | 102 |
103 |
104 | 105 | 106 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /demo/simple_dark.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple - Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 |
36 |

Welcome to Gridmanager.js

37 |
38 |
39 |

Important bits:

40 |
GitHub 41 | Demos 42 | Docs 43 |
44 |
45 |
46 |
47 |
48 |

0.3.1

49 |

You can now have distinct editable regions - and you can have as many as you need. They're sortable, which is obviously cool.

50 |

Editable regions are stored with non-intrusive HTML comments

51 |

You don't need to go back through old markup and add them - if we don't see a comment in a column, we autowrap it. And don't worry, you can turn it off if you want.

52 |
53 |
54 | 55 |

See? check this..

56 | 57 | 58 |

Thing One here!

59 | 60 | 61 |

Thing Two here!

62 | 63 | 64 |

Thing Three here! Try dragging me around. Regions are deletable as well as draggable.

65 | 66 |
67 |
68 |

Try adding a new region here by clicking the button above

69 |

Psst, it looks like

70 |
71 |
72 |
73 |
74 | 75 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

76 |
77 |
78 |
79 |
80 |

Lots of nesting!!

81 |

Awesome. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

82 |
83 |
84 | 85 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc.  

86 |
87 |
88 |
89 |
90 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

91 |
92 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

93 |
94 |
95 |
96 |
97 | 98 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

99 |
100 |
101 |
102 |
103 | 104 | 105 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /demo/simple_light.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple - Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 |
35 |
36 |
37 |

Welcome to Gridmanager.js

38 |
39 |
40 |

Important bits:

41 |
GitHub 42 | Demos 43 | Docs 44 |
45 |
46 |
47 |
48 |
49 |

0.3.1

50 |

You can now have distinct editable regions - and you can have as many as you need. They're sortable, which is obviously cool.

51 |

Editable regions are stored with non-intrusive HTML comments

52 |

You don't need to go back through old markup and add them - if we don't see a comment in a column, we autowrap it. And don't worry, you can turn it off if you want.

53 |
54 |
55 | 56 |

See? check this..

57 | 58 | 59 |

Thing One here!

60 | 61 | 62 |

Thing Two here!

63 | 64 | 65 |

Thing Three here! Try dragging me around. Regions are deletable as well as draggable.

66 | 67 |
68 |
69 |

Try adding a new region here by clicking the button above

70 |

Psst, it looks like

71 |
72 |
73 |
74 |
75 | 76 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

77 |
78 |
79 |
80 |
81 |

Lots of nesting!!

82 |

Awesome. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

83 |
84 |
85 | 86 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc.  

87 |
88 |
89 |
90 |
91 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

92 |
93 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

94 |
95 |
96 |
97 |
98 | 99 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.

100 |
101 |
102 | 103 |
104 |
105 | 106 | 107 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /demo/tinymce.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TinyMCE Version - Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 |

asdasda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.

ASADASD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

32 | 33 |
34 |
35 | 36 | 37 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /dist/css/jquery.gridmanager-dark.css: -------------------------------------------------------------------------------- 1 | #gm-controls{margin:5px 0}#gm-controls button,#gm-controls a{font-size:14px}#gm-canvas{min-height:100;background:none}#gm-canvas textarea{width:100%;height:100%}#gm-canvas .gm-editing{border-top:solid 1px #ffa500;border-left:solid 1px #ffa500;border-right:solid 1px #ffa500;border-bottom:solid 1px #ffa500;min-height:30px;background-color:#111}#gm-canvas .gm-editing-selected{-webkit-box-shadow:0 0 5px 0 #ffa500;-moz-box-shadow:0 0 5px 0 #ffa500;box-shadow:0 0 5px 0 #ffa500}#gm-canvas .gm-editable-region{border-top:solid 1px #c00;border-left:solid 1px #c00;border-right:solid 1px #c00;border-bottom:solid 1px #c00;border-style:dotted;margin-bottom:2px;min-height:30px -10;padding:0 20}#gm-canvas .gm-editable-region .gm-controls-element{top:0;right:0;display:block}#gm-canvas .gm-editable-region .gm-controls-element a{color:#fff;font-size:10px}#gm-canvas .gm-editable-region .gm-controls-element .gm-move{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:6px;border-top-left-radius:6px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:left;background-color:#c00;padding:4px;margin-left:-17px}#gm-canvas .gm-editable-region .gm-controls-element .gm-delete{-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:right;background-color:#c00;padding:4px;margin-right:-17px;border-radius:0 8px 8px 0}#gm-canvas .gm-tools{background-color:none;min-height:30px;display:block;clear:both;margin-left:-13px;margin-right:-14px}#gm-canvas .gm-tools a{color:#e69500;font-size:14px;padding:5px 5px 5px 8px;float:left;cursor:pointer;background-color:none}#gm-canvas .gm-tools a:hover{background-color:#ffa500;color:#111;text-decoration:none}#gm-canvas .gm-tools label,#gm-canvas .gm-tools input{font-size:10px}#gm-canvas .gm-tools .gm-removeRow:hover,#gm-canvas .gm-tools .gm-removeCol:hover{background-color:#c00;color:#fff}#gm-canvas .gm-tools .gm-moveCol,#gm-canvas .gm-tools .gm-moveRow{cursor:move}#gm-canvas .row.gm-editing,#gm-canvas .row-fluid.gm-editing{background-color:#222;margin:0 0 5px 0;padding:0 5px 0 5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-top-left-radius:5px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;border-top:solid 1px #ccc;border-left:solid 1px #ccc;border-right:solid 1px #ccc;border-bottom:solid 1px #ccc;-webkit-box-shadow:0 1px 2px #ccc;-moz-box-shadow:0 1px 2px #ccc;box-shadow:0 1px 2px #ccc}#gm-canvas .row.gm-editing>.gm-tools,#gm-canvas .row-fluid.gm-editing>.gm-tools{background-color:#333;margin-right:0;margin-left:0}#gm-canvas .row.gm-editing>.gm-tools a,#gm-canvas .row-fluid.gm-editing>.gm-tools a{color:#999;background-color:none;font-size:15px}#gm-canvas .row.gm-editing>.gm-tools a:hover,#gm-canvas .row-fluid.gm-editing>.gm-tools a:hover{color:#111;background-color:#ffa500}.layout-mode a:hover{cursor:pointer} -------------------------------------------------------------------------------- /dist/css/jquery.gridmanager-light.css: -------------------------------------------------------------------------------- 1 | #gm-controls{margin:5px 0}#gm-controls button,#gm-controls a{font-size:14px}#gm-canvas{min-height:100;background:#fff}#gm-canvas textarea{width:100%;height:100%}#gm-canvas .gm-editing{border-top:solid 1px #9aaeff;border-left:solid 1px #9aaeff;border-right:solid 1px #9aaeff;border-bottom:solid 1px #9aaeff;min-height:30px;background-color:none}#gm-canvas .gm-editing-selected{-webkit-box-shadow:0 0 5px 0 #9aaeff;-moz-box-shadow:0 0 5px 0 #9aaeff;box-shadow:0 0 5px 0 #9aaeff}#gm-canvas .gm-editable-region{border-top:solid 1px #c00;border-left:solid 1px #c00;border-right:solid 1px #c00;border-bottom:solid 1px #c00;border-style:dotted;margin-bottom:2px;min-height:30px -10;padding:0 20}#gm-canvas .gm-editable-region .gm-controls-element{top:0;right:0;display:block}#gm-canvas .gm-editable-region .gm-controls-element a{color:#fff;font-size:10px}#gm-canvas .gm-editable-region .gm-controls-element .gm-move{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:6px;border-top-left-radius:6px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:left;background-color:#c00;padding:4px;margin-left:-17px}#gm-canvas .gm-editable-region .gm-controls-element .gm-delete{-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:right;background-color:#c00;padding:4px;margin-right:-17px;border-radius:0 8px 8px 0}#gm-canvas .gm-tools{background-color:none;min-height:30px;display:block;clear:both;margin-left:-13px;margin-right:-14px}#gm-canvas .gm-tools a{color:#819aff;font-size:14px;padding:5px 5px 5px 8px;float:left;cursor:pointer;background-color:none}#gm-canvas .gm-tools a:hover{background-color:#9aaeff;color:#fff;text-decoration:none}#gm-canvas .gm-tools label,#gm-canvas .gm-tools input{font-size:10px}#gm-canvas .gm-tools .gm-removeRow:hover,#gm-canvas .gm-tools .gm-removeCol:hover{background-color:#c00;color:#fff}#gm-canvas .gm-tools .gm-moveCol,#gm-canvas .gm-tools .gm-moveRow{cursor:move}#gm-canvas .row.gm-editing,#gm-canvas .row-fluid.gm-editing{background-color:none;margin:0 0 5px 0;padding:0 5px 0 5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-top-left-radius:5px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;border-top:solid 1px #b3b3b3;border-left:solid 1px #b3b3b3;border-right:solid 1px #b3b3b3;border-bottom:solid 1px #b3b3b3;-webkit-box-shadow:0 1px 2px #b3b3b3;-moz-box-shadow:0 1px 2px #b3b3b3;box-shadow:0 1px 2px #b3b3b3}#gm-canvas .row.gm-editing>.gm-tools,#gm-canvas .row-fluid.gm-editing>.gm-tools{background-color:none;margin-right:0;margin-left:0}#gm-canvas .row.gm-editing>.gm-tools a,#gm-canvas .row-fluid.gm-editing>.gm-tools a{color:#7f7f7f;background-color:none;font-size:15px}#gm-canvas .row.gm-editing>.gm-tools a:hover,#gm-canvas .row-fluid.gm-editing>.gm-tools a:hover{color:#fff;background-color:#9aaeff}.layout-mode a:hover{cursor:pointer} -------------------------------------------------------------------------------- /dist/css/jquery.gridmanager.css: -------------------------------------------------------------------------------- 1 | #gm-controls{margin:5px 0}#gm-controls button,#gm-controls a{font-size:14px}#gm-canvas{min-height:100;background:#fff}#gm-canvas textarea{width:100%;height:100%}#gm-canvas .gm-editing{border-top:solid 1px #2fa4e7;border-left:solid 1px #2fa4e7;border-right:solid 1px #2fa4e7;border-bottom:solid 1px #2fa4e7;min-height:30px;background-color:none}#gm-canvas .gm-editing-selected{-webkit-box-shadow:0 0 5px 0 #2fa4e7;-moz-box-shadow:0 0 5px 0 #2fa4e7;box-shadow:0 0 5px 0 #2fa4e7}#gm-canvas .gm-editable-region{border-top:solid 1px #c00;border-left:solid 1px #c00;border-right:solid 1px #c00;border-bottom:solid 1px #c00;border-style:dotted;margin-bottom:2px;min-height:30px -10;padding:0 20}#gm-canvas .gm-editable-region .gm-controls-element{top:0;right:0;display:block}#gm-canvas .gm-editable-region .gm-controls-element a{color:#fff;font-size:10px}#gm-canvas .gm-editable-region .gm-controls-element .gm-move{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:6px;border-top-left-radius:6px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:left;background-color:#c00;padding:4px;margin-left:-17px}#gm-canvas .gm-editable-region .gm-controls-element .gm-delete{-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:right;background-color:#c00;padding:4px;margin-right:-17px;border-radius:0 8px 8px 0}#gm-canvas .gm-tools{background-color:none;min-height:30px;display:block;clear:both;margin-left:-13px;margin-right:-14px}#gm-canvas .gm-tools a{color:#1a99e2;font-size:14px;padding:5px 5px 5px 8px;float:left;cursor:pointer;background-color:none}#gm-canvas .gm-tools a:hover{background-color:#2fa4e7;color:#fff;text-decoration:none}#gm-canvas .gm-tools label,#gm-canvas .gm-tools input{font-size:10px}#gm-canvas .gm-tools .gm-removeRow:hover,#gm-canvas .gm-tools .gm-removeCol:hover{background-color:#c00;color:#fff}#gm-canvas .gm-tools .gm-moveCol,#gm-canvas .gm-tools .gm-moveRow{cursor:move}#gm-canvas .row.gm-editing,#gm-canvas .row-fluid.gm-editing{background-color:none;margin:0 0 5px 0;padding:0 5px 0 5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-top-left-radius:5px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;border-top:solid 1px #999;border-left:solid 1px #999;border-right:solid 1px #999;border-bottom:solid 1px #999;-webkit-box-shadow:0 1px 2px #999;-moz-box-shadow:0 1px 2px #999;box-shadow:0 1px 2px #999}#gm-canvas .row.gm-editing>.gm-tools,#gm-canvas .row-fluid.gm-editing>.gm-tools{background-color:none;margin-right:0;margin-left:0}#gm-canvas .row.gm-editing>.gm-tools a,#gm-canvas .row-fluid.gm-editing>.gm-tools a{color:#666;background-color:none;font-size:15px}#gm-canvas .row.gm-editing>.gm-tools a:hover,#gm-canvas .row-fluid.gm-editing>.gm-tools a:hover{color:#fff;background-color:#2fa4e7}.layout-mode a:hover{cursor:pointer} -------------------------------------------------------------------------------- /docs/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-weight: 400; 3 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); 4 | } 5 | 6 | pre, code { 7 | border: none; 8 | border-radius: 0; 9 | background-color: #f9f9f9; 10 | font-size: 0.85em; 11 | } 12 | 13 | pre { 14 | font-size: 1em; 15 | } 16 | 17 | code { 18 | color: inherit; 19 | } 20 | 21 | #header { 22 | border-bottom: 1px solid #eee; 23 | margin-bottom: 20px; 24 | } 25 | 26 | #header a:hover { 27 | text-decoration: none; 28 | } 29 | 30 | #footer { 31 | margin: 20px 0; 32 | font-size: 0.85em; 33 | color: #999; 34 | text-align: center; 35 | } 36 | 37 | #content > .page-header:first-child { 38 | margin-top: 0; 39 | } 40 | 41 | #content > .page-header:first-child h2 { 42 | margin-top: 0; 43 | } 44 | 45 | 46 | #navigation { 47 | font-size: 0.9em; 48 | } 49 | 50 | #navigation li a { 51 | padding-left: 10px; 52 | padding-right: 10px; 53 | } 54 | 55 | #navigation .nav-header { 56 | padding-left: 0; 57 | padding-right: 0; 58 | } 59 | -------------------------------------------------------------------------------- /docs/css/syntax.css: -------------------------------------------------------------------------------- 1 | .highlight .hll { background-color: #ffffcc } 2 | .highlight { background: #ffffff; } 3 | .highlight .c { color: #888888 } /* Comment */ 4 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 5 | .highlight .k { color: #008800; font-weight: bold } /* Keyword */ 6 | .highlight .cm { color: #888888 } /* Comment.Multiline */ 7 | .highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */ 8 | .highlight .c1 { color: #888888 } /* Comment.Single */ 9 | .highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */ 10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .highlight .ge { font-style: italic } /* Generic.Emph */ 12 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 13 | .highlight .gh { color: #333333 } /* Generic.Heading */ 14 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 15 | .highlight .go { color: #888888 } /* Generic.Output */ 16 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 17 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 18 | .highlight .gu { color: #666666 } /* Generic.Subheading */ 19 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 20 | .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ 21 | .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ 22 | .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ 23 | .highlight .kp { color: #008800 } /* Keyword.Pseudo */ 24 | .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ 25 | .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ 26 | .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ 27 | .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ 28 | .highlight .na { color: #336699 } /* Name.Attribute */ 29 | .highlight .nb { color: #003388 } /* Name.Builtin */ 30 | .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ 31 | .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ 32 | .highlight .nd { color: #555555 } /* Name.Decorator */ 33 | .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ 34 | .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ 35 | .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ 36 | .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ 37 | .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ 38 | .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ 39 | .highlight .nv { color: #336699 } /* Name.Variable */ 40 | .highlight .ow { color: #008800 } /* Operator.Word */ 41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 42 | .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ 43 | .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ 44 | .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ 45 | .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ 46 | .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ 47 | .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ 48 | .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ 49 | .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ 50 | .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ 51 | .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ 52 | .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ 53 | .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ 54 | .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ 55 | .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ 56 | .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ 57 | .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ 58 | .highlight .vc { color: #336699 } /* Name.Variable.Class */ 59 | .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ 60 | .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ 61 | .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */ 62 | -------------------------------------------------------------------------------- /docs/dev/extending-gridmanager.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gridmanager.js : Extending Gridmanager 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 26 |
27 | 28 |
29 | 30 | 31 | 95 | 96 |
97 |
98 |

Extending Gridmanager 99 | 100 |

101 |
102 | 103 | 104 | 105 |
106 | 107 |
108 | 109 |
110 | 114 |
115 |
116 | 117 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /docs/dev/themeing-with-less.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gridmanager.js : Themeing with LESS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 26 |
27 | 28 |
29 | 30 | 31 | 95 | 96 |
97 |
98 |

Themeing with LESS 99 | 100 |

101 |
102 | 103 |

Gridmanager.js comes with three provided themes, a default theme and a light and dark variant. The default theme is the normal js/jquery.gridmanger.css file. To use the dark theme, simply change this link to js/jquery.gridmanager-dark.css. Each theme includes the full CSS core of gridmanager, so you only need to link to a single file.

104 | 105 |

Creating your own theme

106 | 107 |

There are a few options to styling the look of gridmanager. If you have no experience with LESS css preprocessing (and if you don't, I highly recommend you go and have a play), then you can just override any of the gridmanager css classes in your own style sheet. Whilst this isn't ideal, it will work. However, it makes future updates of the theme more troublesome.

108 | 109 |

Ideally, you want to leverage the existing LESS files in src/less :

110 | 111 |
    112 |
  • start by creating your own .less file: let's call it custom.less and place it in the src/themes/ folder
    • 113 |
  • copy and paste the contents of default.less into your custom.less file
    • 114 |
  • override any variables, such as @canvas-color inbetween the @import calls to variables.less and core.less.
    • 115 |
  • look at core/variables.less for a list of all the variables you can set.
    • 116 |
117 | 118 |

This is the technique used to create the main gridmanger themes. Just look at src/dark.less as an example.

119 | 120 |

Once you've created your custom.less file, we need to compile it.

121 | 122 |

There are a couple of options here too - if your project is already compiling LESS (i.e your own custom version of bootstrap) then you can just @import the less file into your bootstrap.less file.

123 | 124 |

Alternatively, use any LESS css processor of your choice to output the resultant .css file.

125 | 126 |

LESS variables:

127 | 
/* Variables */ 
128 | @primary: #2fa4e7;
129 | @danger : #CC0000;
130 | @gray   : #999;
131 | 
132 | /* Structure */
133 | @minimum-element-height:        30px;
134 | @row-margin-bottom:             5px;  
135 | 
136 | /* Canvas */
137 | @canvas-color:                  #fff;
138 | 
139 | /* Rows */
140 | @row-border-color:              @gray;
141 | @row-background-color:          none;     
142 | @row-tools-background-color:    none;
143 | @row-icon-color:                darken(@gray, 20%);
144 | @row-icon-color-bg:             none;
145 | @row-icon-color-hover:          #fff;
146 | @row-icon-color-bg-hover:       @primary; 
147 | 
148 | /* Cols */
149 | @col-border-color:              @primary;  
150 | @col-background-color:          none;  
151 | @col-tools-background-color:    none;
152 | @col-icon-color:                darken(@primary, 5%);
153 | @col-icon-color-bg:             none;
154 | @col-icon-color-hover:          #fff;
155 | @col-icon-color-bg-hover:       @primary;
156 | @col-selected-color:            @primary;  
157 | 
158 | /* Editable Regions */
159 | @editable-border-color:         @danger;
160 | @editable-icon-color:           #fff;
161 | 
162 | /* Icons */
163 | @control-bar-font-size:         14px;
164 | @row-icon-font-size:            15px;
165 | @col-icon-font-size:            14px;
166 | @element-font-size:             10px;
167 |
168 | 169 |
170 | 171 |
172 | 173 |
174 | 178 |
179 |
180 | 181 | 230 | 231 | 232 | -------------------------------------------------------------------------------- /docs/doc/installation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gridmanager.js : Installation 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 26 |
27 | 28 |
29 | 30 | 31 | 95 | 96 |
97 |
98 |

Installation 99 | 100 |

101 |
102 | 103 |

Requirements

104 | 105 |

Gridmanager.js requires:

106 | 107 |
    108 |
  • jQuery (1.10 upwards)
    • 109 |
  • jQuery UI
    • 110 |
  • A CSS framework, i.e Bootstrap 3.x
    • 111 |
112 | 113 |

Basic Installation via download

114 | 115 |

Download the zip or tar of the master branch at github and extract the dist folder. 116 | You will see the included css and js files you need.

117 | 118 |

or via Bower

119 | 120 |

If you have bower installed, simply run bower install gridmanager.js

121 | 122 |

Or alternatively you can clone the git repository.

123 | 124 |

Next, see [basic usage]

125 | 126 | 127 |
128 | 129 |
130 | 131 |
132 | 136 |
137 |
138 | 139 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /docs/tut/basic-usage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gridmanager.js : Basic Usage 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 26 |
27 | 28 |
29 | 30 | 31 | 95 | 96 |
97 |
98 |

Basic Usage 99 | 100 |

101 |
102 | 103 |

Assumes you have jQuery, jQueryUI and Bootstrap 3.x already on your page.

104 | 105 |

Link the gridmanager JS and CSS files:

106 | 
<link href="dist/css/jquery.gridmanager.css" rel="stylesheet">  
107 | <script src="dist/js/jquery.gridmanager.min.js"></script> 
108 |
109 |

Create a <div> element which gridmanager will attach to:

110 | 
<div id="mycanvas"></div>
111 |
112 |

If you have HTML which needs to be loaded into the editor, simply include it between the <div> tags:

113 | 
<div id="mycanvas">
114 |     <div class="row">
115 |         <div class="col-md-6"><p>Content</p></div>
116 |         <div class="col-md-6"><p>Content</p></div>
117 |     </div>
118 | </div>
119 |
120 |

Now tie in the id or class into gridmanger: you can do this two ways:

121 | 122 |

Simple implementation

123 | 
<script> 
124 |     $(document).ready(function(){
125 |         $("#mycanvas").gridmanager();
126 |     });
127 | </script> 
128 |
129 |

Extended implementation

130 | 131 |

for when you want to use internal gridmanager functions:

132 | 
<script>
133 |     $(document).ready(function(){ 
134 |         var gm = jQuery("#mycanvas").gridmanager().data('gridmanager');
135 | 
136 |         $(".myexternalcontrol").on("click", function(e){
137 |             // Example use of internal gridmanager function:
138 |             gm.appendHTMLSelectedCols('<p>my content to append to all my selected cols</p>');
139 |         });
140 |     });
141 | </script> 
142 |
143 | 144 |
145 | 146 |
147 | 148 |
149 | 153 |
154 |
155 | 156 | 205 | 206 | 207 | -------------------------------------------------------------------------------- /docs/tut/fluid-widths.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gridmanager.js : Fluid Widths 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 26 |
27 | 28 |
29 | 30 | 31 | 95 | 96 |
97 |
98 |

Fluid Widths 99 | 100 |

101 |
102 | 103 |

To use a fluid layout (this assumes you're using Boostrap 3.x), simply change the options classes to incorporate bootstrap's row-fluid class

104 | 
<script> 
105 | $(document).ready(function(){   
106 |    $("#mycanvas").gridmanager({ 
107 |         controlPrepend: "<div class='row-fluid'><div class='col-md-12'><div id='gm-addnew' class='btn-group '>", 
108 |         rowClass:    "row-fluid",
109 |         rowSelector: "div.row-fluid",
110 |         rowPrepend:  "<div class='row-fluid gm-editing'>"
111 |     }  
112 |   ); 
113 | });
114 | </script> 
115 |
116 | 117 |
118 | 119 |
120 | 121 |
122 | 126 |
127 |
128 | 129 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /docs/tut/using-foundation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gridmanager.js : Using Foundation 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 26 |
27 | 28 |
29 | 30 | 31 | 95 | 96 |
97 |
98 |

Using Foundation 99 | 100 |

101 |
102 | 103 |

Whilst gridmanager.js is primarily intended for use in Bootstrap 3.x, it has been deliberately put together so that you can integrate any CSS framework which has a similar grid concept.

104 | 105 |

The only real pre-requisites are the concept of a 'row' which has it's own class, and a column class (such as col-md-6, span6, large6 etc) which has a numerical reference at the end. As such, you can actually make gridmanager work in Bootstrap 2.x & Foundation 5.x by just changing the various classes in the options to suit your needs.

106 | 107 |

Since version 0.2.3 we went for fontawesome as a default meaning it's a lot easier to use another framework, as you don't have to constantly worry about icons.

108 | 109 |

Please see the source code of the demo foundation version for the recommended options to set.

110 | 111 | 112 |
113 | 114 |
115 | 116 |
117 | 121 |
122 |
123 | 124 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /gridmanager.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gridmanager", 3 | "title": "jQuery GridManager", 4 | "description": "A way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, TinyMCE or CKEditor", 5 | "version": "0.3.1", 6 | "homepage": "http://neokoenig.github.io/jQuery-gridmanager/", 7 | "author": { 8 | "name": "Tom King", 9 | "url": "http://www.oxalto.co.uk" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/neokoenig/jQuery-gridmanager.git" 14 | }, 15 | "demo": "http://neokoenig.github.io/jQuery-gridmanager/demo/", 16 | "licenses": [ 17 | { 18 | "type": "MIT", 19 | "url": "http://opensource.org/licenses/MIT" 20 | } 21 | ], 22 | "dependencies": { 23 | "jquery": "~1.11.0" 24 | }, 25 | "keywords": [ 26 | "jquery-plugin", 27 | "ui" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | gridmanager.js : Gridmanager.js Documentation 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 26 |
27 | 28 |
29 | 30 | 31 | 52 | 53 |
54 |

gridmanager.js

55 | 56 |

What is it?

57 | 58 |

Gridmanager allows you to create, reorder, update & delete rows and columns in grid layouts used by frameworks such as Bootstrap 3.x or Foundation 5.x. It is not another Rich Text Editor (although it can use them), and is designed to work more as a structural / page building device for use in web applications, custom CMS system etc.

59 | 60 |

You can:

61 | 62 |
    63 |
  • Drag and drop columns & rows
    • 64 |
  • Resize, delete and add columns on the fly
    • 65 |
  • Apply custom column and row classes
    • 66 |
  • Nest rows within columns
    • 67 |
  • Quickly edit the source code directly
    • 68 |
  • Add row templates for common column width layouts
    • 69 |
  • Add/Alter the ID of a column or row directly
    • 70 |
  • Use the dynamically inserted editable regions to change column/row text
    • 71 |
  • Tie in Rich Text Editors such as TinyMCE & CKEditor to those editable regions
    • 72 |
  • Change layout modes for easy editing & previewing of responsive classes
    • 73 |
  • Use fluid rows if you want
    • 74 |
  • Create your own custom controls for easily extending functionality
    • 75 |
76 | 77 | 78 |
79 | 80 |
81 | 82 |
83 | 87 |
88 |
89 | 90 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gridmanager", 3 | "version": "0.3.1", 4 | "description": "jQuery GridManager", 5 | "keywords": [ 6 | "jquery-plugin" 7 | ], 8 | "homepage": "http://neokoenig.github.io/jQuery-gridmanager/", 9 | "author": { 10 | "name": "Tom King", 11 | "email": "tom@oxalto.co.uk", 12 | "url": "https://github.com/neokeonig" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/neokoenig/jQuery-gridmanager.git" 17 | }, 18 | "licenses": [ 19 | { 20 | "type": "MIT" 21 | } 22 | ], 23 | "devDependencies": { 24 | "grunt": "~0.4.5", 25 | "grunt-contrib-clean": "~0.5.0", 26 | "grunt-contrib-concat": "~0.3.0", 27 | "grunt-contrib-connect": "~0.5.0", 28 | "grunt-contrib-copy": "~0.5.0", 29 | "grunt-contrib-jshint": "~0.7.2", 30 | "grunt-contrib-qunit": "~0.3.0", 31 | "grunt-contrib-less": "^0.11.1", 32 | "grunt-contrib-uglify": "~0.2.7", 33 | "grunt-contrib-watch": "~0.5.3", 34 | "jshint-stylish": "~0.1.3", 35 | "load-grunt-tasks": "~0.2.0", 36 | "time-grunt": "~0.2.3" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "browser": true, 14 | "predef": ["jQuery"] 15 | } 16 | -------------------------------------------------------------------------------- /src/ckeditorconfig.js: -------------------------------------------------------------------------------- 1 | // Example CKEDITOR config 2 | window.CKEDITOR.editorConfig = function( config ) { 3 | config.uiColor = '#999999'; 4 | // Toolbar groups configuration. 5 | config.toolbarGroups = [ 6 | { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 7 | { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 8 | { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, 9 | { name: 'forms' }, 10 | 11 | { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 12 | '/', 13 | { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, 14 | 15 | { name: 'links' }, 16 | { name: 'insert' }, 17 | 18 | { name: 'styles' }, 19 | { name: 'colors' }, 20 | { name: 'tools' }, 21 | { name: 'others' } 22 | ]; 23 | }; 24 | -------------------------------------------------------------------------------- /src/demo.css: -------------------------------------------------------------------------------- 1 | /* Demo CSS */ 2 | .example-class {background-color: #e9e9e9;} 3 | .test-class p {font-weight: bold;} -------------------------------------------------------------------------------- /src/docs/.gitignore: -------------------------------------------------------------------------------- 1 | *.sw? 2 | _pages 3 | -------------------------------------------------------------------------------- /src/docs/README.md: -------------------------------------------------------------------------------- 1 | ## gridmanager.js 2 | 3 | ### What is it? 4 | 5 | Gridmanager allows you to create, reorder, update & delete rows and columns in grid layouts used by frameworks such as Bootstrap 3.x or Foundation 5.x 6 | 7 | #### You can: 8 | 9 | - Drag and drop columns & rows 10 | - Resize, delete and add columns on the fly 11 | - Apply custom column and row classes 12 | - Nest rows within columns 13 | - Quickly edit the source code directly 14 | - Add row templates for common column width layouts 15 | - Add/Alter the ID of a column or row directly 16 | - Add, Edit, Delete, Sort editable regions to change column/row text 17 | - Tie in Rich Text Editors such as TinyMCE & CKEditor to those editable regions 18 | - Change layout modes for easy editing & previewing of responsive classes 19 | - Use fluid rows if you want 20 | - Create your own custom controls for easily extending functionality 21 | 22 | #### Licence 23 | 24 | Released under the MIT licence. Go wild. 25 | 26 | #### Contributors 27 | 28 | [Tom King](https://github.com/neokoenig/) 29 | [Percy D Brea](https://github.com/pbreah/) 30 | -------------------------------------------------------------------------------- /src/docs/_config.yml: -------------------------------------------------------------------------------- 1 | # Site title and subtitle. This is used in _includes/header.html 2 | title: 'gridmanager.js' 3 | subtitle: 'Structural editor for rows and columns in popular CSS frameworks' 4 | source: "./jeykll" 5 | dest: "./docs" 6 | # Enable/show navigation. There are there options: 7 | # 0 - always hide 8 | # 1 - always show 9 | # 2 - show only if posts are present 10 | navigation: 1 11 | 12 | # URL to source code, used in _includes/footer.html 13 | codeurl: 'https://github.com/bruth/jekyll-docs-template' 14 | 15 | # Default categories (in order) to appear in the navigation 16 | sections: [ 17 | ['doc', 'Documentation'], 18 | ['tut', 'Examples'], 19 | ['ref', 'Reference'], 20 | ['dev', 'Developers'], 21 | ['post', 'Posts'] 22 | ] 23 | 24 | # Keep as an empty string if served up at the root. If served up at a specific 25 | # path (e.g. on GitHub pages) leave off the trailing slash, e.g. /my-project 26 | baseurl: '/jQuery-gridmanager/docs' 27 | 28 | # Dates are not included in permalinks 29 | permalink: none 30 | 31 | # Syntax highlighting 32 | highlighter: pygments 33 | 34 | # Since these are pages, it doesn't really matter 35 | future: true 36 | 37 | # Exclude non-site files 38 | exclude: ['bin', 'README.md'] 39 | 40 | # Use the redcarpet Markdown renderer 41 | markdown: redcarpet 42 | redcarpet: 43 | extensions: [ 44 | 'no_intra_emphasis', 45 | 'fenced_code_blocks', 46 | 'autolink', 47 | 'strikethrough', 48 | 'superscript', 49 | 'with_toc_data', 50 | 'tables', 51 | 'hardwrap' 52 | ] 53 | -------------------------------------------------------------------------------- /src/docs/_data/functions.yaml: -------------------------------------------------------------------------------- 1 | - name: "gm.activateCols()" 2 | desc: "Activates columns - looks for the passed in columns and creates editable regions, editing tools etc" 3 | params: "@cols - columns to activate (usually all of them selected via the colSelector class)" 4 | return: "" 5 | ispublic: 1 6 | - name: "gm.activateRows()" 7 | desc: "Activates rows - looks for the passed in rows and creates editable regions, editing tools etc" 8 | params: "@rows - rows to activate (usually all of them selected via the rowSelector class)" 9 | return: "" 10 | ispublic: 1 11 | - name: "gm.addCSS()" 12 | desc: "Adds a CSS file or CSS Framework required for specific customizations" 13 | params: "@myStylesLocation (string) - path to external CSS" 14 | return: "" 15 | ispublic: 1 16 | - name: "gm.addResponsiveness()" 17 | desc: "Adds missing reponsive classes to existing HTML" 18 | params: "@html - html contents to perform regex search on" 19 | return: "" 20 | ispublic: 1 21 | - name: "gm.appendHTMLSelectedCols()" 22 | desc: "Injects HTML into selected columns" 23 | params: "@html - HTML to append to selected columns" 24 | return: "" 25 | ispublic: 1 26 | - name: "gm.buttonFactory()" 27 | desc: "Creates markup for dynamic buttons" 28 | params: "@param btns - Array of button configurations (see options)" 29 | return: "" 30 | ispublic: 1 31 | - name: "gm.cleanSubstring(regex, source, replacement)" 32 | desc: "Clean all occurrences of a substring" 33 | params: "@regex
@source
@replacement" 34 | return: "" 35 | ispublic: 1 36 | - name: "gm.cleanup()" 37 | desc: "Remove all extraneous markup, i.e RTE classes and divs, editing tools, row/col buttons" 38 | params: "" 39 | return: "" 40 | ispublic: 1 41 | - name: "gm.createCanvas()" 42 | desc: "Build and append the canvas, making sure existing HTML in the user's div is wrapped. Will also trigger Responsive classes to existing markup if specified" 43 | params: "" 44 | return: "" 45 | ispublic: 1 46 | - name: "gm.createCol()" 47 | desc: "Creates a single column with appropriate editing tools" 48 | params: "@size (integer) - width of column class (i.e 6)" 49 | return: "" 50 | ispublic: 1 51 | - name: "gm.createControls()" 52 | desc: "Build and prepend the control panel" 53 | params: "" 54 | return: "" 55 | ispublic: 1 56 | - name: "gm.createRow()" 57 | desc: "Creates a single row with appropriate editing tools" 58 | params: "" 59 | return: "" 60 | ispublic: 1 61 | - name: "gm.deactivateCols()" 62 | desc: "Opposite of activateCols" 63 | params: "@cols - columns to act on" 64 | return: "" 65 | ispublic: 1 66 | - name: "gm.deactivateRows()" 67 | desc: "Opposite of activateRows" 68 | params: "@rows - rows to act on" 69 | return: "" 70 | ispublic: 1 71 | - name: "gm.deinitCanvas()" 72 | desc: "Removes all editing markup and runs cleanup" 73 | params: "" 74 | return: "" 75 | ispublic: 1 76 | - name: "gm.generateButtonClass()" 77 | desc: "Basically just turns [2,4,6] into 2-4-6" 78 | params: "@arr - array of column widths, i.e [2,3,2]" 79 | return: "" 80 | ispublic: 1 81 | - name: "gm.generateClickHandler()" 82 | desc: "Adds click handlers for dynamic row template buttons" 83 | params: "@colWidths - array of column widths, i.e [2,3,2]" 84 | return: "" 85 | ispublic: 1 86 | - name: "gm.generateColSettings()" 87 | desc: "Create the col specific settings box" 88 | params: "@col - the column to append to" 89 | return: "html" 90 | ispublic: 1 91 | - name: "gm.generateRowSettings()" 92 | desc: "Create the row specific settings box" 93 | params: "@row - the row to append to" 94 | return: "html" 95 | ispublic: 1 96 | - name: "gm.getColClass()" 97 | desc: "Get the col-md-6 class, returning 6 as well from column" 98 | params: "@col" 99 | return: "colClass:colClass, colWidth:colWidth" 100 | ispublic: 1 101 | - name: "gm.gridmanager()" 102 | desc: "The main gridmanager function" 103 | params: "" 104 | return: "" 105 | ispublic: 1 106 | - name: "gm.init()" 107 | desc: "Main initialising function to create the canvas, controls and initialise all click handlers" 108 | params: "" 109 | return: "" 110 | ispublic: 1 111 | - name: "gm.initCanvas()" 112 | desc: "Makes rows and cols active, adds sortable attributes, triggers creation of custom controls" 113 | params: "" 114 | return: "" 115 | ispublic: 1 116 | - name: "gm.initControls()" 117 | desc: "Add click functionality to the buttons" 118 | params: "" 119 | return: "" 120 | ispublic: 1 121 | - name: "gm.initCustomControls()" 122 | desc: "Add any custom buttons configured on the data attributes" 123 | params: "" 124 | return: "" 125 | ispublic: 1 126 | - name: "gm.initGlobalCustomControls()" 127 | desc: "Add any custom buttons globally on all rows / cols" 128 | params: "" 129 | return: "" 130 | ispublic: 1 131 | - name: "gm.isValidCallback()" 132 | desc: "Checks that a callback exists and returns it if available" 133 | params: "@callbackScp - function scope to use. 'window' for global scope
@callbackFunc - function name to call when the user clicks the custom button" 134 | return: "function" 135 | ispublic: 1 136 | - name: "gm.log()" 137 | desc: "Generic Logging function which checks for console availability & sends to console if appropriate" 138 | params: "@logvar (string or object)" 139 | return: "" 140 | ispublic: 1 141 | - name: "gm.regex()" 142 | desc: "Generic regex helper" 143 | params: "@elem
@index
@match" 144 | return: "" 145 | ispublic: 1 146 | - name: "gm.reset()" 147 | desc: "Shortcut to running deinit and init canvas" 148 | params: "" 149 | return: "" 150 | ispublic: 1 151 | - name: "gm.rteControl()" 152 | desc: "Starts, stops, attaches RTE editors" 153 | params: "@action - one of init - looks for RTEs and sets an necessary options (such as CKEditor disableAutoInline=true), stop - destroys the currently loaded RTE, attach - attaches an RTE to the specified element
@element - element to attach RTE to" 154 | return: "" 155 | ispublic: 1 156 | - name: "gm.saveremote()" 157 | desc: "Runs the default jQuery POST action to options.remoteURL" 158 | params: "" 159 | return: "" 160 | ispublic: 1 161 | - name: "gm.setupCustomBtn()" 162 | desc: "Configures custom button click callback function" 163 | params: "@container - container element that wraps the toolbar
@btnLoc - button location: top for the upper toolbar and bottom for the lower one
@callbackScp - function scope to use. 'window' for global scope
@callbackFunc - function name to call when the user clicks the custom button
@btnObj - button object that contains properties for: tag name, title, icon class, button class and label" 164 | return: "" 165 | ispublic: 1 166 | - name: "gm.switchLayoutMode()" 167 | desc: "Switches the layout mode for Desktop, Tablets or Mobile Phones" 168 | params: "@mode" 169 | return: "" 170 | ispublic: 1 171 | - name: "gm.toolFactory()" 172 | desc: "" 173 | params: "@btns" 174 | return: "" 175 | ispublic: 1 -------------------------------------------------------------------------------- /src/docs/_includes/footer.html: -------------------------------------------------------------------------------- 1 | Documentation for {{ site.title }} 2 | -------------------------------------------------------------------------------- /src/docs/_includes/header.html: -------------------------------------------------------------------------------- 1 |

{{ site.title }} 2 | {% if site.subtitle %}{{ site.subtitle }}{% endif %} 3 |

4 | 5 | -------------------------------------------------------------------------------- /src/docs/_includes/navigation.html: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{ site.title }}{% if page.title %} : {{ page.title }}{% endif %} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 22 |
23 | 24 |
25 | {% assign post_count = site.posts|size %} 26 | {% if site.navigation != 0 and site.navigation == 1 or post_count > 0 %} 27 | 30 | 31 |
32 | {{ content }} 33 |
34 | {% else %} 35 |
36 | {{ content }} 37 |
38 | {% endif %} 39 |
40 | 41 |
42 | 45 |
46 |
47 | 48 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /src/docs/_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |

{{ page.title }} 7 | {% if page.subtitle %}{{ page.subtitle }}{% endif %} 8 |

9 |
10 | 11 | {{ content }} 12 | -------------------------------------------------------------------------------- /src/docs/_posts/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/neokoenig/jQuery-gridmanager/2a8d629e4d177dd359939f38d5e299e21941de62/src/docs/_posts/.gitkeep -------------------------------------------------------------------------------- /src/docs/_posts/2014-07-06-basic-usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Basic Usage" 4 | category: tut 5 | date: 2014-07-06 10:45:33 6 | --- 7 | 8 | Assumes you have jQuery, jQueryUI and Bootstrap 3.x already on your page. 9 | 10 | Link the gridmanager JS and CSS files: 11 | 12 | 13 | 14 | 15 | Create a ```
``` element which gridmanager will attach to: 16 | 17 |
18 | 19 | If you have HTML which needs to be loaded into the editor, simply include it between the ```
``` tags: 20 | 21 |
22 |
23 |

Content

24 |

Content

25 |
26 |
27 | 28 | Now tie in the id or class into gridmanger: you can do this two ways: 29 | 30 | ####Simple implementation#### 31 | 32 | 37 | 38 | ####Extended implementation#### 39 | 40 | for when you want to use internal gridmanager functions: 41 | 42 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/docs/_posts/2014-07-06-extending-gridmanager.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Extending Gridmanager" 4 | category: dev 5 | date: 2014-07-06 10:48:56 6 | --- 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/docs/_posts/2014-07-06-fluid-widths.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Fluid Widths" 4 | category: tut 5 | date: 2014-07-06 10:47:05 6 | --- 7 | 8 | To use a fluid layout (this assumes you're using Boostrap 3.x), simply change the options classes to incorporate bootstrap's ```row-fluid``` class 9 | 10 | 21 | -------------------------------------------------------------------------------- /src/docs/_posts/2014-07-06-function-reference.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Function Reference" 4 | category: dev 5 | date: 2014-07-06 10:49:26 6 | --- 7 | 8 | #### Using gridmanager functions 9 | 10 | Sometimes you may want to use gridmanager's internal functions; examples where you might want to do this could include: 11 | 12 | Building your own control bar for elsewhere in the page to trigger resets, saving, layout mode switches etc. 13 | 14 | More advanced CMS integration where you might need to stop certain processes from firing, such as the preview and cleanup modes. 15 | 16 | 26 | 27 | #### Available functions: 28 | 29 | 30 | 31 | 32 | 35 | 38 | 41 | 44 | 45 | 46 | 47 | 48 | {% for function in site.data.functions %} 49 | {% if function.ispublic == 1 %} 50 | 51 | 52 | 53 | 54 | 55 | 56 | {% endif %} 57 | {% endfor %} 58 | 59 | 60 | 61 |
33 | Function 34 | 36 | Params 37 | 39 | Returns 40 | 42 | Description 43 |
{{ function.name }}{{ function.params}}{{ function.returns }}{{ function.desc }}
-------------------------------------------------------------------------------- /src/docs/_posts/2014-07-06-installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Installation" 4 | category: doc 5 | date: 2014-07-06 10:34:05 6 | --- 7 | 8 | 9 | ### Requirements 10 | 11 | Gridmanager.js requires: 12 | 13 | + jQuery (1.10 upwards) 14 | + jQuery UI 15 | + A CSS framework, i.e Bootstrap 3.x 16 | 17 | #### Basic Installation via download 18 | 19 | Download the [zip](https://github.com/neokoenig/jQuery-gridmanager/zipball/master) or [tar](https://github.com/neokoenig/jQuery-gridmanager/tarball/master) of the master branch at [github](https://github.com/neokoenig/jQuery-gridmanager) and extract the ```dist``` folder. 20 | You will see the included ```css``` and ```js``` files you need. 21 | 22 | #### or via Bower 23 | 24 | If you have bower installed, simply run ```bower install gridmanager.js``` 25 | 26 | Or alternatively you can clone the [git repository](https://github.com/neokoenig/jQuery-gridmanager/). 27 | 28 | Next, see [basic usage] 29 | -------------------------------------------------------------------------------- /src/docs/_posts/2014-07-06-options-reference.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Options Reference" 4 | category: dev 5 | date: 2014-07-06 10:49:57 6 | --- 7 | 8 | 9 | 10 | 13 | 16 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | {% for option in site.data.options %} 28 | {% if option.category contains 'general'%} 29 | 30 | 31 | 32 | 33 | 34 | 35 | {% endif %} 36 | {% endfor %} 37 | 38 | 39 | {% for option in site.data.options %} 40 | {% if option.category contains 'row'%} 41 | 42 | 43 | 44 | 45 | 46 | 47 | {% endif %} 48 | {% endfor %} 49 | 50 | 51 | {% for option in site.data.options %} 52 | {% if option.category contains 'col'%} 53 | 54 | 55 | 56 | 57 | 58 | 59 | {% endif %} 60 | {% endfor %} 61 | 62 | 63 | {% for option in site.data.options %} 64 | {% if option.category contains 'rte'%} 65 | 66 | 67 | 68 | 69 | 70 | 71 | {% endif %} 72 | {% endfor %} 73 | 82 | {% for option in site.data.options %} 83 | {% if option.category contains 'btnObject'%} 84 | 85 | 86 | 87 | 88 | 89 | 90 | {% endif %} 91 | {% endfor %} 92 | 97 | {% for option in site.data.options %} 98 | {% if option.category contains 'customControls'%} 99 | 100 | 101 | 102 | 103 | 104 | 105 | {% endif %} 106 | {% endfor %} 107 | 108 | 109 |
11 | Option Name 12 | 14 | Requires 15 | 17 | Default 18 | 20 | Description 21 |

General

{{ option.name }}{{ option.requires }}{{ option.default }}{{ option.desc }}

Rows

{{ option.name }}{{ option.requires }}{{ option.default }}{{ option.desc }}

Columns

{{ option.name }}{{ option.requires }}{{ option.default }}{{ option.desc }}

Rich Text Editors

{{ option.name }}{{ option.requires }}{{ option.default }}{{ option.desc }}

Button Objects

Passed into row and column areas

74 | 
  rowButtonsAppend: [ 
 75 |                 {
 76 |                  title:"Remove row", 
 77 |                  element: "a", 
 78 |                  btnClass: "pull-right gm-removeRow",
 79 |                  iconClass: "fa fa-trash-o"
 80 |                 }
 81 |        ],
{{ option.name }}{{ option.requires }}{{ option.default }}{{ option.desc }}

Custom Control Objects

Passed into custom controls global_row and global_col. 93 | 

customControls: {
 94 |             global_row: [{ callback: 'test_callback', loc: 'bottom' }],
 95 |             global_col: [{ callback: 'test_callback', loc: 'top' }]
 96 |         }
{{ option.name }}{{ option.requires }}{{ option.default }}{{ option.desc }}
110 | 111 | -------------------------------------------------------------------------------- /src/docs/_posts/2014-07-06-using-foundation.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Using Foundation" 4 | category: tut 5 | date: 2014-07-06 10:47:20 6 | --- 7 | 8 | Whilst gridmanager.js is primarily intended for use in Bootstrap 3.x, it has been deliberately put together so that you can integrate any CSS framework which has a similar grid concept. 9 | 10 | The only real pre-requisites are the concept of a 'row' which has it's own class, and a column class (such as col-md-6, span6, large6 etc) which has a numerical reference at the end. As such, you can actually make gridmanager work in Bootstrap 2.x & Foundation 5.x by just changing the various classes in the options to suit your needs. 11 | 12 | Since version 0.2.3 we went for fontawesome as a default meaning it's a lot easier to use another framework, as you don't have to constantly worry about icons. 13 | 14 | Please see the source code of the [demo foundation version](/jQuery-gridmanager/demo/foundation.html) for the recommended options to set. 15 | -------------------------------------------------------------------------------- /src/docs/_posts/2014-07-27-themeing-with-less.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Themeing with LESS" 4 | category: dev 5 | date: 2014-07-27 10:47:20 6 | --- 7 | 8 | Gridmanager.js comes with three provided themes, a default theme and a light and dark variant. The default theme is the normal ```js/jquery.gridmanger.css``` file. To use the dark theme, simply change this link to ```js/jquery.gridmanager-dark.css```. Each theme includes the full CSS core of gridmanager, so you only need to link to a single file. 9 | 10 | ### Creating your own theme 11 | 12 | There are a few options to styling the look of gridmanager. If you have no experience with LESS css preprocessing (and if you don't, I highly recommend you go and have a play), then you can just override any of the gridmanager css classes in your own style sheet. Whilst this isn't ideal, it will work. However, it makes future updates of the theme more troublesome. 13 | 14 | Ideally, you want to leverage the existing LESS files in ```src/less``` : 15 | 16 | + start by creating your own .less file: let's call it ```custom.less``` and place it in the ```src/themes/``` folder 17 | + copy and paste the contents of ```default.less``` into your ```custom.less``` file 18 | + override any variables, such as ```@canvas-color``` inbetween the ```@import``` calls to ```variables.less``` and ```core.less```. 19 | + look at ```core/variables.less``` for a list of all the variables you can set. 20 | 21 | This is the technique used to create the main gridmanger themes. Just look at ```src/dark.less``` as an example. 22 | 23 | Once you've created your ```custom.less``` file, we need to compile it. 24 | 25 | There are a couple of options here too - if your project is already compiling LESS (i.e your own custom version of bootstrap) then you can just ```@import``` the less file into your bootstrap.less file. 26 | 27 | Alternatively, use any LESS css processor of your choice to output the resultant .css file. 28 | 29 | ### LESS variables: 30 | 31 | /* Variables */ 32 | @primary: #2fa4e7; 33 | @danger : #CC0000; 34 | @gray : #999; 35 | 36 | /* Structure */ 37 | @minimum-element-height: 30px; 38 | @row-margin-bottom: 5px; 39 | 40 | /* Canvas */ 41 | @canvas-color: #fff; 42 | 43 | /* Rows */ 44 | @row-border-color: @gray; 45 | @row-background-color: none; 46 | @row-tools-background-color: none; 47 | @row-icon-color: darken(@gray, 20%); 48 | @row-icon-color-bg: none; 49 | @row-icon-color-hover: #fff; 50 | @row-icon-color-bg-hover: @primary; 51 | 52 | /* Cols */ 53 | @col-border-color: @primary; 54 | @col-background-color: none; 55 | @col-tools-background-color: none; 56 | @col-icon-color: darken(@primary, 5%); 57 | @col-icon-color-bg: none; 58 | @col-icon-color-hover: #fff; 59 | @col-icon-color-bg-hover: @primary; 60 | @col-selected-color: @primary; 61 | 62 | /* Editable Regions */ 63 | @editable-border-color: @danger; 64 | @editable-icon-color: #fff; 65 | 66 | /* Icons */ 67 | @control-bar-font-size: 14px; 68 | @row-icon-font-size: 15px; 69 | @col-icon-font-size: 14px; 70 | @element-font-size: 10px; -------------------------------------------------------------------------------- /src/docs/bin/jekyll-page: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | require 'date' 4 | require 'optparse' 5 | 6 | options = { 7 | # Expects to be in the bin/ sub-directory by default 8 | :path => File.dirname(File.dirname(__FILE__)) 9 | } 10 | 11 | parser = OptionParser.new do |opt| 12 | opt.banner = 'usage: jekyll-page TITLE CATEGORY [FILENAME] [OPTIONS]' 13 | opt.separator '' 14 | opt.separator 'Options' 15 | opt.on('-e', '--edit', 'Edit the page') do |edit| 16 | options[:edit] = true 17 | end 18 | opt.on('-l', '--link', 'Relink pages') do |link| 19 | options[:link] = true 20 | end 21 | opt.on('-p PATH', '--path PATH', String, 'Path to project root') do |path| 22 | options[:path] = path 23 | end 24 | opt.separator '' 25 | end 26 | 27 | parser.parse! 28 | 29 | title = ARGV[0] 30 | category = ARGV[1] 31 | filename = ARGV[2] 32 | 33 | # Resolve any relative links 34 | BASE_DIR = File.expand_path(options[:path]) 35 | POSTS_DIR = "#{BASE_DIR}/_posts" 36 | PAGES_DIR = "#{BASE_DIR}/_pages" 37 | 38 | # Ensure the _posts directory exists (we are in the correct directory) 39 | if not Dir.exists?(POSTS_DIR) 40 | puts "#{POSTS_DIR} directory does not exists" 41 | exit 42 | end 43 | 44 | # Create _pages directory if it doesn't exist 45 | if not Dir.exists?(PAGES_DIR) 46 | Dir.mkdir(PAGES_DIR) 47 | end 48 | 49 | if options[:link] 50 | Dir.foreach(POSTS_DIR) do |name| 51 | next if name[0] == '.' 52 | nodate = name[/\d{4}-\d{2}-\d{2}-(?.*)/, 'rest'] 53 | if File.symlink?("#{PAGES_DIR}/#{nodate}") 54 | File.delete("#{PAGES_DIR}/#{nodate}") 55 | end 56 | abspath = File.absolute_path("#{POSTS_DIR}/#{name}") 57 | File.symlink(abspath, "#{PAGES_DIR}/#{nodate}") 58 | end 59 | end 60 | 61 | if not title or not category 62 | # This flag can be used by itself, exit silently if no arguments 63 | # are defined 64 | if not options[:link] 65 | puts parser 66 | end 67 | exit 68 | end 69 | 70 | if not filename 71 | filename = title.downcase.gsub(/[^a-z0-9\s]/, '').gsub(/\s+/, '-') 72 | end 73 | 74 | today=Date.today().strftime('%F') 75 | now=DateTime.now().strftime('%F %T') 76 | 77 | filepath = "#{POSTS_DIR}/#{today}-#{filename}.md" 78 | symlink = "#{PAGES_DIR}/#{filename}.md" 79 | 80 | if File.exists?(filepath) 81 | puts "File #{filepath} already exists" 82 | exit 83 | end 84 | 85 | content = < .page-header:first-child { 38 | margin-top: 0; 39 | } 40 | 41 | #content > .page-header:first-child h2 { 42 | margin-top: 0; 43 | } 44 | 45 | 46 | #navigation { 47 | font-size: 0.9em; 48 | } 49 | 50 | #navigation li a { 51 | padding-left: 10px; 52 | padding-right: 10px; 53 | } 54 | 55 | #navigation .nav-header { 56 | padding-left: 0; 57 | padding-right: 0; 58 | } 59 | -------------------------------------------------------------------------------- /src/docs/css/syntax.css: -------------------------------------------------------------------------------- 1 | .highlight .hll { background-color: #ffffcc } 2 | .highlight { background: #ffffff; } 3 | .highlight .c { color: #888888 } /* Comment */ 4 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 5 | .highlight .k { color: #008800; font-weight: bold } /* Keyword */ 6 | .highlight .cm { color: #888888 } /* Comment.Multiline */ 7 | .highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */ 8 | .highlight .c1 { color: #888888 } /* Comment.Single */ 9 | .highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */ 10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .highlight .ge { font-style: italic } /* Generic.Emph */ 12 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 13 | .highlight .gh { color: #333333 } /* Generic.Heading */ 14 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 15 | .highlight .go { color: #888888 } /* Generic.Output */ 16 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 17 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 18 | .highlight .gu { color: #666666 } /* Generic.Subheading */ 19 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 20 | .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ 21 | .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ 22 | .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ 23 | .highlight .kp { color: #008800 } /* Keyword.Pseudo */ 24 | .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ 25 | .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ 26 | .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ 27 | .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ 28 | .highlight .na { color: #336699 } /* Name.Attribute */ 29 | .highlight .nb { color: #003388 } /* Name.Builtin */ 30 | .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ 31 | .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ 32 | .highlight .nd { color: #555555 } /* Name.Decorator */ 33 | .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ 34 | .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ 35 | .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ 36 | .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ 37 | .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ 38 | .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ 39 | .highlight .nv { color: #336699 } /* Name.Variable */ 40 | .highlight .ow { color: #008800 } /* Operator.Word */ 41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 42 | .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ 43 | .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ 44 | .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ 45 | .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ 46 | .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ 47 | .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ 48 | .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ 49 | .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ 50 | .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ 51 | .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ 52 | .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ 53 | .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ 54 | .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ 55 | .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ 56 | .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ 57 | .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ 58 | .highlight .vc { color: #336699 } /* Name.Variable.Class */ 59 | .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ 60 | .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ 61 | .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */ 62 | -------------------------------------------------------------------------------- /src/docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: "Gridmanager.js Documentation" 4 | --- 5 | 6 | ## gridmanager.js 7 | 8 | ### What is it? 9 | 10 | Gridmanager allows you to create, reorder, update & delete rows and columns in grid layouts used by frameworks such as Bootstrap 3.x or Foundation 5.x. It is *not* another Rich Text Editor (although it can use them), and is designed to work more as a structural / page building device for use in web applications, custom CMS system etc. 11 | 12 | #### You can: 13 | 14 | - Drag and drop columns & rows 15 | - Resize, delete and add columns on the fly 16 | - Apply custom column and row classes 17 | - Nest rows within columns 18 | - Quickly edit the source code directly 19 | - Add row templates for common column width layouts 20 | - Add/Alter the ID of a column or row directly 21 | - Add, Edit, Delete, Sort editable regions to change column/row text 22 | - Tie in Rich Text Editors such as TinyMCE & CKEditor to those editable regions 23 | - Change layout modes for easy editing & previewing of responsive classes 24 | - Use fluid rows if you want 25 | - Create your own custom controls for easily extending functionality 26 | 27 | #### Changelog 28 | 29 | + 0.3.1 30 | - New style of editable regions which are stackable/editable/deletable 31 | - Added: default editable region button 32 | - Added: Theming using LESS 33 | - Default, light & dark themes now available 34 | - Large visual cleanup 35 | - Fixed: remoteURL now posts as proper key/value pair 36 | - Added: initMarkup() to autowrap non commented markup 37 | - Added: editableRegionEnabled & autoEdit options 38 | - Added: additional filterCallback option which runs on init(); 39 | + 0.3.0 40 | - Nested row & column support & new add nested row button 41 | - Added ability to add custom controls on rows & columns (with your own callbacks) 42 | - Added Custom column classes in addition to row classes 43 | - RTE's are now attached to their own editable regions within columns 44 | - Responsive class support added 45 | - Responsive class layout mode added 46 | - Font Awesome now the icon default 47 | - Documentation now available at http://neokoenig.github.io/jQuery-gridmanager/docs 48 | + 0.2.2 49 | - Modal removed; 50 | - Source code editing now available directly. 51 | - Basic (very basic) foundation support with correct config. 52 | - Editable Custom row classes. 53 | - Editable Custom Row IDs 54 | + 0.2.1 55 | - Fluid rows now supported. 56 | - Columns are now resizable. 57 | - Column moving improved. 58 | - Source code alert now modal 59 | + 0.2.0 60 | - TinyMCE, CKEditor now supported. 61 | - Columns now moveable. 62 | - Added reset, alert features, redid CSS and most of the plugin 63 | + 0.1.1 64 | - CSS moved to it's own file. 65 | - Slight visual tweaks. 66 | + 0.1.0 67 | - initial alpha test. 68 | 69 | #### Licence 70 | 71 | Released under the MIT licence. Go wild. 72 | 73 | #### Contributors 74 | 75 | + [Tom King](https://github.com/neokoenig/) 76 | + [Percy D Brea](https://github.com/pbreah/) 77 | 78 | #### Blog Posts 79 | + http://www.oxalto.co.uk/2014/07/gridmanager-js-0-3-0-released/ 80 | + http://www.oxalto.co.uk/2014/05/gridmanager-js-0-2-1-released/ 81 | + http://www.oxalto.co.uk/2014/05/gridmanager-js-0-2-0-released/ 82 | + http://www.oxalto.co.uk/2014/05/introducing-gridmanager-js/ -------------------------------------------------------------------------------- /src/foundation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |
50 |

Kitteh Left

51 |

Kitteh Middle

52 |

Kitteh Right

53 |
54 |
55 |

Kitteh Left

56 |
57 |

Kitteh Right

58 |
59 |
60 |
...
61 |
...
62 |
63 |
64 |
...
65 |
...
66 |
67 |
68 |
...
69 |
...
70 |
71 |
72 |
...
73 |
...
74 |
75 |
76 |
77 | 78 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /src/gridmanager.css: -------------------------------------------------------------------------------- 1 | #gm-controls{margin:5px 0}#gm-controls button,#gm-controls a{font-size:14px}#gm-canvas{min-height:100;background:#fff}#gm-canvas textarea{width:100%;height:100%}#gm-canvas .gm-editing{border-top:solid 1px #2fa4e7;border-left:solid 1px #2fa4e7;border-right:solid 1px #2fa4e7;border-bottom:solid 1px #2fa4e7;min-height:30px;background-color:none}#gm-canvas .gm-editing-selected{-webkit-box-shadow:0 0 5px 0 #2fa4e7;-moz-box-shadow:0 0 5px 0 #2fa4e7;box-shadow:0 0 5px 0 #2fa4e7}#gm-canvas .gm-editable-region{border-top:solid 1px #c00;border-left:solid 1px #c00;border-right:solid 1px #c00;border-bottom:solid 1px #c00;border-style:dotted;margin-bottom:2px;min-height:30px -10;padding:0 20}#gm-canvas .gm-editable-region .gm-controls-element{top:0;right:0;display:block}#gm-canvas .gm-editable-region .gm-controls-element a{color:#fff;font-size:10px}#gm-canvas .gm-editable-region .gm-controls-element .gm-move{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:6px;border-top-left-radius:6px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:left;background-color:#c00;padding:4px;margin-left:-17px}#gm-canvas .gm-editable-region .gm-controls-element .gm-delete{-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:right;background-color:#c00;padding:4px;margin-right:-17px;border-radius:0 8px 8px 0}#gm-canvas .gm-tools{background-color:none;min-height:30px;display:block;clear:both;margin-left:-13px;margin-right:-14px}#gm-canvas .gm-tools a{color:#1a99e2;font-size:14px;padding:5px 5px 5px 8px;float:left;cursor:pointer;background-color:none}#gm-canvas .gm-tools a:hover{background-color:#2fa4e7;color:#fff;text-decoration:none}#gm-canvas .gm-tools label,#gm-canvas .gm-tools input{font-size:10px}#gm-canvas .gm-tools .gm-removeRow:hover,#gm-canvas .gm-tools .gm-removeCol:hover{background-color:#c00;color:#fff}#gm-canvas .gm-tools .gm-moveCol,#gm-canvas .gm-tools .gm-moveRow{cursor:move}#gm-canvas .row.gm-editing,#gm-canvas .row-fluid.gm-editing{background-color:none;margin:0 0 5px 0;padding:0 5px 0 5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-top-left-radius:5px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;border-top:solid 1px #999;border-left:solid 1px #999;border-right:solid 1px #999;border-bottom:solid 1px #999;-webkit-box-shadow:0 1px 2px #999;-moz-box-shadow:0 1px 2px #999;box-shadow:0 1px 2px #999}#gm-canvas .row.gm-editing>.gm-tools,#gm-canvas .row-fluid.gm-editing>.gm-tools{background-color:none;margin-right:0;margin-left:0}#gm-canvas .row.gm-editing>.gm-tools a,#gm-canvas .row-fluid.gm-editing>.gm-tools a{color:#666;background-color:none;font-size:15px}#gm-canvas .row.gm-editing>.gm-tools a:hover,#gm-canvas .row-fluid.gm-editing>.gm-tools a:hover{color:#fff;background-color:#2fa4e7}.layout-mode a:hover{cursor:pointer} -------------------------------------------------------------------------------- /src/gridmanager_dark.css: -------------------------------------------------------------------------------- 1 | #gm-controls{margin:5px 0}#gm-controls button,#gm-controls a{font-size:14px}#gm-canvas{min-height:100;background:none}#gm-canvas textarea{width:100%;height:100%}#gm-canvas .gm-editing{border-top:solid 1px #ffa500;border-left:solid 1px #ffa500;border-right:solid 1px #ffa500;border-bottom:solid 1px #ffa500;min-height:30px;background-color:#111}#gm-canvas .gm-editing-selected{-webkit-box-shadow:0 0 5px 0 #ffa500;-moz-box-shadow:0 0 5px 0 #ffa500;box-shadow:0 0 5px 0 #ffa500}#gm-canvas .gm-editable-region{border-top:solid 1px #c00;border-left:solid 1px #c00;border-right:solid 1px #c00;border-bottom:solid 1px #c00;border-style:dotted;margin-bottom:2px;min-height:30px -10;padding:0 20}#gm-canvas .gm-editable-region .gm-controls-element{top:0;right:0;display:block}#gm-canvas .gm-editable-region .gm-controls-element a{color:#fff;font-size:10px}#gm-canvas .gm-editable-region .gm-controls-element .gm-move{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:6px;border-top-left-radius:6px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:left;background-color:#c00;padding:4px;margin-left:-17px}#gm-canvas .gm-editable-region .gm-controls-element .gm-delete{-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:right;background-color:#c00;padding:4px;margin-right:-17px;border-radius:0 8px 8px 0}#gm-canvas .gm-tools{background-color:none;min-height:30px;display:block;clear:both;margin-left:-13px;margin-right:-14px}#gm-canvas .gm-tools a{color:#e69500;font-size:14px;padding:5px 5px 5px 8px;float:left;cursor:pointer;background-color:none}#gm-canvas .gm-tools a:hover{background-color:#ffa500;color:#111;text-decoration:none}#gm-canvas .gm-tools label,#gm-canvas .gm-tools input{font-size:10px}#gm-canvas .gm-tools .gm-removeRow:hover,#gm-canvas .gm-tools .gm-removeCol:hover{background-color:#c00;color:#fff}#gm-canvas .gm-tools .gm-moveCol,#gm-canvas .gm-tools .gm-moveRow{cursor:move}#gm-canvas .row.gm-editing,#gm-canvas .row-fluid.gm-editing{background-color:#222;margin:0 0 5px 0;padding:0 5px 0 5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-top-left-radius:5px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;border-top:solid 1px #ccc;border-left:solid 1px #ccc;border-right:solid 1px #ccc;border-bottom:solid 1px #ccc;-webkit-box-shadow:0 1px 2px #ccc;-moz-box-shadow:0 1px 2px #ccc;box-shadow:0 1px 2px #ccc}#gm-canvas .row.gm-editing>.gm-tools,#gm-canvas .row-fluid.gm-editing>.gm-tools{background-color:#333;margin-right:0;margin-left:0}#gm-canvas .row.gm-editing>.gm-tools a,#gm-canvas .row-fluid.gm-editing>.gm-tools a{color:#999;background-color:none;font-size:15px}#gm-canvas .row.gm-editing>.gm-tools a:hover,#gm-canvas .row-fluid.gm-editing>.gm-tools a:hover{color:#111;background-color:#ffa500}.layout-mode a:hover{cursor:pointer} -------------------------------------------------------------------------------- /src/gridmanager_light.css: -------------------------------------------------------------------------------- 1 | #gm-controls{margin:5px 0}#gm-controls button,#gm-controls a{font-size:14px}#gm-canvas{min-height:100;background:#fff}#gm-canvas textarea{width:100%;height:100%}#gm-canvas .gm-editing{border-top:solid 1px #9aaeff;border-left:solid 1px #9aaeff;border-right:solid 1px #9aaeff;border-bottom:solid 1px #9aaeff;min-height:30px;background-color:none}#gm-canvas .gm-editing-selected{-webkit-box-shadow:0 0 5px 0 #9aaeff;-moz-box-shadow:0 0 5px 0 #9aaeff;box-shadow:0 0 5px 0 #9aaeff}#gm-canvas .gm-editable-region{border-top:solid 1px #c00;border-left:solid 1px #c00;border-right:solid 1px #c00;border-bottom:solid 1px #c00;border-style:dotted;margin-bottom:2px;min-height:30px -10;padding:0 20}#gm-canvas .gm-editable-region .gm-controls-element{top:0;right:0;display:block}#gm-canvas .gm-editable-region .gm-controls-element a{color:#fff;font-size:10px}#gm-canvas .gm-editable-region .gm-controls-element .gm-move{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:6px;border-top-left-radius:6px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:left;background-color:#c00;padding:4px;margin-left:-17px}#gm-canvas .gm-editable-region .gm-controls-element .gm-delete{-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:0;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;float:right;background-color:#c00;padding:4px;margin-right:-17px;border-radius:0 8px 8px 0}#gm-canvas .gm-tools{background-color:none;min-height:30px;display:block;clear:both;margin-left:-13px;margin-right:-14px}#gm-canvas .gm-tools a{color:#819aff;font-size:14px;padding:5px 5px 5px 8px;float:left;cursor:pointer;background-color:none}#gm-canvas .gm-tools a:hover{background-color:#9aaeff;color:#fff;text-decoration:none}#gm-canvas .gm-tools label,#gm-canvas .gm-tools input{font-size:10px}#gm-canvas .gm-tools .gm-removeRow:hover,#gm-canvas .gm-tools .gm-removeCol:hover{background-color:#c00;color:#fff}#gm-canvas .gm-tools .gm-moveCol,#gm-canvas .gm-tools .gm-moveRow{cursor:move}#gm-canvas .row.gm-editing,#gm-canvas .row-fluid.gm-editing{background-color:none;margin:0 0 5px 0;padding:0 5px 0 5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-top-left-radius:5px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;border-top:solid 1px #b3b3b3;border-left:solid 1px #b3b3b3;border-right:solid 1px #b3b3b3;border-bottom:solid 1px #b3b3b3;-webkit-box-shadow:0 1px 2px #b3b3b3;-moz-box-shadow:0 1px 2px #b3b3b3;box-shadow:0 1px 2px #b3b3b3}#gm-canvas .row.gm-editing>.gm-tools,#gm-canvas .row-fluid.gm-editing>.gm-tools{background-color:none;margin-right:0;margin-left:0}#gm-canvas .row.gm-editing>.gm-tools a,#gm-canvas .row-fluid.gm-editing>.gm-tools a{color:#7f7f7f;background-color:none;font-size:15px}#gm-canvas .row.gm-editing>.gm-tools a:hover,#gm-canvas .row-fluid.gm-editing>.gm-tools a:hover{color:#fff;background-color:#9aaeff}.layout-mode a:hover{cursor:pointer} -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 |
45 |
46 |
47 |
48 | 49 | 50 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /src/less/core/core.less: -------------------------------------------------------------------------------- 1 | /* 2 | * GridManager CORE LESS 3 | * 4 | * 5 | * Copyright (c) 2014 Tom King 6 | * Licensed under the MIT license. 7 | */ 8 | /*=========== mixins===============*/ 9 | .gm-box-shadow(@arguments) { 10 | -webkit-box-shadow: @arguments; 11 | -moz-box-shadow: @arguments; 12 | box-shadow: @arguments; 13 | } 14 | .gm-bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { 15 | border-top: solid 1px @top-color; 16 | border-left: solid 1px @left-color; 17 | border-right: solid 1px @right-color; 18 | border-bottom: solid 1px @bottom-color; 19 | } 20 | .gm-border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { 21 | -webkit-border-top-right-radius: @topright; 22 | -webkit-border-bottom-right-radius: @bottomright; 23 | -webkit-border-bottom-left-radius: @bottomleft; 24 | -webkit-border-top-left-radius: @topleft; 25 | -moz-border-radius-topright: @topright; 26 | -moz-border-radius-bottomright: @bottomright; 27 | -moz-border-radius-bottomleft: @bottomleft; 28 | -moz-border-radius-topleft: @topleft; 29 | border-top-right-radius: @topright; 30 | border-bottom-right-radius: @bottomright; 31 | border-bottom-left-radius: @bottomleft; 32 | border-top-left-radius: @topleft; 33 | .gm-background-clip(padding-box); 34 | } 35 | .gm-background-clip(@argument: padding-box) { 36 | -moz-background-clip: @argument; 37 | -webkit-background-clip: @argument; 38 | background-clip: @argument; 39 | } 40 | /*=========== core css===============*/ 41 | /* Control bar */ 42 | #gm-controls {margin:5px 0; 43 | button, a {font-size: @control-bar-font-size;} 44 | } 45 | 46 | /* Main Editing Space */ 47 | #gm-canvas {min-height: 100; 48 | background:@canvas-color; 49 | textarea {width:100%; height: 100%;} 50 | 51 | 52 | /* rows & cols identified by gm: really, this is the column styling as row gets overridden below. 53 | the column selector is inefficent in BS3 as it would need a wild card */ 54 | .gm-editing { 55 | .gm-bordered(@col-border-color,@col-border-color,@col-border-color,@col-border-color); 56 | min-height: @minimum-element-height; 57 | background-color: @col-background-color; 58 | 59 | } 60 | 61 | /* element selected via checkbox */ 62 | .gm-editing-selected { 63 | .gm-box-shadow(0 0 5px 0 @col-selected-color); 64 | } 65 | 66 | /* main editable region */ 67 | .gm-editable-region{ 68 | .gm-bordered(@editable-border-color,@editable-border-color,@editable-border-color,@editable-border-color); 69 | border-style: dotted; 70 | margin-bottom:2px; 71 | min-height: @minimum-element-height -10; 72 | padding:0 20; 73 | 74 | .gm-controls-element { top: 0; right: 0; display: block; 75 | a {color: #fff; font-size: @element-font-size; } 76 | .gm-move { 77 | .gm-border-radius(0, 0, 6px, 6px); 78 | float:left; 79 | background-color:@editable-border-color; 80 | padding:4px; 81 | margin-left:-17px; } 82 | .gm-delete { 83 | .gm-border-radius(6px, 6px, 0, 0); 84 | float:right; 85 | background-color: @editable-border-color; 86 | padding:4px; 87 | margin-right:-17px; 88 | border-radius:0 8px 8px 0; } 89 | } 90 | } 91 | 92 | 93 | /* Default tools */ 94 | .gm-tools { 95 | background-color: @col-tools-background-color; 96 | min-height:@minimum-element-height; display:block; clear:both; margin-left:-13px; margin-right: -14px; 97 | 98 | // Applies to the majority of icons 99 | a { 100 | color: @col-icon-color; 101 | font-size: @col-icon-font-size; 102 | padding:5px 5px 5px 8px; 103 | float:left; 104 | cursor: pointer; 105 | background-color: @col-icon-color-bg; 106 | } 107 | a:hover { 108 | background-color: @col-icon-color-bg-hover; 109 | color:@col-icon-color-hover; 110 | text-decoration: none; 111 | } 112 | 113 | label, input {font-size:@element-font-size;} 114 | .gm-removeRow:hover, .gm-removeCol:hover {background-color:@danger; color:#fff;} 115 | .gm-moveCol, .gm-moveRow {cursor: move;} 116 | } 117 | 118 | /* Row specific overrides */ 119 | .row.gm-editing, .row-fluid.gm-editing { 120 | background-color: @row-background-color; 121 | margin: 0 0 @row-margin-bottom 0; 122 | padding: 0 5px 0 5px; 123 | //margin: 3px; 124 | 125 | //.box-shadow( inset -1px -1px 14px -1px #2fa4e7); 126 | .gm-border-radius(5px,5px,5px,5px); 127 | .gm-bordered(@row-border-color,@row-border-color,@row-border-color,@row-border-color); 128 | .gm-box-shadow(0 1px 2px @gray); 129 | > .gm-tools { 130 | background-color: @row-tools-background-color; 131 | margin-right:0; margin-left:0; 132 | a {color:@row-icon-color; background-color:@row-icon-color-bg; font-size: @row-icon-font-size;} 133 | a:hover {color:@row-icon-color-hover; background-color:@row-icon-color-bg-hover;} 134 | } 135 | } 136 | 137 | } 138 | 139 | .layout-mode a:hover {cursor: pointer;} -------------------------------------------------------------------------------- /src/less/core/variables.less: -------------------------------------------------------------------------------- 1 | /* 2 | * GridManager Default Variables 3 | * 4 | * 5 | * Copyright (c) 2014 Tom King 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | /* Variables */ 10 | @primary: #2fa4e7; 11 | @danger : #CC0000; 12 | @gray : #999; 13 | 14 | /* Structure */ 15 | @minimum-element-height: 30px; 16 | @row-margin-bottom: 5px; 17 | 18 | /* Canvas */ 19 | @canvas-color: #fff; 20 | 21 | /* Rows */ 22 | @row-border-color: @gray; 23 | @row-background-color: none; 24 | @row-tools-background-color: none; 25 | @row-icon-color: darken(@gray, 20%); 26 | @row-icon-color-bg: none; 27 | @row-icon-color-hover: #fff; 28 | @row-icon-color-bg-hover: @primary; 29 | 30 | /* Cols */ 31 | @col-border-color: @primary; 32 | @col-background-color: none; 33 | @col-tools-background-color: none; 34 | @col-icon-color: darken(@primary, 5%); 35 | @col-icon-color-bg: none; 36 | @col-icon-color-hover: #fff; 37 | @col-icon-color-bg-hover: @primary; 38 | @col-selected-color: @primary; 39 | 40 | /* Editable Regions */ 41 | @editable-border-color: @danger; 42 | @editable-icon-color: #fff; 43 | 44 | /* Icons */ 45 | @control-bar-font-size: 14px; 46 | @row-icon-font-size: 15px; 47 | @col-icon-font-size: 14px; 48 | @element-font-size: 10px; -------------------------------------------------------------------------------- /src/less/themes/dark.less: -------------------------------------------------------------------------------- 1 | /* 2 | * GridManager Dark Theme 3 | * 4 | * 5 | * Copyright (c) 2014 Tom King 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | 10 | /* Default theme uses default variables */ 11 | @import "../core/variables.less"; 12 | 13 | /* Dark Theme Overrides */ 14 | @primary: orange; 15 | @gray: lighten(#999, 20%); 16 | @canvas-color: none; 17 | @row-background-color: #222; 18 | @row-tools-background-color: #333; 19 | @col-background-color: #111; 20 | @col-icon-color-hover: #111; 21 | @row-icon-color-hover: #111; 22 | 23 | /* Gridmanager core elements*/ 24 | @import "../core/core.less"; -------------------------------------------------------------------------------- /src/less/themes/default.less: -------------------------------------------------------------------------------- 1 | /* 2 | * GridManager Default Theme 3 | * 4 | * 5 | * Copyright (c) 2014 Tom King 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | /* Default theme uses default variables */ 10 | @import "../core/variables.less"; 11 | 12 | /* Gridmanager core elements*/ 13 | @import "../core/core.less"; -------------------------------------------------------------------------------- /src/less/themes/light.less: -------------------------------------------------------------------------------- 1 | /* 2 | * GridManager Light Theme 3 | * 4 | * 5 | * Copyright (c) 2014 Tom King 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | 10 | /* Default theme uses default variables */ 11 | @import "../core/variables.less"; 12 | 13 | /* Light Theme Overrides */ 14 | @primary: #9aaeff; 15 | @gray : lighten(#999, 10%); 16 | 17 | /* Gridmanager core elements*/ 18 | @import "../core/core.less"; -------------------------------------------------------------------------------- /src/markup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gridmanager Development 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 42 | 43 | 44 | 45 |
46 |
47 |
48 |

Wrap me 1

49 |

This markup will not be wrapped properly

50 |

Wrap me 3

51 |
52 |

Wrap me 1

Wrap me 2

Wrap me 3

53 |
54 |
55 |
56 |

This markup will not be wrapped properly

57 |

Wrap me before nest 2

58 |

Wrap me before nest 3

59 |
60 |

Wrap me 1

61 |

Wrap me 1

62 |
63 |

This markup will be wrapped properly as there's no linebreaks

This markup will be wrapped properly as there's no linebreaks

64 |
65 |

Wrap me 1

66 |

Wrap me 1

67 |
68 | 69 |

Wrap me after nest 4

70 |
71 |
72 |
73 | 74 | 75 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /test/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "browser": true, 14 | "predef": [ 15 | "jQuery", 16 | "QUnit", 17 | "module", 18 | "test", 19 | "asyncTest", 20 | "expect", 21 | "start", 22 | "stop", 23 | "ok", 24 | "equal", 25 | "notEqual", 26 | "deepEqual", 27 | "notDeepEqual", 28 | "strictEqual", 29 | "notStrictEqual", 30 | "throws" 31 | ] 32 | } -------------------------------------------------------------------------------- /test/gridmanager.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery GridManager Test Suite 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /test/gridmanager_test.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | module('jQuery#gridmanager', { 4 | // This will run before each test in this module. 5 | setup: function() { 6 | this.elems = $('#qunit-fixture').children(); 7 | } 8 | }); 9 | }(jQuery)); 10 | --------------------------------------------------------------------------------