From 60b325053131da27e765bf412f1d00aee6db07ee Mon Sep 17 00:00:00 2001 From: ZitRos Date: Fri, 31 Mar 2017 23:34:35 +0300 Subject: [PATCH] Migrated to WebPack, toasts module integration, fixes to seed string specify --- gulpfile.babel.js | 41 ++++++++++++++++++++++---------- package.json | 9 ++++--- src/static/index.html | 3 ++- src/static/js/model/index.js | 5 ++-- src/static/js/settings/values.js | 14 +++++++---- src/static/scss/index.scss | 3 ++- src/static/scss/settings.scss | 7 ++++++ 7 files changed, 56 insertions(+), 26 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 29f38a3..906a247 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -1,11 +1,8 @@ import gulp from "gulp"; import rimraf from "gulp-rimraf"; +import webpack from "webpack"; import preprocess from "gulp-preprocess"; import cssMin from "gulp-cssmin"; -import browserify from "browserify"; -import to5ify from "6to5ify"; -import streamify from "gulp-streamify"; -import source from "vinyl-source-stream"; import scss from "gulp-sass"; import fs from "fs"; import mime from "mime-types"; @@ -18,6 +15,28 @@ const STATIC_DATA_FILE = `${ SOURCE_DIR }/cls/${ APP_NAME }/StaticData.cls`, context = { package: pkg + }, + webpackConfig = { + context: `${ __dirname }`, + entry: { + "index": `${ SOURCE_DIR }/static/js/index.js` + }, + output: { + path: `${ BUILD_DIR }/static/js`, + filename: `[name].js` + }, + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loader: `babel-loader`, + query: { + presets: [`es2015`] + } + } + ] + } }; function getAllFiles (dir) { @@ -66,14 +85,12 @@ gulp.task("etc", ["clean"], () => { .pipe(gulp.dest(BUILD_DIR + "/static")); }); -gulp.task("js", ["clean"], () => { - return browserify(`${ SOURCE_DIR }/static/js/index.js`, { debug: true }) - .transform(to5ify) - .bundle() - .on(`error`, (err) => { console.error(err); }) - .pipe(source("index.js")) - .pipe(streamify(preprocess({ context: context }))) - .pipe(gulp.dest(`${ BUILD_DIR }/static/js`)); +gulp.task("js", ["clean"], (done) => { + webpack(webpackConfig, (err, stats) => { + if (err) throw new Error(err); + console.log(stats.toString()); + done(err); + }); }); gulp.task("css", ["clean"], () => { diff --git a/package.json b/package.json index bf6000b..490afbd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iknow-entity-browser", - "version": "1.0.0", + "version": "1.1.1", "description": "Visualizer for iKnow entities", "main": "gulpfile.babel.js", "scripts": { @@ -14,18 +14,17 @@ "author": "ZitRo", "license": "MIT", "devDependencies": { - "6to5ify": "^4.1.1", "babel": "^6.23.0", "babel-core": "^6.23.1", + "babel-loader": "^6.4.1", "babel-preset-es2015": "^6.22.0", - "browserify": "^14.1.0", "gulp": "^3.9.1", "gulp-cssmin": "^0.1.7", "gulp-preprocess": "^2.0.0", "gulp-rimraf": "^0.2.0", "gulp-sass": "^3.1.0", - "gulp-streamify": "^1.0.2", "mime-types": "^2.1.15", - "vinyl-source-stream": "^1.1.0" + "toaster-js": "^1.0.4", + "webpack": "^2.3.2" } } diff --git a/src/static/index.html b/src/static/index.html index 401e830..0bd22bf 100644 --- a/src/static/index.html +++ b/src/static/index.html @@ -194,7 +194,8 @@

Tabular View Settings

diff --git a/src/static/js/model/index.js b/src/static/js/model/index.js index 72e8585..7671895 100644 --- a/src/static/js/model/index.js +++ b/src/static/js/model/index.js @@ -3,6 +3,7 @@ import { getData } from "../source"; import { getOption } from "../settings/values"; import { toggleLoader } from "../utils"; import * as history from "./history"; +import { Toast } from "toaster-js"; let SIZE_CRITERIA = "frequency", FOLDING_CRITERIA = "frequency", @@ -119,7 +120,7 @@ export function update () { getData(data => { toggleLoader(false); if (data.error || !data.graph) { - alert(data.error || `No graph data returned`); + new Toast(data.error || `No graph data returned`, Toast.TYPE_ERROR); } else { graph = preprocess(data.graph); dataUpdated(true); @@ -304,7 +305,7 @@ export function dropNodes (nodes) { if (i === -1) { console.error( `There is a mess occurred with the tree model structure while dropping nodes: ` - `node's parent is pointing to a node which doesn't have this node as a child.` + + `node's parent is pointing to a node which doesn't have this node as a child.` ); continue; } diff --git a/src/static/js/settings/values.js b/src/static/js/settings/values.js index 1c715b6..6925367 100644 --- a/src/static/js/settings/values.js +++ b/src/static/js/settings/values.js @@ -106,12 +106,16 @@ export function setOption (options, value) { let preservedToolbarElement = null, querySettingElement = null, seedSettingElement = null, - uiState = null; + uiState = null, + lastApply = ""; export function applyFixedClasses () { - let queryParent = !uiState.settingsToggled && settings["keepQueryTypeInView"] - ? preservedToolbarElement : querySettingElement, - seedParent = !uiState.settingsToggled && settings["keepSeedInView"] - ? preservedToolbarElement : seedSettingElement; + let qt = !uiState.settingsToggled && settings["keepQueryTypeInView"], + s = !uiState.settingsToggled && settings["keepSeedInView"], + queryParent = qt ? preservedToolbarElement : querySettingElement, + seedParent = s ? preservedToolbarElement : seedSettingElement; + if (`${ qt }|${ s }` === lastApply) + return; + lastApply = `${ qt }|${ s }`; queryParent.appendChild(document.getElementById("settings.queryType")); seedParent.appendChild(document.getElementById("settings.seed")); } diff --git a/src/static/scss/index.scss b/src/static/scss/index.scss index 37152dc..bbbc801 100644 --- a/src/static/scss/index.scss +++ b/src/static/scss/index.scss @@ -35,4 +35,5 @@ html, body { @import "settings"; @import "interface"; @import "tooltip"; -@import "preservedToolbar"; \ No newline at end of file +@import "preservedToolbar"; +@import "../../../node_modules/toaster-js/default.scss"; \ No newline at end of file diff --git a/src/static/scss/settings.scss b/src/static/scss/settings.scss index 57cb1de..5c5690f 100644 --- a/src/static/scss/settings.scss +++ b/src/static/scss/settings.scss @@ -18,10 +18,17 @@ } .footer { + text-align: right; font-size: 8pt; color: gray; padding: 0 2px; + + a { + color: gray; + text-decoration: underline; + } + } }