Final changes to removeStep

dist/image-sequencer.js

@@ -184151,6 +184151,7 @@ ImageSequencer = function ImageSequencer(options) {
   options = options || {};
   options.inBrowser = options.inBrowser || typeof window !== 'undefined';
   if (options.inBrowser) options.ui = options.ui || require('./UserInterface');
+  options.sequencer_counter = 0;
   options.initialImage = "";
 
   var image,
@@ -184165,7 +184166,13 @@ ImageSequencer = function ImageSequencer(options) {
   function addStep(name, o) {
     console.log('adding step "' + name + '"');
 
+    if (!(options.instanceName) && this != window)
+      for(var variable in window)
+        if(window[variable] == this)
+          options.instanceName = variable;
+
     o = o || {};
+    o.id = options.sequencer_counter++; //Gives a Unique ID to each step
     o.name = o.name || name;
     o.selector = o.selector || 'ismod-' + name;
     o.container = o.container || options.selector;
@@ -184177,7 +184184,9 @@ ImageSequencer = function ImageSequencer(options) {
     function defaultSetupModule() {
       if (options.ui) module.options.ui = options.ui({
         selector: o.selector,
-        title: module.options.title
+        title: module.options.title,
+        id: o.id,
+        instanceName: options.instanceName
       });
     }
 
@@ -184218,6 +184227,17 @@ ImageSequencer = function ImageSequencer(options) {
 
   }
 
+  function removeStep (id) {
+    for (i=0;i<steps.length;i++) {
+      if (steps[i].options.id == id && steps[i].options.name != 'image-select'){
+        console.log('removing step "'+steps[i].options.name+'"');
+        if (options.inBrowser) $('div#sequencer-'+id).remove();
+        steps.splice(i,1);
+        run(options.initialImage);
+      }
+    }
+  }
+
   // passed image is optional but you can pass a
   // non-stored image through the whole steps chain
   function run(image) {
@@ -184235,6 +184255,10 @@ ImageSequencer = function ImageSequencer(options) {
   // this could send the image to ImageSelect, or something?
 // not currently working
   function loadImage(src, callback) {
+    if (!(options.instanceName) && this != window)
+      for(var variable in window)
+        if(window[variable] == this)
+          options.instanceName = variable;
     image = new Image();
     image.onload = function() {
       run(image);
@@ -184248,6 +184272,7 @@ ImageSequencer = function ImageSequencer(options) {
     options: options,
     loadImage: loadImage,
     addStep: addStep,
+    removeStep: removeStep,
     run: run,
     modules: modules,
     steps: steps,
@@ -184280,10 +184305,11 @@ module.exports = function UserInterface(options) {
 
   options = options || {};
   options.container = options.container || ".panels";
-
+  options.id = options.id;
+  options.instanceName = options.instanceName;
   options.random = options.random || parseInt(Math.random() * (new Date()).getTime() / 1000000);
-  options.uniqueSelector = options.uniqueSelector || options.selector + '-' + options.random; 
+  options.uniqueSelector = options.uniqueSelector || options.selector + '-' + options.random;
-  $(options.container).append('<div class="panel ' + options.selector + ' ' + options.uniqueSelector + '"><div class="image"></div></div>');
+  $(options.container).append('<div class="panel ' + options.selector + ' ' + options.uniqueSelector + '" id="sequencer-'+options.id+'"><div class="image"></div></div>');
   options.el = options.el || $('.' + options.uniqueSelector);
   createLabel(options.el);
 
@@ -184299,7 +184325,7 @@ module.exports = function UserInterface(options) {
   //function move() {}
 
   function createLabel(el) {
-    if (options.title) el.prepend('<h3 class="title">' + options.title + '</h3>');
+    if (options.title) el.prepend('<h3 class="title">' + options.title + '</h3> <button class="btn btn-default" onclick="'+options.instanceName+'.removeStep('+options.id+')">Remove Step</button>');
   }
 
   return {

src/ImageSequencer.js

@@ -5,6 +5,7 @@ ImageSequencer = function ImageSequencer(options) {
   options = options || {};
   options.inBrowser = options.inBrowser || typeof window !== 'undefined';
   if (options.inBrowser) options.ui = options.ui || require('./UserInterface');
+  options.sequencer_counter = 0;
   options.initialImage = "";
 
   var image,
@@ -19,7 +20,13 @@ ImageSequencer = function ImageSequencer(options) {
   function addStep(name, o) {
     console.log('adding step "' + name + '"');
 
+    if (!(options.instanceName) && this != window)
+      for(var variable in window)
+        if(window[variable] == this)
+          options.instanceName = variable;
+
     o = o || {};
+    o.id = options.sequencer_counter++; //Gives a Unique ID to each step
     o.name = o.name || name;
     o.selector = o.selector || 'ismod-' + name;
     o.container = o.container || options.selector;
@@ -31,7 +38,9 @@ ImageSequencer = function ImageSequencer(options) {
     function defaultSetupModule() {
       if (options.ui) module.options.ui = options.ui({
         selector: o.selector,
-        title: module.options.title
+        title: module.options.title,
+        id: o.id,
+        instanceName: options.instanceName
       });
     }
 
@@ -72,6 +81,17 @@ ImageSequencer = function ImageSequencer(options) {
 
   }
 
+  function removeStep (id) {
+    for (i=0;i<steps.length;i++) {
+      if (steps[i].options.id == id && steps[i].options.name != 'image-select'){
+        console.log('removing step "'+steps[i].options.name+'"');
+        if (options.inBrowser) $('div#sequencer-'+id).remove();
+        steps.splice(i,1);
+        run(options.initialImage);
+      }
+    }
+  }
+
   // passed image is optional but you can pass a
   // non-stored image through the whole steps chain
   function run(image) {
@@ -89,6 +109,10 @@ ImageSequencer = function ImageSequencer(options) {
   // this could send the image to ImageSelect, or something?
 // not currently working
   function loadImage(src, callback) {
+    if (!(options.instanceName) && this != window)
+      for(var variable in window)
+        if(window[variable] == this)
+          options.instanceName = variable;
     image = new Image();
     image.onload = function() {
       run(image);
@@ -102,6 +126,7 @@ ImageSequencer = function ImageSequencer(options) {
     options: options,
     loadImage: loadImage,
     addStep: addStep,
+    removeStep: removeStep,
     run: run,
     modules: modules,
     steps: steps,

src/UserInterface.js

@@ -5,10 +5,11 @@ module.exports = function UserInterface(options) {
 
   options = options || {};
   options.container = options.container || ".panels";
-
+  options.id = options.id;
+  options.instanceName = options.instanceName;
   options.random = options.random || parseInt(Math.random() * (new Date()).getTime() / 1000000);
-  options.uniqueSelector = options.uniqueSelector || options.selector + '-' + options.random; 
+  options.uniqueSelector = options.uniqueSelector || options.selector + '-' + options.random;
-  $(options.container).append('<div class="panel ' + options.selector + ' ' + options.uniqueSelector + '"><div class="image"></div></div>');
+  $(options.container).append('<div class="panel ' + options.selector + ' ' + options.uniqueSelector + '" id="sequencer-'+options.id+'"><div class="image"></div></div>');
   options.el = options.el || $('.' + options.uniqueSelector);
   createLabel(options.el);
 
@@ -24,7 +25,7 @@ module.exports = function UserInterface(options) {
   //function move() {}
 
   function createLabel(el) {
-    if (options.title) el.prepend('<h3 class="title">' + options.title + '</h3>');
+    if (options.title) el.prepend('<h3 class="title">' + options.title + '</h3> <button class="btn btn-default" onclick="'+options.instanceName+'.removeStep('+options.id+')">Remove Step</button>');
   }
 
   return {