Merge pull request #154 from highcharts/ui-experiment

Merge in version 0.2.0

Author: cvasseng

.eslintrc

@@ -10,6 +10,6 @@ rules:
     no-unmodified-loop-condition: 0
     object-curly-spacing: [2, "always"]
     operator-linebreak: [2, "after"]
-    space-before-function-paren: [2, {"anonymous": "always", "named": "never"}] # JSLint style
+    # space-before-function-paren: [2, {"anonymous": "always", "named": "never"}] # JSLint style
     strict: 0
     quotes: [2, "single"]

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.2.0-beta-preview
+# 0.2.0-rc1
   * Added `complete` target to build script which bakes in all modules and advanced mode into one source file
   * Re-implemented advanced view: now has a smaller footprint, and bugs regarding arrays are fixed
   * Grid data importer is now the default (can be disabled by overriding `features` when instancing the editor)
@@ -8,12 +8,19 @@
   * Templates now have sample data sets associated with them
   * Module system for product bundles: Highstock support now lives in its own module so that it's easier to include just what's needed. This is the first step in enabling maps support.
   * WordPress plugin now has a settings page (Under "Settings" in the WP admin panel) where advanced mode, and Highstock support can be toggled
+  * New design
+  * New modal-based help system
+  * Highcharts Cloud integrations - save/load charts to/from the cloud
+  * Google Spreadsheets now integrated out-of-the-box
+  * Template thumbnails are now part of the editor rather than linking to cloud.highcharts.com
   * Misc bug fixes and enhancements
+  * Editor plugins are now deprecated: use `editor.on('ChartChangedLately'..)` instead.
   * Custom wizard steps can now be added using the `highed.plugins.step` interface
   * Added sticky chart properties. See [wiki](https://github.com/highcharts/highcharts-editor/wiki/Sticky-Chart-Options).
   * Added `highed.options` to set multiple options in one call.
   * Added `defaultLanguage` to global options
   * Added `includeCDNInExport` to global options, which when false will not include CDN references in HTML exports
+  * Added `thumbnailURL` to global options, which allows for specifying where to fetch the template thumbnails from
 
 ## NOTES
 

README.md

@@ -5,11 +5,11 @@ Highcharts Editor
 
 # IMPORTANT NOTICE
 
-**The Highcharts Editor is currently in Beta. The master branch is not suited for production - use one of the [pre-built releases](https://github.com/highcharts/highcharts-editor/releases).
+**The Highcharts Editor is currently in Beta. The master branch is not suited for production - use one of the [pre-built releases](https://github.com/highcharts/highcharts-editor/releases).**
 
 ## Introduction
 
-![screenshots/customize.png](screenshots/customize.png)
+![screenshots/customize.png](screenshots/new_design.png)
 
 **[Click here for live demos](http://editor.highcharts.com)**
 
@@ -21,11 +21,28 @@ It requires no back-end service to operate.
   * Light on dependencies: requires only Highcharts, FontAwesome, and (optionally) two Google Fonts
   * Lightweight: weighs in at ~40kb minified and gzipped
   * 100% client-side
+  * Integration with Highcharts Cloud
   * Outputs embeddable HTML, JavaScript, and JSON
-  * Optional wizard-style interface
   * Highly configurable
   * Plug-in system
 
+## Note about upgrading from 0.1.3
+
+The transition from 0.1.3 to 0.2.0 introduces some fundemental changes. 
+
+Most notable is the complete design overhaul.
+
+There are however also changes to the way the editor is built.
+
+Previously, templates were part of the default build - now, templates are bundled
+in separate product bundles. This means that in order for the default templates to
+show up, `highcharts-editor.with.modules.min.js` must also be included.
+
+Alternatively, include `highcharts-editor.complete.js` which includes the editor itself, all templates,
+and advanced mode baked into a single file.
+
+A full list of changes can be found [here](CHANGELOG.md).
+
 ## Installing and Building
 
 **Pre-built**
@@ -45,6 +62,7 @@ You can find these [here](https://github.com/highcharts/highcharts-editor/releas
   * `gulp`: Builds distribution packages for the editor and the bundled integrations and plugins
   * `gulp electron`: Builds Electron packages for Windows/Linux/OSX
   * `gulp with-advanced`: Builds packages for the advanced editor which exposes all API settings
+  * `gulp complete`: Builds a complete bundle with advanced mode, and all supported modules
 
 **Notice for windows users:** You need [7zip](http://www.7-zip.org/) installed and added to your path for `gulp electron` to work!
 
@@ -89,22 +107,14 @@ A number of example integrations are included in the editor:
   * [Electron](https://github.com/highcharts/highcharts-editor/wiki/Native-OSX-Windows-Linux)
   * [CKEditor](https://github.com/highcharts/highcharts-editor/wiki/CKEditor)
 
-## API Reference & General Documentation
-
-  * [API reference](https://github.com/highcharts/highcharts-editor/wiki/API)
+## General Documentation
   * [Full documentation](https://github.com/highcharts/highcharts-editor/wiki)
   * [Using plug-ins](https://github.com/highcharts/highcharts-editor/wiki/Plugins)
   * [Enabling the advanced editor](https://github.com/highcharts/highcharts-editor/wiki/Enable-Advanced-Customization)
   * [Customizing available editable properties](https://github.com/highcharts/highcharts-editor/wiki/Choosing-Options)
   * [Adding custom templates](https://github.com/highcharts/highcharts-editor/wiki/Custom-Templates)
   * [Disabling editor features](https://github.com/highcharts/highcharts-editor/wiki/Disable-Features)
 
-Documentation can also be generated offline by running `js-skald` in the project root, which outputs the API reference
-in the `docs/`.
-
-`js-skald` is a simple doc generator that outputs markdown files and JSON trees representing the code.
-It can be installed by running `npm install -g js-skald`. 
-
 ## License
 
 The editor is licensed under [MIT](LICENSE).

ROADMAP.md

@@ -60,13 +60,9 @@
     * Wordpress
     * CKEditor
 
-## 0.2.0: Initial non-beta release, date TBA
+## Upcoming
 
-*Main focus will be bug fixes and general improvements*
-
-**Editor Features**
-
-  * Sample data for each template
-  * Interface for multiple axis in simple view
-  * Property search
-  
+  * Maps support
+  * Annotations support
+  * Convert to JSDoc instead of jskald
+  * Property searching

bin/cli.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+
+/*******************************************************************************
+
+Copyright (c) 2016-2017, Highsoft
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+******************************************************************************/
+
+const fs = require('fs');
+const mkdir = require('mkdirp');
+const args = process.argv;
+
+const options = {
+  help: {
+    help: [
+      'Displays help information.',
+      'Use help [category] to see help on specific topics, e.g. "help module"'
+    ]
+  },
+  module: {
+    help: [
+      'Module functions.'
+    ],
+    subs: {
+      init: {
+        help: [
+          'Scaffold a new editor module.'
+        ]
+      },
+      build: {
+        help: [
+          'Build the module.',
+          'The minified module ends up in the dist/ folder.'
+        ]
+      }
+    }
+  }
+};
+
+require('colors');
+
+// Print help
+function help(cat) {
+  var c = options[cat] || options;
+
+  Object.keys(c).forEach(function (key) {
+    console.log(key.bold, c[key].help.join('\n');
+  });
+}
+
+//Handle args
+args.forEach(function (a) {
+  
+});
+
+
+

bin/www

@@ -92,6 +92,8 @@ app.use('/css', expressLess(__dirname + '/../less', {
 	debug: true
 }));
 
+app.use('/help', express.static(__dirname + '/../res/help'));
+app.use('/gen_src', express.static(__dirname + '/../generated_src'));
 app.use('/src', express.static(__dirname + '/../src'));
 app.use('/plugins', express.static(__dirname + '/../plugins'));
 app.use('/integrations', express.static(__dirname + '/../integrations'));
@@ -113,6 +115,16 @@ app.get('/full', function (req, res) {
     });
 });
 
+app.get('/experiment', function (req, res) {
+    updateFiles();
+
+    res.render('ui-test', {
+        scripts: files,
+        package: package,
+        title: 'Highcharts Editor - Full'
+    });
+});
+
 app.get('/modal', function (req, res) {
     updateFiles();
 

gulpfile.js

@@ -94,7 +94,7 @@ gulp.task('bundled-modules', ['modules'], function () {
   ;
 });
 
-gulp.task('complete', ['default', 'bundled-modules', 'with-advanced'], function () {
+gulp.task('complete', ['default', 'cache-thumbnails', 'bundled-modules', 'with-advanced'], function () {
   return gulp.src([
     dest + '/' + name + '.with.modules.min.js',
     dest + '/' + name + '.advanced.js'
@@ -123,13 +123,13 @@ gulp.task('localization', function () {
   return run('node tools/gen.localization.js').exec();
 });
 
-gulp.task('fetch-thumbnails', function () {
+gulp.task('bake-thumbnails', function () {
   return run('node tools/bake.previews.js').exec();
 });
 
-gulp.task('cache-thumbnails', ['fetch-thumbnails'], function () {
+gulp.task('cache-thumbnails', ['bake-thumbnails'], function () {
   return gulp.src('generated_src/highed.meta.images.js')
-             .pipe(gulp.dest(dest))
+             // .pipe(gulp.dest(dest))
              .pipe(rename(name + '.thumbnails.min.js'))
              .pipe(uglify())
              .pipe(header(license, packageJson))