From a74921ebe2a05fda1476514c12bc1753196b82e9 Mon Sep 17 00:00:00 2001 From: Roger Rodriguez Date: Mon, 9 Jan 2017 15:38:45 -0500 Subject: [PATCH 1/6] initial commit for backpack 2.0 --- .babelrc | 12 ++++ .editorconfig | 9 +++ bower.json | 29 ---------- dist/backpack.js | 2 + lib/backpack.js | 142 ---------------------------------------------- package.json | 33 +++++++---- src/backpack.js | 49 ++++++++++++++++ src/index.js | 3 + tests/index.html | 12 ++-- tests/tests.js | 11 ++-- webpack.config.js | 35 ++++++++++++ 11 files changed, 145 insertions(+), 192 deletions(-) create mode 100644 .babelrc create mode 100644 .editorconfig delete mode 100644 bower.json create mode 100644 dist/backpack.js delete mode 100644 lib/backpack.js create mode 100644 src/backpack.js create mode 100644 src/index.js create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..c9046f1 --- /dev/null +++ b/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "es2015", + { + "modules": false + } + ] + ], + "plugins": [ + ] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..37b1683 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +insert_final_newline = true +trim_trailing_whitespace = true +end_of_line = lf +indent_style = space +indent_size = 2 \ No newline at end of file diff --git a/bower.json b/bower.json deleted file mode 100644 index 5c40468..0000000 --- a/bower.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "mi-backpack", - "version": "1.0.0", - "authors": [ - "Roger Rodriguez " - ], - "description": "Lib for building custom apps for use with Movable Ink", - "main": "lib/backpack.js", - "moduleType": [ - "es6" - ], - "keywords": [ - "movableink", - "webcrop" - ], - "license": "MIT", - "homepage": "https://movableink.com", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "devDependencies": { - "qunit": "~1.18.0", - "jquery": "~2.1.3" - } -} diff --git a/dist/backpack.js b/dist/backpack.js new file mode 100644 index 0000000..5df9eff --- /dev/null +++ b/dist/backpack.js @@ -0,0 +1,2 @@ +!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require(void 0)):"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.Backpack=n(require(void 0)):e.Backpack=n(e.CD)}(this,function(e){return function(e){function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}var t={};return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=3)}([function(e,n,t){e.exports=t(1).default},function(e,n,t){"use strict";function o(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var r=t(2),u=t.n(r),c=function(){function e(e,n){for(var t=0;t", + "author": { + "name": "Solutions Engineering", + "email": "se@movableink.com" + }, + "contributors": [ + { + "name": "Roger Rodriguez", + "email": "rrodriguez@movableink.com" + } + ], "license": "MIT", "bugs": { "url": "https://github.com/movableink/backpack/issues" diff --git a/src/backpack.js b/src/backpack.js new file mode 100644 index 0000000..cabe88c --- /dev/null +++ b/src/backpack.js @@ -0,0 +1,49 @@ +import CD from 'cropduster'; + +export default class Backpack { + + constructor(){ + + } + + /** + * Triggers the fallback image to show + * @param msg + */ + forceFallback(msg){ + CD.cancelRequest(msg); + } + + /**** + * Creates a synthetic event + * @param eventType + * @param eventMsg + * @returns {Event} + */ + trigger(eventType, eventMsg){ + + const event = new CustomEvent(eventType, { + detail : eventMsg, + bubbles : true, + cancelable : true + }); + + document.dispatchEvent(event); + + } + + + /*** + * Attaches an event + * @param event + * @param callback + */ + on(event, callback){ + + document.addEventListener(event, (e)=>{ + callback(e); + }); + + } + +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..bb304f5 --- /dev/null +++ b/src/index.js @@ -0,0 +1,3 @@ +// a bit of a hack but exporting like this ensures we don't get +// the lib exported with `.default` in the browser +module.exports = require('./backpack').default; diff --git a/tests/index.html b/tests/index.html index 51745fa..ba47c3c 100644 --- a/tests/index.html +++ b/tests/index.html @@ -2,8 +2,7 @@ - QUnit - + Backpack Test @@ -12,10 +11,9 @@
 
- - - - + + + - \ No newline at end of file + diff --git a/tests/tests.js b/tests/tests.js index b6a6d18..d9d4350 100644 --- a/tests/tests.js +++ b/tests/tests.js @@ -1,6 +1,9 @@ +/** + * @todo: implement actual tests + */ + var app = new Backpack(); -QUnit.test("Backpack.forceFallback", function(assert) { - app.forceFallback(); - assert.equal($('#mi_size_container').length, 0, "removes element"); -}); \ No newline at end of file +console.log(app); + +app.forceFallback('sometihng'); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..ef54f1f --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,35 @@ +const {resolve} = require('path'); + +module.exports = { + + entry : [ + resolve(__dirname, 'src', 'index.js') + ], + output : { + path : resolve(__dirname, 'dist'), + filename : 'backpack.js', + library : "Backpack", + libraryTarget : "umd", + }, + context : resolve(__dirname, 'src'), + devtool : 'inline-source-map', + externals : { + 'cropduster' : { + root : 'CD' + } + }, + module : { + rules : [ + { + test : /\.js$/, + exclude : /node_modules/, + use : [ + { + loader : 'babel-loader', + } + ], + }, + ], + }, + +}; From e79ac0a764c003e7c132d7e640f66749924edbb3 Mon Sep 17 00:00:00 2001 From: Peter Lo Date: Thu, 19 Jan 2017 16:34:01 -0500 Subject: [PATCH 2/6] Added cancel and handlefallback methods --- src/backpack.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/backpack.js b/src/backpack.js index cabe88c..c9fc9bb 100644 --- a/src/backpack.js +++ b/src/backpack.js @@ -6,6 +6,32 @@ export default class Backpack { } + /** + * @param {string} msg + * create error so we can have a stack trace + */ + cancel(msg) { + this.message = msg; + this.stack = (new Error(msg)).stack; + this.handleFallback({message : this.message, stack : this.stack}); + } + ​ + handleFallback(e){ + /* + * Determine the type of error we just had + * Was it something we were looking for i.e not enough items (in which case it is a cancelRequest) + * Or was it an error we didn't catch i.e API returned non JSON information when we were expecting JSON (in which case we throw an error, which in turns notifies Dev) + */ + if(e instanceof Error) { + console.log(e); + //CD.throwError(e); + } else { + console.log(e.message); + console.log(e.stack); + CD.cancelRequest(e.message); + } + } + /** * Triggers the fallback image to show * @param msg From 00737c4581ee4d5a0b98aa9ee4417858208dc4f4 Mon Sep 17 00:00:00 2001 From: Michael Nguyen Date: Thu, 16 Feb 2017 14:12:26 +0000 Subject: [PATCH 3/6] Updating comments --- src/backpack.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/backpack.js b/src/backpack.js index c9fc9bb..ec5883b 100644 --- a/src/backpack.js +++ b/src/backpack.js @@ -2,9 +2,7 @@ import CD from 'cropduster'; export default class Backpack { - constructor(){ - - } + constructor(){} /** * @param {string} msg @@ -15,16 +13,16 @@ export default class Backpack { this.stack = (new Error(msg)).stack; this.handleFallback({message : this.message, stack : this.stack}); } - ​ + /* + * Determine the type of error we just had + * Was it something we were looking for i.e not enough items (in which case it is a cancelRequest) + * Or was it an error we didn't catch i.e API returned non JSON information when we were expecting JSON (in which case we throw an error, which in turns notifies Dev) + * @param e Error + */ handleFallback(e){ - /* - * Determine the type of error we just had - * Was it something we were looking for i.e not enough items (in which case it is a cancelRequest) - * Or was it an error we didn't catch i.e API returned non JSON information when we were expecting JSON (in which case we throw an error, which in turns notifies Dev) - */ if(e instanceof Error) { console.log(e); - //CD.throwError(e); + CD.throwError(e); } else { console.log(e.message); console.log(e.stack); From 991403169db35f0349a7306e93161dcfac052bc9 Mon Sep 17 00:00:00 2001 From: Roger Rodriguez Date: Thu, 16 Feb 2017 10:50:32 -0500 Subject: [PATCH 4/6] getting ready for release. --- dist/backpack.js | 4 ++-- package.json | 20 +++++++++++------- src/backpack.js | 54 ++++++++++++++++++------------------------------ tests/index.html | 19 ----------------- tests/tests.js | 9 -------- 5 files changed, 35 insertions(+), 71 deletions(-) delete mode 100644 tests/index.html delete mode 100644 tests/tests.js diff --git a/dist/backpack.js b/dist/backpack.js index 5df9eff..101a8e3 100644 --- a/dist/backpack.js +++ b/dist/backpack.js @@ -1,2 +1,2 @@ -!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require(void 0)):"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.Backpack=n(require(void 0)):e.Backpack=n(e.CD)}(this,function(e){return function(e){function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}var t={};return n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=3)}([function(e,n,t){e.exports=t(1).default},function(e,n,t){"use strict";function o(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var r=t(2),u=t.n(r),c=function(){function e(e,n){for(var t=0;t{ + document.addEventListener(event, (e) =>{ callback(e); }); diff --git a/tests/index.html b/tests/index.html deleted file mode 100644 index ba47c3c..0000000 --- a/tests/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - Backpack Test - - - -
-
-
 
- - - - - - - - diff --git a/tests/tests.js b/tests/tests.js deleted file mode 100644 index d9d4350..0000000 --- a/tests/tests.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @todo: implement actual tests - */ - -var app = new Backpack(); - -console.log(app); - -app.forceFallback('sometihng'); From 8e2b5feb1ea29e8cd77742763f3f17e478ac17d9 Mon Sep 17 00:00:00 2001 From: Roger Rodriguez Date: Thu, 16 Feb 2017 10:58:37 -0500 Subject: [PATCH 5/6] updating readme --- README.md | 47 ++++++++++++++++++++++------------------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 2b7fe12..9e4053d 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,50 @@ # Backpack -Backpack is for building custom apps for use with Movable Ink +Backpack is for building custom apps and projects for use with Movable Ink ## Installation -Backpack is on bower. Install it with: +In your `package.json` include the following in your dependecies: ```bash -npm install -g bower # if bower is not installed yet -bower init -bower install --save mi-backpack -``` -Then use it by referencing it from your HTML page: +"dependencies": { + "backpack": "git+ssh://git@github.com/movableink/backpack.git" + } + -```html - ``` -And from your JS: +Then use it by importing it: ```javascript -var myApp = new Backpack(); +import backpack from "backpack"; ``` -## API - -### Trigger the fallback image - -`.forceFallback()` is useful for triggering the static fallback image associated with the block. Note: by default it will remove the `#mi_size_container` element from the DOM. - -Example: +And from your project: ```javascript -myApp.forceFallback() +class Project extends Backpack{ + + constructor(){ + super(); + } + +}; ``` +## API -### Logging to console +### Trigger the fallback image -`.logger()` makes it easier to follow `console.logs()` inside the app debug console. +`.forceFallback()` is useful for triggering the static fallback image associated with the block. Example: ```javascript -myApp.logger('hello world') +Project.forceFallback() ``` - ### Trigger an event `.trigger()` creates a synthetic event that bubbles up to the `document`. @@ -55,7 +52,7 @@ myApp.logger('hello world') Example: ```javascript -myApp.trigger('error', 'some helpful error comment'); +Project.trigger('error', 'some helpful error comment'); ``` @@ -66,7 +63,7 @@ myApp.trigger('error', 'some helpful error comment'); Example: ```javascript -myApp.on('error', function(msg){ +Project.on('error', function(msg){ // msg.detail -- 'some helpful error comment' }); ``` From ec2dd64519f0448123cd07e55c36ff6aa0fc5ef4 Mon Sep 17 00:00:00 2001 From: Roger Rodriguez Date: Wed, 22 Feb 2017 10:03:13 -0500 Subject: [PATCH 6/6] correcting readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9e4053d..cbbfba8 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ In your `package.json` include the following in your dependecies: Then use it by importing it: ```javascript -import backpack from "backpack"; +import Backpack from "backpack"; ``` And from your project: