From 0e6e1837a6f0e66895b6d00729fe3e2179b1dbb6 Mon Sep 17 00:00:00 2001 From: Mridul97 Date: Wed, 23 Jan 2019 03:45:23 +0530 Subject: [PATCH] Use browserify for ui js files and refactor ui js files (#668) * changes * changes * changes --- Gruntfile.js | 12 +- dist/image-sequencer-ui.js | 667 ++++++++++++------------- dist/image-sequencer-ui.min.js | 2 +- examples/demo.js | 22 +- examples/index.html | 8 +- examples/lib/cache.js | 4 +- examples/lib/defaultHtmlSequencerUi.js | 12 +- examples/lib/defaultHtmlStepUi.js | 11 +- examples/lib/insertPreview.js | 7 +- examples/lib/intermediateHtmlStepUi.js | 5 +- examples/lib/urlHash.js | 7 + 11 files changed, 389 insertions(+), 368 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index bad71bca..5893494e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -24,17 +24,13 @@ module.exports = function(grunt) { dist: { src: ["src/ImageSequencer.js"], dest: "dist/image-sequencer.js" - } - }, - - concat: { + }, js: { - src: ['examples/lib/*.js','examples/demo.js'], - dest: 'dist/image-sequencer-ui.js' + src: ["examples/demo.js"], + dest: "dist/image-sequencer-ui.js" } }, - uglify: { dist: { src: ["./dist/image-sequencer.js"], @@ -58,5 +54,5 @@ module.exports = function(grunt) { /* Default (development): Watch files and build on change. */ grunt.registerTask("default", ["watch"]); grunt.registerTask("build", ["browserify:dist", "uglify:dist"]); - grunt.registerTask("serve", ["browserify:dist", "concat:js", "uglify:dist","uglify:js","browserSync", "watch"]); + grunt.registerTask("serve", ["browserify:dist","browserify:js","uglify:dist","uglify:js","browserSync", "watch"]); }; diff --git a/dist/image-sequencer-ui.js b/dist/image-sequencer-ui.js index e15cdb33..8791ccb0 100644 --- a/dist/image-sequencer-ui.js +++ b/dist/image-sequencer-ui.js @@ -1,3 +1,216 @@ +(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i' + modulesInfo[m].name + "" + ); + } + // Null option + addStepSelect.append(''); + } + refreshOptions(); + + $(window).on('scroll', scrollFunction); + + function scrollFunction() { + var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20; + + $('#move-up').css({ + display: shouldDisplay ? 'block' : 'none' + }); + } + + + function topFunction() { + $('body').animate({scrollTop: 0}); + $(':root').animate({scrollTop: 0}); + } + + $('#move-up').on("click",topFunction); + + + // UI for each step: + sequencer.setUI(DefaultHtmlStepUi(sequencer)); + + // UI for the overall demo: + var ui = defaultHtmlSequencerUi(sequencer); + + // find any `src` parameters in URL hash and attempt to source image from them and run the sequencer + if (urlHash.getUrlHashParameter('src')) { + sequencer.loadImage(urlHash.getUrlHashParameter('src'), ui.onLoad); + } else { + sequencer.loadImage("images/tulips.png", ui.onLoad); + } + + var resetSequence = function(){ + var r=confirm("Do you want to reset the sequence?"); + if (r) + window.location = "/"; + } + + $("#addStep select").on("change", ui.selectNewStepUi); + $("#addStep #add-step-btn").on("click", ui.addStepUi); + $("#resetButton").on("click",resetSequence); + + //Module button radio selection + $('.radio-group .radio').on("click", function() { + $(this).parent().find('.radio').removeClass('selected'); + $(this).addClass('selected'); + newStep = $(this).attr('data-value'); + //$("#addStep option[value=" + newStep + "]").attr('selected', 'selected'); + $("#addStep select").val(newStep); + ui.selectNewStepUi(); + ui.addStepUi(); + $(this).removeClass('selected'); + }); + + $('#download-btn').click(function() { + $('.step-thumbnail:last()').trigger("click"); + return false; + }); + + function displayMessageOnSaveSequence(){ + $(".savesequencemsg").fadeIn(); + setTimeout(function() { + $(".savesequencemsg").fadeOut(); + }, 1000); + } + + $('body').on('click', 'button.remove', ui.removeStepUi); + $('#save-seq').click(() => { + var result = window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser)."); + if(result){ + result = result + " (local)"; + sequencer.saveSequence(result, sequencer.toString()); + sequencer.loadModules(); + displayMessageOnSaveSequence(); + refreshOptions(); + } + }); + + var isWorkingOnGifGeneration = false; + + $('.js-view-as-gif').on('click', function(event) { + // Prevent user from triggering generation multiple times + if (isWorkingOnGifGeneration) return; + + isWorkingOnGifGeneration = true; + + var button = event.target; + button.disabled = true; + + + try { + // Select all images from previous steps + var imgs = document.getElementsByClassName("step-thumbnail"); + + var imgSrcs = []; + + for (var i = 0; i < imgs.length; i++) { + imgSrcs.push(imgs[i].src); + } + + var options = { + 'gifWidth': imgs[0].width, + 'gifHeight': imgs[0].height, + 'images': imgSrcs, + 'frameDuration': 7, + } + + gifshot.createGIF(options, function(obj) { + if (!obj.error) { + // Final gif encoded with base64 format + var image = obj.image; + var animatedImage = document.createElement('img'); + + animatedImage.id = "gif_element"; + animatedImage.src = image; + + + var modal = $('#js-download-gif-modal'); + + $("#js-download-as-gif-button").one("click", function() { + // Trigger download + download(image, "index.gif", "image/gif"); + + // Close modal + modal.modal('hide'); + }) + + var gifContainer = document.getElementById("js-download-modal-gif-container"); + + // Clear previous results + gifContainer.innerHTML = ''; + + // Insert image + gifContainer.appendChild(animatedImage); + + + // Open modal + modal.modal(); + + button.disabled = false; + isWorkingOnGifGeneration = false; + } + }); + } + catch (e) { + console.error(e); + button.disabled = false; + isWorkingOnGifGeneration = false; + + } + }); + + // image selection and drag/drop handling from examples/lib/imageSelection.js + sequencer.setInputStep({ + dropZoneSelector: "#dropzone", + fileInputSelector: "#fileInput", + takePhotoSelector: "#take-photo", + onLoad: function onFileReaderLoad(progress) { + var reader = progress.target; + var step = sequencer.images.image1.steps[0]; + var util=IntermediateHtmlStepUi(sequencer); + step.output.src = reader.result; + sequencer.run({ index: 0 }); + step.options.step.imgElement.src = reader.result; + insertPreview.updatePreviews(reader.result,'addStep'); + insertPreview.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,'insertStep'); + }, + onTakePhoto: function (url) { + var step = sequencer.images.image1.steps[0]; + step.output.src = url; + sequencer.run({ index: 0 }); + step.options.step.imgElement.src = url; + } + }); + + setupCache(); + + if (urlHash.getUrlHashParameter('src')) { + insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'addStep'); + } else { + insertPreview.updatePreviews("images/tulips.png",'addStep'); + } +}; +},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./lib/urlHash.js":7}],2:[function(require,module,exports){ var setupCache = function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js', { scope: '/examples/' }) @@ -35,6 +248,10 @@ var setupCache = function() { location.reload(); }); } + +module.exports = setupCache; +},{}],3:[function(require,module,exports){ +var urlHash = require('./urlHash.js'); function DefaultHtmlSequencerUi(_sequencer, options) { options = options || {}; @@ -51,13 +268,13 @@ function DefaultHtmlSequencerUi(_sequencer, options) { // look up needed steps from Url Hash: function importStepsFromUrlHash() { - var hash = getUrlHashParameter("steps"); + var hash = urlHash.getUrlHashParameter("steps"); if (hash) { _sequencer.importString(hash); _sequencer.run({ index: 0 }); } - setUrlHashParameter("steps", sequencer.toString()); + urlHash.setUrlHashParameter("steps", sequencer.toString()); } function selectNewStepUi() { @@ -70,7 +287,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) { var index = $(removeStepSel).index(this) + 1; sequencer.removeSteps(index).run({ index: index - 1 }); // remove from URL hash too - setUrlHashParameter("steps", sequencer.toString()); + urlHash.setUrlHashParameter("steps", sequencer.toString()); //disable save-sequence button if all steps are removed handleSaveSequence(); } @@ -100,7 +317,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) { handleSaveSequence(); // add to URL hash too - setUrlHashParameter("steps", _sequencer.toString()); + urlHash.setUrlHashParameter("steps", _sequencer.toString()); } function handleSaveSequence(){ @@ -120,6 +337,10 @@ function DefaultHtmlSequencerUi(_sequencer, options) { } } +module.exports = DefaultHtmlSequencerUi; + + +},{"./urlHash.js":7}],4:[function(require,module,exports){ // Set the UI in sequencer. This Will generate HTML based on // Image Sequencer events : // onSetup : Called every time a step is added @@ -130,11 +351,15 @@ function DefaultHtmlSequencerUi(_sequencer, options) { // output values, step information. // See documetation for more details. -function DefaultHtmlStepUi(_sequencer, options) { +var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'); +var urlHash = require('./urlHash.js'); +function DefaultHtmlStepUi(_sequencer, options) { + options = options || {}; var stepsEl = options.stepsEl || document.querySelector("#steps"); var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep"; + function onSetup(step, stepOptions) { if (step.options && step.options.description) step.description = step.options.description; @@ -171,7 +396,7 @@ function DefaultHtmlStepUi(_sequencer, options) { \ '; - var util = IntermediateHtmlStepUi(_sequencer, step); + var util = intermediateHtmlStepUi(_sequencer, step); var parser = new DOMParser(); step.ui = parser.parseFromString(step.ui, "text/html"); @@ -288,7 +513,7 @@ function DefaultHtmlStepUi(_sequencer, options) { _sequencer.run({ index: step.index - 1 }); // modify the url hash - setUrlHashParameter("steps", _sequencer.toString()); + urlHash.setUrlHashParameter("steps", _sequencer.toString()); // disable the save button $(step.ui.querySelector('.btn-save')).prop('disabled', true); @@ -418,43 +643,110 @@ function DefaultHtmlStepUi(_sequencer, options) { } } +if(typeof window === "undefined"){ + module.exports={ + DefaultHtmlStepUi: DefaultHtmlStepUi + } +} + +module.exports = DefaultHtmlStepUi; + + +},{"./intermediateHtmlStepUi.js":6,"./urlHash.js":7}],5:[function(require,module,exports){ +function generatePreview(previewStepName, customValues, path, selector) { + + var previewSequencer = ImageSequencer(); + function insertPreview(src) { + var img = document.createElement('img'); + img.classList.add('img-thumbnail') + img.classList.add('no-border'); + img.src = src; + $(img).css("max-width", "200%"); + $(img).css("transform", "translateX(-20%)"); + var stepDiv = $('#'+selector+' .row').find('div').each(function() { + if ($(this).find('div').attr('data-value') === previewStepName) { + $(this).find('div').append(img); + } + }); + } + + function loadPreview() { + previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" }); + if (previewStepName === "crop") { + previewSequencer.addSteps(previewStepName, customValues).run(insertPreview); + } + else { + previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview); + } + } + previewSequencer.loadImage(path, loadPreview); + } + + function updatePreviews(src, selector) { + $('#'+selector+' img').remove(); + + var previewSequencerSteps = { + "brightness": "20", + "saturation": "5", + "rotate": 90, + "contrast": 90, + "crop": { + "x": 0, + "y": 0, + "w": "(50%)", + "h": "(50%)", + "noUI": true + } + } + + Object.keys(previewSequencerSteps).forEach(function (step, index) { + generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector); + }); + } + +module.exports = { + generatePreview : generatePreview, + updatePreviews : updatePreviews +} +},{}],6:[function(require,module,exports){ +var urlHash = require('./urlHash.js'); function IntermediateHtmlStepUi(_sequencer, step, options) { function stepUI() { return '
\ -
\ +
\
\
\
\

Select a new module to add to your sequence.

\
\
\ - \ +
\ + \ +
\

Brightness

\
\
\ - \ +
\ + \ +
\

Contrast

\
\
\ - \ +
\ + \ +
\

Saturation

\
\
\ - \ +
\ + \ +
\

Rotate

\
\
\ - \ +
\ + \ +
\

Crop

\
\
\ @@ -470,12 +762,14 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
\
'; } + + function selectNewStepUi() { var m = $("#insertStep select").val(); $("#insertStep .info").html(_sequencer.modulesInfo(m).description); $("#insertStep #add-step-btn").prop("disabled", false); } - insertStep = function(id) { + insertStep = function (id) { var modulesInfo = _sequencer.modulesInfo(); var parser = new DOMParser(); var addStepUI = stepUI(); @@ -485,6 +779,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) { .insertAdjacentElement('afterend', addStepUI ); + updatePreviews(step.output,'insertStep'); var insertStepSelect = $("#insertStep select"); insertStepSelect.html(""); // Add modules to the insertStep dropdown @@ -498,7 +793,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) { $('#insertStep #add-step-btn').prop('disabled', true); insertStepSelect.append(''); - $('#insertStep .radio-group .radio').on("click", function() { + $('#insertStep .radio-group .radio').on("click", function () { $(this).parent().find('.radio').removeClass('selected'); $(this).addClass('selected'); newStep = $(this).attr('data-value'); @@ -508,7 +803,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) { $(this).removeClass('selected'); }); $(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi); - $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function() { insert(id) }); + $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) }); } function insert(id) { @@ -529,66 +824,18 @@ function IntermediateHtmlStepUi(_sequencer, step, options) { .insertSteps(id + 1, newStepName).run({ index: id }); // add to URL hash too - setUrlHashParameter("steps", _sequencer.toString()); + urlHash.setUrlHashParameter("steps", _sequencer.toString()); } + return { insertStep } } -$(document).ready(function($){ - $(function(){ - $(window).scroll(function(){ - if ($(this).scrollTop() > 100){ - $('.move-up').fadeIn(); - } else { - $('.move-up').fadeOut(); - } - }); - $('.move-up button').click(function(){ - $('body,html').animate({ - scrollTop: 0 - }, 800); - return false; - }); - }); -}); +module.exports = IntermediateHtmlStepUi; -const staticCacheName = 'image-sequencer-static-v3'; -self.addEventListener('install', event => { - console.log('Attempting to install service worker'); -}); - -self.addEventListener('activate', function(e) { - console.log('[ServiceWorker] Activate'); - e.waitUntil( - caches.keys().then(function(cacheNames) { - return Promise.all( - cacheNames.filter(function(cacheName){ - return cacheName.startsWith('image-sequencer-') && - cacheName != staticCacheName; - }).map(function(cacheName){ - return caches.delete(cacheName); - }) - ); - }) - ); -}); - -self.addEventListener('fetch', function(event) { - event.respondWith( - caches.open(staticCacheName).then(function(cache) { - return cache.match(event.request).then(function (response) { - return response || fetch(event.request).then(function(response) { - if(event.request.method == "GET") - cache.put(event.request, response.clone()); - return response; - }); - }); - }) - ); -}); +},{"./urlHash.js":7}],7:[function(require,module,exports){ function getUrlHashParameter(param) { var params = getUrlHashParameters(); @@ -632,261 +879,11 @@ function setUrlHashParameter(param, value) { } -window.onload = function() { - function generatePreview(previewStepName, customValues, path) { - var previewSequencer = ImageSequencer(); +module.exports = { + getUrlHashParameter: getUrlHashParameter, + setUrlHashParameter: setUrlHashParameter, + getUrlHashParameters: getUrlHashParameters, + setUrlHashParameters: setUrlHashParameters + } - function insertPreview(src) { - var img = document.createElement('img'); - img.classList.add('img-thumbnail') - img.classList.add('no-border'); - img.src = src; - $(img).css("max-width", "200%"); - $(img).css("transform", "translateX(-20%)"); - var stepDiv = $('#addStep .row').find('div').each(function() { - if ($(this).find('div').attr('data-value') === previewStepName) { - $(this).find('div').append(img); - } - }); - } - function loadPreview() { - previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" }); - - if (previewStepName === "crop") { - console.log(customValues); - previewSequencer.addSteps(previewStepName, customValues).run(insertPreview); - } - else { - previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview); - } - } - previewSequencer.loadImage(path, loadPreview); - } - - - sequencer = ImageSequencer(); - - function refreshOptions() { - // Load information of all modules (Name, Inputs, Outputs) - var modulesInfo = sequencer.modulesInfo(); - console.log(modulesInfo) - - var addStepSelect = $("#addStep select"); - addStepSelect.html(""); - - // Add modules to the addStep dropdown - for (var m in modulesInfo) { - if (modulesInfo[m] && modulesInfo[m].name) - addStepSelect.append( - '" - ); - } - // Null option - addStepSelect.append(''); - } - refreshOptions(); - - $(window).on('scroll', scrollFunction); - - function scrollFunction() { - var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20; - - $('#move-up').css({ - display: shouldDisplay ? 'block' : 'none' - }); - } - - - function topFunction() { - $('body').animate({scrollTop: 0}); - $(':root').animate({scrollTop: 0}); - } - - $('#move-up').on("click",topFunction); - - - // UI for each step: - sequencer.setUI(DefaultHtmlStepUi(sequencer)); - - // UI for the overall demo: - var ui = DefaultHtmlSequencerUi(sequencer); - - // find any `src` parameters in URL hash and attempt to source image from them and run the sequencer - if (getUrlHashParameter('src')) { - sequencer.loadImage(getUrlHashParameter('src'), ui.onLoad); - } else { - sequencer.loadImage("images/tulips.png", ui.onLoad); - } - - var resetSequence = function(){ - var r=confirm("Do you want to reset the sequence?"); - if (r) - window.location = "/"; - } - - $("#addStep select").on("change", ui.selectNewStepUi); - $("#addStep #add-step-btn").on("click", ui.addStepUi); - $("#resetButton").on("click",resetSequence); - - //Module button radio selection - $('.radio-group .radio').on("click", function() { - $(this).parent().find('.radio').removeClass('selected'); - $(this).addClass('selected'); - newStep = $(this).attr('data-value'); - console.log(newStep); - //$("#addStep option[value=" + newStep + "]").attr('selected', 'selected'); - $("#addStep select").val(newStep); - ui.selectNewStepUi(); - ui.addStepUi(); - $(this).removeClass('selected'); - }); - - $('#download-btn').click(function() { - $('.step-thumbnail:last()').trigger("click"); - return false; - }); - - function displayMessageOnSaveSequence(){ - $(".savesequencemsg").fadeIn(); - setTimeout(function() { - $(".savesequencemsg").fadeOut(); - }, 1000); - } - - $('body').on('click', 'button.remove', ui.removeStepUi); - $('#save-seq').click(() => { - var result = window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser)."); - if(result){ - result = result + " (local)"; - sequencer.saveSequence(result, sequencer.toString()); - sequencer.loadModules(); - displayMessageOnSaveSequence(); - refreshOptions(); - } - }); - - var isWorkingOnGifGeneration = false; - - $('.js-view-as-gif').on('click', function(event) { - // Prevent user from triggering generation multiple times - if (isWorkingOnGifGeneration) return; - - isWorkingOnGifGeneration = true; - - var button = event.target; - button.disabled = true; - - - try { - // Select all images from previous steps - var imgs = document.getElementsByClassName("step-thumbnail"); - - var imgSrcs = []; - - for (var i = 0; i < imgs.length; i++) { - imgSrcs.push(imgs[i].src); - } - - var options = { - 'gifWidth': imgs[0].width, - 'gifHeight': imgs[0].height, - 'images': imgSrcs, - 'frameDuration': 7, - } - - gifshot.createGIF(options, function(obj) { - if (!obj.error) { - // Final gif encoded with base64 format - var image = obj.image; - var animatedImage = document.createElement('img'); - - animatedImage.id = "gif_element"; - animatedImage.src = image; - - - var modal = $('#js-download-gif-modal'); - - $("#js-download-as-gif-button").one("click", function() { - // Trigger download - download(image, "index.gif", "image/gif"); - - // Close modal - modal.modal('hide'); - }) - - var gifContainer = document.getElementById("js-download-modal-gif-container"); - - // Clear previous results - gifContainer.innerHTML = ''; - - // Insert image - gifContainer.appendChild(animatedImage); - - - // Open modal - modal.modal(); - - button.disabled = false; - isWorkingOnGifGeneration = false; - } - }); - } - catch (e) { - console.error(e); - button.disabled = false; - isWorkingOnGifGeneration = false; - - } - }); - - // image selection and drag/drop handling from examples/lib/imageSelection.js - sequencer.setInputStep({ - dropZoneSelector: "#dropzone", - fileInputSelector: "#fileInput", - takePhotoSelector: "#take-photo", - onLoad: function onFileReaderLoad(progress) { - var reader = progress.target; - var step = sequencer.images.image1.steps[0]; - step.output.src = reader.result; - sequencer.run({ index: 0 }); - step.options.step.imgElement.src = reader.result; - updatePreviews(reader.result); - }, - onTakePhoto: function (url) { - var step = sequencer.images.image1.steps[0]; - step.output.src = url; - sequencer.run({ index: 0 }); - step.options.step.imgElement.src = url; - } - }); - - setupCache(); - - function updatePreviews(src) { - $('#addStep img').remove(); - - var previewSequencerSteps = { - "brightness": "175", - "saturation": "0.5", - "rotate": 90, - "contrast": 90, - "crop": { - "x": 0, - "y": 0, - "w": "(50%)", - "h": "(50%)", - "noUI": true - } - } - - Object.keys(previewSequencerSteps).forEach(function(step, index) { - generatePreview(step, Object.values(previewSequencerSteps)[index], src); - }); - } - - if (getUrlHashParameter('src')) { - updatePreviews(getUrlHashParameter('src')); - } else { - updatePreviews("images/tulips.png"); - } -}; +},{}]},{},[1]); diff --git a/dist/image-sequencer-ui.min.js b/dist/image-sequencer-ui.min.js index f6b514a4..4fabe6b1 100644 --- a/dist/image-sequencer-ui.min.js +++ b/dist/image-sequencer-ui.min.js @@ -1 +1 @@ -var setupCache=function(){"serviceWorker"in navigator&&navigator.serviceWorker.register("sw.js",{scope:"/examples/"}).then(function(e){const t=e.installing;t.onstatechange=(()=>{console.log(t),"installed"===t.state&&location.reload()}),console.log("Registration successful, scope is:",e.scope)}).catch(function(e){console.log("Service worker registration failed, error:",e)}),"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){$("#clear-cache").append(" "+e)})}),$("#clear-cache").click(function(){"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){caches.delete(e)})}),location.reload()})};function DefaultHtmlSequencerUi(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",a=t.removeStepSel=t.removeStepSel||"button.remove";t.selectStepSel=t.selectStepSel||"#selectStep";function s(){var t=getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),setUrlHashParameter("steps",sequencer.toString())}function i(){sequencer.images.image1.steps.length<2?$(" #save-seq").prop("disabled",!0):$(" #save-seq").prop("disabled",!1)}return{onLoad:function(){s(),$("#selectStep").val()||$(n+" #add-step-btn").prop("disabled",!0),i()},importStepsFromUrlHash:s,selectNewStepUi:function(){var t=$(n+" select").val();$(n+" .info").html(e.modulesInfo(t).description),$(n+" #add-step-btn").prop("disabled",!1)},removeStepUi:function(){var e=$(a).index(this)+1;sequencer.removeSteps(e).run({index:e-1}),setUrlHashParameter("steps",sequencer.toString()),i()},addStepUi:function(){if("none"!=$(n+" select").val()){var a=$(n+" select").val(),s=1;sequencer.sequences[a]?s=sequencer.sequences[a].length:sequencer.modules[a][1].length&&(s=sequencer.modules[a][1].length),e.addSteps(a,t).run({index:e.images.image1.steps.length-s-1}),$(n+" .info").html("Select a new module to add to your sequence."),i(),setUrlHashParameter("steps",e.toString())}}}}function DefaultHtmlStepUi(e,t){var n=(t=t||{}).stepsEl||document.querySelector("#steps");t.selectStepSel=t.selectStepSel||"#selectStep";function a(e,t){if(0==$("#"+t).length){var n=document.createElement("span");n.innerHTML=' '+e,n.id=t,n.classList.add("notification"),$("body").append(n)}$("#"+t).fadeIn(500).delay(200).fadeOut(500)}return{getPreview:function(){return step.imgElement},onSetup:function(t,s){t.options&&t.options.description&&(t.description=t.options.description),t.ui='

'+t.name+'

"'+(t.description||"")+'

';var i=IntermediateHtmlStepUi(e,t),o=new DOMParser;if(t.ui=o.parseFromString(t.ui,"text/html"),t.ui=t.ui.querySelector("div.container"),t.linkElements=t.ui.querySelectorAll("a"),t.imgElement=t.ui.querySelector("a img"),e.modulesInfo().hasOwnProperty(t.name)){var r=e.modulesInfo(t.name).inputs,l=e.modulesInfo(t.name).outputs,c=Object.assign(r,l);for(var d in c){var u=r.hasOwnProperty(d),p="",m=u?r[d]:{};if(u)if("select"==m.type.toLowerCase()){for(var f in p+='"}else{let e=t.options[d]||m.default;p=''+e+"":p+='">'}else p+='';var v=document.createElement("div");v.className="row",v.setAttribute("name",d);var h=r[d].desc||d;v.innerHTML="
"+p+"
",t.ui.querySelector("div.details").appendChild(v)}$(t.ui.querySelector("div.details")).append('

Press apply to see changes

')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(o.parseFromString('
',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".remove")).on("click",function(){a("Step Removed","remove-notification")}),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){i.insertStep(t.ID)}),s.index==e.images.image1.steps.length?(n.appendChild(t.ui),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("#steps .container:nth-last-child(2)")&&$("#steps .container:nth-last-child(2) .insert-step").prop("disabled",!1)):n.insertBefore(t.ui,$(n).children()[s.index])):$("#load-image").append(t.ui),$(t.ui.querySelector(".toggle")).on("click",()=>{$(t.ui.querySelector(".toggleIcon")).toggleClass("fa-caret-up").toggleClass("fa-caret-down"),$(t.ui.querySelectorAll(".cal")).toggleClass("collapse")});var g=0,b=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),b&&($(t.ui.querySelector("div.details")).find("input,select").each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1),t.options[$(n).attr("name")]=$(n).val()}),e.run({index:t.index-1}),setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),b=!1,g=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,a,s;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),a=$(this).data("hasChangedBefore"),s=!(isNaN(n)||isNaN(e)?e===n:e-n==0),b=(g+=a?s?0:-1:s?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!b),s))})}),$('input[type="range"]').on("input",function(){$(this).next().html($(this).val())})},onComplete:function(t){$(t.ui.querySelector(".load")).hide(),$(t.ui.querySelector("img")).show(),t.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e

Select a new module to add to your sequence.

Brightness

Contrast

Saturation

Rotate

Crop

';o=(new DOMParser).parseFromString(o,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",o);var r=$("#insertStep select");for(var l in r.html(""),i)void 0!==i[l]&&r.append('");$("#insertStep #add-step-btn").prop("disabled",!0),r.append(''),$("#insertStep .radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),r.val(newStep),a(),s(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",a),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){s(n)})},{insertStep:insertStep}}$(document).ready(function(e){e(function(){e(window).scroll(function(){e(this).scrollTop()>100?e(".move-up").fadeIn():e(".move-up").fadeOut()}),e(".move-up button").click(function(){return e("body,html").animate({scrollTop:0},800),!1})})});const staticCacheName="image-sequencer-static-v3";function getUrlHashParameter(e){return getUrlHashParameters()[e]}function getUrlHashParameters(){var e=window.location.hash;e&&(e=e.split("#")[1]);var t={};return e.split("&").forEach(function(e,n){""!=(e=e.split("="))[0]&&(t[e[0]]=e[1])}),t}function setUrlHashParameters(e){var t=Object.keys(e),n=Object.values(e),a=[];t.forEach(function(e,s){""!=e&&a.push(t[s]+"="+n[s])});var s=a.join("&");window.location.hash=s}function setUrlHashParameter(e,t){var n=getUrlHashParameters();n[e]=t,setUrlHashParameters(n)}self.addEventListener("install",e=>{console.log("Attempting to install service worker")}),self.addEventListener("activate",function(e){console.log("[ServiceWorker] Activate"),e.waitUntil(caches.keys().then(function(e){return Promise.all(e.filter(function(e){return e.startsWith("image-sequencer-")&&e!=staticCacheName}).map(function(e){return caches.delete(e)}))}))}),self.addEventListener("fetch",function(e){e.respondWith(caches.open(staticCacheName).then(function(t){return t.match(e.request).then(function(n){return n||fetch(e.request).then(function(n){return"GET"==e.request.method&&t.put(e.request,n.clone()),n})})}))}),window.onload=function(){function e(){var e=sequencer.modulesInfo();console.log(e);var t=$("#addStep select");for(var n in t.html(""),e)e[n]&&e[n].name&&t.append('");t.append('')}sequencer=ImageSequencer(),e(),$(window).on("scroll",function(){var e=$("body").scrollTop()>20||$(":root").scrollTop()>20;$("#move-up").css({display:e?"block":"none"})}),$("#move-up").on("click",function(){$("body").animate({scrollTop:0}),$(":root").animate({scrollTop:0})}),sequencer.setUI(DefaultHtmlStepUi(sequencer));var t=DefaultHtmlSequencerUi(sequencer);getUrlHashParameter("src")?sequencer.loadImage(getUrlHashParameter("src"),t.onLoad):sequencer.loadImage("images/tulips.png",t.onLoad);$("#addStep select").on("change",t.selectNewStepUi),$("#addStep #add-step-btn").on("click",t.addStepUi),$("#resetButton").on("click",function(){confirm("Do you want to reset the sequence?")&&(window.location="/")}),$(".radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),console.log(newStep),$("#addStep select").val(newStep),t.selectNewStepUi(),t.addStepUi(),$(this).removeClass("selected")}),$("#download-btn").click(function(){return $(".step-thumbnail:last()").trigger("click"),!1}),$("body").on("click","button.remove",t.removeStepUi),$("#save-seq").click(()=>{var t=window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");t&&(t+=" (local)",sequencer.saveSequence(t,sequencer.toString()),sequencer.loadModules(),$(".savesequencemsg").fadeIn(),setTimeout(function(){$(".savesequencemsg").fadeOut()},1e3),e())});var n=!1;function a(e){$("#addStep img").remove();var t={brightness:"175",saturation:"0.5",rotate:90,contrast:90,crop:{x:0,y:0,w:"(50%)",h:"(50%)",noUI:!0}};Object.keys(t).forEach(function(n,a){!function(e,t,n){var a=ImageSequencer();function s(t){var n=document.createElement("img");n.classList.add("img-thumbnail"),n.classList.add("no-border"),n.src=t,$(n).css("max-width","200%"),$(n).css("transform","translateX(-20%)"),$("#addStep .row").find("div").each(function(){$(this).find("div").attr("data-value")===e&&$(this).find("div").append(n)})}a.loadImage(n,function(){a=a.addSteps("resize",{resize:"40%"}),"crop"===e?(console.log(t),a.addSteps(e,t).run(s)):a.addSteps(e,{[e]:t}).run(s)})}(n,Object.values(t)[a],e)})}$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var a=document.getElementsByClassName("step-thumbnail"),s=[],i=0;i'+e[n].name+"");t.append('')}sequencer=ImageSequencer(),e(),$(window).on("scroll",function(){var e=$("body").scrollTop()>20||$(":root").scrollTop()>20;$("#move-up").css({display:e?"block":"none"})}),$("#move-up").on("click",function(){$("body").animate({scrollTop:0}),$(":root").animate({scrollTop:0})}),sequencer.setUI(s(sequencer));var t=a(sequencer);r.getUrlHashParameter("src")?sequencer.loadImage(r.getUrlHashParameter("src"),t.onLoad):sequencer.loadImage("images/tulips.png",t.onLoad);$("#addStep select").on("change",t.selectNewStepUi),$("#addStep #add-step-btn").on("click",t.addStepUi),$("#resetButton").on("click",function(){confirm("Do you want to reset the sequence?")&&(window.location="/")}),$(".radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),$("#addStep select").val(newStep),t.selectNewStepUi(),t.addStepUi(),$(this).removeClass("selected")}),$("#download-btn").click(function(){return $(".step-thumbnail:last()").trigger("click"),!1}),$("body").on("click","button.remove",t.removeStepUi),$("#save-seq").click(()=>{var t=window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");t&&(t+=" (local)",sequencer.saveSequence(t,sequencer.toString()),sequencer.loadModules(),$(".savesequencemsg").fadeIn(),setTimeout(function(){$(".savesequencemsg").fadeOut()},1e3),e())});var n=!1;$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var a=document.getElementsByClassName("step-thumbnail"),i=[],s=0;s{console.log(t),"installed"===t.state&&location.reload()}),console.log("Registration successful, scope is:",e.scope)}).catch(function(e){console.log("Service worker registration failed, error:",e)}),"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){$("#clear-cache").append(" "+e)})}),$("#clear-cache").click(function(){"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){caches.delete(e)})}),location.reload()})}},{}],3:[function(e,t,n){var a=e("./urlHash.js");t.exports=function(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",i=t.removeStepSel=t.removeStepSel||"button.remove";function s(){var t=a.getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),a.setUrlHashParameter("steps",sequencer.toString())}function r(){sequencer.images.image1.steps.length<2?$(" #save-seq").prop("disabled",!0):$(" #save-seq").prop("disabled",!1)}return t.selectStepSel=t.selectStepSel||"#selectStep",{onLoad:function(){s(),$("#selectStep").val()||$(n+" #add-step-btn").prop("disabled",!0),r()},importStepsFromUrlHash:s,selectNewStepUi:function(){var t=$(n+" select").val();$(n+" .info").html(e.modulesInfo(t).description),$(n+" #add-step-btn").prop("disabled",!1)},removeStepUi:function(){var e=$(i).index(this)+1;sequencer.removeSteps(e).run({index:e-1}),a.setUrlHashParameter("steps",sequencer.toString()),r()},addStepUi:function(){if("none"!=$(n+" select").val()){var i=$(n+" select").val(),s=1;sequencer.sequences[i]?s=sequencer.sequences[i].length:sequencer.modules[i][1].length&&(s=sequencer.modules[i][1].length),e.addSteps(i,t).run({index:e.images.image1.steps.length-s-1}),$(n+" .info").html("Select a new module to add to your sequence."),r(),a.setUrlHashParameter("steps",e.toString())}}}}},{"./urlHash.js":7}],4:[function(e,t,n){var a=e("./intermediateHtmlStepUi.js"),i=e("./urlHash.js");function s(e,t){var n=(t=t||{}).stepsEl||document.querySelector("#steps");t.selectStepSel=t.selectStepSel||"#selectStep";function s(e,t){if(0==$("#"+t).length){var n=document.createElement("span");n.innerHTML=' '+e,n.id=t,n.classList.add("notification"),$("body").append(n)}$("#"+t).fadeIn(500).delay(200).fadeOut(500)}return{getPreview:function(){return step.imgElement},onSetup:function(t,r){t.options&&t.options.description&&(t.description=t.options.description),t.ui='

'+t.name+'

"'+(t.description||"")+'

';var o=a(e,t),l=new DOMParser;if(t.ui=l.parseFromString(t.ui,"text/html"),t.ui=t.ui.querySelector("div.container"),t.linkElements=t.ui.querySelectorAll("a"),t.imgElement=t.ui.querySelector("a img"),e.modulesInfo().hasOwnProperty(t.name)){var c=e.modulesInfo(t.name).inputs,d=e.modulesInfo(t.name).outputs,u=Object.assign(c,d);for(var p in u){var v=c.hasOwnProperty(p),m="",f=v?c[p]:{};if(v)if("select"==f.type.toLowerCase()){for(var h in m+='"}else{let e=t.options[p]||f.default;m=''+e+"":m+='">'}else m+='';var g=document.createElement("div");g.className="row",g.setAttribute("name",p);var S=c[p].desc||p;g.innerHTML="
"+m+"
",t.ui.querySelector("div.details").appendChild(g)}$(t.ui.querySelector("div.details")).append('

Press apply to see changes

')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(l.parseFromString('
',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".remove")).on("click",function(){s("Step Removed","remove-notification")}),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){o.insertStep(t.ID)}),r.index==e.images.image1.steps.length?(n.appendChild(t.ui),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("#steps .container:nth-last-child(2)")&&$("#steps .container:nth-last-child(2) .insert-step").prop("disabled",!1)):n.insertBefore(t.ui,$(n).children()[r.index])):$("#load-image").append(t.ui),$(t.ui.querySelector(".toggle")).on("click",()=>{$(t.ui.querySelector(".toggleIcon")).toggleClass("fa-caret-up").toggleClass("fa-caret-down"),$(t.ui.querySelectorAll(".cal")).toggleClass("collapse")});var b=0,q=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),q&&($(t.ui.querySelector("div.details")).find("input,select").each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1),t.options[$(n).attr("name")]=$(n).val()}),e.run({index:t.index-1}),i.setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),q=!1,b=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,a,i;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),a=$(this).data("hasChangedBefore"),i=!(isNaN(n)||isNaN(e)?e===n:e-n==0),q=(b+=a?i?0:-1:i?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!q),i))})}),$('input[type="range"]').on("input",function(){$(this).next().html($(this).val())})},onComplete:function(t){$(t.ui.querySelector(".load")).hide(),$(t.ui.querySelector("img")).show(),t.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e

Select a new module to add to your sequence.

Brightness

Contrast

Saturation

Rotate

Crop

';r=(new DOMParser).parseFromString(r,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",r),updatePreviews(t.output,"insertStep");var o=$("#insertStep select");for(var l in o.html(""),a)void 0!==a[l]&&o.append('");$("#insertStep #add-step-btn").prop("disabled",!0),o.append(''),$("#insertStep .radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),o.val(newStep),i(),s(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",i),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){s(n)})},{insertStep:insertStep}}},{"./urlHash.js":7}],7:[function(e,t,n){function a(){var e=window.location.hash;e&&(e=e.split("#")[1]);var t={};return e.split("&").forEach(function(e,n){""!=(e=e.split("="))[0]&&(t[e[0]]=e[1])}),t}function i(e){var t=Object.keys(e),n=Object.values(e),a=[];t.forEach(function(e,i){""!=e&&a.push(t[i]+"="+n[i])});var i=a.join("&");window.location.hash=i}t.exports={getUrlHashParameter:function(e){return a()[e]},setUrlHashParameter:function(e,t){var n=a();n[e]=t,i(n)},getUrlHashParameters:a,setUrlHashParameters:i}},{}]},{},[1]); \ No newline at end of file diff --git a/examples/demo.js b/examples/demo.js index a05dcd44..287c84fc 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -1,3 +1,9 @@ +var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'), + setupCache = require('./lib/cache.js'), + DefaultHtmlStepUi = require('./lib/defaultHtmlStepUi.js'), + urlHash = require('./lib/urlHash.js'), + insertPreview = require('./lib/insertPreview.js'); + window.onload = function() { sequencer = ImageSequencer(); @@ -43,11 +49,11 @@ window.onload = function() { sequencer.setUI(DefaultHtmlStepUi(sequencer)); // UI for the overall demo: - var ui = DefaultHtmlSequencerUi(sequencer); + var ui = defaultHtmlSequencerUi(sequencer); // find any `src` parameters in URL hash and attempt to source image from them and run the sequencer - if (getUrlHashParameter('src')) { - sequencer.loadImage(getUrlHashParameter('src'), ui.onLoad); + if (urlHash.getUrlHashParameter('src')) { + sequencer.loadImage(urlHash.getUrlHashParameter('src'), ui.onLoad); } else { sequencer.loadImage("images/tulips.png", ui.onLoad); } @@ -184,8 +190,8 @@ window.onload = function() { step.output.src = reader.result; sequencer.run({ index: 0 }); step.options.step.imgElement.src = reader.result; - updatePreviews(reader.result,'addStep'); - updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,'insertStep'); + insertPreview.updatePreviews(reader.result,'addStep'); + insertPreview.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,'insertStep'); }, onTakePhoto: function (url) { var step = sequencer.images.image1.steps[0]; @@ -197,9 +203,9 @@ window.onload = function() { setupCache(); - if (getUrlHashParameter('src')) { - updatePreviews(getUrlHashParameter('src'),'addStep'); + if (urlHash.getUrlHashParameter('src')) { + insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'addStep'); } else { - updatePreviews("images/tulips.png",'addStep'); + insertPreview.updatePreviews("images/tulips.png",'addStep'); } }; \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 49db3126..fe98b217 100644 --- a/examples/index.html +++ b/examples/index.html @@ -17,13 +17,7 @@ - - - - - - - + diff --git a/examples/lib/cache.js b/examples/lib/cache.js index 73eeea2d..d1038f8c 100644 --- a/examples/lib/cache.js +++ b/examples/lib/cache.js @@ -34,4 +34,6 @@ var setupCache = function() { } location.reload(); }); -} \ No newline at end of file +} + +module.exports = setupCache; \ No newline at end of file diff --git a/examples/lib/defaultHtmlSequencerUi.js b/examples/lib/defaultHtmlSequencerUi.js index 2b274e7f..add45438 100644 --- a/examples/lib/defaultHtmlSequencerUi.js +++ b/examples/lib/defaultHtmlSequencerUi.js @@ -1,3 +1,4 @@ +var urlHash = require('./urlHash.js'); function DefaultHtmlSequencerUi(_sequencer, options) { options = options || {}; @@ -14,13 +15,13 @@ function DefaultHtmlSequencerUi(_sequencer, options) { // look up needed steps from Url Hash: function importStepsFromUrlHash() { - var hash = getUrlHashParameter("steps"); + var hash = urlHash.getUrlHashParameter("steps"); if (hash) { _sequencer.importString(hash); _sequencer.run({ index: 0 }); } - setUrlHashParameter("steps", sequencer.toString()); + urlHash.setUrlHashParameter("steps", sequencer.toString()); } function selectNewStepUi() { @@ -33,7 +34,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) { var index = $(removeStepSel).index(this) + 1; sequencer.removeSteps(index).run({ index: index - 1 }); // remove from URL hash too - setUrlHashParameter("steps", sequencer.toString()); + urlHash.setUrlHashParameter("steps", sequencer.toString()); //disable save-sequence button if all steps are removed handleSaveSequence(); } @@ -63,7 +64,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) { handleSaveSequence(); // add to URL hash too - setUrlHashParameter("steps", _sequencer.toString()); + urlHash.setUrlHashParameter("steps", _sequencer.toString()); } function handleSaveSequence(){ @@ -82,3 +83,6 @@ function DefaultHtmlSequencerUi(_sequencer, options) { addStepUi: addStepUi } } + +module.exports = DefaultHtmlSequencerUi; + diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 7c7c721e..930dac38 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -8,11 +8,15 @@ // output values, step information. // See documetation for more details. +var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'); +var urlHash = require('./urlHash.js'); + function DefaultHtmlStepUi(_sequencer, options) { options = options || {}; var stepsEl = options.stepsEl || document.querySelector("#steps"); var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep"; + function onSetup(step, stepOptions) { if (step.options && step.options.description) step.description = step.options.description; @@ -49,7 +53,7 @@ function DefaultHtmlStepUi(_sequencer, options) { \ '; - var util = IntermediateHtmlStepUi(_sequencer, step); + var util = intermediateHtmlStepUi(_sequencer, step); var parser = new DOMParser(); step.ui = parser.parseFromString(step.ui, "text/html"); @@ -166,7 +170,7 @@ function DefaultHtmlStepUi(_sequencer, options) { _sequencer.run({ index: step.index - 1 }); // modify the url hash - setUrlHashParameter("steps", _sequencer.toString()); + urlHash.setUrlHashParameter("steps", _sequencer.toString()); // disable the save button $(step.ui.querySelector('.btn-save')).prop('disabled', true); @@ -301,3 +305,6 @@ if(typeof window === "undefined"){ DefaultHtmlStepUi: DefaultHtmlStepUi } } + +module.exports = DefaultHtmlStepUi; + diff --git a/examples/lib/insertPreview.js b/examples/lib/insertPreview.js index bd104ecd..f5a474ad 100644 --- a/examples/lib/insertPreview.js +++ b/examples/lib/insertPreview.js @@ -47,4 +47,9 @@ function generatePreview(previewStepName, customValues, path, selector) { Object.keys(previewSequencerSteps).forEach(function (step, index) { generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector); }); - } \ No newline at end of file + } + +module.exports = { + generatePreview : generatePreview, + updatePreviews : updatePreviews +} \ No newline at end of file diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js index 8b09a75a..6222c506 100644 --- a/examples/lib/intermediateHtmlStepUi.js +++ b/examples/lib/intermediateHtmlStepUi.js @@ -1,3 +1,4 @@ +var urlHash = require('./urlHash.js'); function IntermediateHtmlStepUi(_sequencer, step, options) { function stepUI() { return '
\ @@ -112,7 +113,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) { .insertSteps(id + 1, newStepName).run({ index: id }); // add to URL hash too - setUrlHashParameter("steps", _sequencer.toString()); + urlHash.setUrlHashParameter("steps", _sequencer.toString()); } @@ -120,3 +121,5 @@ function IntermediateHtmlStepUi(_sequencer, step, options) { insertStep } } +module.exports = IntermediateHtmlStepUi; + diff --git a/examples/lib/urlHash.js b/examples/lib/urlHash.js index 44ef9fd1..3d48e7c2 100644 --- a/examples/lib/urlHash.js +++ b/examples/lib/urlHash.js @@ -40,3 +40,10 @@ function setUrlHashParameter(param, value) { setUrlHashParameters(params); } + +module.exports = { + getUrlHashParameter: getUrlHashParameter, + setUrlHashParameter: setUrlHashParameter, + getUrlHashParameters: getUrlHashParameters, + setUrlHashParameters: setUrlHashParameters + }