+ With this app, you can glitch your own images by dragging an image into the browser window. Use the sliders in the control panel to alter the glitched parameters. The image updates in real time.
+ This app corrupts some bytes in an image. Because of the way JPEG encoding works, the corrupted file still shows a corrupted image. It was inspired by soulwire’s experiment in Flash.
+ This tool was created by Georg. He is always happy to learn about the things that people are creating with his tools. You can follow him on Twitter or explore the source code of this app on GitHub.
+ If you like the glitcher, you can check out some of Georg’s other JavaScript experiments.
+
+ Please note: javascript and modern browsers are required for this app to work.
+
+
+ -1&&(!a[c]||!b(a[c],c,a));c-=1);}}function hasProp(a,b){return hasOwn.call(a,b)}function getOwn(a,b){return hasProp(a,b)&&a[b]}function eachProp(a,b){var c;for(c in a)if(hasProp(a,c)&&b(a[c],c))break}function mixin(a,b,c,d){return b&&eachProp(b,function(b,e){(c||!hasProp(a,e))&&(d&&"string"!=typeof b?(a[e]||(a[e]={}),mixin(a[e],b,c,d)):a[e]=b)}),a}function bind(a,b){return function(){return b.apply(a,arguments)}}function scripts(){return document.getElementsByTagName("script")}function getGlobal(a){if(!a)return a;var b=global;return each(a.split("."),function(a){b=b[a]}),b}function makeError(a,b,c,d){var e=new Error(b+"\nhttp://requirejs.org/docs/errors.html#"+a);return e.requireType=a,e.requireModules=d,c&&(e.originalError=c),e}function newContext(a){function o(a){var b,c;for(b=0;a[b];b+=1)if(c=a[b],"."===c)a.splice(b,1),b-=1;else if(".."===c){if(1===b&&(".."===a[2]||".."===a[0]))break;b>0&&(a.splice(b-1,2),b-=2)}}function p(a,b,c){var d,e,f,h,i,j,k,l,m,n,p,q=b&&b.split("/"),r=q,s=g.map,t=s&&s["*"];if(a&&"."===a.charAt(0)&&(b?(r=getOwn(g.pkgs,b)?q=[b]:q.slice(0,q.length-1),a=r.concat(a.split("/")),o(a),e=getOwn(g.pkgs,d=a[0]),a=a.join("/"),e&&a===d+"/"+e.main&&(a=d)):0===a.indexOf("./")&&(a=a.substring(2))),c&&(q||t)&&s){for(h=a.split("/"),i=h.length;i>0;i-=1){if(k=h.slice(0,i).join("/"),q)for(j=q.length;j>0;j-=1)if(f=getOwn(s,q.slice(0,j).join("/")),f&&(f=getOwn(f,k))){l=f,m=i;break}if(l)break;!n&&t&&getOwn(t,k)&&(n=getOwn(t,k),p=i)}!l&&n&&(l=n,m=p),l&&(h.splice(0,m,l),a=h.join("/"))}return a}function q(a){isBrowser&&each(scripts(),function(b){return b.getAttribute("data-requiremodule")===a&&b.getAttribute("data-requirecontext")===d.contextName?(b.parentNode.removeChild(b),!0):void 0})}function r(a){var b=getOwn(g.paths,a);return b&&isArray(b)&&b.length>1?(q(a),b.shift(),d.require.undef(a),d.require([a]),!0):void 0}function s(a){var b,c=a?a.indexOf("!"):-1;return c>-1&&(b=a.substring(0,c),a=a.substring(c+1,a.length)),[b,a]}function t(a,b,c,e){var f,g,h,i,j=null,l=b?b.name:null,o=a,q=!0,r="";return a||(q=!1,a="_@r"+(m+=1)),i=s(a),j=i[0],a=i[1],j&&(j=p(j,l,e),g=getOwn(k,j)),a&&(j?r=g&&g.normalize?g.normalize(a,function(a){return p(a,l,e)}):p(a,l,e):(r=p(a,l,e),i=s(r),j=i[0],r=i[1],c=!0,f=d.nameToUrl(r))),h=!j||g||c?"":"_unnormalized"+(n+=1),{prefix:j,name:r,parentMap:b,unnormalized:!!h,url:f,originalName:o,isDefine:q,id:(j?j+"!"+r:r)+h}}function u(a){var b=a.id,c=getOwn(h,b);return c||(c=h[b]=new d.Module(a)),c}function v(a,b,c){var d=a.id,e=getOwn(h,d);!hasProp(k,d)||e&&!e.defineEmitComplete?u(a).on(b,c):"defined"===b&&c(k[d])}function w(a,b){var c=a.requireModules,d=!1;b?b(a):(each(c,function(b){var c=getOwn(h,b);c&&(c.error=a,c.events.error&&(d=!0,c.emit("error",a)))}),d||req.onError(a))}function x(){globalDefQueue.length&&(apsp.apply(j,[j.length-1,0].concat(globalDefQueue)),globalDefQueue=[])}function y(a){delete h[a]}function z(a,b,c){var d=a.map.id;a.error?a.emit("error",a.error):(b[d]=!0,each(a.depMaps,function(d,e){var f=d.id,g=getOwn(h,f);!g||a.depMatched[e]||c[f]||(getOwn(b,f)?(a.defineDep(e,k[f]),a.check()):z(g,b,c))}),c[d]=!0)}function A(){var a,c,e,i,j=1e3*g.waitSeconds,k=j&&d.startTime+j<(new Date).getTime(),l=[],m=[],n=!1,o=!0;if(!b){if(b=!0,eachProp(h,function(b){if(a=b.map,c=a.id,b.enabled&&(a.isDefine||m.push(b),!b.error))if(!b.inited&&k)r(c)?(i=!0,n=!0):(l.push(c),q(c));else if(!b.inited&&b.fetched&&a.isDefine&&(n=!0,!a.prefix))return o=!1}),k&&l.length)return e=makeError("timeout","Load timeout for modules: "+l,null,l),e.contextName=d.contextName,w(e);o&&each(m,function(a){z(a,{},{})}),k&&!i||!n||!isBrowser&&!isWebWorker||f||(f=setTimeout(function(){f=0,A()},50)),b=!1}}function B(a){hasProp(k,a[0])||u(t(a[0],null,!0)).init(a[1],a[2])}function C(a,b,c,d){a.detachEvent&&!isOpera?d&&a.detachEvent(d,b):a.removeEventListener(c,b,!1)}function D(a){var b=a.currentTarget||a.srcElement;return C(b,d.onScriptLoad,"load","onreadystatechange"),C(b,d.onScriptError,"error"),{node:b,id:b&&b.getAttribute("data-requiremodule")}}function E(){var a;for(x();j.length;){if(a=j.shift(),null===a[0])return w(makeError("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));B(a)}}var b,c,d,e,f,g={waitSeconds:7,baseUrl:"./",paths:{},pkgs:{},shim:{},map:{},config:{}},h={},i={},j=[],k={},l={},m=1,n=1;return e={require:function(a){return a.require?a.require:a.require=d.makeRequire(a.map)},exports:function(a){return a.usingExports=!0,a.map.isDefine?a.exports?a.exports:a.exports=k[a.map.id]={}:void 0},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return g.config&&getOwn(g.config,a.map.id)||{}},exports:k[a.map.id]}}},c=function(a){this.events=getOwn(i,a.id)||{},this.map=a,this.shim=getOwn(g.shim,a.id),this.depExports=[],this.depMaps=[],this.depMatched=[],this.pluginMaps={},this.depCount=0},c.prototype={init:function(a,b,c,d){d=d||{},this.inited||(this.factory=b,c?this.on("error",c):this.events.error&&(c=bind(this,function(a){this.emit("error",a)})),this.depMaps=a&&a.slice(0),this.errback=c,this.inited=!0,this.ignore=d.ignore,d.enabled||this.enabled?this.enable():this.check())},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0,d.startTime=(new Date).getTime();var a=this.map;return this.shim?(d.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],bind(this,function(){return a.prefix?this.callPlugin():this.load()})),void 0):a.prefix?this.callPlugin():this.load()}},load:function(){var a=this.map.url;l[a]||(l[a]=!0,d.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id,e=this.depExports,f=this.exports,g=this.factory;if(this.inited){if(this.error)this.emit("error",this.error);else if(!this.defining){if(this.defining=!0,this.depCount<1&&!this.defined){if(isFunction(g)){if(this.events.error)try{f=d.execCb(c,g,e,f)}catch(i){a=i}else f=d.execCb(c,g,e,f);if(this.map.isDefine&&(b=this.module,b&&void 0!==b.exports&&b.exports!==this.exports?f=b.exports:void 0===f&&this.usingExports&&(f=this.exports)),a)return a.requireMap=this.map,a.requireModules=[this.map.id],a.requireType="define",w(this.error=a)}else f=g;this.exports=f,this.map.isDefine&&!this.ignore&&(k[c]=f,req.onResourceLoad&&req.onResourceLoad(d,this.map,this.depMaps)),delete h[c],this.defined=!0}this.defining=!1,this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,c=t(a.prefix);this.depMaps.push(c),v(c,"defined",bind(this,function(c){var e,f,i,j=this.map.name,k=this.map.parentMap?this.map.parentMap.name:null,l=d.makeRequire(a.parentMap,{enableBuildCallback:!0});return this.map.unnormalized?(c.normalize&&(j=c.normalize(j,function(a){return p(a,k,!0)})||""),f=t(a.prefix+"!"+j,this.map.parentMap),v(f,"defined",bind(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),i=getOwn(h,f.id),i&&(this.depMaps.push(f),this.events.error&&i.on("error",bind(this,function(a){this.emit("error",a)})),i.enable()),void 0):(e=bind(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),e.error=bind(this,function(a){this.inited=!0,this.error=a,a.requireModules=[b],eachProp(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)}),w(a)}),e.fromText=bind(this,function(c,f){var h=a.name,i=t(h),j=useInteractive;f&&(c=f),j&&(useInteractive=!1),u(i),hasProp(g.config,b)&&(g.config[h]=g.config[b]);try{req.exec(c)}catch(k){return w(makeError("fromtexteval","fromText eval for "+b+" failed: "+k,k,[b]))}j&&(useInteractive=!0),this.depMaps.push(i),d.completeLoad(h),l([h],e)}),c.load(a.name,l,e,g),void 0)})),d.enable(c,this),this.pluginMaps[c.id]=c},enable:function(){this.enabled=!0,this.enabling=!0,each(this.depMaps,bind(this,function(a,b){var c,f,g;if("string"==typeof a){if(a=t(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap),this.depMaps[b]=a,g=getOwn(e,a.id))return this.depExports[b]=g(this),void 0;this.depCount+=1,v(a,"defined",bind(this,function(a){this.defineDep(b,a),this.check()})),this.errback&&v(a,"error",this.errback)}c=a.id,f=h[c],hasProp(e,c)||!f||f.enabled||d.enable(a,this)})),eachProp(this.pluginMaps,bind(this,function(a){var b=getOwn(h,a.id);b&&!b.enabled&&d.enable(a,this)})),this.enabling=!1,this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]),c.push(b)},emit:function(a,b){each(this.events[a],function(a){a(b)}),"error"===a&&delete this.events[a]}},d={config:g,contextName:a,registry:h,defined:k,urlFetched:l,defQueue:j,Module:c,makeModuleMap:t,nextTick:req.nextTick,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=g.pkgs,c=g.shim,e={paths:!0,config:!0,map:!0};eachProp(a,function(a,b){e[b]?"map"===b?mixin(g[b],a,!0,!0):mixin(g[b],a,!0):g[b]=a}),a.shim&&(eachProp(a.shim,function(a,b){isArray(a)&&(a={deps:a}),!a.exports&&!a.init||a.exportsFn||(a.exportsFn=d.makeShimExports(a)),c[b]=a}),g.shim=c),a.packages&&(each(a.packages,function(a){var c;a="string"==typeof a?{name:a}:a,c=a.location,b[a.name]={name:a.name,location:c||a.name,main:(a.main||"main").replace(currDirRegExp,"").replace(jsSuffixRegExp,"")}}),g.pkgs=b),eachProp(h,function(a,b){a.inited||a.map.unnormalized||(a.map=t(b))}),(a.deps||a.callback)&&d.require(a.deps||[],a.callback)},makeShimExports:function(a){function b(){var b;return a.init&&(b=a.init.apply(global,arguments)),b||a.exports&&getGlobal(a.exports)}return b},makeRequire:function(b,c){function f(g,i,j){var l,m,n;return c.enableBuildCallback&&i&&isFunction(i)&&(i.__requireJsBuild=!0),"string"==typeof g?isFunction(i)?w(makeError("requireargs","Invalid require call"),j):b&&hasProp(e,g)?e[g](h[b.id]):req.get?req.get(d,g,b):(m=t(g,b,!1,!0),l=m.id,hasProp(k,l)?k[l]:w(makeError("notloaded",'Module name "'+l+'" has not been loaded yet for context: '+a+(b?"":". Use require([])")))):(E(),d.nextTick(function(){E(),n=u(t(null,b)),n.skipMap=c.skipMap,n.init(g,i,j,{enabled:!0}),A()}),f)}return c=c||{},mixin(f,{isBrowser:isBrowser,toUrl:function(a){var c,e,f=a.lastIndexOf("."),g=a.split("/")[0],h="."===g||".."===g;return-1!==f&&(!h||f>1)&&(c=a.substring(f,a.length),a=a.substring(0,f)),e=d.nameToUrl(p(a,b&&b.id,!0),c||".fake"),c?e:e.substring(0,e.length-5)},defined:function(a){return hasProp(k,t(a,b,!1,!0).id)},specified:function(a){return a=t(a,b,!1,!0).id,hasProp(k,a)||hasProp(h,a)}}),b||(f.undef=function(a){x();var c=t(a,b,!0),d=getOwn(h,a);delete k[a],delete l[c.url],delete i[a],d&&(d.events.defined&&(i[a]=d.events),y(a))}),f},enable:function(a){var b=getOwn(h,a.id);b&&u(a).enable()},completeLoad:function(a){var b,c,d,e=getOwn(g.shim,a)||{},f=e.exports;for(x();j.length;){if(c=j.shift(),null===c[0]){if(c[0]=a,b)break;b=!0}else c[0]===a&&(b=!0);B(c)}if(d=getOwn(h,a),!b&&!hasProp(k,a)&&d&&!d.inited){if(!(!g.enforceDefine||f&&getGlobal(f)))return r(a)?void 0:w(makeError("nodefine","No define call for "+a,null,[a]));B([a,e.deps||[],e.exportsFn])}A()},nameToUrl:function(a,b){var c,d,e,f,h,i,j,k,l;if(req.jsExtRegExp.test(a))k=a+(b||"");else{for(c=g.paths,d=g.pkgs,h=a.split("/"),i=h.length;i>0;i-=1){if(j=h.slice(0,i).join("/"),e=getOwn(d,j),l=getOwn(c,j)){isArray(l)&&(l=l[0]),h.splice(0,i,l);break}if(e){f=a===e.name?e.location+"/"+e.main:e.location,h.splice(0,i,f);break}}k=h.join("/"),k+=b||(/\?/.test(k)?"":".js"),k=("/"===k.charAt(0)||k.match(/^[\w\+\.\-]+:/)?"":g.baseUrl)+k}return g.urlArgs?k+((-1===k.indexOf("?")?"?":"&")+g.urlArgs):k},load:function(a,b){req.load(d,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||readyRegExp.test((a.currentTarget||a.srcElement).readyState)){interactiveScript=null;var b=D(a);d.completeLoad(b.id)}},onScriptError:function(a){var b=D(a);return r(b.id)?void 0:w(makeError("scripterror","Script error",a,[b.id]))}},d.require=d.makeRequire(),d}function getInteractiveScript(){return interactiveScript&&"interactive"===interactiveScript.readyState?interactiveScript:(eachReverse(scripts(),function(a){return"interactive"===a.readyState?interactiveScript=a:void 0}),interactiveScript)}var req,s,head,baseElement,dataMain,src,interactiveScript,currentlyAddingScript,mainScript,subPath,version="2.1.4",commentRegExp=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/gm,cjsRequireRegExp=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,jsSuffixRegExp=/\.js$/,currDirRegExp=/^\.\//,op=Object.prototype,ostring=op.toString,hasOwn=op.hasOwnProperty,ap=Array.prototype,apsp=ap.splice,isBrowser=!("undefined"==typeof window||!navigator||!document),isWebWorker=!isBrowser&&"undefined"!=typeof importScripts,readyRegExp=isBrowser&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,defContextName="_",isOpera="undefined"!=typeof opera&&"[object Opera]"===opera.toString(),contexts={},cfg={},globalDefQueue=[],useInteractive=!1;if("undefined"==typeof define){if("undefined"!=typeof requirejs){if(isFunction(requirejs))return;cfg=requirejs,requirejs=void 0}"undefined"==typeof require||isFunction(require)||(cfg=require,require=void 0),req=requirejs=function(a,b,c,d){var e,f,g=defContextName;return isArray(a)||"string"==typeof a||(f=a,isArray(b)?(a=b,b=c,c=d):a=[]),f&&f.context&&(g=f.context),e=getOwn(contexts,g),e||(e=contexts[g]=req.s.newContext(g)),f&&e.configure(f),e.require(a,b,c)},req.config=function(a){return req(a)},req.nextTick="undefined"!=typeof setTimeout?function(a){setTimeout(a,4)}:function(a){a()},require||(require=req),req.version=version,req.jsExtRegExp=/^\/|:|\?|\.js$/,req.isBrowser=isBrowser,s=req.s={contexts:contexts,newContext:newContext},req({}),each(["toUrl","undef","defined","specified"],function(a){req[a]=function(){var b=contexts[defContextName];return b.require[a].apply(b,arguments)}}),isBrowser&&(head=s.head=document.getElementsByTagName("head")[0],baseElement=document.getElementsByTagName("base")[0],baseElement&&(head=s.head=baseElement.parentNode)),req.onError=function(a){throw a},req.load=function(a,b,c){var e,d=a&&a.config||{};return isBrowser?(e=d.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),e.type=d.scriptType||"text/javascript",e.charset="utf-8",e.async=!0,e.setAttribute("data-requirecontext",a.contextName),e.setAttribute("data-requiremodule",b),!e.attachEvent||e.attachEvent.toString&&e.attachEvent.toString().indexOf("[native code")<0||isOpera?(e.addEventListener("load",a.onScriptLoad,!1),e.addEventListener("error",a.onScriptError,!1)):(useInteractive=!0,e.attachEvent("onreadystatechange",a.onScriptLoad)),e.src=c,currentlyAddingScript=e,baseElement?head.insertBefore(e,baseElement):head.appendChild(e),currentlyAddingScript=null,e):(isWebWorker&&(importScripts(c),a.completeLoad(b)),void 0)},isBrowser&&eachReverse(scripts(),function(a){return head||(head=a.parentNode),dataMain=a.getAttribute("data-main"),dataMain?(cfg.baseUrl||(src=dataMain.split("/"),mainScript=src.pop(),subPath=src.length?src.join("/")+"/":"./",cfg.baseUrl=subPath,dataMain=mainScript),dataMain=dataMain.replace(jsSuffixRegExp,""),cfg.deps=cfg.deps?cfg.deps.concat(dataMain):[dataMain],!0):void 0}),define=function(a,b,c){var d,e;"string"!=typeof a&&(c=b,b=a,a=null),isArray(b)||(c=b,b=[]),!b.length&&isFunction(c)&&c.length&&(c.toString().replace(commentRegExp,"").replace(cjsRequireRegExp,function(a,c){b.push(c)}),b=(1===c.length?["require"]:["require","exports","module"]).concat(b)),useInteractive&&(d=currentlyAddingScript||getInteractiveScript(),d&&(a||(a=d.getAttribute("data-requiremodule")),e=contexts[d.getAttribute("data-requirecontext")])),(e?e.defQueue:globalDefQueue).push([a,b,c])},define.amd={jQuery:!0},req.exec=function(text){return eval(text)},req(cfg)}}(this);
\ No newline at end of file
diff --git a/scripts/lib/reqwest.js b/scripts/lib/reqwest.js
index de7d8da..4def3bc 100644
--- a/scripts/lib/reqwest.js
+++ b/scripts/lib/reqwest.js
@@ -1,17 +1,39 @@
+/*!
+ * Reqwest! A general purpose XHR connection manager
+ * license MIT (c) Dustin Diaz 2015
+ * https://github.com/ded/reqwest
+ */
+
!function (name, context, definition) {
if (typeof module != 'undefined' && module.exports) module.exports = definition()
else if (typeof define == 'function' && define.amd) define(definition)
else context[name] = definition()
}('reqwest', this, function () {
- var win = window
- , doc = document
- , twoHundo = /^20\d$/
- , byTag = 'getElementsByTagName'
+ var context = this
+
+ if ('window' in context) {
+ var doc = document
+ , byTag = 'getElementsByTagName'
+ , head = doc[byTag]('head')[0]
+ } else {
+ var XHR2
+ try {
+ // prevent browserify including xhr2
+ var xhr2 = 'xhr2'
+ XHR2 = require(xhr2)
+ } catch (ex) {
+ throw new Error('Peer dependency `xhr2` required! Please npm install xhr2')
+ }
+ }
+
+
+ var httpsRe = /^http/
+ , protocolRe = /(^\w+):\/\//
+ , twoHundo = /^(20\d|1223)$/ //http://stackoverflow.com/questions/10046972/msie-returns-status-code-of-1223-for-ajax-request
, readyState = 'readyState'
, contentType = 'Content-Type'
, requestedWith = 'X-Requested-With'
- , head = doc[byTag]('head')[0]
, uniqid = 0
, callbackPrefix = 'reqwest_' + (+new Date())
, lastValue // data stored by the most recent JSONP callback
@@ -26,31 +48,33 @@
}
, defaultHeaders = {
- contentType: 'application/x-www-form-urlencoded'
- , requestedWith: xmlHttpRequest
- , accept: {
+ 'contentType': 'application/x-www-form-urlencoded'
+ , 'requestedWith': xmlHttpRequest
+ , 'accept': {
'*': 'text/javascript, text/html, application/xml, text/xml, */*'
- , xml: 'application/xml, text/xml'
- , html: 'text/html'
- , text: 'text/plain'
- , json: 'application/json, text/javascript'
- , js: 'application/javascript, text/javascript'
+ , 'xml': 'application/xml, text/xml'
+ , 'html': 'text/html'
+ , 'text': 'text/plain'
+ , 'json': 'application/json, text/javascript'
+ , 'js': 'application/javascript, text/javascript'
}
}
, xhr = function(o) {
// is it x-domain
- if (o.crossOrigin === true) {
- var xhr = win[xmlHttpRequest] ? new XMLHttpRequest() : null
+ if (o['crossOrigin'] === true) {
+ var xhr = context[xmlHttpRequest] ? new XMLHttpRequest() : null
if (xhr && 'withCredentials' in xhr) {
return xhr
- } else if (win[xDomainRequest]) {
+ } else if (context[xDomainRequest]) {
return new XDomainRequest()
} else {
throw new Error('Browser does not support cross-origin requests')
}
- } else if (win[xmlHttpRequest]) {
+ } else if (context[xmlHttpRequest]) {
return new XMLHttpRequest()
+ } else if (XHR2) {
+ return new XHR2()
} else {
return new ActiveXObject('Microsoft.XMLHTTP')
}
@@ -61,15 +85,21 @@
}
}
+ function succeed(r) {
+ var protocol = protocolRe.exec(r.url)
+ protocol = (protocol && protocol[1]) || context.location.protocol
+ return httpsRe.test(protocol) ? twoHundo.test(r.request.status) : !!r.request.response
+ }
+
function handleReadyState(r, success, error) {
return function () {
// use _aborted to mitigate against IE err c00c023f
// (can't read props on aborted request objects)
if (r._aborted) return error(r.request)
+ if (r._timedOut) return error(r.request, 'Request is aborted: timeout')
if (r.request && r.request[readyState] == 4) {
r.request.onreadystatechange = noop
- if (twoHundo.test(r.request.status))
- success(r.request)
+ if (succeed(r)) success(r.request)
else
error(r.request)
}
@@ -77,23 +107,24 @@
}
function setHeaders(http, o) {
- var headers = o.headers || {}
+ var headers = o['headers'] || {}
, h
- headers.Accept = headers.Accept
- || defaultHeaders.accept[o.type]
- || defaultHeaders.accept['*']
+ headers['Accept'] = headers['Accept']
+ || defaultHeaders['accept'][o['type']]
+ || defaultHeaders['accept']['*']
+ var isAFormData = typeof FormData === 'function' && (o['data'] instanceof FormData);
// breaks cross-origin requests with legacy browsers
- if (!o.crossOrigin && !headers[requestedWith]) headers[requestedWith] = defaultHeaders.requestedWith
- if (!headers[contentType]) headers[contentType] = o.contentType || defaultHeaders.contentType
+ if (!o['crossOrigin'] && !headers[requestedWith]) headers[requestedWith] = defaultHeaders['requestedWith']
+ if (!headers[contentType] && !isAFormData) headers[contentType] = o['contentType'] || defaultHeaders['contentType']
for (h in headers)
headers.hasOwnProperty(h) && 'setRequestHeader' in http && http.setRequestHeader(h, headers[h])
}
function setCredentials(http, o) {
- if (typeof o.withCredentials !== 'undefined' && typeof http.withCredentials !== 'undefined') {
- http.withCredentials = !!o.withCredentials
+ if (typeof o['withCredentials'] !== 'undefined' && typeof http.withCredentials !== 'undefined') {
+ http.withCredentials = !!o['withCredentials']
}
}
@@ -107,9 +138,8 @@
function handleJsonp(o, fn, err, url) {
var reqId = uniqid++
- , cbkey = o.jsonpCallback || 'callback' // the 'callback' key
- , cbval = o.jsonpCallbackName || reqwest.getcallbackPrefix(reqId)
- // , cbval = o.jsonpCallbackName || ('reqwest_' + reqId) // the 'callback' value
+ , cbkey = o['jsonpCallback'] || 'callback' // the 'callback' key
+ , cbval = o['jsonpCallbackName'] || reqwest.getcallbackPrefix(reqId)
, cbreg = new RegExp('((^|\\?|&)' + cbkey + ')=([^&]+)')
, match = url.match(cbreg)
, script = doc.createElement('script')
@@ -126,7 +156,7 @@
url = urlappend(url, cbkey + '=' + cbval) // no callback details, add 'em
}
- win[cbval] = generalCallback
+ context[cbval] = generalCallback
script.type = 'text/javascript'
script.src = url
@@ -135,9 +165,6 @@
// need this for IE due to out-of-order onreadystatechange(), binding script
// execution to an event listener gives us control over when the script
// is executed. See http://jaubourg.net/2010/07/loading-script-as-onclick-handler-of.html
- //
- // if this hack is used in IE10 jsonp callback are never called
- script.event = 'onclick'
script.htmlFor = script.id = '_reqwest_' + reqId
}
@@ -171,29 +198,32 @@
function getRequest(fn, err) {
var o = this.o
- , method = (o.method || 'GET').toUpperCase()
- , url = typeof o === 'string' ? o : o.url
- // convert non-string objects to query-string form unless o.processData is false
- , data = (o.processData !== false && o.data && typeof o.data !== 'string')
- ? reqwest.toQueryString(o.data)
- : (o.data || null)
+ , method = (o['method'] || 'GET').toUpperCase()
+ , url = typeof o === 'string' ? o : o['url']
+ // convert non-string objects to query-string form unless o['processData'] is false
+ , data = (o['processData'] !== false && o['data'] && typeof o['data'] !== 'string')
+ ? reqwest.toQueryString(o['data'])
+ : (o['data'] || null)
, http
, sendWait = false
// if we're working on a GET request and we have data then we should append
// query string to end of URL and not post data
- if ((o.type == 'jsonp' || method == 'GET') && data) {
+ if ((o['type'] == 'jsonp' || method == 'GET') && data) {
url = urlappend(url, data)
data = null
}
- if (o.type == 'jsonp') return handleJsonp(o, fn, err, url)
+ if (o['type'] == 'jsonp') return handleJsonp(o, fn, err, url)
- http = xhr(o)
- http.open(method, url, o.async === false ? false : true)
+ // get the xhr from the factory if passed
+ // if the factory returns null, fall-back to ours
+ http = (o.xhr && o.xhr(o)) || xhr(o)
+
+ http.open(method, url, o['async'] === false ? false : true)
setHeaders(http, o)
setCredentials(http, o)
- if (win[xDomainRequest] && http instanceof win[xDomainRequest]) {
+ if (context[xDomainRequest] && http instanceof context[xDomainRequest]) {
http.onload = fn
http.onerror = err
// NOTE: see
@@ -203,7 +233,7 @@
} else {
http.onreadystatechange = handleReadyState(this, fn, err)
}
- o.before && o.before(http)
+ o['before'] && o['before'](http)
if (sendWait) {
setTimeout(function () {
http.send(data)
@@ -221,14 +251,18 @@
init.apply(this, arguments)
}
- function setType(url) {
- var m = url.match(/\.(json|jsonp|html|xml)(\?|$)/)
- return m ? m[1] : 'js'
+ function setType(header) {
+ // json, javascript, text/plain, text/html, xml
+ if (header === null) return undefined; //In case of no content-type.
+ if (header.match('json')) return 'json'
+ if (header.match('javascript')) return 'js'
+ if (header.match('text')) return 'html'
+ if (header.match('xml')) return 'xml'
}
function init(o, fn) {
- this.url = typeof o == 'string' ? o : o.url
+ this.url = typeof o == 'string' ? o : o['url']
this.timeout = null
// whether request has been fulfilled for purpose
@@ -245,36 +279,35 @@
this._responseArgs = {}
var self = this
- , type = o.type || setType(this.url)
fn = fn || function () {}
- if (o.timeout) {
+ if (o['timeout']) {
this.timeout = setTimeout(function () {
- self.abort()
- }, o.timeout)
+ timedOut()
+ }, o['timeout'])
}
- if (o.success) {
+ if (o['success']) {
this._successHandler = function () {
- o.success.apply(o, arguments)
+ o['success'].apply(o, arguments)
}
}
- if (o.error) {
+ if (o['error']) {
this._errorHandlers.push(function () {
- o.error.apply(o, arguments)
+ o['error'].apply(o, arguments)
})
}
- if (o.complete) {
+ if (o['complete']) {
this._completeHandlers.push(function () {
- o.complete.apply(o, arguments)
+ o['complete'].apply(o, arguments)
})
}
function complete (resp) {
- o.timeout && clearTimeout(self.timeout)
+ o['timeout'] && clearTimeout(self.timeout)
self.timeout = null
while (self._completeHandlers.length > 0) {
self._completeHandlers.shift()(resp)
@@ -282,6 +315,7 @@
}
function success (resp) {
+ var type = o['type'] || resp && setType(resp.getResponseHeader('Content-Type')) // resp can be undefined in IE
resp = (type !== 'jsonp') ? self.request : resp
// use global data filter on response text
var filteredResponse = globalSetupOptions.dataFilter(resp.responseText, type)
@@ -295,7 +329,7 @@
switch (type) {
case 'json':
try {
- resp = win.JSON ? win.JSON.parse(r) : eval('(' + r + ')')
+ resp = context.JSON ? context.JSON.parse(r) : eval('(' + r + ')')
} catch (err) {
return error(resp, 'Could not parse JSON in response', err)
}
@@ -328,6 +362,11 @@
complete(resp)
}
+ function timedOut() {
+ self._timedOut = true
+ self.request.abort()
+ }
+
function error(resp, msg, t) {
resp = self.request
self._responseArgs.resp = resp
@@ -398,6 +437,9 @@
}
return this
}
+ , 'catch': function (fn) {
+ return this.fail(fn)
+ }
}
function reqwest(o, fn) {
@@ -415,8 +457,8 @@
, optCb = function (o) {
// IE gives value="" even where there is no value attribute
// 'specified' ref: http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-862529273
- if (o && !o.disabled)
- cb(n, normalize(o.attributes.value && o.attributes.value.specified ? o.value : o.text))
+ if (o && !o['disabled'])
+ cb(n, normalize(o['attributes']['value'] && o['attributes']['value']['specified'] ? o['value'] : o['text']))
}
, ch, ra, val, i
@@ -523,12 +565,12 @@
}
// If an array was passed in, assume that it is an array of form elements.
if (isArray(o)) {
- for (i = 0; o && i < o.length; i++) add(o[i].name, o[i].value)
+ for (i = 0; o && i < o.length; i++) add(o[i]['name'], o[i]['value'])
} else {
// If traditional, encode the "old" way (the way 1.3.2 or older
// did it), otherwise encode params recursively.
for (prefix in o) {
- buildParams(prefix, o[prefix], traditional, add)
+ if (o.hasOwnProperty(prefix)) buildParams(prefix, o[prefix], traditional, add)
}
}
@@ -569,22 +611,22 @@
// jQuery and Zepto compatibility, differences can be remapped here so you can call
// .ajax.compat(options, callback)
- reqwest.compat = function (o, fn) {
- if (o) {
- o.type && (o.method = o.type) && delete o.type
- o.dataType && (o.type = o.dataType)
- o.jsonpCallback && (o.jsonpCallbackName = o.jsonpCallback) && delete o.jsonpCallback
- o.jsonp && (o.jsonpCallback = o.jsonp)
- }
- return new Reqwest(o, fn)
- }
+ // reqwest.compat = function (o, fn) {
+ // if (o) {
+ // o['type'] && (o['method'] = o['type']) && delete o['type']
+ // o['dataType'] && (o['type'] = o['dataType'])
+ // o['jsonpCallback'] && (o['jsonpCallbackName'] = o['jsonpCallback']) && delete o['jsonpCallback']
+ // o['jsonp'] && (o['jsonpCallback'] = o['jsonp'])
+ // }
+ // return new Reqwest(o, fn)
+ // }
- reqwest.ajaxSetup = function (options) {
- options = options || {}
- for (var k in options) {
- globalSetupOptions[k] = options[k]
- }
- }
+ // reqwest.ajaxSetup = function (options) {
+ // options = options || {}
+ // for (var k in options) {
+ // globalSetupOptions[k] = options[k]
+ // }
+ // }
return reqwest
-});
\ No newline at end of file
+});
diff --git a/scripts/lib/signals-1.0.0.js b/scripts/lib/signals-1.0.0.js
deleted file mode 100755
index 2615d26..0000000
--- a/scripts/lib/signals-1.0.0.js
+++ /dev/null
@@ -1,445 +0,0 @@
-/*jslint onevar:true, undef:true, newcap:true, regexp:true, bitwise:true, maxerr:50, indent:4, white:false, nomen:false, plusplus:false */
-/*global define:false, require:false, exports:false, module:false, signals:false */
-
-/** @license
- * JS Signals
- * Released under the MIT license
- * Author: Miller Medeiros
- * Version: 1.0.0 - Build: 268 (2012/11/29 05:48 PM)
- */
-
-(function(global){
-
- // SignalBinding -------------------------------------------------
- //================================================================
-
- /**
- * Object that represents a binding between a Signal and a listener function.
- *
- This is an internal constructor and shouldn't be called by regular users.
- *
- inspired by Joa Ebert AS3 SignalBinding and Robert Penner's Slot classes.
- * @author Miller Medeiros
- * @constructor
- * @internal
- * @name SignalBinding
- * @param {Signal} signal Reference to Signal object that listener is currently bound to.
- * @param {Function} listener Handler function bound to the signal.
- * @param {boolean} isOnce If binding should be executed just once.
- * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
- * @param {Number} [priority] The priority level of the event listener. (default = 0).
- */
- function SignalBinding(signal, listener, isOnce, listenerContext, priority) {
-
- /**
- * Handler function bound to the signal.
- * @type Function
- * @private
- */
- this._listener = listener;
-
- /**
- * If binding should be executed just once.
- * @type boolean
- * @private
- */
- this._isOnce = isOnce;
-
- /**
- * Context on which listener will be executed (object that should represent the `this` variable inside listener function).
- * @memberOf SignalBinding.prototype
- * @name context
- * @type Object|undefined|null
- */
- this.context = listenerContext;
-
- /**
- * Reference to Signal object that listener is currently bound to.
- * @type Signal
- * @private
- */
- this._signal = signal;
-
- /**
- * Listener priority
- * @type Number
- * @private
- */
- this._priority = priority || 0;
- }
-
- SignalBinding.prototype = {
-
- /**
- * If binding is active and should be executed.
- * @type boolean
- */
- active : true,
-
- /**
- * Default parameters passed to listener during `Signal.dispatch` and `SignalBinding.execute`. (curried parameters)
- * @type Array|null
- */
- params : null,
-
- /**
- * Call listener passing arbitrary parameters.
- * If binding was added using `Signal.addOnce()` it will be automatically removed from signal dispatch queue, this method is used internally for the signal dispatch.
- * @param {Array} [paramsArr] Array of parameters that should be passed to the listener
- * @return {*} Value returned by the listener.
- */
- execute : function (paramsArr) {
- var handlerReturn, params;
- if (this.active && !!this._listener) {
- params = this.params? this.params.concat(paramsArr) : paramsArr;
- handlerReturn = this._listener.apply(this.context, params);
- if (this._isOnce) {
- this.detach();
- }
- }
- return handlerReturn;
- },
-
- /**
- * Detach binding from signal.
- * - alias to: mySignal.remove(myBinding.getListener());
- * @return {Function|null} Handler function bound to the signal or `null` if binding was previously detached.
- */
- detach : function () {
- return this.isBound()? this._signal.remove(this._listener, this.context) : null;
- },
-
- /**
- * @return {Boolean} `true` if binding is still bound to the signal and have a listener.
- */
- isBound : function () {
- return (!!this._signal && !!this._listener);
- },
-
- /**
- * @return {boolean} If SignalBinding will only be executed once.
- */
- isOnce : function () {
- return this._isOnce;
- },
-
- /**
- * @return {Function} Handler function bound to the signal.
- */
- getListener : function () {
- return this._listener;
- },
-
- /**
- * @return {Signal} Signal that listener is currently bound to.
- */
- getSignal : function () {
- return this._signal;
- },
-
- /**
- * Delete instance properties
- * @private
- */
- _destroy : function () {
- delete this._signal;
- delete this._listener;
- delete this.context;
- },
-
- /**
- * @return {string} String representation of the object.
- */
- toString : function () {
- return '[SignalBinding isOnce:' + this._isOnce +', isBound:'+ this.isBound() +', active:' + this.active + ']';
- }
-
- };
-
-
-/*global SignalBinding:false*/
-
- // Signal --------------------------------------------------------
- //================================================================
-
- function validateListener(listener, fnName) {
- if (typeof listener !== 'function') {
- throw new Error( 'listener is a required param of {fn}() and should be a Function.'.replace('{fn}', fnName) );
- }
- }
-
- /**
- * Custom event broadcaster
- *
- inspired by Robert Penner's AS3 Signals.
- * @name Signal
- * @author Miller Medeiros
- * @constructor
- */
- function Signal() {
- /**
- * @type Array.
- * @private
- */
- this._bindings = [];
- this._prevParams = null;
-
- // enforce dispatch to aways work on same context (#47)
- var self = this;
- this.dispatch = function(){
- Signal.prototype.dispatch.apply(self, arguments);
- };
- }
-
- Signal.prototype = {
-
- /**
- * Signals Version Number
- * @type String
- * @const
- */
- VERSION : '1.0.0',
-
- /**
- * If Signal should keep record of previously dispatched parameters and
- * automatically execute listener during `add()`/`addOnce()` if Signal was
- * already dispatched before.
- * @type boolean
- */
- memorize : false,
-
- /**
- * @type boolean
- * @private
- */
- _shouldPropagate : true,
-
- /**
- * If Signal is active and should broadcast events.
- * IMPORTANT: Setting this property during a dispatch will only affect the next dispatch, if you want to stop the propagation of a signal use `halt()` instead.
- * @type boolean
- */
- active : true,
-
- /**
- * @param {Function} listener
- * @param {boolean} isOnce
- * @param {Object} [listenerContext]
- * @param {Number} [priority]
- * @return {SignalBinding}
- * @private
- */
- _registerListener : function (listener, isOnce, listenerContext, priority) {
-
- var prevIndex = this._indexOfListener(listener, listenerContext),
- binding;
-
- if (prevIndex !== -1) {
- binding = this._bindings[prevIndex];
- if (binding.isOnce() !== isOnce) {
- throw new Error('You cannot add'+ (isOnce? '' : 'Once') +'() then add'+ (!isOnce? '' : 'Once') +'() the same listener without removing the relationship first.');
- }
- } else {
- binding = new SignalBinding(this, listener, isOnce, listenerContext, priority);
- this._addBinding(binding);
- }
-
- if(this.memorize && this._prevParams){
- binding.execute(this._prevParams);
- }
-
- return binding;
- },
-
- /**
- * @param {SignalBinding} binding
- * @private
- */
- _addBinding : function (binding) {
- //simplified insertion sort
- var n = this._bindings.length;
- do { --n; } while (this._bindings[n] && binding._priority <= this._bindings[n]._priority);
- this._bindings.splice(n + 1, 0, binding);
- },
-
- /**
- * @param {Function} listener
- * @return {number}
- * @private
- */
- _indexOfListener : function (listener, context) {
- var n = this._bindings.length,
- cur;
- while (n--) {
- cur = this._bindings[n];
- if (cur._listener === listener && cur.context === context) {
- return n;
- }
- }
- return -1;
- },
-
- /**
- * Check if listener was attached to Signal.
- * @param {Function} listener
- * @param {Object} [context]
- * @return {boolean} if Signal has the specified listener.
- */
- has : function (listener, context) {
- return this._indexOfListener(listener, context) !== -1;
- },
-
- /**
- * Add a listener to the signal.
- * @param {Function} listener Signal handler function.
- * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
- * @param {Number} [priority] The priority level of the event listener. Listeners with higher priority will be executed before listeners with lower priority. Listeners with same priority level will be executed at the same order as they were added. (default = 0)
- * @return {SignalBinding} An Object representing the binding between the Signal and listener.
- */
- add : function (listener, listenerContext, priority) {
- validateListener(listener, 'add');
- return this._registerListener(listener, false, listenerContext, priority);
- },
-
- /**
- * Add listener to the signal that should be removed after first execution (will be executed only once).
- * @param {Function} listener Signal handler function.
- * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
- * @param {Number} [priority] The priority level of the event listener. Listeners with higher priority will be executed before listeners with lower priority. Listeners with same priority level will be executed at the same order as they were added. (default = 0)
- * @return {SignalBinding} An Object representing the binding between the Signal and listener.
- */
- addOnce : function (listener, listenerContext, priority) {
- validateListener(listener, 'addOnce');
- return this._registerListener(listener, true, listenerContext, priority);
- },
-
- /**
- * Remove a single listener from the dispatch queue.
- * @param {Function} listener Handler function that should be removed.
- * @param {Object} [context] Execution context (since you can add the same handler multiple times if executing in a different context).
- * @return {Function} Listener handler function.
- */
- remove : function (listener, context) {
- validateListener(listener, 'remove');
-
- var i = this._indexOfListener(listener, context);
- if (i !== -1) {
- this._bindings[i]._destroy(); //no reason to a SignalBinding exist if it isn't attached to a signal
- this._bindings.splice(i, 1);
- }
- return listener;
- },
-
- /**
- * Remove all listeners from the Signal.
- */
- removeAll : function () {
- var n = this._bindings.length;
- while (n--) {
- this._bindings[n]._destroy();
- }
- this._bindings.length = 0;
- },
-
- /**
- * @return {number} Number of listeners attached to the Signal.
- */
- getNumListeners : function () {
- return this._bindings.length;
- },
-
- /**
- * Stop propagation of the event, blocking the dispatch to next listeners on the queue.
- * IMPORTANT: should be called only during signal dispatch, calling it before/after dispatch won't affect signal broadcast.
- * @see Signal.prototype.disable
- */
- halt : function () {
- this._shouldPropagate = false;
- },
-
- /**
- * Dispatch/Broadcast Signal to all listeners added to the queue.
- * @param {...*} [params] Parameters that should be passed to each handler.
- */
- dispatch : function (params) {
- if (! this.active) {
- return;
- }
-
- var paramsArr = Array.prototype.slice.call(arguments),
- n = this._bindings.length,
- bindings;
-
- if (this.memorize) {
- this._prevParams = paramsArr;
- }
-
- if (! n) {
- //should come after memorize
- return;
- }
-
- bindings = this._bindings.slice(); //clone array in case add/remove items during dispatch
- this._shouldPropagate = true; //in case `halt` was called before dispatch or during the previous dispatch.
-
- //execute all callbacks until end of the list or until a callback returns `false` or stops propagation
- //reverse loop since listeners with higher priority will be added at the end of the list
- do { n--; } while (bindings[n] && this._shouldPropagate && bindings[n].execute(paramsArr) !== false);
- },
-
- /**
- * Forget memorized arguments.
- * @see Signal.memorize
- */
- forget : function(){
- this._prevParams = null;
- },
-
- /**
- * Remove all bindings from signal and destroy any reference to external objects (destroy Signal object).
- * IMPORTANT: calling any method on the signal instance after calling dispose will throw errors.
- */
- dispose : function () {
- this.removeAll();
- delete this._bindings;
- delete this._prevParams;
- },
-
- /**
- * @return {string} String representation of the object.
- */
- toString : function () {
- return '[Signal active:'+ this.active +' numListeners:'+ this.getNumListeners() +']';
- }
-
- };
-
-
- // Namespace -----------------------------------------------------
- //================================================================
-
- /**
- * Signals namespace
- * @namespace
- * @name signals
- */
- var signals = Signal;
-
- /**
- * Custom event broadcaster
- * @see Signal
- */
- // alias for backwards compatibility (see #gh-44)
- signals.Signal = Signal;
-
-
-
- //exports to multiple environments
- if(typeof define === 'function' && define.amd){ //AMD
- define(function () { return signals; });
- } else if (typeof module !== 'undefined' && module.exports){ //node
- module.exports = signals;
- } else { //browser
- //use string because of Google closure compiler ADVANCED_MODE
- /*jslint sub:true */
- global['signals'] = signals;
- }
-
-}(this));
diff --git a/scripts/main.js b/scripts/main.js
deleted file mode 100644
index d72492c..0000000
--- a/scripts/main.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*global require, requirejs, define */
-// http://requirejs.org/docs/api.html#config
-requirejs.config(
- {
- baseUrl: 'scripts/',
- waitSeconds: 50,
- urlArgs: 'bust=' + ( new Date() ).getTime()
- }
-);
-
-require(
- [
- 'src/process',
- 'src/image',
- 'src/file',
- 'src/dragdrop',
- 'src/controls',
- 'src/export-button',
- 'src/import-button',
- 'src/random-button',
- 'src/upload-imgur',
- 'src/intro',
- 'src/cam',
- 'util/feature-test',
- 'lib/signals-1.0.0'
- ],
- function(
- process,
- image,
- file,
- dragdrop,
- controls,
- export_button,
- import_button,
- random_button,
- imgur,
- intro,
- cam,
- testFeatures,
- Signal
- )
- {
- testFeatures( init, showError );
-
- function init( supported_features )
- {
- var shared = {
- feature: supported_features,
- signals: {
- 'load-file' : new Signal(),
- 'image-loaded' : new Signal(),
- 'set-new-src' : new Signal(),
- 'control-set' : new Signal(),
- 'control-updated' : new Signal(),
- 'close-intro' : new Signal(),
- 'image-data-url-requested' : new Signal()
- }
- };
-
- process.init( shared );
- dragdrop.init( shared );
- export_button.init( shared );
- controls.init( shared );
- import_button.init( shared );
- random_button.init( shared );
- image.init( shared );
- file.init( shared );
- imgur.init( shared );
- intro.init( shared );
- cam.init( shared );
- }
-
- function showError( required_features )
- {
- var message = document.createElement( 'div' );
-
- var message_text = 'sorry. it looks like your browser is missing some of the features ';
- message_text += '(' + required_features.join( ', ' ) + ') that are required to run this ';
- message_text += 'experiment.';
-
- message.innerText = message_text;
- message.className = 'missing-feature';
-
- document.getElementsByTagName( 'body' )[0].appendChild( message );
- }
- }
-);
\ No newline at end of file
diff --git a/scripts/models/controlsmodel.js b/scripts/models/controlsmodel.js
new file mode 100644
index 0000000..b6ddca4
--- /dev/null
+++ b/scripts/models/controlsmodel.js
@@ -0,0 +1,109 @@
+/*global define*/
+define(
+ [ 'util/object', 'util/addpublishers' ],
+ function ( objectHelper, addPublishers ) {
+ // the controlsmodel stores and manages all
+ // values of the input sliders
+ function ControlsModel ( initialValues ) {
+ if ( ! ( this instanceof ControlsModel ) ) {
+ return new ControlsModel( initialValues );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, [ 'update' ] );
+ var limits = getLimits( initialValues ) || { };
+ var values = getValues( initialValues ) || { };
+
+ function updateValues ( newValues ) {
+ if ( newValues ) {
+ newValues = objectHelper.getCopy( newValues );
+
+ var referenceValue;
+ var newValue;
+
+ for ( var key in newValues ) {
+ limit = limits[key];
+ newValue = newValues[key];
+
+ if (
+ typeof limit !== 'undefined' &&
+ typeof newValue === 'number' &&
+ ! isNaN( newValue ) &&
+ newValue >= limit.min &&
+ newValue <= limit.max &&
+ values[key] !== newValue
+ ) {
+ values[key] = newValue;
+ publishers.update.dispatch( key, values[key] );
+ }
+ }
+ }
+
+ return self;
+ }
+
+ function setValue ( key, newValue ) {
+ if (
+ typeof values[key] === 'number' &&
+ typeof newValue === 'number' &&
+ ! isNaN( newValue )
+ ) {
+ values[key] = newValue;
+
+ publishers.update.dispatch( key, values[key] );
+ }
+
+ return self;
+ }
+
+ function randomizeValues () {
+ var randomValues = { };
+
+ for ( var key in limits ) {
+ randomValues[key] = parseInt(
+ Math.random() * ( limits[key].max - limits[key].min ) + limits[key].min,
+ 10
+ );
+ }
+
+ updateValues( randomValues );
+
+ return self;
+ }
+
+ function getValues ( vals ) {
+ var result = { };
+ vals = vals || values;
+
+ for ( var key in vals ) {
+ if ( typeof vals[key].value === 'number' ) {
+ result[key] = vals[key].value;
+ } else {
+ result[key] = vals[key];
+ }
+ }
+
+ return objectHelper.getCopy( result );
+ }
+
+ function getLimits ( vals ) {
+ var result = { };
+
+ for ( var key in vals ) {
+ result[key] = {
+ min: vals[key].min,
+ max: vals[key].max
+ };
+ }
+
+ return objectHelper.getCopy( result );
+ }
+
+ self.randomizeValues = randomizeValues;
+ self.setValue = setValue;
+ self.getValues = getValues;
+ }
+
+ return ControlsModel;
+ }
+);
\ No newline at end of file
diff --git a/scripts/models/glitchmodel.js b/scripts/models/glitchmodel.js
new file mode 100644
index 0000000..08cec0a
--- /dev/null
+++ b/scripts/models/glitchmodel.js
@@ -0,0 +1,81 @@
+/*global define*/
+define(
+ [ 'config', 'lib/glitch-canvas-with-worker', 'util/addpublishers', 'util/canvas' ],
+ function ( config, canvasGlitcher, addPublishers, canvasHelper ) {
+ // the glitchModel takes care of glitching the image and passing it along as imageData
+ function GlitchModel () {
+ if ( ! ( this instanceof GlitchModel ) ) {
+ return new GlitchModel();
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'glitch' );
+ var params = { };
+ var originalImageData;
+ var glitchedImageData;
+ var thumbnailCanvas = document.createElement( 'canvas' );
+ var thumbnailImg = new Image();
+ var glitchTimeoutId = NaN;
+
+ var glitcher = canvasGlitcher( config.workers.glitch ).init();
+
+ function updateGlitch () {
+ if ( params && originalImageData ) {
+ glitcher.glitch( originalImageData, params, glitchComplete );
+ }
+ }
+
+ function glitchComplete ( glitchData ) {
+ glitchedImageData = glitchData;
+ publishers.glitch.dispatch( glitchData );
+ }
+
+ function setValue ( key, newValue ) {
+ if ( params[key] !== newValue ) {
+ params[key] = newValue;
+ glitchTimeoutId = setTimeout( updateGlitch, 10 );
+ }
+ }
+
+ function setImageData ( newImageData ) {
+ originalImageData = newImageData;
+ updateGlitch()
+ }
+
+ function generateImageURL ( callback, size, args ) {
+ if ( originalImageData ) {
+ size = size || { width: 50, height: 50 };
+
+ if ( typeof size === 'string' && size === 'original' ) {
+ size = {
+ width: glitchedImageData.width,
+ height: glitchedImageData.height
+ };
+ }
+
+ canvasHelper.resizeImage( glitchedImageData, size, function ( imageUrl ) {
+ args = Array.prototype.slice.call( args || [ ] );
+ args.unshift( imageUrl );
+
+ callback.apply( callback, args );
+ }, 'asDataURL' );
+ }
+
+ return self;
+ }
+
+ function getImageGenerationFn ( callback, size ) {
+ return function () {
+ generateImageURL( callback, size, arguments )
+ };
+ }
+
+ self.setValue = setValue;
+ self.setImageData = setImageData;
+ self.generateImageURL = generateImageURL;
+ self.getImageGenerationFn = getImageGenerationFn;
+ }
+
+ return GlitchModel;
+ }
+)
\ No newline at end of file
diff --git a/scripts/models/imagemodel.js b/scripts/models/imagemodel.js
new file mode 100644
index 0000000..c24e8ba
--- /dev/null
+++ b/scripts/models/imagemodel.js
@@ -0,0 +1,169 @@
+/*global define*/
+define(
+ [ 'util/browser', 'util/addpublishers', 'util/time', 'util/canvas', 'util/localizetext' ],
+ function ( browser, addPublishers , timeHelper, canvasHelper, loc ) {
+ // the imageModel loads and stores the latest open image file
+ // (the original, not the glitched version) and converts it into
+ // a imageData object
+ function ImageModel () {
+ if ( ! ( this instanceof ImageModel ) ) {
+ return new ImageModel();
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, [ 'load', 'update', 'error', 'statusmessage' ] );
+
+ var canvasEl = document.createElement( 'canvas' );
+ var ctx = canvasEl.getContext( '2d' );
+ var imageEl = new Image();
+
+ var fileReader;
+ var canHandleFileImport = false;
+ var lastImageSrc;
+ var lastFileName;
+
+ // max image import filesize in megabytes.
+ // because of not 100% clear base64 url size constraints
+ // if the uploaded image is bigger, resize
+ // var maxFileSize = Math.pow(1024, 2) * 1.5;
+ var maxFileSize = 0.8 * Math.pow( 1000, 2 );
+ var isScalingDown = true;
+
+ if ( fileReader = browser.getFeature( window, 'FileReader' ) ) {
+ fileReader = new fileReader();
+ canHandleFileImport = true;
+ fileReader.addEventListener( 'load', fileLoaded );
+ fileReader.addEventListener( 'error', fileLoadFailed );
+ }
+
+ imageEl.addEventListener( 'load', imageLoaded );
+ imageEl.addEventListener( 'error', imageLoadFailed );
+
+ function loadFromFile ( file ) {
+ if ( canHandleFileImport ) {
+ lastFileName = file.name;
+ fileReader.readAsDataURL( file );
+ }
+
+ return self;
+ }
+
+ function loadFromVideo ( videoEl ) {
+ clearCanvas();
+ canvasEl.width = videoEl.width || videoEl.videoWidth || videoEl.clientWidth;
+ canvasEl.height = videoEl.height || videoEl.videoHeight || videoEl.clientHeight;
+
+ ctx.translate( canvasEl.width, 0 );
+ ctx.scale( -1, 1 );
+ ctx.drawImage( videoEl, 0, 0 );
+
+ lastImageSrc = canvasEl.toDataURL( 'image/png' );
+ lastFileName = loc( 'webcam.picture', timeHelper.dateTimeToLocalStr( new Date() ) );
+
+ checkImageData( ctx.getImageData( 0, 0, canvasEl.width, canvasEl.height ), publishers.load.dispatch );
+
+ return self;
+ }
+
+ function loadFromURL ( url, fileName ) {
+ if ( fileName ) {
+ lastFileName = fileName;
+ }
+
+ url = decodeURIComponent( url );
+
+ publishers.update.dispatch( 'img', url, fileName );
+
+ if ( url && imageEl.src !== url ) {
+ imageEl.src = '';
+ lastImageSrc = url;
+ imageEl.src = url;
+ } else {
+ imageLoaded();
+ }
+
+ return self;
+ }
+
+ function clearCanvas () {
+ ctx.clearRect( 0, 0, canvasEl.width, canvasEl.height );
+ }
+
+ function imageLoaded () {
+ var imageData = getImageData( imageEl );
+
+ checkImageData( imageData, publishers.load.dispatch );
+ }
+
+ function imageLoadFailed ( err ) {
+ publishers.error.dispatch( 'file.error.openimage', imageEl.src );
+ }
+
+ function fileLoaded ( event ) {
+ loadFromURL( event.target.result );
+ }
+
+ function fileLoadFailed ( error ) {
+ publishers.error.dispatch( 'file.error.openfile' );
+ }
+
+ function checkImageData ( imageData, callback ) {
+ if ( isScalingDown && imageData.data && imageData.data.length / 4 > maxFileSize ) {
+ var widthToHeightRatio = imageData.width / imageData.height;
+ var heightTiWidthRatio = imageData.height / imageData.width;
+
+ var newWidth = Math.round( Math.sqrt( maxFileSize / widthToHeightRatio ) );
+ var newHeight = Math.round( newWidth * heightTiWidthRatio );
+ var newSize = {
+ width: newWidth,
+ height: newHeight
+ };
+
+ publishers.statusmessage.dispatch( 'file.message.resize' );
+
+ canvasHelper.resizeImage( imageData, newSize, function ( result ) {
+ callback( result.imageData );
+
+ if ( typeof result.dataURL === 'string' ) {
+ lastImageSrc = result.dataURL;
+ }
+ }, 'both' );
+ } else {
+ callback( imageData );
+ }
+ }
+
+ function settingUpdated ( key, value ) {
+ if ( key === 'resizeUploadedImages' && typeof value === 'boolean' ) {
+ isScalingDown = value;
+ }
+ }
+
+ function getImageData ( img ) {
+ clearCanvas();
+ canvasEl.width = img.naturalWidth;
+ canvasEl.height = img.naturalHeight;
+ ctx.drawImage( img, 0, 0, img.naturalWidth, img.naturalHeight );
+
+ return ctx.getImageData( 0, 0, img.naturalWidth, img.naturalHeight );
+ }
+
+ function getLastImageSRC ( img ) {
+ return lastImageSrc;
+ }
+
+ function getLastFileName ( img ) {
+ return lastFileName;
+ }
+
+ self.loadFromFile = loadFromFile;
+ self.loadFromVideo = loadFromVideo;
+ self.getLastImageSRC = getLastImageSRC;
+ self.getLastFileName = getLastFileName;
+ self.loadFromURL = loadFromURL;
+ self.settingUpdated = settingUpdated;
+ }
+
+ return ImageModel;
+ }
+);
\ No newline at end of file
diff --git a/scripts/models/localisationmodel.js b/scripts/models/localisationmodel.js
new file mode 100644
index 0000000..e50065a
--- /dev/null
+++ b/scripts/models/localisationmodel.js
@@ -0,0 +1,159 @@
+/*global define*/
+define(
+ [ 'config', 'util/dom', 'util/object', 'util/string', 'util/addpublishers', 'lib/reqwest' ],
+ function ( config, domHelper, objectHelper, stringHelper, addPublishers, reqwest ) {
+ function LocalisationModel () {
+ if ( ! ( this instanceof LocalisationModel ) ) {
+ return new LocalisationModel();
+ }
+
+ var self = this;
+
+ var publishers = addPublishers( self, 'error' );
+
+ var textElData = [ ];
+ var texts = '';
+ var currentLanguage = '';
+
+ var animationFrameId = NaN;
+ var languageWasLoaded = false;
+
+ var linkOptions = { links: { newTab: true } };
+
+ function setLanguage ( newLanguage ) {
+ if ( newLanguage !== currentLanguage && newLanguage in config.availableLanguages ) {
+ loadLanguage( newLanguage );
+ }
+ }
+
+ function loadLanguage ( languageName ) {
+ languageWasLoaded = false;
+
+ reqwest( {
+ url: config.language.dir + '/' + languageName + '.json',
+ type: 'json',
+ method: 'get',
+ error: function ( err, one, two ) {
+ // if this is the first language to load, that's really bad.
+ languageWasLoaded = true;
+ publishers.error.dispatch( 'I\'m really sorry. I failed to load the language file for ' + languageName + '. This is a serious error that makes the app very hard to use. Maybe you can try reloading?' );
+
+ },
+ success: function ( res ) {
+ languageLoaded( languageName, res );
+ }
+ } );
+ }
+
+ function languageLoaded ( newLanguageName, newTexts ) {
+ currentLanguage = newLanguageName;
+ languageWasLoaded = true;
+ texts = newTexts;
+ resetAllTexts();
+ updateAllTexts();
+ }
+
+ function updateAllTexts () {
+ if ( languageWasLoaded ) {
+ cancelAnimationFrame( animationFrameId );
+
+ animationFrameId = requestAnimationFrame( function () {
+ var item;
+ var args;
+
+ for ( var i = textElData.length - 1; i >= 0; i-- ) {
+ item = textElData[i];
+
+ if ( domHelper.isElement( item.el ) ) {
+ if ( ! item.wasUpdated ) {
+ if ( item.attribute === 'innerHTML' ) {
+ item.el.innerHTML = stringHelper.markdownToHtml( getTextForKey( item.key, item.args ), linkOptions );
+ } else {
+ item.el[item.attribute] = getTextForKey( item.key, item.args );
+ }
+
+ item.wasUpdated = true;
+ }
+ }
+ else {
+ textElData.splice( i, 1 );
+ }
+ }
+ } );
+ }
+ }
+
+ function resetAllTexts () {
+ textElData.forEach( function ( item ) {
+ item.wasUpdated = false;
+ } );
+ }
+
+ function getTextForKey ( key, args ) {
+ var result = '';
+
+ try {
+ result = objectHelper.getObjectByString( key, texts );
+ } catch ( e ) {
+ if ( languageWasLoaded ) {
+ result = key
+ }
+ };
+
+ if ( args && args.length ) {
+ var regex;
+
+ args.forEach( function ( arg, index ) {
+ regex = new RegExp( '{\\$' + ( index + 1 ) + '}' );
+ result = result.replace( regex, arg );
+ } );
+ }
+
+ return result;
+ }
+
+ // http://mzl.la/1RDxjVO
+ function getArgs ( args, firstIndex ) {
+ firstIndex = firstIndex || 3;
+ var result;
+
+ if ( args.length > firstIndex ) {
+ result = [ ];
+ }
+
+ for ( var i = firstIndex, len = args.length; i < len; i++ ) {
+ result[result.length] = args[i];
+ }
+
+ return result;
+ }
+
+ function settingUpdated ( name, value ) {
+ if ( name === 'language' && value !== currentLanguage ) {
+ loadLanguage( value );
+ }
+ }
+
+ function localizeText ( el, attribute, key ) {
+ if ( el && attribute && key ) {
+ textElData.push( { el: el, attribute: attribute, key: key, wasUpdated: false, args: getArgs( arguments ) } );
+ } else {
+ if ( typeof el === 'string' ) {
+ return getTextForKey( el, getArgs( arguments, 1 ) );
+ }
+ }
+
+ updateAllTexts();
+ }
+
+ self.setLanguage = setLanguage;
+ self.localizeText = localizeText;
+ self.settingUpdated = settingUpdated;
+ self.randomNumber = ~~( Math.random() * 1000 );
+ }
+
+ LocalisationModel.sharedInstance = LocalisationModel();
+
+ return LocalisationModel;
+ }
+);
\ No newline at end of file
diff --git a/scripts/models/networkmodel.js b/scripts/models/networkmodel.js
new file mode 100644
index 0000000..f11fb7c
--- /dev/null
+++ b/scripts/models/networkmodel.js
@@ -0,0 +1,39 @@
+/*global define*/
+define(
+ [ 'util/addpublishers' ],
+ function ( addPublishers ) {
+ // the NetworkModel updates the app if the device connectivity changed
+ function NetworkModel () {
+ if ( ! ( this instanceof NetworkModel ) ) {
+ return new NetworkModel();
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'connectivitychange', 'disconnect', 'connect' );
+ var isConnected;
+
+ window.addEventListener( 'online', checkConnectivity );
+ window.addEventListener( 'offline', checkConnectivity );
+
+ function checkConnectivity () {
+ if ( navigator.onLine !== isConnected ) {
+ isConnected = navigator.onLine;
+
+ publishers.connectivitychange.dispatch( isConnected );
+
+ if ( isConnected ) {
+ publishers.connect.dispatch();
+ } else {
+ publishers.disconnect.dispatch();
+ }
+ }
+
+ return self;
+ }
+
+ self.checkConnectivity = checkConnectivity;
+ }
+
+ return NetworkModel;
+ }
+);
\ No newline at end of file
diff --git a/scripts/models/settingsmodel.js b/scripts/models/settingsmodel.js
new file mode 100644
index 0000000..0d7469f
--- /dev/null
+++ b/scripts/models/settingsmodel.js
@@ -0,0 +1,178 @@
+/*global define*/
+define(
+ [ 'config', 'util/browser', 'util/object', 'util/addpublishers', 'lib/localforage.nopromises' ],
+ function ( config, browser, objectHelper, addPublishers, localforage ) {
+ function SettingsModel ( storageKey ) {
+ if ( ! ( this instanceof SettingsModel ) ) {
+ return new SettingsModel( storageKey );
+ }
+
+ var self = this;
+ var publisherNames = [ 'update', 'error' ];
+ var publishers = addPublishers( self, publisherNames );
+ var useLocalForage = browser.test( 'localforage' ) && localforage;
+ var worker;
+ var defaultSettings = config.settings;
+ var userLanguage = ( navigator.language || navigator.userLanguage || '' ).toLowerCase();
+
+ if ( userLanguage !== '' && defaultSettings.language.options.indexOf( userLanguage ) > -1 ) {
+ defaultSettings.language.value = userLanguage;
+ }
+
+ var settings = { };
+
+ storageKey = storageKey || 'settings';
+
+ if ( useLocalForage && browser.test( 'webworker' ) && browser.test( 'browserdb' ) && ! browser.test( 'safari' ) ) {
+ worker = new Worker( config.workers.settings );
+ worker.addEventListener( 'message', workerResponded, false );
+ sendMessageToWorker( 'setStorageKey', storageKey );
+ sendMessageToWorker( 'setDefaultSettings', defaultSettings );
+ } else {
+ settingsUpdated( defaultSettings );
+ }
+
+ function getSetting ( key ) {
+ return settings[key];
+ }
+
+ function getSettingValue ( key ) {
+ var setting = getSetting( key );
+
+ if ( setting ) {
+ return setting.value;
+ } else {
+ return;
+ }
+ }
+
+ function getSettings () {
+ return objectHelper.getCopy( settings );
+ }
+
+ function setValue ( key, value ) {
+ var wasUpdated = false;
+
+ if (
+ typeof key === 'string' &&
+ typeof settings[key] !== 'undefined' &&
+ typeof value === typeof settings[key].value &&
+ value !== settings[key].value
+ ) {
+ settings[key].value = value;
+ wasUpdated = true;
+ }
+
+ if ( wasUpdated ) {
+ if ( useLocalForage ) {
+ save( settings );
+ } else {
+ settingsUpdated( settings );
+ }
+ }
+
+ return self;
+ }
+
+ function save ( newSettings ) {
+ if ( useLocalForage ) {
+ if ( worker ) {
+ sendMessageToWorker( 'save', newSettings );
+ } else {
+ localforage.setItem( storageKey, newSettings, function ( err, savedSettings ) {
+ if ( err ) {
+ sendError( 'settings.error.save' );
+ console && console.log( 'localforage error', err );
+ } else {
+ if ( savedSettings ) {
+ settingsUpdated( savedSettings );
+ } else {
+ console && console.log( 'no data was saved', savedSettings );
+ }
+ }
+ } );
+ }
+ }
+ }
+
+ function load () {
+ if ( useLocalForage ) {
+ if ( worker ) {
+ sendMessageToWorker( 'load' );
+ } else {
+ localforage.getItem( storageKey, function ( err, loadedSettings ) {
+ if ( err ) {
+ sendError( 'settings.error.load' );
+ console && console.log( 'localforage error', err );
+ } else {
+ settingsUpdated( loadedSettings );
+ }
+ } );
+ }
+ } else {
+ settingsUpdated( settings || defaultSettings );
+ }
+ }
+
+ function sendMessageToWorker ( type, data ) {
+ if ( typeof type === 'string' ) {
+ if ( typeof data === 'undefined' ) {
+ data = type;
+ }
+
+ var message = { };
+ message[type] = data;
+ worker.postMessage( message );
+ }
+ }
+
+ function workerResponded ( event ) {
+ if ( event && event.data ) {
+ publisherNames.forEach( function ( type ) {
+ if ( typeof event.data[type] !== 'undefined' ) {
+ if ( type === 'update' ) {
+ settingsUpdated( event.data[type] );
+ } else {
+ if ( publishers[type] === type ) {
+ publishers[type].dispatch()
+ } else {
+ publishers[type].dispatch( event.data[type] )
+ }
+ }
+ }
+ } );
+ }
+ }
+
+ function settingsUpdated ( newSettings ) {
+ if ( newSettings ) {
+ settings = newSettings || defaultSettings;
+
+ if ( settings !== defaultSettings ) {
+ for ( var name in defaultSettings ) {
+ if ( ! settings[name] ) {
+ settings[name] = defaultSettings[name];
+ }
+ }
+ }
+
+ for ( var name in settings ) {
+ publishers.update.dispatch( name, settings[name].value, settings[name].options );
+ }
+
+ } else {
+ settings = defaultSettings;
+ save( settings );
+ }
+ }
+
+ self.getSetting = getSetting;
+ self.getSettingValue = getSettingValue;
+ self.getSettings = getSettings;
+ self.setValue = setValue;
+ self.load = load;
+ }
+
+ return SettingsModel;
+ }
+);
\ No newline at end of file
diff --git a/scripts/models/sharemodel.js b/scripts/models/sharemodel.js
new file mode 100644
index 0000000..b7e92f6
--- /dev/null
+++ b/scripts/models/sharemodel.js
@@ -0,0 +1,107 @@
+/*global define*/
+define(
+ [ 'config', 'lib/reqwest', 'util/addpublishers' ],
+ function ( config, reqwest, addPublishers ) {
+ // the ShareModel uploads and removes images from Imgur
+ function ShareModel () {
+ if ( ! ( this instanceof ShareModel ) ) {
+ return new ShareModel();
+ }
+
+ var self = this;
+ var base64Url;
+ var publishers = addPublishers( self,
+ 'uploadstart', 'uploadend', 'uploadcomplete',
+ 'removestart', 'removeend', 'removecomplete',
+ 'error', 'statusmessage'
+ );
+
+ // http://stackoverflow.com/questions/17805456/upload-a-canvas-image-to-imgur-api-v3-with-javascript
+ function upload () {
+ if ( base64Url ) {
+ publishers.uploadstart.dispatch();
+
+ reqwest( {
+ url: 'https://api.imgur.com/3/image.json',
+ method: 'POST',
+ headers: {
+ Authorization: 'Client-ID ' + config.keys.imgur
+ },
+ data: {
+ image: base64Url.split( ',' )[1],
+ type: 'base64'
+ },
+ type: 'json',
+ crossOrigin: true,
+ success: uploadSuceeded,
+ error: uploadFailed
+ } );
+ } else {
+ uploadFailed( new Error( 'share.error.base64' ) );
+ }
+
+ return self;
+ }
+
+ function uploadSuceeded ( res ) {
+ publishers.uploadend.dispatch();
+
+ if ( res.status === 200 && res.data && res.data.link ) {
+ var link = res.data.link.replace( 'http://', 'https://' );
+
+ publishers.uploadcomplete.dispatch( link, res.data.id, res.data.deletehash );
+ publishers.statusmessage.dispatch( 'share.message.upload', { innerHTML: true, args: [ link ] } );
+ }
+ }
+
+ function uploadFailed ( err ) {
+ publishers.uploadend.dispatch();
+ publishers.error.dispatch( 'share.error.upload', { type: 'imguruploadfail' } );
+ console && console.log( err.message || err );
+ }
+
+ function updateUrl ( url ) {
+ base64Url = url;
+
+ return self;
+ }
+
+ function remove ( uid, deleteHash ) {
+ if ( deleteHash ) {
+ publishers.removestart.dispatch( uid );
+
+ reqwest( {
+ url: 'https://api.imgur.com/3/image/' + deleteHash,
+ method: 'DELETE',
+ headers: {
+ Authorization: 'Client-ID ' + config.keys.imgur
+ },
+ crossOrigin: true,
+ success: function () { removeSucceeded( uid ); },
+ error: function ( err ) { removeFailed( uid, err ); }
+ } );
+ }
+
+ return self;
+ }
+
+ function removeSucceeded ( uid ) {
+ publishers.removeend.dispatch( uid );
+ publishers.removecomplete.dispatch( uid );
+ publishers.statusmessage.dispatch( 'share.message.del' );
+ }
+
+ function removeFailed ( uid, err ) {
+ publishers.removeend.dispatch( uid );
+ publishers.error.dispatch( 'share.error.del', { type: 'imgurremovefail', uid: uid } );
+ console && console.log( err.message || err );
+ }
+
+ self.upload = upload;
+ self.updateUrl = updateUrl;
+ self.remove = remove
+ }
+
+ return ShareModel;
+ }
+);
\ No newline at end of file
diff --git a/scripts/models/storagemodel.js b/scripts/models/storagemodel.js
new file mode 100644
index 0000000..5ffaba6
--- /dev/null
+++ b/scripts/models/storagemodel.js
@@ -0,0 +1,300 @@
+/*global define*/
+define(
+ [ 'config', 'util/browser', 'util/addpublishers', 'lib/md5', 'lib/localforage.nopromises', 'models/localisationmodel' ],
+ function ( config, browser, addPublishers, md5, localforage, LocalisationModel ) {
+ // the StorageModel takes care of loading and saving data to localStorage.
+ // It stores the used glitch values as well as the imgur address if the
+ // image was shared.
+ // It generares a UID for each image to avoid having to save the
+ // same image multiple times.
+ // If an image was updated (shared/deleted), it updates the corresponding
+ // object in localstorage
+ function StorageModel () {
+ if ( ! ( this instanceof StorageModel ) ) {
+ return new StorageModel();
+ }
+
+ var self = this;
+ var isFirstVisit = false;
+ var entries = { };
+ var useLocalForage = browser.test( 'localforage' ) && localforage;
+ var worker;
+
+ var publisherNames = [
+ 'update', 'save', 'loaditem',
+ 'removeall', 'removelocaldata', 'removeimgurdata',
+ 'firstvisit', 'error', 'statusmessage'
+ ];
+
+ var publishers = addPublishers( self, publisherNames );
+
+ storageKey = config.keys.storage;
+
+ if ( useLocalForage && browser.test( 'webworker' ) && browser.test( 'browserdb' ) && ! browser.test( 'safari' ) ) {
+ worker = new Worker( config.workers.storage );
+ worker.addEventListener( 'message', workerResponded, false );
+ sendMessageToWorker( 'setStorageKey', storageKey );
+ }
+
+ function add ( item ) {
+ if ( useLocalForage && item ) {
+ if ( worker ) {
+ sendMessageToWorker( 'add', item );
+ } else {
+ var uid = createUID( item );
+
+ if (
+ entries[uid] &&
+ entries[uid].deleteHash === item.deleteHash &&
+ entries[uid].publicUrl === item.publicUrl &&
+ entries[uid].imgurID === item.imgurID
+ ) {
+ publishers.statusmessage.dispatch( 'file.message.before' );
+ } else {
+ item.timestamp = Date.now();
+ entries[uid] = item;
+
+ save( function () {
+ publishers.statusmessage.dispatch( 'file.message.save' );
+ } );
+ }
+ }
+ }
+
+ return self;
+ }
+
+ function removeCompletely ( uid ) {
+ if ( useLocalForage && uid ) {
+ if ( worker ) {
+ sendMessageToWorker( 'removeCompletely', uid );
+ } else {
+ if (
+ entries[uid] &&
+ (
+ entries[uid].deleteHash ||
+ entries[uid].publicUrl ||
+ entries[uid].imgurID ||
+ entries[uid].values ||
+ entries[uid].src
+ )
+ ) {
+ console && console.log( 'cant delete storage item because theres still some data left', entries[uid] );
+ } else {
+ publishers.removeall.dispatch( entries[uid] );
+ delete entries[uid];
+
+ save( function () {
+ publishers.statusmessage.dispatch( 'file.message.del' );
+ } );
+ }
+ }
+ }
+ }
+
+ function removeLocalData ( uid ) {
+ if ( useLocalForage && uid ) {
+ if ( worker ) {
+ sendMessageToWorker( 'removeLocalData', uid );
+ } else {
+ if ( entries[uid] ) {
+ if ( entries[uid].src ) {
+ delete entries[uid].src;
+
+ publishers.removelocaldata.dispatch( entries[uid] );
+ }
+
+ if ( entries[uid].values ) {
+ delete entries[uid].values;
+ }
+
+ if ( ! ( entries[uid].deleteHash || entries[uid].publicUrl || entries[uid].imgurID ) ) {
+ removeCompletely( uid );
+ }
+
+ save();
+ }
+ }
+ }
+
+ return self;
+ }
+
+ function removeImgurData ( uid ) {
+ if ( useLocalForage && uid ) {
+ if ( worker ) {
+ sendMessageToWorker( 'removeImgurData', uid );
+ } else {
+ if ( entries[uid] ) {
+ if ( entries[uid].deleteHash ) {
+ publishers.removeimgurdata.dispatch( entries[uid] );
+ delete entries[uid].deleteHash;
+ }
+
+ if ( entries[uid].publicUrl ) {
+ delete entries[uid].publicUrl;
+ }
+
+ if ( entries[uid].imgurID ) {
+ delete entries[uid].imgurID;
+ }
+
+ if ( ! ( entries[uid].src || entries[uid].values ) ) {
+ removeCompletely( uid );
+ }
+
+ save();
+ }
+ }
+ }
+
+ return self;
+ }
+
+ function load ( callback ) {
+ if ( useLocalForage ) {
+ if ( worker ) {
+ sendMessageToWorker( 'load' );
+ } else {
+ localforage.getItem( storageKey, function ( err, loadedData ) {
+ if ( err ) {
+ publishers.error.dispatch( 'file.error.load' );
+ console && console.log( 'localforage error', err );
+ } else {
+ entries = loadedData && loadedData.entries ? loadedData.entries : { };
+ publishers.update.dispatch( entries );
+
+ isFirstVisit = ( loadedData && loadedData.lastVisit ) ? false : true;
+
+ if ( isFirstVisit ) {
+ publishers.firstvisit.dispatch();
+ save();
+ }
+
+ if ( typeof callback === 'function' ) {
+ callback();
+ }
+ }
+ } );
+ }
+ }
+
+ return self;
+ }
+
+ function save ( callback ) {
+ if ( useLocalForage ) {
+ if ( worker ) {
+ sendMessageToWorker( 'save' );
+ } else {
+ localforage.setItem( storageKey, { entries: entries, lastVisit: Date.now() }, function ( err, savedData ) {
+ if ( err ) {
+ publishers.error.dispatch( 'file.error.save' );
+ console && console.log( 'localforage error', err );
+ } else {
+ if ( savedData ) {
+ entries = savedData.entries;
+ publishers.update.dispatch( entries );
+ publishers.save.dispatch();
+
+ if ( typeof callback === 'function' ) {
+ callback();
+ }
+ } else {
+ console && console.log( 'no data was saved', savedData );
+ }
+ }
+ } );
+ }
+ }
+
+ return self;
+ }
+
+ function loadItem ( uid ) {
+ if ( useLocalForage ) {
+ if ( worker ) {
+ sendMessageToWorker( 'loadItem', uid );
+ } else {
+ if ( entries[uid] ) {
+ publishers.loaditem.dispatch( uid, entries[uid] );
+ }
+ }
+ }
+
+ return self;
+ }
+
+ function workerResponded ( event ) {
+ if ( event && event.data ) {
+ publisherNames.forEach( function ( type ) {
+ if ( typeof event.data[type] !== 'undefined' ) {
+ if ( type === 'loaditem' ) {
+ publishers[type].dispatch( event.data[type].uid, event.data[type].entries );
+ } else {
+ if ( publishers[type] === type ) {
+ // if message is empty, the worker sends the type as data.
+ publishers[type].dispatch()
+ } else {
+ publishers[type].dispatch( event.data[type] )
+ }
+ }
+ }
+ } );
+ }
+ }
+
+ function sendMessageToWorker ( type, data ) {
+ if ( typeof type === 'string' ) {
+ if ( typeof data === 'undefined' ) {
+ data = type;
+ }
+
+ var message = { };
+ message[type] = data;
+ worker.postMessage( message );
+ }
+ }
+
+ function createUID ( item ) {
+ var inputStr = 'N' + item.name + 'S' + item.src + 'L' + item.thumbnail.length || 0 + 'V';
+
+ for ( var key in item.values ) {
+ inputStr += key.substr( 0, 2 );
+ inputStr += item.values[key];
+ }
+
+ return md5( inputStr );
+ }
+
+ function getLatestUID () {
+ var latestUid;
+ var latestTimestamp;
+ var timestamp;
+
+ for ( var uid in entries ) {
+ timestamp = entries[uid].timestamp;
+
+ if ( timestamp ) {
+ if ( ! latestUid || timestamp > latestTimestamp ) {
+ latestUid = uid;
+ latestTimestamp = timestamp;
+ }
+ }
+ }
+
+ return latestUid;
+ }
+
+ self.add = add;
+ self.removeImgurData = removeImgurData;
+ self.removeLocalData = removeLocalData;
+ self.load = load;
+ self.loadItem = loadItem;
+ self.removeImgurData = removeImgurData;
+ self.getLatestUID = getLatestUID;
+ }
+
+ return StorageModel;
+ }
+);
\ No newline at end of file
diff --git a/scripts/src/cam.js b/scripts/src/cam.js
deleted file mode 100644
index eb525e5..0000000
--- a/scripts/src/cam.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*global define*/
-define(
- [ 'lib/getusermedia' ],
- function ()
- {
- var cam_button_el = document.getElementById( 'cam-button' );
- var video_wrapper_el;
- var video_el;
- var stream;
-
- var canvas_el;
- var ctx;
-
- var signals;
-
- function init ( shared ) {
-
- signals = shared.signals;
-
- if ( navigator.getUserMedia ) {
- cam_button_el.classList.add( 'is-supported' );
- cam_button_el.addEventListener( 'click', camButtonClicked );
-
- video_wrapper_el = document.createElement( 'div' );
- video_wrapper_el.classList.add( 'cam-wrapper' );
-
- var take_picture_el = document.createElement( 'div' );
- take_picture_el.textContent = 'Take Picture';
- take_picture_el.classList.add( 'take-picture' );
- take_picture_el.classList.add( 'button' );
- take_picture_el.addEventListener( 'click', videoClicked );
-
- video_wrapper_el.appendChild( take_picture_el );
-
- video_el = document.createElement( 'video' );
- video_el.classList.add( 'cam' );
-
- video_el.addEventListener( 'click', videoClicked );
- video_wrapper_el.appendChild( video_el );
-
- document.body.appendChild( video_wrapper_el );
-
- canvas_el = document.createElement( 'canvas' );
- }
- }
-
- function camButtonClicked ( event ) {
- var cam_options = { video: true };
-
- navigator.getUserMedia( cam_options, gotCamData, failed );
- }
-
- function gotCamData ( media_stream ) {
- var source;
-
- if ( window.webkitURL )
- {
- source = window.URL.createObjectURL( media_stream );
- }
-
- else
- {
- source = media_stream;
- }
-
- if ( video_el.mozSrcObject !== undefined )
- {
- video_el.mozSrcObject = source;
- }
-
- else
- {
- video_el.src = source;
- }
-
- stream = media_stream;
-
- video_el.play();
- video_el.style.display = 'block';
-
- video_wrapper_el.classList.add( 'is-active' );
-
-
-
- canvas_el.width = 640;
- canvas_el.height = 480;
- ctx = canvas_el.getContext( '2d' );
- }
-
- function failed () {
- console.log( 'sorry, but there was an error accessing you camera...' );
- }
-
- function videoClicked ( event ) {
- ctx.translate( canvas_el.width, 0 );
- ctx.scale( -1, 1 );
- ctx.drawImage( video_el, 0, 0 );
-
- var data = ctx.getImageData( 0, 0, canvas_el.width, canvas_el.height );
- var image_src = canvas_el.toDataURL( 'image/png' );
-
- video_wrapper_el.classList.remove( 'is-active' );
-
- signals['set-new-src'].dispatch( image_src );
-
- setTimeout( function() { stream.stop(); }, 500 );
- }
-
- return {
- init: init
- };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/controls.js b/scripts/src/controls.js
deleted file mode 100644
index fa9cd7e..0000000
--- a/scripts/src/controls.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/*global define*/
-define(
- function()
- {
- var values = { };
- var is_initialized = false;
- var signals;
- var controls;
- var is_ie = document.querySelector( 'html' ).classList.contains( 'somewhatokie' );
-
- function init( shared )
- {
- signals = shared.signals;
-
- if ( shared.feature['query-selector-all'] )
- {
- var wrapper = document.getElementById( 'controls' );
- controls = wrapper.querySelectorAll( '.control-input' );
-
- wrapper.className += ' is-active';
-
- for ( var i = 0; i < controls.length; i++ )
- {
- var control = controls[i];
-
- control.addEventListener( 'input', controlUpdated, false );
-
- if ( is_ie )
- {
- control.addEventListener( 'change', controlUpdated, false );
- }
-
- updateValue( getInputKey( control.id ), control.value );
- updateInput( getCorrespondingInput( control.id ), control.value );
- }
-
- is_initialized = true;
-
- signals['control-set'].add( setControlValues );
- signals['control-updated'].dispatch( values );
- }
- }
-
- function controlUpdated( element )
- {
- if ( element.target )
- {
- element = element.target;
- }
-
- updateValue( getInputKey( element.id ), element.value );
- updateInput( getCorrespondingInput( element.id ), element.value );
- }
-
- function setControlValues( new_values )
- {
- var control;
- var updated_values = { };
-
- for ( var id in new_values )
- {
- control = getCorrespondingInput( id );
- control.value = new_values[id];
- controlUpdated( control );
- updated_values[ getInputKey( id ) ] = new_values[id];
- }
-
- values = updated_values;
- signals['control-updated'].dispatch( values );
- }
-
- function updateValue( key, value )
- {
- values[key] = value;
-
- if ( is_initialized )
- {
- signals['control-updated'].dispatch( values );
- }
- }
-
- function updateInput( input, value )
- {
- if ( input.value !== value )
- {
- input.value = value;
- }
- }
-
- function getCorrespondingInput( id )
- {
- var result;
- var key = getInputKey( id );
- var element_id;
-
- for ( var i = 0, len = controls.length; i < len; i++ )
- {
- element_id = controls[i].id;
-
- if (
- element_id !== id &&
- element_id.indexOf( key ) !== -1
- )
- {
- result = controls[i];
- break;
- }
- }
-
- return result;
- }
-
- function getInputKey( id )
- {
- return id.replace( '-slider', '' ).replace( '-number', '' );
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/dragdrop.js b/scripts/src/dragdrop.js
deleted file mode 100644
index 80a7d51..0000000
--- a/scripts/src/dragdrop.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*global define*/
-define(
- function()
- {
- var signals;
- var feature;
-
- function init( shared )
- {
- feature = shared.feature;
- signals = shared.signals;
-
- if ( feature['drag-drop' ] )
- {
- document.addEventListener( 'drop', dropped, false );
- document.addEventListener( 'dragover', preventDefault, false );
- document.addEventListener( 'dragleave', preventDefault, false );
- }
- }
-
- function preventDefault( event )
- {
- event.preventDefault();
- }
-
- function dropped( event )
- {
- event.preventDefault();
-
- if (
- event.dataTransfer &&
- event.dataTransfer.files &&
- event.dataTransfer.files[0]
- )
- {
- signals['load-file'].dispatch( event.dataTransfer.files[0] );
- signals['close-intro'].dispatch();
- }
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/export-button.js b/scripts/src/export-button.js
deleted file mode 100644
index 92854be..0000000
--- a/scripts/src/export-button.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*global define*/
-define(
- function()
- {
- var signals;
- var export_button;
- var png_link;
- var default_file_name;
- var file_name;
- var download_file_name;
- var file_suffix = '.png';
- var file_suffix_regex = /(\.)(jpg|jpeg|png|gif|bmp)/ig;
- var parameters;
-
- function init( shared )
- {
- signals = shared.signals;
- export_button = document.getElementById( 'export-button' );
- png_link = document.getElementById( 'png-button' );
- default_file_name = png_link.getAttribute( 'download' ).replace( file_suffix_regex, '' );
- file_name = default_file_name;
- download_file_name = default_file_name;
-
- export_button.addEventListener( 'click', exportButtonClicked, false );
- png_link.addEventListener( 'click', hidePNGLink, false );
-
- signals['load-file'].add( updateFileName );
- signals['load-file'].add( updateDownloadFileName );
- signals['control-updated'].add( updateParameters );
- signals['control-updated'].add( updateDownloadFileName );
- }
-
- function exportButtonClicked( event )
- {
- event.preventDefault();
-
- signals['image-data-url-requested'].dispatch( updatePNGLinkAddress );
- }
-
- function updateFileName( file )
- {
- if (
- file &&
- typeof file.name === 'string'
- )
- {
- file_name = file.name.replace( file_suffix_regex, '' );
- }
- }
-
- function updateParameters( new_parameters )
- {
- parameters = new_parameters || parameters;
- }
-
- function updateDownloadFileName()
- {
- download_file_name = file_name + '-glitched-' + objToString( parameters ) + file_suffix;
- }
-
- function updatePNGLinkAddress( data_url )
- {
- png_link.href = data_url;
- png_link.setAttribute( 'download', download_file_name );
- png_link.classList.add( 'is-active' );
- }
-
- function hidePNGLink()
- {
- png_link.classList.remove( 'is-active' );
- }
-
- function objToString( obj )
- {
- var result = [ ];
-
- for ( var key in obj )
- {
- result.push( key[0] + '' + obj[key] );
- }
-
- return result.join( '-' );
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/file.js b/scripts/src/file.js
deleted file mode 100644
index 2a7577c..0000000
--- a/scripts/src/file.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*global define*/
-define(
- function()
- {
- var signals;
- var reader;
- var feature;
- var allowed_file_types = [ 'image/png', 'image/jpg', 'image/jpeg' ];
-
- function init( shared )
- {
- signals = shared.signals;
- feature = shared.feature;
-
- if ( feature['file-api' ] )
- {
- signals['load-file'].add( loadFile );
- reader = new FileReader();
- reader.addEventListener( 'load', fileLoaded, false );
- }
- }
-
- function loadFile( file )
- {
- if (
- file &&
- file.type &&
- allowed_file_types.indexOf( file.type ) !== -1
- )
- {
- reader.readAsDataURL( file );
- }
- }
-
- function fileLoaded( event )
- {
- signals['set-new-src'].dispatch( event.target.result );
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/image.js b/scripts/src/image.js
deleted file mode 100644
index 14f8b1c..0000000
--- a/scripts/src/image.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*global define*/
-define(
- function()
- {
- var signals;
- var image;
- var initialized = false;
- var defaultimage = document.body.getAttribute( 'data-defaultimage' );
-
- function init( shared )
- {
- signals = shared.signals;
- image = new Image();
-
- signals['set-new-src'].add( setSrc );
-
- image.addEventListener( 'load', imageLoaded, false );
-
- // the image "Abraham Lincoln November 1863" is public domain:
- // https://en.wikipedia.org/wiki/File:Abraham_Lincoln_November_1863.jpg
- setSrc( defaultimage );
- }
-
- function imageLoaded()
- {
- signals['image-loaded'].dispatch( image );
-
- if ( initialized ) {
- signals['close-intro'].dispatch();
- }
-
- initialized = true;
- }
-
- function setSrc( src )
- {
- image.src = src;
-
- if (
- initialized &&
- image.naturalWidth !== undefined &&
- image.naturalWidth !== 0
- )
- {
- setTimeout( imageLoaded, 10 );
- }
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/import-button.js b/scripts/src/import-button.js
deleted file mode 100644
index f101b37..0000000
--- a/scripts/src/import-button.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*global define*/
-define(
- [ 'util/trigger-event' ],
- function( triggerEvent )
- {
- var feature;
- var signals;
- var import_button;
- var import_input;
- var file_reader;
- var image;
- var file_loading = false;
-
- function init( shared )
- {
- signals = shared.signals;
- feature = shared.feature;
-
- // http://www.html5rocks.com/en/tutorials/file/dndfiles/
- if ( feature['file-api' ] )
- {
- file_reader = new FileReader();
-
- import_button = document.getElementById( 'import-button' );
- import_input = document.getElementById( 'import-input' );
-
- import_button.addEventListener( 'click', buttonClicked, false );
- import_input.addEventListener( 'change', fileSelected, false );
- }
- }
-
- function buttonClicked( event )
- {
- event.preventDefault();
-
- if ( ! file_loading )
- {
- triggerEvent( import_input, 'click' );
- }
- }
-
- function fileSelected( event )
- {
- var files = event.target.files;
-
- if (
- event.target &&
- event.target.files &&
- event.target.files[0]
- )
- {
- signals['load-file'].dispatch( event.target.files[0] );
- signals['close-intro'].dispatch();
- }
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/intro.js b/scripts/src/intro.js
deleted file mode 100644
index 525b448..0000000
--- a/scripts/src/intro.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*global define*/
-define(
- function()
- {
- var signals;
- var is_open = true;
- var element = document.querySelectorAll( '.intro' )[0];
- var button = document.querySelectorAll( '.intro-button' )[0];
- var close_button = element.querySelectorAll( '.close' )[0];
-
- function init( shared )
- {
- signals = shared.signals;
- button.addEventListener( 'click', buttonClicked );
- close_button.addEventListener( 'click', close );
- signals['close-intro'].add( close );
- }
-
- function buttonClicked( event )
- {
- if ( is_open )
- {
- close();
- }
-
- else
- {
- open();
- }
- }
-
- function open()
- {
- button.classList.add( 'is-active' );
- element.classList.add( 'is-active' );
- element.style.top = '0';
- is_open = true;
- }
-
- function close()
- {
- button.classList.remove( 'is-active' );
- element.classList.remove( 'is-active' );
- element.style.top = -getHeight() + 'px';
- is_open = false;
- }
-
- function getHeight()
- {
- return element.clientHeight;
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/process.js b/scripts/src/process.js
deleted file mode 100644
index 76a8e75..0000000
--- a/scripts/src/process.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*global define, requestAnimationFrame*/
-define(
- [ 'lib/glitch-canvas', 'util/canvas', 'lib/raf' ],
- function( glitch, canvas_helper )
- {
- var tmp_canvas = document.createElement( 'canvas' );
- var tmp_ctx = tmp_canvas.getContext( '2d' );
-
- var canvas = document.getElementById( 'canvas' );
- var ctx = canvas.getContext( '2d' );
-
- var is_processing = false;
- var values;
- var image;
- var signals;
- var image_data;
- var canvas_size;
-
- function init( shared )
- {
- signals = shared.signals;
-
- signals['image-loaded'].add( generate );
- signals['control-updated'].add( controlsUpdated );
- signals['image-data-url-requested'].add( exportData );
- }
-
- function controlsUpdated( new_values )
- {
- values = getAdjustedValues( new_values );
-
- update();
- }
-
- function generate( img )
- {
- if ( ! is_processing )
- {
- image = img;
- resetCanvas( image );
- updateImageData( image );
- processImage( image );
- }
- }
-
- function requestTick()
- {
- if ( ! is_processing )
- {
- requestAnimationFrame( update );
- }
-
- is_processing = true;
- }
-
- function update()
- {
- if ( image )
- {
- processImage( image );
- }
-
- else
- {
- is_processing = false;
- }
- }
-
- function updateImageData( img )
- {
- tmp_ctx.drawImage( img, 0, 0 );
-
- image_data = tmp_ctx.getImageData( 0, 0, tmp_canvas.width, tmp_canvas.height );
- }
-
- function resetCanvas( img )
- {
- canvas_helper.clear( tmp_canvas, tmp_ctx );
- canvas_helper.resize( tmp_canvas, img );
- canvas_helper.clear( canvas, ctx );
- canvas_helper.resize( canvas, img );
- }
-
- function processImage( img )
- {
- is_processing = true;
-
- glitch( image_data, values, draw );
- }
-
- function draw( glitched_image_data )
- {
- ctx.putImageData( glitched_image_data, 0, 0 );
-
- is_processing = false;
- glitched_image_data = null;
- }
-
- function exportData( callback )
- {
- if ( typeof callback === 'function' )
- {
- callback( canvas.toDataURL( 'image/png' ) );
- }
- }
-
- function getAdjustedValues( new_values )
- {
- var result = { };
-
- for ( var key in new_values )
- {
- result[key] = parseInt( new_values[key], 10 );
- }
-
- key = null;
-
- return result;
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/random-button.js b/scripts/src/random-button.js
deleted file mode 100644
index f14cb8a..0000000
--- a/scripts/src/random-button.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*global define*/
-define(
- function()
- {
- var signals;
- var controls;
- var random_button;
- var constraints = { };
-
- function init( shared )
- {
- signals = shared.signals;
-
- if ( shared.feature['query-selector-all'] )
- {
- controls = document.querySelectorAll( '.control-slider' );
- constraints = getConstraints( controls );
- random_button = document.getElementById( 'random-button' );
-
- random_button.addEventListener( 'click', buttonClicked, false );
- random_button.classList.remove( 'is-hidden' );
- }
- }
-
- function buttonClicked( event )
- {
- event.preventDefault();
- randomize();
- }
-
- function randomize()
- {
- var new_values = { };
- var constraint;
-
- for ( var id in constraints )
- {
- constraint = constraints[id];
- new_values[id] = getRandomInt( constraint.min, constraint.max );
- }
-
- signals['control-set'].dispatch( new_values );
- }
-
- function getConstraints( controls )
- {
- var result = { };
- var control;
-
- for ( var i = 0, len = controls.length; i < len; i++ )
- {
- control = controls[i];
- result[control.id] = { min: parseInt( control.min, 10 ), max: parseInt( control.max, 10 ) };
- }
-
- return result;
- }
-
- function getRandomInt( min, max )
- {
- return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/src/upload-imgur.js b/scripts/src/upload-imgur.js
deleted file mode 100644
index fe1b4af..0000000
--- a/scripts/src/upload-imgur.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/*global define*/
-define(
- [ 'lib/reqwest' ],
- function( reqwest, $ )
- {
- var signals;
- var imgur_button;
- var imgur_url_container;
- var imgur_url_input;
- var imgur_url_link;
- var imgur_url_error;
- var twitter_link;
- var facebook_link;
- var reddit_link;
- var is_uploading = false;
- var is_showing_links = false;
-
- function init( shared )
- {
- signals = shared.signals;
- imgur_button = document.getElementById( 'imgur-button' );
- imgur_url_container = document.getElementById( 'imgur-url-container' );
- imgur_url_input = document.getElementById( 'imgur-url-input' );
- imgur_url_link = document.getElementById( 'imgur-url-link' );
- imgur_url_error = document.getElementById( 'imgur-url-error' );
- twitter_link = document.getElementById( 'twitter-link' );
- facebook_link = document.getElementById( 'facebook-link' );
- reddit_link = document.getElementById( 'reddit-link' );
-
- imgur_button.addEventListener( 'click', buttonClicked, false );
- imgur_url_input.addEventListener( 'click', selectInput, false );
-
- signals['control-updated'].add( controlsUpdated );
- }
-
- function buttonClicked( event )
- {
- event.preventDefault();
-
- if ( ! is_uploading )
- {
- signals['image-data-url-requested'].dispatch( upload );
-
- imgur_url_container.classList.remove( 'is-active', 'upload-failed', 'upload-successful' );
- }
- }
-
- function selectInput()
- {
- imgur_url_input.select();
- }
-
- //http://stackoverflow.com/questions/17805456/upload-a-canvas-image-to-imgur-api-v3-with-javascript
- function upload( data_url )
- {
- if ( ! is_uploading )
- {
- imgur_button.classList.add( 'is-uploading' );
-
- is_uploading = true;
-
- reqwest(
- {
- url: 'https://api.imgur.com/3/image.json',
- method: 'POST',
- headers: {
- Authorization: 'Client-ID a4c24380d884932'
- },
- data: {
- image: data_url.split( ',' )[1],
- type: 'base64'
- },
- type: 'json',
- crossOrigin: true,
- success: imageUploaded,
- error: uploadFailed
- }
- );
- }
- }
-
- function imageUploaded( response )
- {
- is_uploading = false;
-
- if ( response && response.data && response.data.link )
- {
- var twitter_share_url_text = "Check out what I made with @snorpey’s glitch tool: ";
- twitter_share_url_text += response.data.link;
- twitter_share_url_text += ' http://snorpey.github.io/jpg-glitch';
-
- //http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
- var facebook_share_url = 'https://www.facebook.com/sharer/sharer.php?s=100';
- facebook_share_url += '&p[url]=' + response.data.link;
- facebook_share_url += '&p[title]=Glitch!';
- facebook_share_url += '&p[images][0]=' + response.data.link;
- facebook_share_url += '&p[summary]=' + encodeURIComponent( 'Check out what I made with this glitch tool: http://snorpey.github.io/jpg-glitch' );
-
- imgur_button.classList.remove( 'is-uploading' );
- imgur_url_input.setAttribute( 'value', response.data.link );
- imgur_url_link.href = response.data.link;
- imgur_url_container.classList.add( 'is-active', 'upload-successful' );
-
- twitter_link.href = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( twitter_share_url_text );
- facebook_link.href = facebook_share_url;
- reddit_link.href = 'https://www.reddit.com/submit?url=' + encodeURIComponent( response.data.link ) + '&title=Glitch!';
-
- is_showing_links = true;
- }
-
- else
- {
- uploadFailed();
- }
- }
-
- function uploadFailed( response )
- {
- is_uploading = false;
- imgur_button.classList.remove( 'is-uploading' );
- imgur_url_container.classList.add( 'is-active', 'upload-failed' );
- }
-
- function controlsUpdated()
- {
- if ( is_showing_links )
- {
- imgur_url_container.classList.remove( 'is-active' );
- imgur_url_container.classList.remove( 'upload-failed' );
- imgur_url_container.classList.remove( 'upload-successful' );
- imgur_button.classList.remove( 'is-uploading' );
-
- is_showing_links = false;
- }
- }
-
- return { init: init };
- }
-);
\ No newline at end of file
diff --git a/scripts/util/addpublishers.js b/scripts/util/addpublishers.js
new file mode 100644
index 0000000..2850ca0
--- /dev/null
+++ b/scripts/util/addpublishers.js
@@ -0,0 +1,128 @@
+/*global define*/
+define(
+ [ 'util/object' ],
+ function ( objectHelper ) {
+ // adds publishers to an object that
+ // other objects can subscribe to.
+ // only the trigger object can
+ // publish new messages
+ // eg: trigger = addPublushers( obj1, 'test' );
+ // obj1.on( 'test', obj2.doStuff );
+ // trigger.test.dispatch( 'YOLO' );
+
+ function addPublishers () {
+ var publishers = { };
+ var allowedKeys = [ ];
+ var args = Array.prototype.slice.call( arguments );
+ var obj = args.shift();
+
+ if ( obj && args.length ) {
+ args.forEach( addKey );
+ }
+
+ allowedKeys.forEach( function ( key ) {
+ if ( ! obj[key] ) {
+ obj[key] = { };
+ }
+
+ obj[key].dispatch = function () {
+ dispatch.apply( dispatch, [ key ].concat( Array.prototype.slice.call( arguments ) ) );
+ };
+
+ if ( ! publishers[key] ) {
+ publishers[key] = [ ];
+ }
+
+ publishers[key].dispatch = function () {
+ dispatch.apply( dispatch, [ key ].concat( Array.prototype.slice.call( arguments ) ) );
+ };
+ } );
+
+ function addKey ( newItem ) {
+ var newKeys = [ ];
+ var existingKeys = Object.keys( obj );
+
+ if ( typeof newItem === 'string' ) {
+ newKeys = newKeys.concat( newItem.split( ' ' ) );
+ }
+
+ if ( Array.isArray( newItem ) ) {
+ newKeys = newKeys.concat( newItem );
+ }
+
+ newKeys = newKeys.filter( function ( key ) {
+ if (
+ existingKeys.indexOf( key ) === -1 &&
+ allowedKeys.indexOf( key ) === -1
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+ } );
+
+ allowedKeys = allowedKeys.concat( newKeys );
+ }
+
+ function on ( key, fn ) {
+ // on( 'my.sub.ev' ) -> obj.my.sub.on( 'ev' );
+ if ( typeof key === 'string' && key.indexOf( '.' ) !== -1 ) {
+ var keyArr = key.split( '.' );
+ var key = keyArr.pop();
+ var subObj = objectHelper.getObjectByString( keyArr.join( '.' ), obj );
+
+ if ( subObj && typeof subObj.on === 'function' ) {
+ subObj.on( key, fn );
+ }
+ } else {
+ if ( isKeyAllowed( key ) && typeof fn === 'function' ) {
+ publishers[key].push( fn );
+ }
+ }
+
+ return obj;
+ }
+
+ function off ( key, fn ) {
+ if (
+ typeof key === 'string' &&
+ typeof fn === 'function' &&
+ publishers[key]
+ ) {
+ for ( var i = publishers[key].length; i >= 0; i-- ) {
+ if ( publishers[key][i] === fn ) {
+ publishers[key].splice( i, 1 );
+ }
+ }
+ }
+
+ return obj;
+ }
+
+ function dispatch ( key ) {
+ // http://debuggable.com/posts/turning-javascript-s-arguments-object-into-an-array:4ac50ef8-3bd0-4a2d-8c2e-535ccbdd56cb
+ var args = Array.prototype.slice.call( arguments ).slice( 1 );
+
+ if ( Array.isArray( publishers[key] ) ) {
+ publishers[key].forEach( function ( fn ) {
+ fn.apply( fn, args );
+ } );
+ }
+
+ return obj;
+ }
+
+ function isKeyAllowed ( key ) {
+ return allowedKeys ? allowedKeys.indexOf( key ) > -1 : true;
+ }
+
+ publishers.dispatch = dispatch;
+ obj.on = on;
+ obj.off = off;
+
+ return publishers;
+ }
+
+ return addPublishers;
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/browser.js b/scripts/util/browser.js
new file mode 100644
index 0000000..6542d44
--- /dev/null
+++ b/scripts/util/browser.js
@@ -0,0 +1,80 @@
+/*global define*/
+define(
+ [ 'util/string' ],
+ function ( strUtil ) {
+
+ var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
+ var results = { };
+
+ var tests = {
+ getusermedia: function () {
+ return navigator.getUserMedia = (
+ navigator.getUserMedia ||
+ navigator.webkitGetUserMedia ||
+ navigator.mozGetUserMedia ||
+ navigator.msGetUserMedia
+ );
+ },
+ fullscreen: function () {
+ return !! (
+ getFeature( document, 'fullScreenEnabled' ) ||
+ getFeature( document, 'fullscreenEnabled' )
+ );
+ },
+ browserdb: function() {
+ return (
+ getFeature( window, 'indexedDB' ) ||
+ getFeature( window, 'openDatabase' )
+ );
+ },
+ browserstorage: function() {
+ return (
+ test( 'browserdb' ) ||
+ getFeature( window, 'localStorage' )
+ );
+ },
+ draganddrop: function () { return 'draggable' in document.createElement( 'span' ); },
+ touch: function () { return !!( 'ontouchstart' in window ); },
+ webworker: function () { return !! ( 'Worker' in window ); },
+ promise: function () { return !! ( 'Promise' in window ); },
+ localforage: function () {
+ return ( test( 'promise' ) && test( 'browserstorage' ) );
+ },
+ safari: function () { return /^((?!chrome|android).)*safari/i.test( navigator.userAgent ); }
+ };
+
+ function test ( featureName ) {
+ if ( typeof results[featureName] !== 'undefined' ) {
+ return results[featureName];
+ } else {
+ results[featureName] = tests[featureName] ? tests[featureName]() : false;
+ return results[featureName];
+ }
+ }
+
+ function getFeature ( obj, propertyName ) {
+ var result = testProperty( obj, propertyName );
+
+ if ( ! result ) {
+ for ( var i = 0, len = prefixes.length; i < len; i++ ) {
+ if ( ! result ) {
+ result = testProperty( obj, strUtil.toCamelCase( prefixes[i] + '-' + propertyName ) );
+ } else {
+ break;
+ }
+ }
+ }
+
+ return result;
+ }
+
+ function testProperty ( obj, propertyName ) {
+ return obj[propertyName];
+ }
+
+ return {
+ getFeature: getFeature,
+ test: test
+ };
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/canvas.js b/scripts/util/canvas.js
index f7fe2dd..37e0727 100644
--- a/scripts/util/canvas.js
+++ b/scripts/util/canvas.js
@@ -1,38 +1,85 @@
/*global define*/
define(
- function()
- {
- var update = false;
+ function () {
+ var canvas = document.createElement( 'canvas' );
+ var ctx = canvas.getContext( '2d' );
- function resize( canvas, size )
- {
+ function resizeImage ( content, size, callback, returnType ) {
+ var image = new Image();
+ var scale = 1;
+ var isImageData = false;
+ var isString = false;
- if ( canvas.width !== size.width )
- {
- canvas.width = size.width;
- update = true;
+ image.addEventListener( 'load', imageLoaded );
+
+ // url
+ if ( typeof content === 'string' ) {
+ isString = true;
+ image.src = content;
}
- if ( canvas.height !== size.height )
- {
- canvas.height = size.height;
- update = true;
+ // imagedata
+ if ( content.width && content.height && content.data && content.data.length ) {
+ isImageData = true;
+ canvas.width = content.width;
+ canvas.height = content.height;
+
+ scale = Math.min(
+ size.width / content.width,
+ size.height / content.height
+ );
+
+ ctx.putImageData( content, 0, 0 );
+ image.src = canvas.toDataURL( 'image/png', 1 );
}
- if ( update )
- {
- canvas.width = size.width;
- canvas.height = size.height;
+ if ( ! isString && ! isImageData ) {
+ callback( false );
}
- update = false;
+ function imageLoaded () {
+ if ( isString && image.src === content ) {
+ // src loaded
+ canvas.width = image.naturalWidth;
+ canvas.height = image.naturalHeight;
+
+ scale = Math.min(
+ size.width / image.naturalWidth,
+ size.height / image.naturalHeight
+ );
+
+ ctx.drawImage( image, 0, 0 );
+ image.src = canvas.toDataURL( 'image/png', 1 );
+ } else {
+ // imageData loaded
+ canvas.width = size.width;
+ canvas.height = size.height;
+
+ ctx.scale( scale, scale );
+ ctx.drawImage( image, 0, 0 );
+
+ if ( returnType === 'both' ) {
+ callback( {
+ dataURL: canvas.toDataURL( 'image/png', 1 ),
+ imageData: ctx.getImageData( 0, 0, canvas.width, canvas.height )
+ } );
+ } else {
+ if ( isString || returnType === 'asDataURL' ) {
+ callback( canvas.toDataURL( 'image/png', 1 ) );
+ } else {
+ if ( isImageData || returnType === 'asImageData' ) {
+ callback( ctx.getImageData( 0, 0, canvas.width, canvas.height ) );
+ } else {
+ callback();
+ }
+ }
+ }
+ }
+ }
}
- function clear( canvas, ctx )
- {
- ctx.clearRect( ctx, 0, 0, canvas.width, canvas.height );
- }
-
- return { resize: resize, clear: clear };
+ return {
+ resizeImage: resizeImage
+ };
}
);
\ No newline at end of file
diff --git a/scripts/util/css.js b/scripts/util/css.js
new file mode 100644
index 0000000..885de04
--- /dev/null
+++ b/scripts/util/css.js
@@ -0,0 +1,43 @@
+/*global define*/
+define(
+ function () {
+ function getCSSMatrix ( el ) {
+ var style = window.getComputedStyle( el );
+
+ return style.getPropertyValue( '-webkit-transform' ) ||
+ style.getPropertyValue( '-moz-transform' ) ||
+ style.getPropertyValue( '-ms-transform' ) ||
+ style.getPropertyValue( '-o-transform' ) ||
+ style.getPropertyValue( 'transform' );
+ }
+
+ function cssMatrixToTransformObj ( matrix ) {
+ // this happens when there was no rotation yet in CSS
+ if ( matrix === 'none' ) {
+ matrix = 'matrix(0,0,0,0,0)';
+ }
+
+ var obj = { };
+ var values = matrix.match( /([-+]?[\d\.]+)/g );
+
+ obj.rotate = ( Math.round(
+ Math.atan2(
+ parseFloat( values[1] ),
+ parseFloat( values[0] ) ) * ( 180 / Math.PI )
+ ) || 0
+ ).toString() + 'deg';
+
+ obj.translateStr = values[5] ? values[4] + 'px, ' + values[5] + 'px' : ( values[4] ? values[4] + 'px' : '' );
+
+ obj.translateX = parseFloat( values[4] );
+ obj.translateY = values[5] ? parseFloat( values[5] ) : 0;
+
+ return obj;
+ }
+
+ return {
+ getCSSMatrix: getCSSMatrix,
+ cssMatrixToTransformObj: cssMatrixToTransformObj
+ }
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/dom.js b/scripts/util/dom.js
new file mode 100644
index 0000000..70d0a8d
--- /dev/null
+++ b/scripts/util/dom.js
@@ -0,0 +1,37 @@
+/*global define*/
+define(
+ function () {
+ function setTransform ( el, transformStr ) {
+ el.style.transform = el.style.webkitTransform = el.style.msTransform = transformStr;
+ }
+
+ // http://stackoverflow.com/a/2234986/229189
+ function isDescendant ( parent, child ) {
+ var node = child.parentNode;
+
+ while ( node != null ) {
+ if ( node == parent ) {
+ return true;
+ }
+
+ node = node.parentNode;
+ }
+
+ return false;
+ }
+
+ // http://stackoverflow.com/a/384380/229189
+ function isElement ( obj ) {
+ return (
+ typeof HTMLElement === 'object' ? obj instanceof HTMLElement :
+ obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string'
+ );
+ }
+
+ return {
+ setTransform: setTransform,
+ isDescendant: isDescendant,
+ isElement: isElement
+ };
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/el.js b/scripts/util/el.js
new file mode 100644
index 0000000..048345d
--- /dev/null
+++ b/scripts/util/el.js
@@ -0,0 +1,107 @@
+/*global define*/
+define(
+ [ 'util/dom', 'util/localizeText' ],
+ function ( domHelper, loc ) {
+ var svgEls = [ 'g', 'svg', 'rect' ];
+ var svgNameSpace = 'http://www.w3.org/2000/svg';
+
+ function createEl ( elementStr, cssClasses, parentEl ) {
+ var hasNameSpace = svgEls.indexOf( elementStr ) !== -1;
+ var el = hasNameSpace ? document.createElementNS( svgNameSpace, elementStr ) : document.createElement( elementStr );
+
+ if ( hasNameSpace ) {
+ document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' );
+ }
+
+ cssClasses = typeof cssClasses === 'string' ? [ ].concat( cssClasses.split( ' ' ) ) : cssClasses;
+
+ if ( Array.isArray( cssClasses ) ) {
+ cssClasses.forEach( function ( cssClass ) {
+ el.classList.add( cssClass );
+ } );
+ }
+
+ if ( parentEl && parentEl.appendChild ) {
+ parentEl.appendChild( el );
+ }
+
+ return el;
+ }
+
+ function createButton ( content, title, cssClasses, parentEl, onClick ) {
+ var btnEl = createEl( 'button', cssClasses, parentEl );
+
+ if ( typeof content === 'string' ) {
+ // btnEl.textContent = content;
+ loc( btnEl, 'textContent', content );
+ } else {
+ if ( domHelper.isElement( content ) ) {
+ btnEl.appendChild( content );
+ }
+ }
+
+ // btnEl.title = title;
+ loc( btnEl, 'title', title );
+
+ if ( typeof onClick === 'function' ) {
+ btnEl.addEventListener( 'click', onClick );
+ }
+
+ return btnEl;
+ }
+
+ function createLink ( content, title, href, target, cssClasses, parentEl ) {
+ var linkEl = createEl( 'a', cssClasses, parentEl );
+
+ if ( typeof content === 'string' ) {
+ // linkEl.textContent = content;
+ loc( linkEl, 'textContent', content );
+ } else {
+ if ( domHelper.isElement( content ) ) {
+ linkEl.appendChild( content );
+ }
+ }
+
+ if ( title ) {
+ // linkEl.title = title;
+ loc( linkEl, 'title', title );
+ }
+
+ if ( href ) {
+ linkEl.href = href;
+ }
+
+ if ( target ) {
+ linkEl.target = target;
+ }
+
+ return linkEl;
+ }
+
+ function createLabel ( content, forId, cssClasses, parentEl ) {
+ var labelEl = createEl( 'label', cssClasses, parentEl );
+
+ if ( typeof content === 'string' ) {
+ // labelEl.textContent = content;
+ loc( labelEl, 'textContent', content );
+ } else {
+ if ( domHelper.isElement( content ) ) {
+ labelEl.appendChild( content );
+ }
+ }
+
+ if ( forId ) {
+ labelEl.setAttribute( 'for', forId );
+ }
+
+ return labelEl;
+ }
+
+ return {
+ createEl: createEl,
+ createButton: createButton,
+ createLink: createLink,
+ createLabel: createLabel
+ }
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/feature-test.js b/scripts/util/feature-test.js
deleted file mode 100644
index f4beb28..0000000
--- a/scripts/util/feature-test.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*global define*/
-define(
- function()
- {
- var tests = {
- 'canvas': { required: true, test: function(){ return !! document.createElement('canvas').getContext; } },
- 'query-selector-all': { required: false, test: function(){ return !! document.querySelectorAll; } },
- 'drag-drop': { required: false, test: function(){ return 'draggable' in document.createElement('span'); } },
- 'file-api': { required: false, test: function(){ return typeof FileReader !== 'undefined'; } }
- };
-
- function test( success, error )
- {
- var required_supported = true;
- var results = { };
- var required_features_missing = [ ];
-
- for ( var key in tests )
- {
- var result = tests[key].test();
-
- if ( ! result )
- {
- if ( tests[key].required )
- {
- required_supported = false;
-
- required_features_missing.push( key );
- }
- }
-
- results[key] = result;
- }
-
- if ( required_supported )
- {
- success( results );
- }
-
- else
- {
- error( required_features_missing, results );
- }
- }
-
- return test;
- }
-);
\ No newline at end of file
diff --git a/scripts/util/localizetext.js b/scripts/util/localizetext.js
new file mode 100644
index 0000000..a7c8fa6
--- /dev/null
+++ b/scripts/util/localizetext.js
@@ -0,0 +1,11 @@
+/*global define*/
+define(
+ [ 'models/localisationmodel' ],
+ function ( LocalisationModel ) {
+ function loc () {
+ return LocalisationModel.sharedInstance.localizeText.apply( LocalisationModel.sharedInstance, arguments );
+ }
+
+ return loc;
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/math.js b/scripts/util/math.js
new file mode 100644
index 0000000..8855636
--- /dev/null
+++ b/scripts/util/math.js
@@ -0,0 +1,22 @@
+/*global define*/
+define(
+ function () {
+ function mapRange ( value, inMin, inMax, outMin, outMax, clampResult ) {
+ var result = ( ( value - inMin ) / ( inMax - inMin ) * ( outMax - outMin ) + outMin );
+
+ if ( clampResult ) {
+ if ( outMin > outMax ) {
+ result = Math.min( Math.max( result, outMax ), outMin );
+ } else {
+ result = Math.min( Math.max( result, outMin ), outMax );
+ }
+ }
+
+ return result;
+ }
+
+ return {
+ mapRange: mapRange
+ };
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/mediastream.js b/scripts/util/mediastream.js
new file mode 100644
index 0000000..5d3fb85
--- /dev/null
+++ b/scripts/util/mediastream.js
@@ -0,0 +1,24 @@
+/*global define*/
+define(
+ function () {
+ // http://stackoverflow.com/a/11646945
+ var MediaStream = window.MediaStream;
+
+ if ( typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined' ) {
+ MediaStream = webkitMediaStream;
+ }
+
+ /*global MediaStream:true */
+ if ( typeof MediaStream !== 'undefined' && !( 'stop' in MediaStream.prototype ) ) {
+ MediaStream.prototype.stop = function () {
+ this.getAudioTracks().forEach( function ( track ) {
+ track.stop();
+ } );
+
+ this.getVideoTracks().forEach( function ( track ) {
+ track.stop();
+ } );
+ };
+ }
+ }
+)
\ No newline at end of file
diff --git a/scripts/util/object.js b/scripts/util/object.js
new file mode 100644
index 0000000..8e0572b
--- /dev/null
+++ b/scripts/util/object.js
@@ -0,0 +1,35 @@
+/*global define*/
+define(
+ function () {
+ // http://stackoverflow.com/a/6491621/229189
+ function getObjectByString ( str, obj ) {
+ if ( typeof str === 'string' ) {
+ str = str.replace( /\[(\w+)\]/g, '.$1' ); // convert indexes to properties
+ str = str.replace( /^\./, '' ); // strip a leading dot
+
+ var keys = str.split( '.' );
+
+ for ( var i = 0, len = keys.length; i < len; ++i ) {
+ var key = keys[i];
+
+ if ( key in obj ) {
+ obj = obj[key];
+ } else {
+ return;
+ }
+ }
+ }
+
+ return obj;
+ }
+
+ function getCopy ( obj ) {
+ return JSON.parse( JSON.stringify( obj ) );
+ }
+
+ return {
+ getObjectByString: getObjectByString,
+ getCopy: getCopy
+ };
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/string.js b/scripts/util/string.js
new file mode 100644
index 0000000..9dc11b6
--- /dev/null
+++ b/scripts/util/string.js
@@ -0,0 +1,79 @@
+/*global define*/
+define(
+ function () {
+ function toCamelCase ( str ) {
+ // if array was passed
+ if ( str && Array.isArray( str ) ) {
+ str = str.join( ' ' );
+ }
+
+ var parts = str.split( /(-|\s|_)/gmi );
+ var result = '';
+
+ parts.forEach( function ( item, index ) {
+ if ( ! item.match( /(-|\s|_)/gmi ) ) {
+ if ( index > 0 && item.length > 1 ) {
+ result += item.charAt( 0 ).toUpperCase() + item.slice( 1 );
+ } else {
+ result += item;
+ }
+ }
+ } );
+
+ return result;
+ }
+
+ function markdownToHtml ( str, options ) {
+ return autop(
+ markdownLinksToHtml( str, options.links ),
+ options.autop
+ );
+ }
+
+ function markdownLinksToHtml ( str, options ) {
+ var attributes = [ ];
+ var attributeStr = '';
+
+ if ( options ) {
+ if ( options.newTab ) {
+ attributes.push( 'target="_blank"' );
+ }
+
+ if ( options.cssClasses ) {
+ attributes.push( 'class="' + cssClasses + '"' );
+ }
+ }
+
+ attributeStr = attributes.length ? ' ' + attributes.join( ' ' ) : '';
+
+ var linkHTML = '$1';
+
+ return str
+ .replace( /\\n/gm, '\n')
+ .replace( /\[(.*?)\]\((.+?)\)/g, linkHTML );
+ }
+
+ function autop ( str, options ) {
+ var tag = ( options && options.tag ) ? options.tag : 'p';
+ var lineBreakTag = ( options && options.linebreak ) ? '<' + options.linebreak + '>' : '
';
+ var startTag = '<' + tag + '>';
+ var endTag = '';
+
+ if ( options && options.cssClasses && typeof options.cssClasses === 'string' ) {
+ startTag = '<' + tag + ' class="' + options.cssClasses + '">';
+ }
+
+ return startTag + str
+ .replace( /\n{2}/g, ' ' + endTag + startTag )
+ .replace(/\n/g, ' ' + lineBreakTag ) +
+ endTag;
+ }
+
+ return {
+ toCamelCase: toCamelCase,
+ autop: autop,
+ markdownToHtml: markdownToHtml,
+ markdownLinksToHtml: markdownLinksToHtml
+ };
+ }
+)
\ No newline at end of file
diff --git a/scripts/util/time.js b/scripts/util/time.js
new file mode 100644
index 0000000..18a5586
--- /dev/null
+++ b/scripts/util/time.js
@@ -0,0 +1,82 @@
+/*global define*/
+define(
+ function () {
+ var lang = navigator.language || navigator.userLanguage || 'en-us';
+ var intlIsSupported = !! window.Intl;
+
+ function dateToStr ( date ) {
+ return date.toISOString();
+ }
+
+ function timestampToDate ( str ) {
+ return new Date( parseInt( str, 10 ) );
+ }
+
+ function dateTimeToLocalStr ( date ) {
+ if (
+ intlIsSupported &&
+ Intl.DateTimeFormat.supportedLocalesOf( [ lang ] ).length &&
+ date.toLocaleDateString &&
+ date.toLocaleTimeString
+ ) {
+ return date.toLocaleDateString( lang ) + ' ' + date.toLocaleTimeString( lang );
+ } else {
+ return dateToLocalStr( date ) + ' ' + timeToLocalStr( date );
+ }
+ }
+
+ function dateToLocalStr ( date ) {
+ if (
+ intlIsSupported &&
+ Intl.DateTimeFormat.supportedLocalesOf( [ lang ] ).length &&
+ date.toLocaleDateString
+ ) {
+ return date.toLocaleDateString( lang );
+ } else {
+ if ( navigator.language.toLowerCase() === 'en-us' ) {
+ return ( date.getMonth() + 1 ) + '/' + date.getDate() + '/' + date.getFullYear();
+ } else {
+ return ( date.getDate() + '.' + date.getMonth() + 1 ) + '.' + date.getFullYear();
+ }
+ }
+ }
+
+ function timeToLocalStr ( date ) {
+ if (
+ intlIsSupported &&
+ Intl.DateTimeFormat.supportedLocalesOf( [ lang ] ).length &&
+ date.toLocaleTimeString
+ ) {
+ return date.toLocaleTimeString( lang );
+ } else {
+ var hours = date.getHours();
+ var minutes = date.getMinutes();
+
+ if ( hours < 10 ) { hours = '0' + hours; }
+ if ( minutes < 10 ) { minutes = '0' + minutes; }
+
+ if ( navigator.language.toLowerCase().indexOf( 'en' ) >= 0 ) {
+ var amPm = 'AM';
+
+ if ( hours > 12 ) {
+ hours -= 12;
+ amPm = 'PM';
+ }
+
+ return hours + ':' + minutes + ' ' + amPm;
+
+ } else {
+ return hours + ':' + minutes;
+ }
+ }
+ }
+
+ return {
+ dateToStr: dateToStr,
+ dateToLocalStr: dateToLocalStr,
+ timeToLocalStr: timeToLocalStr,
+ dateTimeToLocalStr: dateTimeToLocalStr,
+ timestampToDate: timestampToDate
+ };
+ }
+);
\ No newline at end of file
diff --git a/scripts/util/trigger-event.js b/scripts/util/trigger-event.js
deleted file mode 100644
index 04dadd1..0000000
--- a/scripts/util/trigger-event.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*global define*/
-define(
- function()
- {
- // http://stackoverflow.com/a/2381862/229189
- function triggerEvent( node, event_name )
- {
- var doc;
-
- if ( node.ownerDocument )
- {
- doc = node.ownerDocument;
- }
-
- else if ( node.nodeType === 9 )
- {
- doc = node;
- }
-
- else
- {
- throw new Error('Invalid node passed to fireEvent: ' + node.id);
- }
-
- if ( node.fireEvent )
- {
- // IE-style
- var event = doc.createEventObject();
-
- event.synthetic = true;
-
- node.fireEvent( 'on' + event_name, event );
- }
-
- else if ( node.dispatchEvent )
- {
- var event_class = '';
-
- switch ( event_name )
- {
- case 'click':
- case 'mousedown':
- case 'mouseup':
- event_class = 'MouseEvents';
- break;
-
- case 'focus':
- case 'change':
- case 'blur':
- case 'select':
- event_class = 'HTMLEvents';
- break;
-
- default:
- throw 'triggerEvent: Couldn’t find an event class for event ' + event_name + '.';
- break;
- }
-
- var event = doc.createEvent( event_class );
- var bubbles = event_name == 'change' ? false : true;
-
- event.initEvent( event_name, bubbles, true );
-
- event.synthetic = true;
- node.dispatchEvent( event );
- }
- }
-
- return triggerEvent;
- }
-);
\ No newline at end of file
diff --git a/scripts/views/aboutview.js b/scripts/views/aboutview.js
new file mode 100644
index 0000000..81c8ec4
--- /dev/null
+++ b/scripts/views/aboutview.js
@@ -0,0 +1,25 @@
+/*global define*/
+define(
+ [ 'util/el', 'views/dialog', 'models/localisationmodel', 'util/localizetext' ],
+ function ( elHelper, Dialog, Localisationmodel, loc ) {
+ function AboutView ( parentEl ) {
+ if ( ! ( this instanceof AboutView ) ) {
+ return new AboutView ( parentEl );
+ }
+
+ var self = this;
+ var buttonEl = elHelper.createButton( 'about.info', 'about.infotitle', 'nav-button info-button', parentEl );
+ var dialog = Dialog( 'about-dialog', parentEl, buttonEl );
+ var aboutEl = elHelper.createEl( 'div', 'about-content' );
+ var textEl = document.querySelector( '.description' );
+
+ loc( textEl, 'innerHTML', 'index.description' );
+
+ aboutEl.appendChild( textEl );
+
+ dialog.add( aboutEl );
+ }
+
+ return AboutView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/appview.js b/scripts/views/appview.js
new file mode 100644
index 0000000..663eadb
--- /dev/null
+++ b/scripts/views/appview.js
@@ -0,0 +1,34 @@
+/*global define*/
+define(
+ [ 'util/el' ],
+ function ( elHelper ) {
+ // the app view, wrapping element of the app
+ // also updates the html element classes
+ function AppView ( parentEl ) {
+ if ( ! ( this instanceof AppView ) ) {
+ return new AppView( parentEl );
+ }
+
+ var self = this;
+ var el = elHelper.createEl( 'div', 'app', parentEl );
+
+ function showOnlineOptions () {
+ document.documentElement.classList.add( 'is-online' );
+
+ return self;
+ }
+
+ function hideOnlineOptions () {
+ document.documentElement.classList.remove( 'is-online' );
+
+ return self;
+ }
+
+ self.el = el;
+ self.showOnlineOptions = showOnlineOptions;
+ self.hideOnlineOptions = hideOnlineOptions;
+ }
+
+ return AppView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/canvascontrolsview.js b/scripts/views/canvascontrolsview.js
new file mode 100644
index 0000000..bc9dd1b
--- /dev/null
+++ b/scripts/views/canvascontrolsview.js
@@ -0,0 +1,71 @@
+/*global define*/
+define(
+ [ 'util/addpublishers', 'util/el' ],
+ function ( addPublishers, elHelper ) {
+ // the controls for the workspace at the bottom of the screen
+ // zoom range and center buttons
+ function CanvasControlsView ( parentEl ) {
+ if ( ! ( this instanceof CanvasControlsView ) ) {
+ return new CanvasControlsView( parentEl );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'update', 'center', 'scale' );
+ var isIgnoringInput = false;
+ var el = elHelper.createEl( 'div', 'workspace-controls clear', parentEl );
+
+ elHelper.createButton( 'controls.center', 'controls.centertitle', 'center-button button', el, centerButtonClicked );
+ elHelper.createButton( 'controls.original', 'controls.originaltitle', 'scale-to-original-button button', el, scaleToOriginalButtonClicked );
+ elHelper.createLabel( 'controls.zoom', 'control.zoomtitle', 'scale-label', el );
+
+ var scaleSliderEl = elHelper.createEl( 'input', 'scale-slider', el );
+ scaleSliderEl.id = 'zoom'
+ scaleSliderEl.type = 'range'
+ scaleSliderEl.min = 0.01;
+ scaleSliderEl.max = 5;
+ scaleSliderEl.step = 0.001;
+ scaleSliderEl.addEventListener( 'input', scaleSliderChanged );
+ scaleSliderEl.addEventListener( 'change', scaleSliderChanged );
+
+ function centerButtonClicked ( event ) {
+ publishers.center.dispatch();
+ }
+
+ function scaleSliderChanged ( event ) {
+ if ( ! isIgnoringInput ) {
+ publishers.scale.dispatch( parseFloat( scaleSliderEl.value ) );
+ publishers.update.dispatch( 'scale', parseFloat( scaleSliderEl.value ) );
+ }
+ }
+
+ function scaleToOriginalButtonClicked ( event ) {
+ publishers.scale.dispatch( 1.00 );
+ publishers.update.dispatch( 'scale', 1.00 );
+ }
+
+ // when setting scale, prevent infinite
+ // loop by ignoring input element
+ function setScale ( scale ) {
+ isIgnoringInput = true;
+ scaleSliderEl.value = scale;
+ isIgnoringInput = false;
+
+ return self;
+ }
+
+ function setValue ( key, value ) {
+ if ( key === 'scale' ) {
+ setScale( value );
+ }
+
+ return self;
+ }
+
+ self.setScale = setScale;
+ self.setValue = setValue;
+ self.el = el;
+ }
+
+ return CanvasControlsView;
+ }
+)
\ No newline at end of file
diff --git a/scripts/views/canvasview.js b/scripts/views/canvasview.js
new file mode 100644
index 0000000..49a2838
--- /dev/null
+++ b/scripts/views/canvasview.js
@@ -0,0 +1,86 @@
+/*global define*/
+define(
+ [ 'util/addpublishers', 'util/el', 'views/panzoom' ],
+ function ( addPublishers, elHelper, PanZoom ) {
+ // canvasview: a wrapper for the PanZoom workspace element
+ function CanvasView ( parentEl, buttonParentEl ) {
+ if ( ! ( this instanceof CanvasView ) ) {
+ return new CanvasView( parentEl, buttonParentEl );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'update', 'imagesizechange', 'scale', 'dblclick' );
+ var imageSize = { width: 0, height: 0 };
+
+ var workspaceEl = elHelper.createEl( 'div', 'panzoom', parentEl );
+ var canvasWrapperEl = elHelper.createEl( 'div', 'canvas-wrapper', workspaceEl );
+ var canvasEl = elHelper.createEl( 'canvas', 'glitch-canvas', canvasWrapperEl );
+
+ var ctx = canvasEl.getContext( '2d' );
+
+ var panZoom = PanZoom( canvasWrapperEl, workspaceEl )
+ .on( 'scale', function ( scale ) {
+ publishers.scale.dispatch( scale );
+ publishers.update.dispatch( 'scale', scale );
+ } );
+
+ var hideShowTimeoutId = NaN;
+ var lastClickTime = Date.now();
+
+ workspaceEl.addEventListener( 'dblclick', workspaceDoubleClicked );
+
+ function workspaceDoubleClicked ( event ) {
+ publishers.dblclick.dispatch();
+ }
+
+ function putImageData ( imageData ) {
+ canvasWrapperEl.style.width = imageData.width + 'px';
+ canvasWrapperEl.style.height = imageData.height + 'px';
+
+ if ( imageSize.width !== imageData.width || imageSize.height !== imageData.height ) {
+ canvasEl.width = imageData.width;
+ canvasEl.height = imageData.height;
+ imageSize.width = imageData.width;
+ imageSize.height = imageData.height;
+ panZoom.animateToCenter();
+ publishers.imagesizechange.dispatch();
+ }
+
+ ctx.putImageData( imageData, 0, 0 );
+ panZoom.updateContainerBounds();
+ }
+
+ function createImageUrl ( callback ) {
+ return function () {
+ callback( canvasEl.toDataURL( 'image/jpeg', 100 ) );
+ }
+ }
+
+ function hide () {
+ clearTimeout( hideShowTimeoutId );
+ workspaceEl.classList.remove( 'is-visible' );
+ }
+
+ function show () {
+ clearTimeout( hideShowTimeoutId );
+
+ hideShowTimeoutId = setTimeout( function () {
+ workspaceEl.classList.add( 'is-visible' );
+ }, 400 );
+ }
+
+ self.putImageData = putImageData;
+ self.moveToCenter = panZoom.moveToCenter;
+ self.animateToCenter = panZoom.animateToCenter;
+ self.setScale = panZoom.setScale;
+ self.createImageUrl = createImageUrl;
+ self.hide = hide;
+ self.show = show;
+ self.resized = panZoom.resized;
+ self.el = workspaceEl;
+ self.panZoom = panZoom;
+ }
+
+ return CanvasView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/controlsview.js b/scripts/views/controlsview.js
new file mode 100644
index 0000000..0e0af01
--- /dev/null
+++ b/scripts/views/controlsview.js
@@ -0,0 +1,156 @@
+/*global define*/
+define(
+ [ 'util/addpublishers', 'util/el' ],
+ function ( addPublishers, elHelper ) {
+ // the control elements are used to change the appearance of the image
+ function ControlsView ( parentEl, buttonParentEl, params ) {
+ if ( ! ( this instanceof ControlsView ) ) {
+ return new ControlsView( parentEl, buttonParentEl, params );
+ }
+
+ params = params || { };
+
+ var self = this;
+ var publishers = addPublishers( self, 'update', 'random' );
+
+ var isIgnoringInput = false;
+ var isActive = true;
+ var activeTimeoutId = 0;
+
+ var inputEls = { };
+ var valueEls = { };
+
+ var controlsEl = elHelper.createEl( 'div', 'controls', parentEl );
+ var controlsWrapperEl = elHelper.createEl( 'div', 'controls-wrapper', controlsEl );
+ var buttonEl = elHelper.createButton( 'controls.controls', 'controls.controlstitle', 'controls-toggle-button button is-active', buttonParentEl, toggleControls );
+
+ for ( var key in params ) {
+ addControl( key, params[key] );
+ }
+
+ show();
+
+ elHelper.createButton( 'controls.randomize', 'controls.randomizetitle', 'random-button button', controlsWrapperEl, randomButtonClicked );
+
+ function loadInitialValues () {
+ // dispatch initial values when model is listening
+ var controlValues = getInputValues();
+
+ for ( var key in controlValues ) {
+ publishers.update.dispatch( key, controlValues[key] );
+ }
+ }
+
+ function addControl ( key, params ) {
+ var controlEl = elHelper.createEl( 'div', 'control', controlsWrapperEl );
+
+ elHelper.createLabel( 'controls.' + key, 'input-' + key, 'control-label', controlEl );
+
+ var inputEl = elHelper.createEl( 'input', 'control-input', controlEl );
+ inputEl.setAttribute( 'data-key', key );
+ inputEl.setAttribute( 'id', 'input-' + key );
+ inputEl.type = 'range';
+ inputEl.value = params.value || 0;
+ inputEl.min = params.min || 0;
+ inputEl.max = params.max || 100;
+ inputEl.addEventListener( 'input', inputUpdated );
+ inputEl.addEventListener( 'change', inputUpdated );
+
+ inputEls[key] = inputEl;
+
+ var valueEl = elHelper.createEl( 'input', 'control-value', controlEl );
+ valueEl.setAttribute( 'data-key', key );
+ valueEl.type = 'number';
+ valueEl.value = params.value || 0;
+ valueEl.min = params.min || 0;
+ valueEl.max = params.max || 100;
+ valueEl.addEventListener( 'input', inputUpdated );
+ valueEl.addEventListener( 'change', inputUpdated );
+
+ valueEls[key] = valueEl;
+
+ inputUpdated( { target: inputEl } );
+ }
+
+ function inputUpdated ( event ) {
+ if ( isActive && ! isIgnoringInput ) {
+ var key = event.target.getAttribute( 'data-key' );
+ var controlValues = getInputValues();
+
+ if ( controlValues[key] !== event.target.value ) {
+ controlValues[key] = parseInt( event.target.value, 10 );
+
+ publishers.update.dispatch( key, controlValues[key] );
+ }
+ }
+ }
+
+ function randomButtonClicked ( event ) {
+ if ( isActive ) {
+ publishers.random.dispatch();
+ }
+ }
+
+ function toggleControls () {
+ if ( isActive ) {
+ hide();
+ } else {
+ show();
+ }
+ }
+
+ function hide () {
+ controlsEl.classList.remove( 'is-active' );
+ buttonEl.classList.remove( 'is-active' );
+ buttonParentEl.classList.remove( 'controls-enabled' );
+ isActive = false;
+
+ clearTimeout( activeTimeoutId );
+
+ activeTimeoutId = setTimeout( function () {
+ controlsEl.classList.remove( 'is-visible' );
+ }, 500 );
+ }
+
+ function show () {
+ controlsEl.classList.add( 'is-visible' );
+ isActive = true;
+
+ clearTimeout( activeTimeoutId );
+
+ activeTimeoutId = setTimeout( function () {
+ controlsEl.classList.add( 'is-active' );
+ buttonEl.classList.add( 'is-active' );
+ buttonParentEl.classList.add( 'controls-enabled' );
+ }, 10 );
+ }
+
+ function getInputValues () {
+ var result = { };
+
+ for ( var key in inputEls ) {
+ result[key] = parseInt( inputEls[key].value, 10 );
+ }
+
+ return result;
+ }
+
+ // when setting a value, prevent dispatching
+ // of elements to avoid an infinite loop of
+ // input events
+ function setValue ( key, newValue ) {
+ isIgnoringInput = true;
+
+ inputEls[key].value = newValue;
+ valueEls[key].value = newValue;
+
+ isIgnoringInput = false;
+ }
+
+ self.loadInitialValues = loadInitialValues;
+ self.setValue = setValue;
+ }
+
+ return ControlsView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/dialog.js b/scripts/views/dialog.js
new file mode 100644
index 0000000..d2e4fa6
--- /dev/null
+++ b/scripts/views/dialog.js
@@ -0,0 +1,121 @@
+/*global define*/
+define(
+ [ 'util/el', 'util/dom', 'util/addpublishers' ],
+ function ( elHelper, domHelper, addPublishers ) {
+
+ var dialogInstances = [ ];
+
+ function closeOpenDialogInstances () {
+ dialogInstances.forEach( function ( instance ) {
+ instance.hide();
+ } );
+ }
+
+ function Dialog ( cssClassName, parentEl, toggleEl ) {
+ if ( ! ( this instanceof Dialog ) ) {
+ return new Dialog( cssClassName, parentEl, toggleEl );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'hide show' );
+ var isActive = false;
+ var animationTimeoutId = NaN;
+ var hasToggleEl = false;
+
+ var dialogEl = elHelper.createEl( 'div', 'dialog color-bg-light ' + cssClassName, parentEl );
+
+ if ( toggleEl && domHelper.isElement( toggleEl ) ) {
+ hasToggleEl = true;
+ toggleEl.addEventListener( 'click', toggle );
+ }
+
+ function show () {
+ if ( ! isActive ) {
+ closeOpenDialogInstances();
+ dialogEl.classList.add( 'is-visible' );
+ isActive = true;
+ publishers.show.dispatch();
+
+ clearTimeout( animationTimeoutId );
+
+ animationTimeoutId = setTimeout( function () {
+ dialogEl.classList.add( 'is-active' );
+
+ if ( hasToggleEl ) {
+ toggleEl.classList.add( 'is-active' );
+ }
+ }, 10 );
+ }
+
+ return self;
+ }
+
+ function hide () {
+ if ( isActive ) {
+ dialogEl.classList.remove( 'is-active' );
+ isActive = false;
+ publishers.hide.dispatch();
+
+ if ( hasToggleEl ) {
+ toggleEl.classList.remove( 'is-active' );
+ }
+
+ clearTimeout( animationTimeoutId );
+
+ animationTimeoutId = setTimeout( function () {
+ dialogEl.classList.remove( 'is-visible' );
+ }, 500 );
+ }
+
+ return self;
+ }
+
+ function toggle () {
+ if ( isActive ) {
+ hide();
+ } else {
+ show();
+ }
+
+ return self;
+ }
+
+ function add () {
+ var wrapperEl = document.createElement( 'div' );
+ wrapperEl.classList.add( 'dialog-item' );
+ dialogEl.appendChild( wrapperEl );
+
+ for ( var i = 0, len = arguments.length; i < len; i++ ) {
+ if ( typeof arguments[i] === 'string' ) {
+ arguments[i].split( ' ' ).forEach( function ( cssClassName ) {
+ wrapperEl.classList.add( cssClassName );
+ } );
+ } else {
+ arguments[i].wrapperEl = wrapperEl;
+ wrapperEl.appendChild( arguments[i] );
+ }
+ }
+
+ return self;
+ }
+
+ function remove ( el ) {
+ el.parentNode.parentNode.removeChild( el.parentNode );
+ return self;
+ }
+
+ self.add = add;
+ self.remove = remove;
+ self.show = show;
+ self.hide = hide;
+ self.toggle = toggle;
+ self.el = dialogEl;
+
+ dialogInstances.push( self );
+ }
+
+ Dialog.closeAll = closeOpenDialogInstances;
+
+ return Dialog;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/draganddropview.js b/scripts/views/draganddropview.js
new file mode 100644
index 0000000..7304baa
--- /dev/null
+++ b/scripts/views/draganddropview.js
@@ -0,0 +1,61 @@
+/*global define*/
+define(
+ [ 'util/browser', 'util/addpublishers' ],
+ function ( browser, addPublishers ) {
+ // the DragAndDropView handles the drag + drop events
+ // over the workspace and passes the uploaded file
+ function DragAndDropView ( el ) {
+ if ( ! ( this instanceof DragAndDropView ) ) {
+ return new DragAndDropView( el );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'drop' );
+ var isOver = false;
+
+ if ( browser.test( 'draganddrop' ) ) {
+ document.addEventListener( 'drop', dropped, false );
+ document.addEventListener( 'dragover', dragHovered, false );
+ document.addEventListener( 'dragleave', dragLeft, false );
+ }
+
+ function preventDefault ( event ) {
+ event.preventDefault();
+ }
+
+ function dragHovered ( event ) {
+ if ( ! isOver ) {
+ el.classList.add( 'drag-over' );
+ isOver = true;
+ }
+
+ preventDefault( event );
+ }
+
+ function dragLeft ( event ) {
+ if ( isOver ) {
+ el.classList.remove( 'drag-over' );
+ isOver = false;
+ }
+
+ preventDefault( event );
+ }
+
+ function dropped ( event ) {
+ preventDefault( event );
+
+ if (
+ event.dataTransfer &&
+ event.dataTransfer.files &&
+ event.dataTransfer.files[0]
+ ) {
+ publishers.drop.dispatch( event.dataTransfer.files[0] );
+ }
+
+ el.classList.remove( 'drag-over' );
+ }
+ }
+
+ return DragAndDropView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/fullscreenview.js b/scripts/views/fullscreenview.js
new file mode 100644
index 0000000..076022a
--- /dev/null
+++ b/scripts/views/fullscreenview.js
@@ -0,0 +1,68 @@
+/*global define*/
+define(
+ [ 'util/browser', 'util/el' ],
+ function ( browser, elHelper ) {
+ // the fullscreen button
+ // includes a lot of code to account for the different browser implementations
+ function FullscreenView ( parentEl ) {
+ if ( ! ( this instanceof FullscreenView ) ) {
+ return new FullscreenView( parentEl );
+ }
+
+ var self = this;
+ var isInFullScreen = false;
+ var fullscreenButtonEl;
+
+ if ( browser.test( 'fullscreen' ) ) {
+ fullscreenButtonEl = elHelper.createButton( 'controls.fullscreen', 'controls.fullscreentitle', 'fullscreen-button', parentEl, toggleFullscreen );
+
+ document.addEventListener( 'webkitfullscreenchange', fullscreenChanged, false );
+ document.addEventListener( 'mozfullscreenchange', fullscreenChanged, false );
+ document.addEventListener( 'fullscreenchange', fullscreenChanged, false );
+ document.addEventListener( 'MSFullscreenChange', fullscreenChanged, false );
+ }
+
+ function fullscreenChanged ( event ) {
+ isInFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
+
+ if ( isInFullScreen ) {
+ document.documentElement.classList.add( 'is-fullscreen' );
+ } else {
+ document.documentElement.classList.remove( 'is-fullscreen' );
+ }
+ }
+
+ function toggleFullscreen () {
+ if ( isInFullScreen ) {
+ exitFullscreen();
+ } else {
+ requestFullScreen( document.documentElement );
+ }
+ }
+
+ function requestFullScreen ( el ) {
+ if ( el.requestFullscreen ) {
+ el.requestFullscreen();
+ } else if ( el.mozRequestFullScreen ) {
+ el.mozRequestFullScreen();
+ } else if ( el.webkitRequestFullscreen ) {
+ el.webkitRequestFullscreen();
+ } else if ( el.msRequestFullscreen ) {
+ el.msRequestFullscreen();
+ }
+ }
+
+ function exitFullscreen () {
+ if ( document.exitFullscreen ) {
+ document.exitFullscreen();
+ } else if ( document.mozCancelFullScreen ) {
+ document.mozCancelFullScreen();
+ } else if ( document.webkitExitFullscreen ) {
+ document.webkitExitFullscreen();
+ }
+ }
+ }
+
+ return FullscreenView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/indicatorview.js b/scripts/views/indicatorview.js
new file mode 100644
index 0000000..071862b
--- /dev/null
+++ b/scripts/views/indicatorview.js
@@ -0,0 +1,128 @@
+/*global define*/
+define(
+ [ 'util/el', 'util/localizetext' ],
+ function ( elHelper, loc ) {
+ // the indiecator view diesplays errors and warnings in the top right
+ // corner. they disappear after a while. the user can also click
+ // on them to make them go away
+ function IndicatorView ( parentEl ) {
+ if ( ! ( this instanceof IndicatorView ) ) {
+ return new IndicatorView( parentEl );
+ }
+
+ var self = this;
+ var addQueue = [ ];
+ var removeQueue = [ ];
+ var visibleNotificationCount = 0;
+ var isAdding = false;
+
+ var timeToFadeOut = {
+ message: 3500,
+ error: 6000,
+ welcome: 7000
+ };
+
+ var notificationsEl = elHelper.createEl( 'div', 'notifications', parentEl );
+
+ function showWelcome ( message, data, fadeOutDelay ) {
+ showNotification( 'welcome', message, data, fadeOutDelay );
+ }
+
+ function showMessage ( message, data ) {
+ showNotification( 'message', message, data );
+ }
+
+ function showError ( message, data ) {
+ showNotification( 'error', message, data );
+ }
+
+ function showNotification ( type, message, data, fadeOutDelay ) {
+ fadeOutDelay = fadeOutDelay || timeToFadeOut[type] || 7000;
+
+ if ( isAdding ) {
+ addQueue.push( { type: type, message: message, data: data, fadeOutDelay: fadeOutDelay } );
+ } else {
+ addNotification( type, { message: message, data: data, fadeOutDelay: fadeOutDelay } );
+ }
+ }
+
+ function addNotification ( type, params ) {
+ var notificationEl = elHelper.createEl( 'div', 'notification notification-' + type, notificationsEl );
+
+ if ( params.data && params.data.innerHTML && params.data.args && params.data.args.length ) {
+ loc.apply( null, [ notificationEl, 'innerHTML', params.message ].concat( params.data.args ) );
+ } else {
+ loc( notificationEl, 'textContent', params.message );
+ }
+
+ notificationEl.id = 'notification-' + Date.now();
+ notificationEl.addEventListener( 'click', notificationClicked );
+
+ notificationsEl.classList.add( 'is-active' );
+
+ isAdding = true;
+
+ requestAnimationFrame( function () {
+ notificationEl.classList.add( 'is-active' );
+ notificationEl.classList.add( 'is-visible' );
+ visibleNotificationCount++;
+ } );
+
+ setTimeout( function () {
+ isAdding = false;
+ addMessagesFromQueue();
+ }, 400 );
+
+ setTimeout( function () {
+ removeNotification( notificationEl );
+ }, params.fadeOutDelay );
+ }
+
+ function addMessagesFromQueue () {
+ if ( addQueue.length && visibleNotificationCount < 4 ) {
+ var nextMessage = addQueue.shift();
+ addNotification( nextMessage.type, { message: nextMessage.message, data: nextMessage.data } );
+ }
+ }
+
+ function removeNotification ( notificationEl ) {
+ if ( removeQueue.indexOf( notificationEl.id ) === -1 ) {
+ removeQueue.push( notificationEl.id );
+
+ requestAnimationFrame( function () {
+ notificationEl.classList.remove( 'is-active' );
+ } );
+
+ setTimeout( function () {
+ requestAnimationFrame( function () {
+ removeQueue.splice( removeQueue.indexOf( notificationEl.id ), 1 );
+
+ notificationsEl.removeChild( notificationEl );
+ visibleNotificationCount--;
+ addMessagesFromQueue();
+
+ if ( ! notificationsEl.children.length ) {
+ notificationsEl.classList.remove( 'is-active' );
+ }
+ } );
+ }, 500 );
+ }
+ }
+
+ function notificationClicked ( event ) {
+ if (
+ event.target.classList.contains( 'notification' ) &&
+ ! event.target.classList.contains( 'notification-error' )
+ ) {
+ removeNotification( event.target );
+ }
+ }
+
+ self.showMessage = showMessage;
+ self.showError = showError;
+ self.showWelcome = showWelcome;
+ }
+
+ return IndicatorView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/navview.js b/scripts/views/navview.js
new file mode 100644
index 0000000..71340de
--- /dev/null
+++ b/scripts/views/navview.js
@@ -0,0 +1,277 @@
+/*global define*/
+define(
+ [ 'util/el', 'util/dom', 'views/dialog', 'util/addpublishers', 'util/math', 'util/localizetext' ],
+ function ( elHelper, domHelper, Dialog, addPublishers, mathHelpers, loc ) {
+ function NavView ( parentEl ) {
+ if ( ! ( this instanceof NavView ) ) {
+ return new NavView( parentEl );
+ }
+
+ var isActive = false;
+ var self = this;
+ var el = elHelper.createEl( 'nav', 'nav color-bg', parentEl );
+ var publishers = addPublishers( self, 'togglestart', 'toggleend' );
+
+ var buttonTextEl = elHelper.createEl( 'span', 'nav-toggle-button-text' )
+ loc( buttonTextEl, 'textContent', 'nav.menu' );
+ loc( buttonTextEl, 'title', 'nav.menutitle' );
+
+ var buttonSVGWrapperEl = document.createElement( 'div' );
+ buttonSVGWrapperEl.classList.add( 'svg-wrapper' );
+
+ var svgEl = document.getElementById( 'svg' );
+ svgEl.setAttribute( 'viewBox', '0 0 24 24' );
+
+ buttonSVGWrapperEl.appendChild( svgEl );
+
+ var svgGroupEl = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
+ svgGroupEl.setAttribute( 'id', 'menu' );
+ svgGroupEl.setAttributeNS( null, 'fill', '#000' );
+ svgEl.appendChild( svgGroupEl );
+
+ var svgRect1El = elHelper.createEl( 'rect', null, svgGroupEl );
+ svgRect1El.setAttribute( 'id', 'rect-1' );
+ svgRect1El.setAttributeNS( null, 'x', '3' );
+ svgRect1El.setAttributeNS( null, 'y', '6' );
+ svgRect1El.setAttributeNS( null, 'width', '18' );
+ svgRect1El.setAttributeNS( null, 'height', '2' );
+
+ var svgRect2El = elHelper.createEl( 'rect', null, svgGroupEl );
+ svgRect2El.setAttributeNS( null, 'id', 'rect-2' );
+ svgRect2El.setAttributeNS( null, 'x', '3' );
+ svgRect2El.setAttributeNS( null, 'y', '11' );
+ svgRect2El.setAttributeNS( null, 'width', '18' );
+ svgRect2El.setAttributeNS( null, 'height', '2' );
+
+ var svgRect3El = elHelper.createEl( 'rect', null, svgGroupEl );
+ svgRect3El.setAttributeNS( null, 'id', 'rect-3' );
+ svgRect3El.setAttributeNS( null, 'x', '3' );
+ svgRect3El.setAttributeNS( null, 'y', '16' );
+ svgRect3El.setAttributeNS( null, 'width', '18' );
+ svgRect3El.setAttributeNS( null, 'height', '2' );
+
+ buttonSVGWrapperEl.appendChild( svgEl );
+
+ var buttonEl = elHelper.createButton( buttonTextEl, 'nav.menutitle', 'nav-toggle-button', parentEl );
+ buttonEl.appendChild( buttonSVGWrapperEl );
+ buttonEl.addEventListener( 'click', toggle, false );
+
+ var headlineEl = elHelper.createEl( 'h1', 'nav-headline', el );
+ headlineEl.textContent = document.title;
+
+ var navBreakPoint = 600;
+ var navWidth = 300;
+ var navTouchPadding = 60;
+ var isSwiping = false;
+ var touchStartPos = { x: 0, y: 0 };
+ var touchPos = { x: 0, y: 0 };
+ var touchId = 0;
+ var translateX = -navWidth;
+ var i = 0, len = 0;
+ var touch;
+
+ parentEl.addEventListener( 'touchstart', touchStarted );
+
+ function toggle () {
+ if ( ! isActive ) {
+ activate()
+ } else {
+ deactivate()
+ }
+ }
+
+ function activate () {
+ isActive = true;
+
+ requestAnimationFrame( function () {
+ el.classList.add( 'is-active' );
+ buttonEl.classList.add( 'is-active' );
+ } );
+
+ publishers.togglestart.dispatch( true );
+
+ setTimeout( function () {
+ publishers.toggleend.dispatch( true );
+ }, 300 );
+ }
+
+ function deactivate () {
+ isActive = false;
+ Dialog.closeAll();
+
+ requestAnimationFrame( function () {
+ el.classList.remove( 'is-active' );
+ buttonEl.classList.remove( 'is-active' );
+ } );
+
+ publishers.togglestart.dispatch( false );
+
+ setTimeout( function () {
+ publishers.toggleend.dispatch( false );
+ }, 300 );
+ }
+
+ function closeSmallScreenNav () {
+ if ( window.innerWidth <= navBreakPoint ) {
+ deactivate();
+ }
+ }
+
+ function swipeStarted ( x, y, identifier ) {
+ if ( ! isSwiping ) {
+ parentEl.addEventListener( 'touchmove', touchMoved );
+ parentEl.addEventListener( 'touchend', touchEnded );
+
+ isSwiping = true;
+ touchIdentifier = identifier;
+ touchStartPos.x = x;
+ touchStartPos.y = y;
+ touchPos.x = x;
+ touchPos.y = y;
+
+ requestAnimationFrame( function () {
+ el.classList.add( 'is-swiping' );
+ buttonEl.classList.add( 'is-swiping' );
+ } );
+ }
+ }
+
+ function swipeStopped () {
+ if ( isSwiping ) {
+ parentEl.removeEventListener( 'touchmove', touchMoved );
+ parentEl.addEventListener( 'touchend', touchEnded );
+ isSwiping = false;
+
+ requestAnimationFrame( function () {
+ el.classList.remove( 'is-swiping' );
+ buttonEl.classList.remove( 'is-swiping' );
+
+ // remove inline style, so that item can move to
+ // transform values from css file
+ domHelper.setTransform( el, '' );
+ domHelper.setTransform( buttonEl, '' );
+ domHelper.setTransform( svgRect1El, '' );
+ domHelper.setTransform( svgRect2El, '' );
+ domHelper.setTransform( svgRect3El, '' );
+ domHelper.setTransform( svgGroupEl, '' );
+ svgGroupEl.style.fill = '';
+ buttonTextEl.style.width = '';
+ buttonTextEl.style.opacity = '';
+ } );
+
+ var dx = touchPos.x - touchStartPos.x;
+
+ if ( translateX > -navWidth && translateX < 0 && Math.abs( dx ) > 0 ) {
+ if ( translateX < -navWidth / 2 ) {
+ deactivate();
+ } else {
+ activate();
+ }
+ }
+ }
+ }
+
+ function swiped ( x, y, identifier ) {
+ touchPos.x = x;
+ touchPos.y = y;
+
+ var dx = touchPos.x - touchStartPos.x;
+ var wasTranslateUpdated = false;
+
+ if ( isActive ) {
+ if ( dx < 0 && dx >= -navWidth ) {
+ wasTranslateUpdated = true;
+ translateX = Math.round( Math.max( dx, -navWidth ) );
+ } else {
+ swipeStopped();
+ }
+ } else {
+ if ( dx > 0 && dx <= navWidth ) {
+ wasTranslateUpdated = true;
+ translateX = -navWidth + Math.round( Math.min( dx, navWidth ) );
+ } else {
+ swipeStopped();
+ }
+ }
+
+ if ( wasTranslateUpdated ) {
+ requestAnimationFrame( function () {
+ domHelper.setTransform( el, 'translateX(' + translateX + 'px)' );
+
+ var buttonTransform = 'translateX(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, 242 ) + 'px)';
+ domHelper.setTransform( buttonEl, buttonTransform );
+
+ var rect1Transform = [
+ 'rotateZ(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, 45 ) + 'deg)',
+ 'translateY(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, 5.1 ) + 'px)'
+ ].join( ' ' );
+
+ domHelper.setTransform( svgRect1El, rect1Transform );
+
+ domHelper.setTransform( svgRect2El, 'scaleX(' + mathHelpers.mapRange( translateX, -navWidth, 0, 1, 0 ) + ')' );
+
+ var rect3Transform = [
+ 'rotateZ(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, -45 ) + 'deg)',
+ 'translateY(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, -5.1 ) + 'px)'
+ ].join( ' ' );
+
+ domHelper.setTransform( svgRect3El, rect3Transform );
+
+ domHelper.setTransform( svgGroupEl, 'rotateZ(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, -90 ) + 'deg)' );
+ svgGroupEl.style.fill = 'hsl(0, 0%, ' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, 100 ) + '%)';
+
+ buttonTextEl.style.width = mathHelpers.mapRange( translateX, -navWidth, 0, 50, 0 ) + 'px';
+ buttonTextEl.style.opacity = mathHelpers.mapRange( translateX, -navWidth, 0, 1.5, 0, true ).toFixed( 2 );
+ } );
+ }
+ }
+
+ function touchStarted ( event ) {
+ if ( window.innerWidth <= navBreakPoint && ! isSwiping ) {
+ for ( i = 0, len = event.touches.length; i < len; i++ ) {
+ touch = event.touches[i];
+
+ if (
+ ( ! isActive && touch.clientX <= navTouchPadding ) ||
+ ( isActive && touch.clientX <= navTouchPadding + navWidth )
+ ) {
+ swipeStarted( touch.clientX, touch.clientY, touch.identifier );
+ break;
+ }
+ }
+ }
+ }
+
+ function touchMoved ( event ) {
+ if ( event.changedTouches ) {
+ var hasTouch = false;
+
+ for ( i = 0, len = event.touches.length; i < len; i++ ) {
+ touch = event.touches[i];
+
+ if ( touch.identifier === touchIdentifier ) {
+ swiped( touch.clientX, touch.clientY, touch.identifier );
+ hasTouch = true;
+ break;
+ }
+ }
+
+ if ( ! hasTouch ) {
+ swipeStopped();
+ }
+ } else {
+ swipeStopped();
+ }
+ }
+
+ function touchEnded ( event ) {
+ swipeStopped();
+ }
+
+ self.el = el;
+ self.closeSmallScreenNav = closeSmallScreenNav;
+ }
+
+ return NavView;
+ }
+)
\ No newline at end of file
diff --git a/scripts/views/openfileview.js b/scripts/views/openfileview.js
new file mode 100644
index 0000000..5a84768
--- /dev/null
+++ b/scripts/views/openfileview.js
@@ -0,0 +1,234 @@
+/*global define*/
+define(
+ [ 'util/browser', 'util/addpublishers', 'util/el', 'util/time', 'util/localizetext', 'views/dialog' ],
+ function ( browser, addPublishers, elHelper, timeHelper, loc, Dialog ) {
+ function OpenFileView ( parentEl ) {
+ if ( ! ( this instanceof OpenFileView ) ) {
+ return new OpenFileView( parentEl );
+ }
+
+ var self = this;
+ var fileOpenEl;
+ var storageListEl;
+ var emptyListEl;
+ var navButtonEl;
+ var dialog;
+
+ var publishers = addPublishers( self, 'openfile', 'deletefromlocalstorage', 'openfromlocalstorage', 'deletefromimgur' );
+
+ // check if the browser supports the filereader API
+ // before displaying upload button
+ if ( browser.getFeature( window, 'FileReader' ) ) {
+ navButtonEl = elHelper.createButton( 'file.open', 'file.opentitle', 'open-button nav-button', parentEl );
+ dialog = Dialog( 'open-file-dialog', parentEl, navButtonEl );
+
+ var fileLabelEl = elHelper.createLabel( 'file.importtitle', 'input-file', 'file-label label' );
+
+ fileInputEl = document.createElement( 'input' );
+ fileInputEl.classList.add( 'file-input' );
+ fileInputEl.type = 'file';
+ fileInputEl.id = 'input-file';
+ fileInputEl.accept = 'image/*';
+
+ fileInputEl.addEventListener( 'change', fileSelected );
+
+ var fileLabelButtonEl = elHelper.createLabel( 'file.import', 'input-file', 'file-button button' );
+
+ dialog.add( fileLabelEl, fileInputEl, fileLabelButtonEl );
+
+ self.fileinput = fileInputEl;
+ }
+
+ if ( browser.test( 'localforage' ) ) {
+ storageListEl = elHelper.createEl( 'ul', 'storage-list dialog-list' );
+
+ var storageLabelEl = elHelper.createLabel( 'file.recent', 'file.recenttitle', 'load-label label' );
+
+ dialog.add( storageLabelEl, storageListEl );
+ }
+
+ function fileSelected ( event ) {
+ if (
+ event.target &&
+ event.target.files &&
+ event.target.files[0]
+ ) {
+ publishers.openfile.dispatch( event.target.files[0] );
+ }
+ }
+
+ // compare all items in the list with what's in localstorage
+ // and add, remove and edit them accordingly,
+ // including images shared on imgur
+ function updateList ( entries ) {
+ if ( storageListEl ) {
+ if ( entries && Object.keys( entries ).length ) {
+ if ( emptyListEl ) {
+ removeListItem( emptyListEl );
+ emptyListEl = null;
+ }
+
+ var storageListItemEl;
+ var offlineLinkEl;
+
+ for ( var uid in entries ) {
+ storageListItemEl = storageListEl.querySelector( '[data-uid="' + uid + '"]' );
+
+ updateListItem( storageListItemEl, uid, entries[uid] );
+ }
+
+ var storageListItemEls = storageListEl.querySelectorAll( '[data-uid]' );
+
+ for ( var i = 0, len = storageListItemEls.length; i < len; i++ ) {
+ var itemUid = storageListItemEls[i].getAttribute( 'data-uid' );
+
+ if ( itemUid && ! entries[itemUid] ) {
+ removeListItem( storageListItemEls[i] );
+ }
+ }
+
+ } else {
+ // no entries but there are still elements in dom
+ if ( entries && Object.keys( entries ).length === 0 ) {
+ var storageListItemEls = storageListEl.querySelectorAll( '[data-uid]' );
+
+ for ( var i = 0, len = storageListItemEls.length; i < len; i++ ) {
+ removeListItem( storageListItemEls[i] );
+ }
+ }
+
+ if ( ! emptyListEl ) {
+ emptyListEl = elHelper.createEl( 'li', 'no-items' );
+ loc( emptyListEl, 'textContent', 'file.norecent' );
+ storageListEl.appendChild( emptyListEl );
+ }
+ }
+ }
+
+ return self;
+ }
+
+ function updateListItem ( listItemEl, uid, entry ) {
+ if ( entry.src && entry.values && ! listItemEl ) {
+ addListItem( uid, entry );
+ } else {
+ if ( listItemEl ) {
+ if ( ! entry.src && ! entry.values ) {
+ removeListItem( listItemEl );
+ } else {
+ var offlineLinkEl = listItemEl.querySelector( '.entry-shared-button-wrapper' );
+
+ if ( ! entry.deleteHash && offlineLinkEl ) {
+ offlineLinkEl.parentNode.removeChild( offlineLinkEl );
+ listItemEl.classList.remove( 'has-offline-button' );
+ }
+
+ // add link el to open item online instead
+ if ( entry.deleteHash && ! offlineLinkEl ) {
+ addOnlineButtons( listItemEl, entry.deleteHash, entry.publicUrl, uid );
+ }
+ }
+ }
+ }
+ }
+
+ function addListItem ( uid, entry ) {
+ if ( entry ) {
+ var date = timeHelper.timestampToDate( entry.timestamp );
+
+ var listItemEl = elHelper.createEl( 'li', 'entry clear dialog-list-item', storageListEl );
+ listItemEl.setAttribute( 'data-uid', uid );
+
+ var listItemThumbnailEl = elHelper.createEl( 'img', 'entry-thumb', listItemEl );
+ listItemThumbnailEl.src = entry.thumbnail;
+ listItemThumbnailEl.addEventListener( 'click', loadItemFn( uid ) );
+
+ var textWrapperEl = elHelper.createEl( 'p', 'entry-text', listItemEl );
+
+ var listItemNameEl = elHelper.createEl( 'p', 'entry-name', textWrapperEl );
+
+ if ( entry.name ) {
+ listItemNameEl.textContent = entry.name;
+ } else {
+ loc( listItemNameEl, 'textContent', 'file.untitled' );
+ }
+
+ var listItemDateEl = elHelper.createEl( 'time', 'entry-datetime', textWrapperEl );
+ listItemDateEl.setAttribute( 'datetime', date.toISOString() );
+
+ var dateEl = elHelper.createEl( 'span', 'entry-date', listItemDateEl );
+ dateEl.textContent = timeHelper.dateToLocalStr( date );
+
+ var timeEl = elHelper.createEl( 'span', 'entry-time', listItemDateEl );
+ timeEl.textContent = timeHelper.timeToLocalStr( date );
+
+ var buttonWrapperEl = elHelper.createEl( 'div', 'entry-button-wrapper', listItemEl );
+
+ elHelper.createButton( 'file.del', 'file.deltitle', 'item-delete-button button', buttonWrapperEl, removeItemFn( uid ) );
+ elHelper.createButton( 'file.openimage', 'file.openimagetitle', 'item-load-button button', buttonWrapperEl, loadItemFn( uid ) );
+
+ if ( entry.deleteHash && entry.publicUrl ) {
+ addOnlineButtons( listItemEl, entry.deleteHash, entry.publicUrl, uid );
+ }
+ }
+ }
+
+ function addOnlineButtons ( listEl, deleteHash, publicUrl, uid ) {
+ var sharedButtonWrapperEl = elHelper.createEl( 'div', 'entry-shared-button-wrapper is-online-only', listEl );
+
+ listEl.classList.add( 'has-offline-button' );
+
+ elHelper.createButton(
+ 'file.offline',
+ 'file.offlinetitle',
+ 'item-offline-button button',
+ sharedButtonWrapperEl,
+ removeItemFromImgurFn( uid, deleteHash )
+ );
+
+ elHelper.createLink(
+ 'file.openlink',
+ 'file.openlinktitle',
+ publicUrl,
+ '_blank',
+ 'entry-shared-link button',
+ sharedButtonWrapperEl
+ );
+ }
+
+ function removeListItem ( itemEl ) {
+ itemEl.parentNode.removeChild( itemEl );
+ }
+
+ function removeItemFn ( uid ) {
+ return function () {
+ publishers.deletefromlocalstorage.dispatch( uid );
+ }
+ }
+
+ function removeItemFromImgurFn ( uid, deleteHash ) {
+ return function () {
+ var buttonEl = storageListEl.querySelector( '[data-uid="' + uid + '"] .item-offline-button' );
+
+ if ( buttonEl ) {
+ buttonEl.setAttribute( 'disabled', 'disabled' );
+ }
+
+ publishers.deletefromimgur.dispatch( uid, deleteHash );
+ }
+ }
+
+ function loadItemFn ( uid ) {
+ return function () {
+ dialog.hide();
+ publishers.openfromlocalstorage.dispatch( uid );
+ }
+ }
+
+ self.updateList = updateList;
+ self.dialog = dialog;
+ }
+
+ return OpenFileView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/panzoom.js b/scripts/views/panzoom.js
new file mode 100644
index 0000000..d9dd6b9
--- /dev/null
+++ b/scripts/views/panzoom.js
@@ -0,0 +1,371 @@
+/*global define*/
+// most of this was shamelessly taken from @jakearchibald's svgomg ui:
+// https://github.com/jakearchibald/svgomg/blob/master/src/js/page/ui/pan-zoom.js
+define(
+ [ 'util/css', 'util/dom', 'util/addpublishers' ],
+ function ( cssHelper, domHelper, addPublishers ) {
+ function getXY ( obj ) {
+ return {
+ x: obj.pageX,
+ y: obj.pageY
+ };
+ }
+
+ function touchDistance ( touch1, touch2 ) {
+ var x = Math.abs( touch2.x - touch1.x );
+ var y = Math.abs( touch2.y - touch1.y );
+ return Math.sqrt( x * x + y * y );
+ }
+
+ function getMidpoint ( point1, point2 ) {
+ return {
+ x: ( point1.x + point2.x ) / 2,
+ y: ( point1.y + point2.y ) / 2
+ };
+ }
+
+ function getPoints ( event ) {
+ if ( event.touches ) {
+ return Array.prototype.map.call( event.touches, getXY );
+ } else {
+ return [ getXY( event ) ];
+ }
+ }
+
+ function PanZoom ( containerEl, targetEl, opts ) {
+ if ( ! ( this instanceof PanZoom ) ) {
+ return new PanZoom ( targetEl, containerEl, opts );
+ }
+
+ var self = this;
+ var canZoomWithPonter = true;
+ var publishers = addPublishers( self, 'scale' );
+ opts = opts || { }
+
+ var shouldCaptureFn = opts.shouldCaptureFn || function ( el ) { return true; };
+ var limitToContainer = typeof opts.limitToContainer === 'boolean' ? opts.limitToContainer : true;
+ var limitPadding = opts.limitPadding || 50;
+
+ var matrix = cssHelper.getCSSMatrix( targetEl );
+ var transform = cssHelper.cssMatrixToTransformObj( matrix );
+
+ var x = transform.translateX || 0;
+ var y = transform.translateY || 0;
+ var scale = 1;
+ var active = 0;
+ var lastPoints = [ ];
+ var containerBounds;
+ var updateAnimationFrameId = NaN;
+ var scaleAnimationFrameId = NaN;
+ var centerAnimationFrameId = NaN;
+ var resizeTimeoutId = NaN;
+ var targetElSize = { width: 100, height: 100 };
+ var containerElSize = { width: 100, height: 100 };
+ var centerScale = 1;
+
+ containerEl.addEventListener( 'mousedown', pointerPressed );
+ containerEl.addEventListener( 'touchstart', pointerPressed );
+ containerEl.addEventListener( 'wheel', wheelTurned );
+
+ window.addEventListener( 'resize', resized );
+
+ targetEl.style.WebkitTransformOrigin = targetEl.style.transformOrigin = '0 0';
+
+ updateContainerBounds();
+
+ function reset () {
+ // x = transform.translateX || 0;
+ // y = transform.translateY || 0;
+
+ updateValues ( transform.translateX || 0, transform.translateY || 0, 1 );
+ }
+
+ function updateValues ( newX, newY, newScale, targetBounds ) {
+ cancelAnimationFrame( updateAnimationFrameId );
+
+ if ( limitToContainer && targetEl !== containerEl && containerBounds ) {
+ targetBounds = targetBounds || targetEl.getBoundingClientRect();
+
+ if ( newX !== x || newY !== y || newScale !== scale ) {
+ var scaleDelta = 1 / ( scale / newScale );
+
+ if ( newX + targetBounds.width * scaleDelta < limitPadding ) {
+ newX = limitPadding - targetBounds.width * scaleDelta;
+ }
+
+ if ( newX > containerBounds.width - limitPadding ) {
+ newX = containerBounds.width - limitPadding;
+ }
+
+ if ( newY + targetBounds.height * scaleDelta < limitPadding ) {
+ newY = limitPadding - targetBounds.height * scaleDelta;
+ }
+
+ if ( newY > containerBounds.height - limitPadding ) {
+ newY = containerBounds.height - limitPadding;
+ }
+ }
+ }
+
+ newScale = Math.min( 5, Math.max( 0.01, newScale ) );
+
+ if ( scale === newScale && newScale === 5 ) {
+ return;
+ }
+
+ x = newX;
+ y = newY;
+ scale = newScale
+
+ publishers.scale.dispatch( scale );
+
+ updateAnimationFrameId = requestAnimationFrame( update );
+ }
+
+ function update () {
+ targetEl.style.WebkitTransform = targetEl.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
+ }
+
+ function wheelTurned ( event ) {
+ if ( ! shouldCaptureFn( event.target ) ) { return; }
+ if ( ! canZoomWithPonter ) { return; }
+ event.preventDefault();
+
+ var targetBounds = targetEl.getBoundingClientRect();
+ var delta = event.deltaY;
+
+ if ( event.deltaMode === 1 ) { // 1 is "lines", 0 is "pixels"
+ // Firefox uses "lines" when mouse is connected
+ delta *= 15;
+ }
+
+ // stop mouse wheel producing huge values
+ delta = Math.max( Math.min( delta, 60 ), -60 );
+
+ var scaleDiff = ( delta / 300 ) + 1;
+
+ // avoid to-small values
+ if ( scale * scaleDiff < 0.05 ) { return; }
+
+ updateValues(
+ x - ( event.pageX - targetBounds.left ) * ( scaleDiff - 1 ),
+ y - ( event.pageY - targetBounds.top ) * ( scaleDiff - 1 ),
+ scale * scaleDiff,
+ targetBounds
+ );
+ }
+
+ function firstPointerPressed ( event ) {
+ document.addEventListener( 'mousemove', pointerMoved );
+ document.addEventListener( 'mouseup', pointerReleased );
+ document.addEventListener( 'touchmove', pointerMoved );
+ document.addEventListener( 'touchend', pointerReleased );
+ }
+
+ function pointerPressed ( event ) {
+ if ( event.type == 'mousedown' && event.which != 1 ) {
+ return;
+ }
+
+ if ( ! shouldCaptureFn( event.target ) ) {
+ return;
+ }
+
+ if ( domHelper.isDescendant( containerEl, event.target ) ) {
+ event.preventDefault();
+
+ lastPoints = getPoints( event );
+ active++;
+
+ if ( active === 1 ) {
+ firstPointerPressed( event );
+ }
+ }
+ }
+
+ function pointerMoved ( event ) {
+ if ( event && event.target && domHelper.isDescendant( containerEl, event.target ) ) {
+ event.preventDefault();
+
+ var points = getPoints( event );
+ var averagePoint = points.reduce( getMidpoint );
+ var averageLastPoint = lastPoints.reduce( getMidpoint );
+ var targetBounds = targetEl.getBoundingClientRect();
+
+ var tmpX = x + averagePoint.x - averageLastPoint.x;
+ var tmpY = y + averagePoint.y - averageLastPoint.y;
+
+ if ( points[1] ) {
+ if ( ! canZoomWithPonter ) { return; }
+ var scaleDiff = touchDistance( points[0], points[1] ) / touchDistance( lastPoints[0], lastPoints[1] );
+
+ updateValues(
+ tmpX - ( averagePoint.x - targetBounds.left ) * ( scaleDiff - 1 ),
+ tmpY - ( averagePoint.y - targetBounds.top ) * ( scaleDiff - 1 ),
+ scale * scaleDiff,
+ targetBounds
+ );
+ } else {
+ updateValues( tmpX, tmpY, scale );
+ }
+
+ lastPoints = points;
+ }
+ }
+
+ function pointerReleased ( event ) {
+ event.preventDefault();
+ active--;
+ lastPoints.pop();
+
+ if ( active ) {
+ lastPoints = getPoints( event );
+ return;
+ }
+
+ document.removeEventListener( 'mousemove', pointerMoved );
+ document.removeEventListener( 'mouseup', pointerReleased );
+ document.removeEventListener( 'touchmove', pointerMoved );
+ document.removeEventListener( 'touchend', pointerReleased );
+ }
+
+ function updateContainerBounds () {
+ containerElSize = {
+ width: containerEl.clientWidth,
+ height: containerEl.clientHeight
+ }
+
+ targetElSize = {
+ width: targetEl.clientWidth,
+ height: targetEl.clientHeight
+ };
+
+ containerBounds = containerEl.getBoundingClientRect();
+ updateValues( x, y, scale );
+ }
+
+ function resized () {
+ clearTimeout( resizeTimeoutId );
+
+ resizeTimeoutId = setTimeout( function () {
+ updateContainerBounds();
+
+ if ( Math.abs( scale - centerScale ) <= 0.01 ) {
+ animateToCenter();
+ }
+ }, 100 );
+ }
+
+ function setToCenter () {
+ var centerValues = getCenterValues();
+ updateValues ( centerValues.x, centerValues.y, centerValues.scale );
+
+ return self;
+ }
+
+ function animateToCenter () {
+ var deltaX = 0;
+ var deltaY = 0;
+ var deltaScale = 0;
+ var easing = 0.1;
+ var centerValues = getCenterValues();
+
+ centerScale = centerValues.scale;
+
+ cancelAnimationFrame( scaleAnimationFrameId );
+ cancelAnimationFrame( centerAnimationFrameId );
+
+ function centerAnimationStep () {
+ deltaX = centerValues.x - x;
+ deltaY = centerValues.y - y;
+ deltaScale = centerValues.scale - scale;
+
+ if (
+ Math.abs( deltaX ) > 1 ||
+ Math.abs( deltaY ) > 1 ||
+ Math.abs( deltaScale ) > 0.01
+ ) {
+ updateValues( x + deltaX * easing, y + deltaY * easing, scale + deltaScale * easing );
+
+ centerAnimationFrameId = requestAnimationFrame( centerAnimationStep );
+ } else {
+ updateValues( centerValues.x, centerValues.y, centerValues.scale );
+ }
+ }
+
+ centerAnimationFrameId = requestAnimationFrame( centerAnimationStep );
+
+ return self;
+ }
+
+ function settingUpdated ( key, value ) {
+ if ( key === 'canZoomWithPointer' && typeof value === 'boolean' ){
+ canZoomWithPonter = value;
+ }
+ }
+
+ function setScale ( newScale ) {
+ var targetX = ( containerElSize.width - targetElSize.width * newScale ) / 2;
+ var targetY = ( containerElSize.height - targetElSize.height * newScale ) / 2;
+ var deltaX = 0;
+ var deltaY = 0;
+ var deltaScale = 0;
+ var easing = 0.2;
+
+ cancelAnimationFrame( scaleAnimationFrameId );
+ cancelAnimationFrame( centerAnimationFrameId );
+
+ function scaleAnimationStep () {
+ deltaX = targetX - x;
+ deltaY = targetY - y;
+ deltaScale = newScale - scale;
+
+ if (
+ Math.abs( deltaX ) > 1 ||
+ Math.abs( deltaY ) > 1 ||
+ Math.abs( deltaScale ) > 0.01
+ ) {
+ updateValues( x + deltaX * easing, y + deltaY * easing, scale + deltaScale * easing );
+
+ scaleAnimationFrameId = requestAnimationFrame( scaleAnimationStep );
+ } else {
+ updateValues( targetX, targetY, newScale );
+ }
+ }
+
+ scaleAnimationStep();
+
+ return self;
+ }
+
+ function getCenterValues () {
+ updateContainerBounds();
+
+ var targetScale = 1;
+
+ if ( targetElSize.width > containerElSize.width || targetElSize.height > containerElSize.height ) {
+ targetScale = Math.min(
+ containerElSize.width / targetElSize.width,
+ ( containerElSize.height - 80 ) / targetElSize.height
+ );
+ }
+
+ return {
+ x: ( containerElSize.width - targetElSize.width * targetScale ) / 2,
+ y: ( containerElSize.height - targetElSize.height * targetScale ) / 2,
+ scale: targetScale
+ };
+ }
+
+ this.updateContainerBounds = updateContainerBounds;
+ this.reset = reset;
+ this.setToCenter = setToCenter;
+ this.animateToCenter = animateToCenter;
+ this.setScale = setScale;
+ this.settingUpdated = settingUpdated;
+ this.resized = resized;
+ }
+
+ return PanZoom;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/saveview.js b/scripts/views/saveview.js
new file mode 100644
index 0000000..8ee45d9
--- /dev/null
+++ b/scripts/views/saveview.js
@@ -0,0 +1,87 @@
+/*global define*/
+define(
+ [ 'util/el', 'util/addpublishers', 'util/browser', 'views/dialog', 'util/time' ],
+ function ( elHelper, addPublishers, browser, Dialog, timeHelper ) {
+ function SaveView ( parentEl ) {
+ if ( ! ( this instanceof SaveView ) ) {
+ return new SaveView( parentEl );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'savetolocalstorage', 'show' );
+
+ var saveButtonEl;
+ var navButtonEl;
+ var dialog;
+ var downloadLinkEl;
+ var date;
+ var fileId;
+ var isActive = false;
+
+ if ( browser.test( 'localforage' ) ) {
+ navButtonEl = elHelper.createButton( 'file.saveinbrowser', 'file.saveinbrowsertitle', 'nav-button save-view-button', parentEl );
+
+ dialog = Dialog( 'save-dialog', parentEl, navButtonEl );
+
+ downloadLinkEl = elHelper.createLink(
+ 'file.download',
+ 'file.downloadtitle',
+ null, null,
+ 'download-link button'
+ );
+
+ downloadLinkEl.target = '_blank';
+
+ saveButtonEl = elHelper.createButton( 'file.save', 'file.savetitle', 'save-button button', null, saveButtonClicked )
+
+ dialog
+ .on( 'show', activate )
+ .on( 'hide', deactivate )
+ .add( saveButtonEl, downloadLinkEl );
+ }
+
+ function saveButtonClicked ( event ) {
+ dialog.toggle();
+ publishers.savetolocalstorage.dispatch();
+ }
+
+ // the href attribute of the download link is updated every time
+ // we change a parameter
+ function updateDownloadLink ( newUrl, fileName ) {
+ fileName = fileName || 'glitched';
+
+ var newNameParts = fileName.split( '/' );
+ var newName = newNameParts.length > 1 ? newNameParts.pop() : newNameParts[0];
+ newName = newName.split( '.' ).shift();
+
+ date = new Date();
+ fileId = timeHelper.dateTimeToLocalStr( date );
+ var newFileName = ( newName + '-glitched-' + fileId + '.png' )
+ newFileName = newFileName.replace( /(\s|\/|:)/gmi, '-' );
+
+ // setting the download attribute makes the browser
+ // download the link target instead of opening it
+ downloadLinkEl.setAttribute( 'download', newFileName );
+ downloadLinkEl.href = newUrl;
+ }
+
+ function activate () {
+ isActive = true;
+ publishers.show.dispatch();
+ }
+
+ function deactivate () {
+ isActive = false;
+ }
+
+ function getActive () {
+ return isActive;
+ }
+
+ self.updateDownloadLink = updateDownloadLink;
+ self.getActive = getActive;
+ }
+
+ return SaveView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/settingsview.js b/scripts/views/settingsview.js
new file mode 100644
index 0000000..174b59c
--- /dev/null
+++ b/scripts/views/settingsview.js
@@ -0,0 +1,130 @@
+/*global define*/
+define(
+ [ 'util/el', 'views/dialog', 'util/addpublishers', 'util/localizetext' ],
+ function ( elHelper, Dialog, addPublishers, loc ) {
+ function SettingsView ( parentEl ) {
+ if ( ! ( this instanceof SettingsView ) ) {
+ return new SettingsView ( parentEl );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'settingchange' );
+
+ var buttonEl = elHelper.createButton( 'settings.settings', 'settings.settingstitle', 'nav-button settings-button', parentEl );
+ var dialog = Dialog( 'settings-dialog', parentEl, buttonEl );
+ var animationFrameIds = { };
+
+ function addSetting ( name, value, options ) {
+ if ( ! dialog.el.querySelector( '#setting-' + name ) ) {
+ if ( name === 'language' ) {
+ dialog.add( 'is-online-only', makeSettingEl( name, value, options ) );
+ } else {
+ dialog.add( makeSettingEl( name, value, options ) );
+ }
+ }
+ }
+
+ function makeSettingEl ( name, value, options ) {
+ var wrapperEl = elHelper.createEl( 'div', 'setting' );
+ var labelEl = elHelper.createLabel( 'settings.' + name.toLowerCase(), 'setting-' + name, 'setting-label', wrapperEl );
+ var inputEl;
+
+ if ( options ) {
+ if ( Array.isArray( options ) ) {
+ inputEl = elHelper.createEl( 'select', 'setting-input setting-select', wrapperEl );
+
+ var optionEl;
+
+ options.forEach( function ( option ) {
+ optionEl = elHelper.createEl( 'option', null, inputEl );
+ optionEl.value = option;
+
+ loc( optionEl, 'textContent', 'settings.' + name + 'options.' + option );
+
+ if ( option === value ) {
+ optionEl.selected = true
+ }
+ } );
+ }
+ } else {
+ if ( typeof value === 'boolean' ) {
+ inputEl = elHelper.createEl( 'input', 'setting-input setting-checkbox', wrapperEl );
+ inputEl.type = 'checkbox';
+
+ if ( value === true ) {
+ inputEl.checked = true;
+ }
+ }
+ }
+
+ if ( inputEl ) {
+ inputEl.id = 'setting-' + name;
+ inputEl.setAttribute( 'data-setting', name );
+ inputEl.addEventListener( 'change', settingInputChanged );
+ }
+
+ return wrapperEl;
+ }
+
+ function settingInputChanged ( event ) {
+ var target = event.target;
+
+ if ( event.target.classList.contains( 'setting-input' ) ) {
+ var inputEl = event.target;
+ var settingName = inputEl.getAttribute( 'data-setting' );
+ var inputValue;
+
+ if ( inputEl.classList.contains( 'setting-checkbox' ) ) {
+ inputValue = inputEl.checked;
+ } else {
+ if ( inputEl.classList.contains( 'setting-select' ) ) {
+ inputValue = inputEl.value;
+ }
+ }
+
+ if ( typeof inputValue !== 'undefined' ) {
+ publishers.settingchange.dispatch( settingName, inputValue );
+ }
+ }
+ }
+
+ function settingUpdated ( name, value, options ) {
+ cancelAnimationFrame( animationFrameIds[name] );
+ animationFrameIds[name] = requestAnimationFrame( function () {
+ addSetting( name, value, options );
+
+ var inputEl = dialog.el.querySelector( '.setting-checkbox[data-setting="' + name + '"]' );
+
+ if ( inputEl ) {
+ if ( inputEl.classList.contains( 'setting-checkbox' ) && inputEl.checked !== value ) {
+ inputEl.checked = value;
+ }
+
+ if ( inputEl.classList.contains( 'setting-select' ) && inputEl.value !== value ) {
+ var optionsEls = inputEl.querySelector( 'option' );
+ var optionEl;
+ var optionValue;
+
+ for ( var i = 0, len = optionsEls.length; i < len; i++ ) {
+ optionEl = optionsEls[i];
+ optionValue = optionEl.value;
+
+ if ( optionValue === value && ! optionEl.selected ) {
+ optionEl.selected = true;
+ }
+
+ if ( optionValue !== value && optionEl.selected ) {
+ optionEl.selected = false;
+ }
+ }
+ }
+ }
+ } );
+ }
+
+ self.settingUpdated = settingUpdated;
+ }
+
+ return SettingsView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/shareview.js b/scripts/views/shareview.js
new file mode 100644
index 0000000..6c4d050
--- /dev/null
+++ b/scripts/views/shareview.js
@@ -0,0 +1,337 @@
+/*global define*/
+define(
+ [ 'util/addpublishers', 'views/dialog', 'util/el', 'util/browser', 'util/time', 'util/localizetext' ],
+ function ( addPublishers, Dialog, elHelper, browser, timeHelper, loc ) {
+ // shareview lets users upload their glitched image to imgur and
+ // share links on social media
+ function ShareView ( parentEl ) {
+ if ( ! ( this instanceof ShareView ) ) {
+ return new ShareView( parentEl );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'share', 'deletefromimgur' );
+ var clearTimeoutId = NaN;
+ var dialog;
+ var canUpload = true;
+
+ // storing some of the UI strings that we'll need a multiple times
+ // later on.
+ var isOnlineCssClass = 'is-online-only';
+ var wasLoadedCssClass = 'was-loaded';
+ var isLoadingCssClass = 'is-loading';
+ var isEmptyCssClass = 'is-empty';
+ var blankTargetStr = '_blank';
+ var disabledAttr = 'disabled';
+
+ var navButtonEl = elHelper.createButton( 'share.share', 'share.sharetitle', 'nav-button share-toggle-button ' + isOnlineCssClass, parentEl );
+
+ var statusEl = elHelper.createEl( 'span', 'upload-status' );
+ loc( statusEl, 'textContent', 'share.uploading' );
+
+ var uploadInfoEl = elHelper.createEl( 'p', 'share-info' );
+ loc( uploadInfoEl, 'innerHTML', 'share.info' );
+
+ var uploadButtonEl = elHelper.createButton( 'share.upload', 'share.uploadtitle', 'upload-button button ' + isOnlineCssClass, null, uploadClicked );
+
+ var imgLinkLabel = elHelper.createLabel( 'share.imagelink', 'img-link-input', 'img-link-label label' );
+ var imgLinkEl = elHelper.createLink( null, 'share.opennewtabtitle', null, blankTargetStr, 'img-link' );
+ imgLinkEl.id = 'img-link-input';
+
+ var imgurLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'imgur-link button' );
+ loc( imgurLinkEl, 'textContent', 'share.openon', 'Imgur' );
+ loc( imgurLinkEl, 'title', 'share.openontitle', 'Imgur' );
+
+ var redditShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'reddit-link button' );
+ loc( redditShareLinkEl, 'textContent', 'share.shareon', 'Reddit' );
+ loc( redditShareLinkEl, 'title', 'share.shareontitle', 'Reddit' );
+
+ var twitterShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'twitter-link button' );
+ loc( twitterShareLinkEl, 'textContent', 'share.shareon', 'Twitter' );
+ loc( twitterShareLinkEl, 'title', 'share.shareontitle', 'Twitter' );
+
+ var facebookShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'facebook-link button' );
+ loc( facebookShareLinkEl, 'textContent', 'share.shareon', 'Facebook' );
+ loc( facebookShareLinkEl, 'title', 'share.shareontitle', 'Facebook' );
+
+ var pinterestShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'pinterest-link button' );
+ loc( pinterestShareLinkEl, 'textContent', 'share.shareon', 'Pinterest' );
+ loc( pinterestShareLinkEl, 'title', 'share.shareontitle', 'Pinterest' );
+
+ var sharedListEl;
+
+ dialog = Dialog( 'share-dialog', parentEl, navButtonEl )
+ .add( isOnlineCssClass, uploadInfoEl )
+ .add( isOnlineCssClass, uploadButtonEl )
+ .add( isOnlineCssClass, 'loader', statusEl )
+ .add( isOnlineCssClass, imgLinkLabel, imgLinkEl )
+ .add( isOnlineCssClass, imgurLinkEl )
+ .add( isOnlineCssClass, redditShareLinkEl )
+ .add( isOnlineCssClass, twitterShareLinkEl )
+ .add( isOnlineCssClass, facebookShareLinkEl )
+ .add( isOnlineCssClass, pinterestShareLinkEl );
+
+ if ( browser.test( 'localforage' ) ) {
+ sharedListEl = elHelper.createEl( 'ul', 'shared-list dialog-list' );
+
+ var storageLabelEl = elHelper.createLabel( 'share.recentlyshared', null, 'load-label label' );
+
+ dialog.add( 'has-list shared-list', storageLabelEl, sharedListEl );
+ }
+
+ function uploadClicked () {
+ if ( canUpload ) {
+ publishers.share.dispatch();
+ hideShareLinks();
+ }
+ }
+
+ function updateShareUrl ( imgUrl, imgId ) {
+ clearTimeout( clearTimeoutId );
+
+ dialog.el.classList.add( 'has-links' );
+ imgLinkEl.textContent = imgUrl;
+ imgLinkEl.href = imgUrl;
+ imgLinkEl.setAttribute( 'data-imgurid', imgId );
+ imgurLinkEl.href = 'https://imgur.com/' + imgId;
+
+ redditShareLinkEl.href = getRedditShareUrl( imgUrl );
+ twitterShareLinkEl.href = getTwitterShareUrl( imgUrl );
+ facebookShareLinkEl.href = getFacebookShareUrl( imgUrl );
+ pinterestShareLinkEl.href = getPinterestShareUrl( imgUrl );
+ }
+
+ function clearShareUrl () {
+ dialog.el.classList.remove( 'has-links' );
+ imgLinkEl.textContent = '';
+ imgLinkEl.href = 'about:blank';
+ redditShareLinkEl.href = 'about:blank';
+ twitterShareLinkEl.href = 'about:blank';
+ facebookShareLinkEl.href = 'about:blank';
+ }
+
+ function showUpload () {
+ dialog.el.classList.add( isLoadingCssClass );
+ }
+
+ function hideUpload () {
+ dialog.el.classList.remove( isLoadingCssClass );
+ }
+
+ function uploadComplete ( imgUrl, imgId, imgDeleteHash ) {
+ updateShareUrl( imgUrl, imgId );
+ showShareLinks();
+ }
+
+ function hideShareLinks ( uid ) {
+ dialog.el.classList.remove( wasLoadedCssClass );
+
+ clearTimeout( clearTimeoutId );
+ clearTimeoutId = setTimeout( clearShareUrl, 400 );
+
+ return self;
+ }
+
+ function showShareLinks () {
+ dialog.el.classList.add( wasLoadedCssClass );
+
+ return self;
+ }
+
+ function showOnlineOptions () {
+ canUpload = true;
+ uploadButtonEl.removeAttribute( disabledAttr );
+
+ return self;
+ }
+
+ function hideOnlineOptions () {
+ canUpload = false;
+ uploadButtonEl.setAttribute( disabledAttr, disabledAttr );
+
+ return self;
+ }
+
+ function updateList ( entries ) {
+ if ( sharedListEl ) {
+ if ( entries && Object.keys( entries ).length ) {
+ var sharedListItemEl;
+
+ for ( var uid in entries ) {
+ sharedListItemEl = sharedListEl.querySelector( '[data-uid="' + uid + '"]' );
+
+ if ( entries[uid].deleteHash && ! sharedListItemEl ) {
+ addListItem( uid, entries[uid] );
+ } else {
+ if ( ! entries[uid].deleteHash && sharedListItemEl ) {
+ removeListItem( sharedListItemEl );
+ }
+ }
+ }
+
+ var sharedListItemEls = sharedListEl.querySelectorAll( '[data-uid]' );
+
+ for ( var i = 0, len = sharedListItemEls.length; i < len; i++ ) {
+ var itemUid = sharedListItemEls[i].getAttribute( 'data-uid' );
+
+ if ( itemUid && ! entries[itemUid] ) {
+ removeListItem( sharedListItemEls[i] );
+ }
+ }
+ }
+
+ if ( hasSharedEntries( entries ) ) {
+ sharedListEl.wrapperEl.classList.remove( isEmptyCssClass );
+ } else {
+ sharedListEl.wrapperEl.classList.add( isEmptyCssClass );
+ }
+ }
+
+ return self;
+ }
+
+ function addListItem ( uid, entry ) {
+ if ( entry ) {
+ var date = timeHelper.timestampToDate( entry.timestamp );
+
+ var listItemEl = elHelper.createEl( 'li', 'entry clear dialog-list-item', sharedListEl );
+ listItemEl.setAttribute( 'data-uid', uid );
+
+ var listItemThumbnailEl = elHelper.createEl( 'img', 'entry-thumb', listItemEl );
+ listItemThumbnailEl.src = entry.thumbnail;
+ listItemThumbnailEl.addEventListener( 'click', loadItemFn( uid ) );
+
+ var textWrapperEl = elHelper.createEl( 'p', 'entry-text', listItemEl );
+
+ var listItemNameEl = elHelper.createEl( 'p', 'entry-name', textWrapperEl );
+
+ if ( entry.name ) {
+ listItemNameEl.textContent = entry.name;;
+ } else {
+ loc( listItemNameEl, 'textContent', 'file.untitled' );
+ }
+
+ var listItemDateEl = elHelper.createEl( 'time', 'entry-datetime', textWrapperEl );
+ listItemDateEl.setAttribute( 'datetime', date.toISOString() );
+
+ var dateEl = elHelper.createEl( 'span', 'entry-date', listItemDateEl );
+ dateEl.textContent = timeHelper.dateToLocalStr( date );
+
+ var timeEl = elHelper.createEl( 'span', 'entry-time', listItemDateEl );
+ timeEl.textContent = timeHelper.timeToLocalStr( date );
+
+ var buttonWrapperEl = elHelper.createEl( 'div', 'entry-button-wrapper', listItemEl );
+
+ elHelper.createLink(
+ 'file.openlink',
+ 'file.openlinktitle',
+ entry.publicUrl,
+ blankTargetStr,
+ 'open-link-button button ' + isOnlineCssClass,
+ buttonWrapperEl
+ );
+
+ elHelper.createButton(
+ 'file.offline',
+ 'file.offlinetitle',
+ 'item-offline-button button ' + isOnlineCssClass,
+ buttonWrapperEl,
+ removeItemFromImgurFn( uid, entry.deleteHash )
+ );
+ }
+ }
+
+ function removeListItem ( itemEl ) {
+ itemEl.parentNode.removeChild( itemEl );
+ }
+
+ function removeItemFromImgurFn ( uid, deleteHash ) {
+ return function () {
+ var buttonEl = sharedListEl.querySelector( '[data-uid="' + uid + '"] .item-offline-button' );
+
+ if ( buttonEl ) {
+ buttonEl.setAttribute( disabledAttr, disabledAttr );
+ }
+
+ publishers.deletefromimgur.dispatch( uid, deleteHash );
+ }
+ }
+
+ function loadItemFn ( uid ) {
+ return function () {
+ dialog.hide();
+ publishers.openfromlocalstorage.dispatch( uid );
+ }
+ }
+
+ function hasSharedEntries ( entries ) {
+ var result = false;
+
+ for ( var uid in entries ) {
+ if ( entries[uid].deleteHash ) {
+ result = true;
+ break;
+ }
+ }
+ return result;
+ }
+
+ function handleError ( message, data ) {
+ if ( data.type === 'imgurremovefail' && data.uid ) {
+ var buttonEl = sharedListEl.querySelector( '[data-uid="' + data.uid + '"] .item-offline-button' );
+
+ if ( buttonEl ) {
+ buttonEl.removeAttribute( disabledAttr );
+ }
+ }
+ }
+
+ function getShareDescription ( imgUrl ) {
+ return 'Check out what I made with @snorpey’s glitch tool: ' + imgUrl + ' https://snorpey.github.io/jpg-glitch';
+ }
+
+ function getTwitterShareUrl ( imgUrl ) {
+ return 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( getShareDescription( imgUrl ) );
+ }
+
+ function getRedditShareUrl ( imgUrl ) {
+ return 'https://www.reddit.com/submit?url=' + encodeURIComponent( imgUrl ) + '&title=Glitch!';
+ }
+
+ // http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
+ function getFacebookShareUrl ( imgUrl ) {
+ var text = 'Check out what I made with this glitch tool: https://snorpey.github.io/jpg-glitch';
+ var shareUrl = 'https://www.facebook.com/sharer/sharer.php?s=100';
+ shareUrl += '&p[url]=' + imgUrl;
+ shareUrl += '&p[title]=Glitch!';
+ shareUrl += '&p[images][0]=' + imgUrl;
+ shareUrl += '&p[summary]=' + encodeURIComponent( text );
+
+ return shareUrl;
+ }
+
+ function getPinterestShareUrl ( imgUrl ) {
+ var text = 'I made this with snorpey\'s glitch tool: https://snorpey.github.io/jpg-glitch';
+ var link = 'https://snorpey.github.io/jpg-glitch';
+ var shareUrl = 'https://pinterest.com/pin/create/button/';
+ shareUrl += '?url=' + encodeURIComponent( link );
+ shareUrl += '&media=' + encodeURIComponent( imgUrl );
+ shareUrl += '&description=' + encodeURIComponent( text );
+
+ return shareUrl;
+ }
+
+ self.showUpload = showUpload;
+ self.hideUpload = hideUpload;
+ self.showShareLinks = showShareLinks;
+ self.hideShareLinks = hideShareLinks;
+ self.uploadComplete = uploadComplete;
+ self.updateList = updateList;
+ self.showOnlineOptions = showOnlineOptions;
+ self.hideOnlineOptions = hideOnlineOptions;
+ self.handleError = handleError;
+ }
+
+ return ShareView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/webcamview.js b/scripts/views/webcamview.js
new file mode 100644
index 0000000..1965518
--- /dev/null
+++ b/scripts/views/webcamview.js
@@ -0,0 +1,133 @@
+/*global define*/
+define(
+ [ 'util/browser', 'util/addpublishers', 'util/el', 'util/dom', 'views/dialog', 'util/mediastream' ],
+ function ( browser, addPublishers, elHelper, domHelper, Dialog ) {
+ // Webcamview: allows to take a picture with the web cam (if supported by the browser)
+ function WebcamView ( parentEl ) {
+ if ( ! ( this instanceof WebcamView ) ) {
+ return new WebcamView( parentEl );
+ }
+
+ var self = this;
+ var isRecording = false;
+ var photoUIEl;
+ var videoEl;
+ var getUserMedia;
+ var stream;
+
+ var camOptions = {
+ video: true
+ };
+
+ var urlLib;
+ var publishers = addPublishers( self, 'video', 'error' );
+ var dialog;
+
+ if ( browser.test( 'getusermedia' ) ) {
+ var toggleButtonEl = elHelper.createButton( 'webcam.webcam', 'webcam.webcamtitle', 'nav-button photo-button', parentEl );
+ var labelEl = elHelper.createLabel( 'webcam.webcamlabel', null, 'webcam-label label' );
+ var videoWrapperEl = elHelper.createEl( 'div', 'video-wrapper' );
+
+ var videoEl = document.createElement( 'video' );
+ videoEl.classList.add( 'cam-video' );
+ videoEl.controls = false;
+ domHelper.setTransform( videoEl, 'scale(-1, 1)' );
+ videoEl.addEventListener( 'click', captureClicked );
+ videoWrapperEl.appendChild( videoEl );
+
+ var triggerButtonEl = elHelper.createButton( 'webcam.trigger', 'webcam.triggertitle', 'cam-trigger-button button', null, captureClicked );
+
+ dialog = Dialog( 'webcam-dialog', parentEl, toggleButtonEl )
+ .add( labelEl, videoWrapperEl, triggerButtonEl )
+ .on( 'show', startVideo )
+ .on( 'hide', closeVideo );
+ }
+
+ function startVideo ( event ) {
+ if ( ! isRecording ) {
+ navigator.getUserMedia( camOptions, gotCamStream, userMediaFailed );
+ }
+ }
+
+ function captureClicked ( event ) {
+ videoWrapperEl.classList.add( 'is-taking-picture' );
+
+ setTimeout( function () {
+ publishers.video.dispatch( videoEl );
+ videoWrapperEl.classList.remove( 'is-taking-picture' );
+ }, 50 );
+ }
+
+ function gotCamStream ( videoStream ) {
+ var itWorked = true;
+
+ if ( videoEl.mozSrcObject !== undefined ) {
+ videoEl.mozSrcObject = videoStream;
+ } else {
+ if ( window.URL ) {
+ videoEl.src = window.URL.createObjectURL( videoStream );
+ } else {
+ itWorked = false;
+ }
+ }
+
+ if ( itWorked ) {
+ dialog.show();
+ videoEl.play();
+ updateVideoSize();
+
+ isRecording = true;
+ stream = videoStream;
+ } else {
+ dialog.hide();
+ publishers.error.dispatch( 'webcam.error.access' );
+ }
+ }
+
+ function userMediaFailed () {
+ if ( stream ) {
+ stopStream();
+ publishers.error.dispatch( 'webcam.error.access' );
+ }
+ }
+
+ function closeVideo () {
+ dialog.hide();
+ stopStream();
+ }
+
+ function stopStream () {
+ if ( stream ) {
+ videoEl.pause();
+
+ if ( videoEl.mozSrcObject ) {
+ videoEl.mozSrcObject = null;
+ }
+
+ if ( videoEl.src ) {
+ videoEl.src = null;
+ videoEl.src = '';
+ }
+
+ if ( stream.stop ) {
+ stream.stop();
+ }
+
+ stream = null;
+ isRecording = false;
+ }
+ }
+
+ function updateVideoSize () {
+ if ( videoEl.videoHeight > 0 ) {
+ videoEl.width = videoEl.videoWidth;
+ videoEl.height = videoEl.videoHeight;
+ } else {
+ setTimeout( updateVideoSize, 100 );
+ }
+ }
+ }
+
+ return WebcamView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/welcomeview.js b/scripts/views/welcomeview.js
new file mode 100644
index 0000000..78d704f
--- /dev/null
+++ b/scripts/views/welcomeview.js
@@ -0,0 +1,36 @@
+/*global define*/
+define(
+ [ 'util/addpublishers' ],
+ function ( addPublishers ) {
+ // all the welcomeView does is
+ // show some welcome messages if the
+ // user is visiting the first time
+ function WelcomeView () {
+ if ( ! ( this instanceof WelcomeView ) ) {
+ return new WelcomeView();
+ }
+
+ var self = this;
+
+ var publishers = addPublishers( self, 'message' );
+
+ function show () {
+ var messages = [
+ 'welcome.firstvisit.0',
+ 'welcome.firstvisit.1',
+ 'welcome.firstvisit.2'
+ ];
+
+ messages.forEach( function ( message, index ) {
+ setTimeout( function () {
+ publishers.message.dispatch( message, 18000 );
+ }, index * 3000 );
+ } );
+ }
+
+ self.show = show;
+ }
+
+ return WelcomeView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/workspacenavview.js b/scripts/views/workspacenavview.js
new file mode 100644
index 0000000..f795dc1
--- /dev/null
+++ b/scripts/views/workspacenavview.js
@@ -0,0 +1,19 @@
+/*global define*/
+define(
+ [ 'util/el' ],
+ function ( elHelper ) {
+ // a container for the workespace nav items
+ function WorkspaceNavView ( parentEl ) {
+ if ( ! ( this instanceof WorkspaceNavView ) ) {
+ return new WorkspaceNavView( parentEl );
+ }
+
+ var self = this;
+ var el = elHelper.createEl( 'nav', 'workspace-nav', parentEl );
+
+ self.el = el;
+ }
+
+ return WorkspaceNavView;
+ }
+);
\ No newline at end of file
diff --git a/scripts/views/workspaceview.js b/scripts/views/workspaceview.js
new file mode 100644
index 0000000..f235fc3
--- /dev/null
+++ b/scripts/views/workspaceview.js
@@ -0,0 +1,26 @@
+/*global define*/
+define(
+ [ 'util/addpublishers' ],
+ function ( addPublishers ) {
+ // the workspaceView is just a wrapper for the
+ // panZoom and the workspaceNav elements
+ function WorkspaceView ( parentEl ) {
+ if ( ! ( this instanceof WorkspaceView ) ) {
+ return new WorkspaceView( parentEl );
+ }
+
+ var self = this;
+ var publishers = addPublishers( self, 'click' );
+
+ var el = document.createElement( 'div' );
+ el.classList.add( 'workspace' );
+ parentEl.appendChild( el );
+
+ el.addEventListener( 'click', publishers.click.dispatch, true );
+
+ self.el = el;
+ }
+
+ return WorkspaceView;
+ }
+)
\ No newline at end of file
diff --git a/scripts/workers/glitchworker.js b/scripts/workers/glitchworker.js
new file mode 100644
index 0000000..5a1be74
--- /dev/null
+++ b/scripts/workers/glitchworker.js
@@ -0,0 +1,139 @@
+self.addEventListener( 'message', receivedMessageEvent, false );
+
+function receivedMessageEvent ( event ) {
+ if (
+ event &&
+ event.data &&
+ event.data.glitch &&
+ event.data.glitch.base64 &&
+ event.data.glitch.parameters
+ ) {
+ self.postMessage( { glitched: getGlitchedImageData( event.data.glitch.base64, event.data.glitch.parameters ) } );
+ } else {
+ self.postMessage( event.data );
+ }
+}
+
+var base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+var base64Map = base64Chars.split( '' );
+var reversedBase64Map = { };
+var base64ImageData;
+var byteArrayImageData;
+var jpgHeaderLength = 0;
+var params;
+
+var i = 0;
+var len = 0;
+
+base64Map.forEach( function ( val, key ) {
+ reversedBase64Map[val] = key;
+} );
+
+function getGlitchedImageData ( base64ImageData, parameters ) {
+ params = parameters;
+ byteArrayImageData = base64ToByteArray( base64ImageData );
+ jpgHeaderLength = getJpegHeaderSize( byteArrayImageData );
+
+ for ( i = 0, len = params.iterations; i < len; i++ ) {
+ glitchJpegBytes( byteArrayImageData, jpgHeaderLength, params.seed, params.amount, i, params.iterations );
+ }
+
+ return byteArrayToBase64( byteArrayImageData );
+}
+
+function glitchJpegBytes ( byteArray, jpgHeaderLength, seed, amount, i, len ) {
+ var maxIndex = byteArray.length - jpgHeaderLength - 4;
+ var pxMin = parseInt( maxIndex / len * i, 10 );
+ var pxMax = parseInt( maxIndex / len * ( i + 1 ), 10 );
+ var delta = pxMax - pxMin;
+ var pxIndex = parseInt( pxMin + delta * seed, 10 );
+
+ if ( pxIndex > maxIndex ) {
+ pxIndex = maxIndex;
+ }
+
+ var index = Math.floor( jpgHeaderLength + pxIndex );
+
+ byteArray[index] = Math.floor( amount * 256 );
+}
+
+function base64ToByteArray ( str ) {
+ var result = [ ];
+ var digitNum;
+ var cur;
+ var prev;
+ for ( i = 23, len = str.length; i < len; i++ ) {
+ cur = reversedBase64Map[str.charAt( i )];
+ digitNum = ( i - 23 ) % 4;
+
+ switch ( digitNum ) {
+ case 1:
+ result.push( prev << 2 | cur >> 4 );
+ break;
+
+ case 2:
+ result.push( ( prev & 15 ) << 4 | cur >> 2 );
+ break;
+
+ case 3:
+ result.push( ( prev & 3 ) << 6 | cur );
+ break;
+ }
+
+ prev = cur;
+ }
+
+ return result;
+}
+
+function byteArrayToBase64 ( arr ) {
+ var result = [ 'data:image/jpeg;base64,' ];
+ var byteNum;
+ var cur;
+ var prev;
+
+ for ( i = 0, len = arr.length; i < len; i++ ) {
+ cur = arr[i];
+ byteNum = i % 3;
+
+ switch (byteNum) {
+ case 0:
+ result.push( base64Map[cur >> 2] );
+ break;
+
+ case 1:
+ result.push( base64Map[( prev & 3 ) << 4 | cur >> 4] );
+ break;
+
+ case 2:
+ result.push( base64Map[( prev & 15 ) << 2 | cur >> 6] );
+ result.push( base64Map[cur & 63] );
+ break;
+ }
+
+ prev = cur;
+ }
+
+ if ( byteNum === 0 ) {
+ result.push( base64Map[( prev & 3 ) << 4] );
+ result.push( '==' );
+ } else if ( byteNum === 1 ) {
+ result.push( base64Map[( prev & 15 ) << 2] );
+ result.push( '=' );
+ }
+
+ return result.join( '' );
+}
+
+function getJpegHeaderSize ( data ) {
+ var result = 417;
+
+ for ( i = 0, len = data.length; i < len; i++ ) {
+ if ( data[i] === 255 && data[i + 1] === 218 ) {
+ result = i + 2;
+ break;
+ }
+ }
+
+ return result;
+}
\ No newline at end of file
diff --git a/scripts/workers/settingsworker.js b/scripts/workers/settingsworker.js
new file mode 100644
index 0000000..96648c5
--- /dev/null
+++ b/scripts/workers/settingsworker.js
@@ -0,0 +1,90 @@
+importScripts( '../lib/localforage.nopromises.js' );
+
+var settings;
+var defaultSettings;
+var storageKey = 'settings';
+
+self.addEventListener( 'message', receivedMessageEvent, false );
+
+function receivedMessageEvent ( event ) {
+ if ( event && event.data ) {
+ if ( event.data.load ) {
+ load();
+ }
+
+ if ( event.data.save ) {
+ save( event.data.save );
+ }
+
+ if ( event.data.setStorageKey ) {
+ setStorageKey( event.data.setStorageKey );
+ }
+
+ if ( event.data.setDefaultSettings ) {
+ setDefaultSettings( event.data.setDefaultSettings );
+ }
+ }
+}
+
+function sendMessage ( type, data ) {
+ if ( typeof type === 'string' ) {
+ if ( typeof data === 'undefined' ) {
+ data = type;
+ }
+
+ var message = { };
+ message[type] = data;
+ self.postMessage( message );
+ }
+}
+
+function sendError ( err ) {
+ sendMessage( 'error', err );
+}
+
+function setStorageKey ( newKey ) {
+ if ( newKey ) {
+ storageKey = newKey;
+ }
+}
+
+function setDefaultSettings ( newDefaultSettings ) {
+ if ( newDefaultSettings ) {
+ defaultSettings = newDefaultSettings;
+ }
+}
+
+function load () {
+ localforage.getItem( storageKey, function ( err, loadedSettings ) {
+ if ( err ) {
+ sendError( 'settings.error.load' );
+ console && console.log( 'localforage error', err );
+ } else {
+ if ( ! loadedSettings && defaultSettings ) {
+ settings = defaultSettings;
+ save( defaultSettings );
+ } else {
+ settings = loadedSettings;
+ sendMessage( 'update', settings );
+ }
+ }
+ } );
+}
+
+function save ( newSettings ) {
+ if ( newSettings ) {
+ localforage.setItem( storageKey, newSettings, function ( err, savedSettings ) {
+ if ( err ) {
+ sendError( 'settings.error.save' );
+ console && console.log( 'localforage error', err );
+ } else {
+ if ( savedSettings ) {
+ settings = savedSettings || defaultSettings;
+ sendMessage( 'update', settings );
+ } else {
+ console && console.log( 'no data was saved', savedSettings );
+ }
+ }
+ } );
+ }
+}
diff --git a/scripts/workers/storageworker.js b/scripts/workers/storageworker.js
new file mode 100644
index 0000000..026c18b
--- /dev/null
+++ b/scripts/workers/storageworker.js
@@ -0,0 +1,233 @@
+importScripts( '../lib/localforage.nopromises.js' );
+importScripts( '../lib/md5.js' );
+
+var storageKey = 'items';
+var entries = { };
+
+self.addEventListener( 'message', receivedMessageEvent, false );
+
+function receivedMessageEvent ( event ) {
+ if ( event && event.data ) {
+ if ( event.data.setStorageKey ) {
+ setStorageKey( event.data.setStorageKey );
+ }
+
+ if ( event.data.add ) {
+ add( event.data.add );
+ }
+
+ if ( event.data.removeCompletely ) {
+ removeCompletely( event.data.removeCompletely );
+ }
+
+ if ( event.data.removeLocalData ) {
+ removeLocalData( event.data.removeLocalData );
+ }
+
+ if ( event.data.removeImgurData ) {
+ removeImgurData( event.data.removeImgurData );
+ }
+
+ if ( event.data.load ) {
+ load();
+ }
+
+ if ( event.data.save ) {
+ save();
+ }
+
+ if ( event.data.loadItem ) {
+ loadItem( event.data.loadItem );
+ }
+ }
+}
+
+function sendMessage ( type, data ) {
+ if ( typeof type === 'string' ) {
+ if ( typeof data === 'undefined' ) {
+ data = type;
+ }
+
+ var message = { };
+ message[type] = data;
+ self.postMessage( message );
+ }
+}
+
+function sendError ( err ) {
+ sendMessage( 'error', err );
+}
+
+function setStorageKey ( newKey ) {
+ if ( newKey ) {
+ storageKey = newKey;
+ }
+}
+
+function add ( item ) {
+ if ( item ) {
+ var uid = createUID( item );
+
+ if (
+ entries[uid] &&
+ entries[uid].deleteHash === item.deleteHash &&
+ entries[uid].publicUrl === item.publicUrl &&
+ entries[uid].imgurID === item.imgurID
+ ) {
+ sendError( 'file.message.before' );
+ } else {
+ item.timestamp = Date.now();
+ entries[uid] = item;
+
+ save( function () {
+ sendMessage( 'statusmessage', 'file.message.save' );
+ } );
+ }
+ }
+}
+
+function removeCompletely ( uid ) {
+ if ( uid && entries[uid] ) {
+ if (
+ (
+ entries[uid].deleteHash ||
+ entries[uid].publicUrl ||
+ entries[uid].imgurID ||
+ entries[uid].values ||
+ entries[uid].src
+ )
+ ) {
+ console && console.log( 'cant delete storage item because theres still some data left', entries[uid] );
+ } else {
+ sendMessage( 'removeall', entries[uid] );
+ delete entries[uid];
+
+ save( function () {
+ sendMessage( 'statusmessage', 'file.message.save' );
+ } );
+ }
+ }
+}
+
+function removeLocalData ( uid ) {
+ if ( uid && entries[uid] ) {
+ if ( entries[uid].src ) {
+ delete entries[uid].src;
+
+ sendMessage( 'removelocaldata', entries[uid] );
+ }
+
+ if ( entries[uid].values ) {
+ delete entries[uid].values;
+ }
+
+ if ( ! ( entries[uid].deleteHash || entries[uid].publicUrl || entries[uid].imgurID ) ) {
+ removeCompletely( uid );
+ }
+
+ save();
+ }
+}
+
+function removeImgurData ( uid ) {
+ if ( uid && entries[uid] ) {
+ if ( entries[uid].deleteHash ) {
+ sendMessage( 'removeimgurdata', entries[uid] );
+ delete entries[uid].deleteHash;
+ }
+
+ if ( entries[uid].publicUrl ) {
+ delete entries[uid].publicUrl;
+ }
+
+ if ( entries[uid].imgurID ) {
+ delete entries[uid].imgurID;
+ }
+
+ if ( ! ( entries[uid].src || entries[uid].values ) ) {
+ removeCompletely( uid );
+ }
+
+ save();
+ }
+}
+
+function load ( callback ) {
+ localforage.getItem( storageKey, function ( err, loadedData ) {
+ if ( err ) {
+ sendError( 'file.error.load' );
+ console && console.log( 'localforage error', err );
+ } else {
+ entries = loadedData && loadedData.entries ? loadedData.entries : { };
+ sendMessage( 'update', entries );
+
+ isFirstVisit = ( loadedData && loadedData.lastVisit ) ? false : true;
+
+ if ( isFirstVisit ) {
+ sendMessage( 'firstvisit' );
+ save();
+ }
+
+ if ( typeof callback === 'function' ) {
+ callback();
+ }
+ }
+ } );
+}
+
+function save ( callback ) {
+ localforage.setItem( storageKey, { entries: entries, lastVisit: Date.now() }, function ( err, savedData ) {
+ if ( err ) {
+ sendError( 'file.error.save' );
+ console && console.log( 'localforage error', err );
+ } else {
+ if ( savedData ) {
+ entries = savedData.entries;
+ sendMessage( 'update', entries );
+ sendMessage( 'save' );
+
+ if ( typeof callback === 'function' ) {
+ callback();
+ }
+ } else {
+ console && console.log( 'no data was saved', savedData );
+ }
+ }
+ } );
+}
+
+function loadItem ( uid ) {
+ if ( entries[uid] ) {
+ sendMessage( 'loaditem', { uid: uid, entries: entries[uid] } );
+ }
+}
+
+function createUID ( item ) {
+ var inputStr = 'N' + item.name + 'S' + item.src + 'L' + item.thumbnail.length || 0 + 'V';
+
+ for ( var key in item.values ) {
+ inputStr += key.substr( 0, 2 );
+ inputStr += item.values[key];
+ }
+
+ return md5( inputStr );
+}
+
+function getLatestUID () {
+ var latestUid;
+ var latestTimestamp;
+ var timestamp;
+
+ for ( var uid in entries ) {
+ timestamp = entries[uid].timestamp;
+
+ if ( timestamp ) {
+ if ( ! latestUid || timestamp > latestTimestamp ) {
+ latestUid = uid;
+ latestTimestamp = timestamp;
+ }
+ }
+ }
+
+ return latestUid;
+}
\ No newline at end of file
diff --git a/serviceworker.js b/serviceworker.js
new file mode 100644
index 0000000..7af4548
--- /dev/null
+++ b/serviceworker.js
@@ -0,0 +1,141 @@
+// most of this was taken from @adactio's serviceworker
+// https://adactio.com/journal/9775
+// https://adactio.com/serviceworker.js
+
+var version = 'v1.0::';
+var staticCacheName = version + 'static';
+var pagesCacheName = version + 'pages';
+var imagesCacheName = version + 'images';
+
+function updateStaticCache () {
+ return caches
+ .open( staticCacheName )
+ .then( function ( cache ) {
+ // These items won't block the installation of the Service Worker
+ cache
+ .addAll( [
+ 'images/icon/alert-circle.svg',
+ 'images/icon/camera.svg',
+ 'images/icon/content-save.svg',
+ 'images/icon/delete.svg',
+ 'images/icon/emoticon.svg',
+ 'images/icon/fullscreen-exit.svg',
+ 'images/icon/fullscreen.svg',
+ 'images/icon/information-outline.svg',
+ 'images/icon/open-in-app.svg',
+ 'images/icon/share-variant.svg',
+ 'images/icon/settings.svg',
+ 'lang/en-us.json'
+ ] );
+ // These items must be cached for the Service Worker to complete installation
+ return cache
+ .addAll( [
+ 'scripts/glitcher.js',
+ 'scripts/workers/glitchworker.js',
+ 'scripts/workers/storageworker.js',
+ 'scripts/workers/settingsworker.js',
+ 'styles/glitcher.css'
+ ] );
+ } );
+}
+
+function putInCache ( cacheName, request, response ) {
+ caches
+ .open( cacheName )
+ .then( function ( cache ) {
+ cache
+ .keys()
+ .then( function ( keys ) {
+ cache.put( request, response );
+ } )
+ } );
+}
+
+function clearOldCaches () {
+ return caches
+ .keys()
+ .then( function ( keys ) {
+ // Remove caches whose name is no longer valid
+ return Promise
+ .all(
+ keys
+ .filter( filterInvalidKeys )
+ .map( function ( key ) { return caches.delete( key ); } )
+ );
+ } );
+}
+
+function filterInvalidKeys ( key ) {
+ return key.indexOf( version ) !== 0;
+}
+
+function installed ( event ) {
+ event
+ .waitUntil( updateStaticCache().then( function () {
+ return self.skipWaiting();
+ } ) );
+}
+
+function activated ( event ) {
+ event
+ .waitUntil( clearOldCaches().then( function () {
+ return self.clients.claim();
+ } ) );
+}
+
+function fetched ( event ) {
+ var request = event.request;
+ // For non-GET requests, try the network, do not fall back to cache.
+ if ( request.method !== 'GET' ) {
+ event.respondWith( fetch( request ) );
+ return;
+ }
+
+ // For HTML requests, try the network first, fall back to the cache
+ if ( request.headers.get( 'Accept' ).indexOf( 'text/html' ) !== -1 ) {
+ event.respondWith(
+ fetch( request )
+ .then( function ( response ) {
+ // NETWORK
+ // Stash a copy of this page in the pages cache
+ putInCache( pagesCacheName, request, response.clone() );
+ return response;
+ } )
+ .catch( function () {
+ // CACHE
+ return caches
+ .match( request )
+ .then( function ( response ) {
+ return response;
+ } );
+ } )
+ );
+
+ return;
+ }
+
+ // For non-HTML requests, look in the cache first, fall back to the network
+ event.respondWith(
+ caches
+ .match( request )
+ .then( function ( response ) {
+ // CACHE
+ return response || fetch( request )
+ .then( function ( response ) {
+ // NETWORK
+ // If the request is for an image, stash a copy of this image in the images cache
+ if ( request.headers.get( 'Accept' ).indexOf( 'image' ) !== -1 ) {
+ putInCache( imagesCacheName, request, response.clone() );
+ }
+
+ return response;
+ } );
+ } )
+ );
+}
+
+(function () {
+ self.addEventListener( 'fetch', fetched );
+ self.addEventListener( 'install', installed );
+ self.addEventListener( 'activated', activated );
+})();
diff --git a/styles/glitcher.css b/styles/glitcher.css
new file mode 100644
index 0000000..315e468
--- /dev/null
+++ b/styles/glitcher.css
@@ -0,0 +1,14 @@
+@import 'global/reset.css';
+@import 'global/typography.css';
+@import 'global/color.css';
+@import 'modules/app.css';
+@import 'modules/buttons.css';
+@import 'modules/panzoom.css';
+@import 'modules/description.css';
+@import 'modules/controls.css';
+@import 'modules/nav.css';
+@import 'modules/dialog.css';
+@import 'modules/indicator.css';
+@import 'modules/workspace.css';
+@import 'modules/workspace-nav.css';
+@import 'modules/about.css';
\ No newline at end of file
diff --git a/styles/global/color.css b/styles/global/color.css
new file mode 100644
index 0000000..0477444
--- /dev/null
+++ b/styles/global/color.css
@@ -0,0 +1,19 @@
+body {
+ color: #333;
+}
+
+input {
+ color: #ccc;
+}
+
+a {
+ color: #06f;
+}
+
+.color-bg {
+ background-color: hsla(0, 0%, 20%, 1);
+}
+
+.color-bg-light {
+ background-color: hsla(0, 0%, 30%, 1);
+}
\ No newline at end of file
diff --git a/styles/global/reset.css b/styles/global/reset.css
new file mode 100644
index 0000000..f8f2bf1
--- /dev/null
+++ b/styles/global/reset.css
@@ -0,0 +1,5 @@
+.clear:after {
+ content: '';
+ display: table;
+ clear: both;
+}
\ No newline at end of file
diff --git a/styles/global/typography.css b/styles/global/typography.css
new file mode 100644
index 0000000..6cc8116
--- /dev/null
+++ b/styles/global/typography.css
@@ -0,0 +1,23 @@
+a {
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+button {
+ font-family: -apple-system, Roboto, 'Lucida Grande', sans-serif;
+ font-size: 11px;
+}
+
+label,
+time {
+ font-family: -apple-system, Roboto, 'Lucida Grande', sans-serif;
+ font-size: 11px;
+}
+
+input {
+ font-family: 'Menlo', 'Lucida Grande', sans-serif;
+ font-size: 11px;
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
deleted file mode 100644
index 08dc8a5..0000000
--- a/styles/main.css
+++ /dev/null
@@ -1,390 +0,0 @@
-* {
- margin: 0;
- padding: 0;
-}
-
-body {
- font-family: sans-serif;
- color: #666;
- line-height: 18px;
- font-size: 14px;
-}
-
-a {
- color: #06f;
- text-decoration: none;
-}
-
-a:hover {
- text-decoration: underline;
-}
-
-.is-hidden {
- display: none;
-}
-
-.full-width {
- width: 100%;
-}
-
-.dark-bg {
- background-color: #333;
-}
-
-.light-bg {
- background-color: #efefef;
- border-bottom: 1px #ddd solid;
-}
-
-.center {
- max-width: 860px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.nav-wrapper {
- padding-top: 17px;
- padding-bottom: 17px;
- position: relative;
- z-index: 3;
-}
-
-.button {
- background-color: #ddd;
- padding: 5px 9px;
- display: inline-block;
- color: #666;
- font-weight: normal;
- border-radius: 2px;
- cursor: pointer;
- border: none;
- font-family: sans-serif;
- font-size: 12px;
- text-decoration: none;
- line-height: normal;
- margin-right: 4px;
-}
-
-.button:hover {
- background-color: #06f;
- color: #fff;
- text-decoration: none;
-}
-
-.dark-bg .button {
- background-color: #666;
- color: #ccc;
-}
-
-.dark-bg .button:hover {
- background-color: #999;
- color: #fff;
-}
-
-.dark-bg a {
- color: #ddd;
-}
-
-#random-button {
- position: relative;
- top: 6px;
-}
-
-.headline {
- font-size: 16px;
- color: #fff;
- display: inline-block;
- font-weight: normal;
- margin-right: 20px;
- position: relative;
- top: 1px;
-}
-
-.intro {
- width: 100%;
- position: absolute;
- top: -100%;
- background-color: #fff;
- background-color: rgba(255,255,255, 0.9);
- -webkit-transition: all 0.3s ease-out;
- transition: all 0.3s ease-out;
-}
-
-.intro.is-active {
- top: 0;
-}
-
-.intro .center {
- padding: 30px;
- max-width: 580px;
- position: relative;
-}
-
-.intro .close {
- position: absolute;
- top: 10px;
- right: 10px;
- display: block;
- font-size: 16px;
- background-color: transparent;
- border: none;
- color: #06f;
- cursor: pointer;
-}
-
-.intro-button {
- float: right;
-}
-
-.intro-button.is-active,
-.intro-button.is-active:hover {
- background-color: #ddd;
- color: #666;
-}
-
-#controls {
- display: none;
-}
-
-#controls.is-active {
- display: block;
-}
-
-.control-wrapper {
- display: inline-block;
- width: 160px;
- margin-right: 20px;
-}
-
-.control-label {
- font-size: 11px;
- display: block;
- color: #666;
- text-align: center;
- max-width: 120px;
-}
-
-.oldie .control-label {
- max-width: 100%;
-}
-
-.control-slider {
- display: block;
- float: left;
- border: none;
- width: 120px;
- height: 1px;
- margin-top: 6px;
- background: #ddd;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-}
-
-.oldie .control-slider {
- display: none;
-}
-
-.somewhatokie .control-slider {
- height: 10px;
-}
-
-.control-number {
- display: block;
- color: #333;
- float: right;
- border: none;
- max-width: 30px;
- font-family: sans-serif;
- background-color: transparent;
-}
-
-.oldie .control-number {
- float: none;
- width: 20px;
- margin-left: auto;
- margin-right: auto;
-}
-
-#import-input {
- display: none;
-}
-
-.download-link {
- display: none;
-}
-
-.download-link.is-active {
- display: inline-block;
- margin-left: 15px;
-}
-
-.download-link span {
- color: #999;
- display: inline-block;
- text-decoration: none;
- margin-left: 4px;
-}
-
-#imgur-button {
- width: 85px;
- overflow: hidden;
- padding-left: 0
-}
-
-#imgur-button.is-uploading,
-#imgur-button.is-uploading:hover {
- background-color: #ddd;
- color: #666;
- cursor: default;
-}
-
-#imgur-button span {
- display: inline-block;
- width: 154px;
- padding-left: 9px;
- -webkit-transition: margin-left 0.5s ease-in;
- transition: margin-left 0.5s ease-in;
- -webkit-transition-property: margin-left top;
- transition-property: margin-left top;
- text-align: left;
- line-height: 10px;
- font-size: 12px;
- margin-bottom: 0;
- padding-bottom: 0;
- position: relative;
-}
-
-#imgur-button.is-uploading span {
- margin-left: -76px;
-}
-
-#imgur-button span::after {
- content: 'loading…';
- display: inline-block;
- padding-left: 15px;
- color: #999;
-}
-
-#imgur-url-container {
- display: inline-block;
- opacity: 0;
- -webkit-transition: opacity 0.3s ease-in;
- transition: opacity 0.3s ease-in;
-}
-
-#imgur-url-container.is-active {
- opacity: 1;
-}
-
-#imgur-url-input {
- padding: 5px 9px 4px 9px;
- border: none;
- border-radius: 2px;
- font-family: sans-serif;
- font-size: 13px;
- color: #333;
- margin-right: 7px;
- position: relative;
- top: 1px;
- max-width: 90px;
-}
-
-#imgur-url-error {
- padding: 5px 9px;
- line-height: normal;
- color: #999;
-}
-
-#imgur-url-input,
-#imgur-url-link,
-#imgur-url-error {
- display: none;
-}
-
-#imgur-url-container.upload-successful #imgur-url-input,
-#imgur-url-container.upload-successful #imgur-url-link {
- display: inline-block;
-}
-
-#imgur-url-container.upload-failed #imgur-url-error {
- display: inline-block;
-}
-
-.social-link {
- display: none;
-}
-
-.upload-successful .social-link {
- display: inline-block;
-}
-
-.missing-feature {
- clear: both;
-}
-
-.canvas-wrapper {
- width: 100%;
- position: relative;
- background-color: rgba(255, 255, 255, 0.9);
- line-height: 1.7;
-}
-
-#canvas {
- margin-left: auto;
- margin-right: auto;
- display: block;
- max-width: 100%;
-}
-
-.cam-wrapper {
- width: 100%;
- height: 0;
- background-color: rgba(255, 255, 255, 0.5);
- position: absolute;
- z-index: 3;
- transition: all 0.4s;
- top: 60px;
- overflow: hidden;
- opacity: 0;
-}
-
-.cam-wrapper.is-active {
- height: 100%;
- opacity: 1;
-}
-
-.take-picture {
- position: absolute;
- top: 450px;
- left: 50%;
- margin-left: -43px;
- cursor: pointer;
- z-index: 3;
-}
-
-.cam {
- display: block;
- width: 100%;
- max-width: 640px;
- margin-left: auto;
- margin-right: auto;
- margin-top: 68px;
- transform: scalex(-1);
-}
-
-@media all and (max-width: 860px) {
- .nav-wrapper {
- text-align: center;
- }
-
- .center {
- padding-left: 10px;
- padding-right: 10px;
- }
-
- .button
- {
- margin-bottom: 5px;
- }
-}
\ No newline at end of file
diff --git a/styles/modules/about.css b/styles/modules/about.css
new file mode 100644
index 0000000..27d7383
--- /dev/null
+++ b/styles/modules/about.css
@@ -0,0 +1,35 @@
+.about-content {
+ max-width: 300px;
+ max-height: calc(100vh - 270px);
+ overflow: auto;
+ padding-bottom: 15px;
+}
+
+.about-content .text {
+ opacity: 1;
+ margin-top: 0;
+ margin-bottom: 0;
+ width: 100%;
+}
+
+.abount-content .description {
+
+}
+
+.has-touch .about-content {
+ max-height: calc(100vh - 290px);
+}
+
+/*.about-content p {
+ font-size: 13px;
+ line-height: 22px;
+}
+
+.about-content p + p {
+ margin-top: 10px;
+}*/
+
+
+.about-dialog .dialog-item {
+ padding-bottom: 0;
+}
\ No newline at end of file
diff --git a/styles/modules/app.css b/styles/modules/app.css
new file mode 100644
index 0000000..be349f8
--- /dev/null
+++ b/styles/modules/app.css
@@ -0,0 +1,18 @@
+.app {
+ transition: opacity 0.3s ease-out;
+ opacity: 0;
+}
+
+.is-loaded .app {
+ opacity: 1;
+}
+
+html:not(.is-online) .is-online-only {
+ display: none;
+}
+
+@media screen and (min-width: 600px) {
+ .app {
+ display: flex;
+ }
+}
\ No newline at end of file
diff --git a/styles/modules/buttons.css b/styles/modules/buttons.css
new file mode 100644
index 0000000..6505540
--- /dev/null
+++ b/styles/modules/buttons.css
@@ -0,0 +1,87 @@
+.button {
+ background-color: transparent;
+ padding: 4px 6px;
+ border-radius: 3px;
+ border: none;
+ color: #fff;
+ font-size: 11px;
+ display: inline-block;
+ cursor: pointer;
+ transition: all 0.2s;
+ outline: none;
+ text-decoration: none;
+ font-weight: 500;
+ text-transform: uppercase;
+ border: 2px solid rgba(255, 255, 255, 0.1);
+ height: 30px;
+ line-height: 22px;
+}
+
+.has-touch .button {
+ border: 2px solid rgba(255, 255, 255, 0.5);
+ height: 45px;
+ line-height: 40px;
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.button:focus {
+ color: #fff;
+ border-color: #fff;
+}
+
+.button:hover,
+.button:active {
+ color: #333;
+ background-color: #fff;
+ text-decoration: none;
+ border-color: #fff;
+}
+
+.button[disabled],
+.button[disabled]:hover,
+.button[disabled]:active,
+.button[disabled]:focus {
+ color: rgba(255, 255, 255, 0.5);
+ border-color: transparent;
+ background-color: transparent;
+ cursor: default;
+}
+
+.button + .button {
+ margin-left: 10px;
+}
+
+.save-dialog.is-active {
+ max-height: 40px;
+}
+
+.webcam-dialog.is-active {
+ max-height: 225px;
+}
+
+.webcam-dialog.is-active {
+ max-height: 225px;
+}
+
+.open-file-dialog.is-active,
+.share-dialog .is-active {
+ max-height: 550px;
+}
+
+.about-dialog.is-active {
+ max-height: 442px;
+}
+
+/*.dialog-list .button {
+ border-radius: 1px;
+}
+
+.dialog-list .button:hover,
+.dialog-list .button:active,
+.dialog-list .button:focus {
+ color: #e91e63;
+ background-color: #fff;
+}*/
\ No newline at end of file
diff --git a/styles/modules/controls.css b/styles/modules/controls.css
new file mode 100644
index 0000000..24387f3
--- /dev/null
+++ b/styles/modules/controls.css
@@ -0,0 +1,442 @@
+.controls {
+ width: 100%;
+ max-height: 0;
+ transition: 0.3s all ease-out;
+ overflow: hidden;
+}
+
+.controls.is-visible {
+ z-index: 10;
+}
+
+.controls.is-active {
+ opacity: 1;
+ max-height: 200px;
+}
+
+ .has-touch .controls.is-active {
+ max-height: 300px;
+ }
+
+.controls-wrapper {
+ width: 100%;
+ background-color: #333;
+ padding: 10px;
+ color: #ccc;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ align-content: flex-start;
+ flex-wrap: wrap;
+}
+
+.control {
+ display: block;
+ position: relative;
+ min-width: 160px;
+ margin-top: 10px;
+ width: 100%;
+}
+
+.has-touch .control {
+ height: 45px;
+ margin-bottom: 10px;
+}
+
+.controls .button {
+ line-height: 18px;
+ margin-left: 10px;
+}
+
+.control-label {
+ display: block;
+ float: left;
+ width: 100%;
+ max-width: 60px;
+ height: 100%;
+ font-size: 11px;
+ margin-right: 10px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.has-touch .control-label {
+ font-size: 14px;
+ max-width: 80px;
+ line-height: 45px;
+ text-align: right;
+}
+
+.control-input {
+ display: block;
+ width: 100%;
+ height: 100%;
+ min-height: 10px;
+ max-width: calc(100% - 105px);
+ background-color: transparent;
+ margin-top: 0;
+ margin-bottom: 0;
+ float: left;
+}
+
+.has-touch .control-input {
+ max-width: calc(100% - 130px);
+}
+
+.control-value {
+ display: block;
+ float: right;
+ width: 35px;
+ height: 100%;
+ background-color: transparent;
+ border: none;
+ text-align: right;
+ float: left;
+}
+
+.controls .random-button {
+ display: none;
+}
+
+/*two columns*/
+@media screen and (min-width: 660px) {
+ html:not(.has-touch) .nav ~ .workspace .control {
+ width: calc(50% - 5px);
+ }
+
+ html:not(.has-touch) .nav ~ .workspace .control {
+ max-width: 320px;
+ }
+}
+
+@media screen and (min-width: 800px) {
+ .has-touch .nav ~ .workspace .control {
+ width: calc(50% - 5px);
+ }
+
+ html:not(.has-touch) .nav ~ .workspace .control {
+ max-width: 320px;
+ }
+
+ .has-touch .nav ~ .workspace .controls-wrapper {
+ min-height: 164px;
+ }
+}
+
+/*four columns*/
+@media screen and (min-width: 721px) {
+ html:not(.has-touch) .nav:not(.is-active) ~ .workspace .controls-wrapper {
+ justify-content: flex-start;
+ }
+
+ html:not(.has-touch) .nav:not(.is-active) ~ .workspace .control {
+ min-width: 160px;
+ max-width: 320px;
+ width: calc(25% - 15px);
+ }
+
+ html:not(.has-touch) .nav:not(.is-active) ~ .workspace .control + .control {
+ margin-left: 20px;
+ }
+}
+
+@media screen and (min-width: 1021px) {
+ html:not(.has-touch) .nav ~ .workspace .controls-wrapper {
+ justify-content: flex-start;
+ }
+
+ html:not(.has-touch) .nav ~ .workspace .control {
+ min-width: 160px;
+ max-width: 320px;
+ width: calc(25% - 15px);
+ }
+
+ html:not(.has-touch) .nav ~ .workspace .control + .control {
+ margin-left: 20px;
+ }
+}
+
+/*four columns*/
+@media screen and (min-width: 815px) {
+ html:not(.has-touch) .nav:not(.is-active) ~ .workspace .control {
+ width: calc(25% - 40px);
+ }
+
+ html:not(.has-touch) .nav:not(.is-active) ~ .workspace .random-button {
+ display: inline-block;
+ }
+}
+
+@media screen and (min-width: 1215px) {
+ html:not(.has-touch) .nav ~ .workspace .control {
+ width: calc(25% - 40px);
+ }
+
+ html:not(.has-touch) .nav ~ .workspace .random-button {
+ display: inline-block;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .has-touch .nav:not(.is-active) ~ .workspace .control {
+ width: calc(25% - 40px);
+ }
+
+ .has-touch .nav:not(.is-active) ~ .workspace .random-button {
+ display: inline-block;
+ }
+
+ .has-touch .nav:not(.is-active) ~ .workspace .controls-wrapper {
+ min-height: 0;
+ }
+}
+
+@media screen and (min-width: 1500px) {
+ .has-touch .nav ~ .workspace .control {
+ width: calc(25% - 40px);
+ }
+
+ .has-touch .nav ~ .workspace .random-button {
+ display: inline-block;
+ }
+
+ .has-touch .nav ~ .workspace .controls-wrapper {
+ min-height: 0;
+ }
+}
+
+input[type=range] {
+ -webkit-appearance: none;
+ width: 100%;
+}
+
+input[type=range]:focus {
+ outline: none;
+}
+
+/*input[type=range]::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 4px;
+ cursor: pointer;
+ background: rgba(0, 0, 0, 0.95);
+ border-radius: 3px;
+ border: 1px solid #333333;
+}
+
+input[type=range]::-webkit-slider-thumb {
+ border: 0.1px solid rgba(102, 102, 102, 0.5);
+ height: 10px;
+ width: 10px;
+ border-radius: 10px;
+ margin-top: -4px;
+ background: #999999;
+ cursor: pointer;
+ -webkit-appearance: none;
+}*/
+
+input[type='range']:not(*:root) {
+ overflow: hidden;
+ background-color: transparent;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+ height: 100%;
+ border: none;
+ background-color: transparent;
+ position: relative;
+}
+
+/*track background line, full width*/
+input[type=range]::-webkit-slider-runnable-track::before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ background-color: rgba(255, 255, 255, 0.2);
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ transition: background-color 0.2s;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track::before,
+input[type=range]:active::-webkit-slider-runnable-track::before {
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+/*slider thumb clickable area*/
+input[type=range]::-webkit-slider-thumb {
+ height: 20px;
+ width: 20px;
+ border-radius: 45px;
+ margin-top: 0;
+ transition: background-color 0.2s;
+ background-color: transparent;
+ position: relative;
+ cursor: pointer;
+ -webkit-appearance: none;
+}
+
+input[type=range]:focus::-webkit-slider-thumb,
+input[type=range]:active::-webkit-slider-thumb,
+.has-touch input[type=range]:focus::-webkit-slider-thumb,
+.has-touch input[type=range]:active::-webkit-slider-thumb {
+ background-color: rgba(255, 255, 255, 0.5);
+}
+
+.has-touch input[type=range]::-webkit-slider-thumb {
+ height: 38px;
+ width: 38px;
+ background-color: rgba(255, 255, 255, 0.2);
+}
+
+/*slider thumb point*/
+input[type=range]::-webkit-slider-thumb::before {
+ content: '';
+ display: block;
+ position: absolute;
+ background-color: #fff;
+ width: 10px;
+ height: 10px;
+ border-radius: 14px;
+ z-index: 2;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ transition: background-color 0.2s;
+}
+
+.has-touch input[type=range]::-webkit-slider-thumb::before {
+ width: 14px;
+ height: 14px;
+}
+
+/*slider current value track*/
+input[type=range]::-webkit-slider-thumb::after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 100vw;
+ height: 3px;
+ top: 50%;
+ right: 50%;
+ transform: translateY(-50%);
+ background-color: #fff;
+}
+
+input[type=range]::-moz-range-track {
+ height: 100%;
+ border: none;
+ background-color: transparent;
+ position: relative;
+ background: linear-gradient(
+ to bottom,
+ rgba(255,255,255,0) 0%,
+ rgba(255,255,255,0) 41.9%,
+ rgba(255,255,255,0.2) 42%,
+ rgba(255,255,255,0.2) 58%,
+ rgba(255,255,255,0) 58.1%,
+ rgba(255,255,255,0) 100%
+ );
+}
+
+.has-touch input[type=range]::-moz-range-track {
+ background: linear-gradient(
+ to bottom,
+ rgba(255,255,255,0) 0%,
+ rgba(255,255,255,0) 49.9%,
+ rgba(255,255,255,0.2) 50%,
+ rgba(255,255,255,0.2) 55%,
+ rgba(255,255,255,0) 55.1%,
+ rgba(255,255,255,0) 100%
+ );
+}
+
+input[type=range]::-moz-range-thumb {
+ height: 20px;
+ width: 20px;
+ border-radius: 45px;
+ margin-top: 3px;
+ transition: background-color 0.2s;
+ position: relative;
+ cursor: pointer;
+ appearance: none;
+ border: none;
+ background: radial-gradient(
+ ellipse at center,
+ rgba(255,255,255,1) 0%,
+ rgba(255,255,255,1) 30%,
+ rgba(255,255,255,0) 30.1%,
+ rgba(255,255,255,0) 100%
+ );
+}
+
+input[type=range]::-moz-range-thumb:hover,
+.has-touch input[type=range]::-moz-range-thumb {
+ background: radial-gradient(
+ ellipse at center,
+ rgba(255,255,255,1) 0%,
+ rgba(255,255,255,1) 30%,
+ rgba(255,255,255,0.2) 30.1%,
+ rgba(255,255,255,0.2) 100%
+ );
+}
+
+input[type=range]:focus::-moz-range-thumb,
+input[type=range]:active::-moz-range-thumb,
+.has-touch input[type=range]:focus::-moz-range-thumb,
+.has-touch input[type=range]:active::-moz-range-thumb {
+ background: radial-gradient(
+ ellipse at center,
+ rgba(255,255,255,1) 0%,
+ rgba(255,255,255,1) 30%,
+ rgba(255,255,255,0.5) 30.1%,
+ rgba(255,255,255,0.5) 100%
+ );
+}
+
+.has-touch input[type=range]::-moz-range-thumb {
+ height: 38px;
+ width: 38px;
+}
+
+input[type=range]::-ms-track {
+ width: 100%;
+ height: 3px;
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ color: transparent;
+ overflow: visible;
+ background-color: rgba(255, 255, 255, 0.2);
+}
+
+input[type=range]::-ms-fill-lower {
+ background: #fff;
+ border: none;
+ box-shadow: none;
+}
+
+input[type=range]::-ms-thumb {
+ box-shadow: none;
+ border: none;
+ height: 10px;
+ width: 10px;
+ border-radius: 14px;
+ border: none;
+ background: #fff;
+ cursor: pointer;
+}
+
+.has-touch input[type=range]::-ms-thumb {
+ width: 15px;
+ height: 15px;
+ border-radius: 45px;
+ border: 10px rgba(255, 255, 255, 0.5) solid;
+}
+
+.has-touch input[type=range]:focus::-ms-thumb,
+.has-touch input[type=range]:active::-ms-thumb {
+ border-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/styles/modules/description.css b/styles/modules/description.css
new file mode 100644
index 0000000..b7060a6
--- /dev/null
+++ b/styles/modules/description.css
@@ -0,0 +1,7 @@
+.is-good-enough .description .min-requirements {
+ display: none;
+}
+
+.has-js .description .js-required {
+ display: none;
+}
\ No newline at end of file
diff --git a/styles/modules/dialog.css b/styles/modules/dialog.css
new file mode 100644
index 0000000..579d284
--- /dev/null
+++ b/styles/modules/dialog.css
@@ -0,0 +1,388 @@
+.dialog {
+ transition: all 0.5s;
+ max-height: 0;
+ overflow: hidden;
+ position: relative;
+}
+
+.dialog.is-active {
+ max-height: calc(100vh - 220px);
+}
+
+.has-touch .dialog.is-active {
+ max-height: calc(100vh - 290px);
+}
+
+.dialog.is-visible {
+ display: block;
+}
+
+.dialog-close-button {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ border: none;
+ cursor: pointer;
+ border-radius: 34px;
+ width: 34px;
+ height: 34px;
+ outline: none;
+ background-color: transparent;
+}
+
+.dialog-close-button:hover,
+.dialog-close-button:focus,
+.dialog-close-button:active {
+ color: #f50057;
+}
+
+.dialog-close-button .close-text {
+ font-size: 20px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ text-align: center;
+}
+
+.dialog > h1,
+.dialog-title {
+ font-size: 17px;
+ font-weight: normal;
+ /*color: #fff;*/
+ padding: 10px 20px 0 20px;
+}
+
+.dialog-item {
+ display: block;
+ width: 100%;
+ padding-top: 15px;
+ padding-left: 20px;
+ padding-bottom: 15px;
+ padding-right: 20px;
+}
+
+.dialog-item + .dialog-item,
+.dialog-item:first-child {
+ padding-top: 0;
+}
+
+.dialog-item p {
+ font-size: 13px;
+ line-height: 22px;
+}
+
+.dialog-item p + p {
+ margin-top: 10px;
+}
+
+.dialog-item .label {
+ display: block;
+ width: 100%;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.7);
+ margin-bottom: 3px;
+ padding: 10px 0;
+}
+
+.dialog-item input[type="text"],
+.dialog-item input[type="url"],
+.dialog-item input[type="email"] {
+ background-color: transparent;
+ border: none;
+ border-bottom: 1px #666 solid;
+ margin-bottom: 5px;
+ max-width: calc(100% - 45px);
+ width: 100%;
+ transition: all 0.2s;
+}
+
+.dialog-item input[type="text"]:focus,
+.dialog-item input[type="url"]:focus,
+.dialog-item input[type="email"]:focus {
+ border-bottom-color: #999;
+ color: #fff;
+}
+
+.dialog-item input[type="text"]:last-child,
+.dialog-item input[type="url"]:last-child,
+.dialog-item input[type="email"]:last-child {
+ max-width: 100%;
+}
+
+.dialog-item input[type="text"] + .button,
+.dialog-item input[type="url"] + .button,
+.dialog-item input[type="email"] + .button {
+ margin-left: 5px;
+ float: right;
+}
+
+.dialog-item input[type="file"] {
+ width: 0;
+ height: 0;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.dialog-item video {
+ max-height: 200px;
+ max-width: 300px;
+ width: 100%;
+ background-color: #000;
+ overflow: hidden;
+ object-fit: cover;
+ display: block;
+ cursor: pointer;
+ opacity: 0.8;
+}
+
+.dialog-item video:hover {
+ opacity: 1;
+}
+
+.dialog-item .video-wrapper.is-taking-picture {
+ background-color: #fff;
+}
+
+.dialog-item .video-wrapper.is-taking-picture video {
+ opacity: 0;
+ transition-duration: 0;
+}
+
+.dialog-item a:not(.button) {
+ color: #fff;
+ border-bottom: 1px #999 solid;
+}
+
+.dialog-item a:not(.button):hover {
+ border-bottom: 1px #ccc solid;
+ text-decoration: none;
+}
+
+.dialog-list {
+ overflow: scroll;
+ margin-left: -20px;
+ padding-left: 20px;
+ padding-right: 20px;
+ width: calc(100% + 40px);
+ max-height: calc(100vh - 355px);
+}
+
+.has-touch .dialog-list {
+ max-height: calc(100vh - 445px);
+}
+
+ .dialog-list-item {
+ position: relative;
+ margin-bottom: 10px;
+ display: block;
+ }
+ .has-touch .dialog-list-item {
+ margin-bottom: 30px;
+ }
+
+ .dialog-list img {
+ transition: all 0.2s;
+ cursor: pointer;
+ display: block;
+ float: left;
+ margin-bottom: 10px;
+ }
+
+ .has-touch .dialog-list img {
+ float: none;
+ }
+
+ .dialog-list .entry-text {
+ position: absolute;
+ left: 60px;
+ top: 0;
+ line-height: 16px;
+ max-width: calc(100% - 60px);
+ }
+
+ .has-touch .dialog-list .entry-text {
+ width: 100%;
+ }
+
+ .dialog-list .entry-name {
+ font-size: 11px;
+ color: #fff;
+ display: block;
+ overflow: hidden;
+ width: 80px;
+ text-overflow: ellipsis;
+ }
+
+ html:not(.has-touch) .dialog-list .entry-name {
+ white-space: nowrap;
+ }
+
+ .has-touch .dialog-list .entry-name {
+ width: 100%;
+ }
+
+ .dialog-list .entry-datetime span {
+ display: block;
+ max-width: 90px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-height: 40px
+ }
+
+ .has-touch .dialog-list .entry-datetime span {
+ max-width: 100%;
+ display: inline-block;
+ }
+
+ .has-touch .dialog-list .entry-datetime span + span {
+ margin-left: 10px;
+ }
+
+ .dialog-list .entry-button-wrapper {
+ position: absolute;
+ top: 15px;
+ right: 0;
+ text-align: right;
+ }
+
+ .has-touch .dialog-list .entry-button-wrapper {
+ position: static;
+ text-align: left;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ display: inline-block;
+ }
+
+ .dialog-list .entry-shared-button-wrapper {
+ margin-top: 10px;
+ clear: both;
+ }
+
+ .has-touch .dialog-list .entry-shared-button-wrapper {
+ display: inline;
+ }
+
+ .has-touch .shared-list .entry-button-wrapper {
+ width: 100%;
+ }
+
+ html:not(.has-touch) .dialog-list .entry-shared-button-wrapper .button {
+ border-color: transparent;
+ }
+
+ html:not(.has-touch) .dialog-list .item-delete-button {
+ border-color: transparent;
+ }
+
+ .dialog-list .no-items {
+ font-size: 12px;
+ margin-left: 15px;
+ }
+
+.has-touch .share-dialog.is-active {
+ max-height: calc(100vh - 270px);
+ overflow: auto;
+}
+
+/*pulse keyframe animation is inlined in html*/
+
+.dialog .loader {
+ font-size: 14px;
+ overflow: hidden;
+ position: relative;
+ transition: all 0.3s;
+ max-height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-width: 0;
+}
+
+.dialog.is-loading:not(.was-loaded) .loader {
+ padding-left: 50px;
+ padding-bottom: 10px;
+ padding-top: 13px;
+ max-height: 40px;
+ border-width: 1;
+ color: #fff;
+}
+
+.dialog .loader ~ .dialog-item {
+ transition: all 0.3s;
+ overflow: hidden;
+}
+
+.dialog .loader + .dialog-item {
+ border-top: none;
+}
+
+.dialog:not(.was-loaded) .loader ~ .dialog-item:not(.has-list) {
+ max-height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-width: 0;
+}
+
+.save-dialog .dialog-item {
+ display: flex;
+ justify-content: space-between;
+}
+
+.save-dialog .button {
+ display: block;
+}
+
+.webcam-dialog .button {
+ margin-top: 10px;
+}
+
+.shared-list {
+ max-height: calc(100vh - 345px);
+ transition: max-height 0.2s;
+}
+
+.shared-list.is-empty {
+ max-height: 0;
+ overflow: hidden;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-width: 0;
+}
+
+.shared-list .entry-button-wrapper {
+ position: static;
+ width: 120px;
+ float: right;
+}
+
+.shared-list .item-offline-button {
+ margin-top: 5px;
+}
+
+html:not(.has-touch) .shared-list .item-offline-button {
+ border-color: transparent;
+}
+
+.setting {
+ display: flex;
+}
+
+.setting-label {
+ font-size: 14px;
+ display: block;
+ width: calc(100% - 16px);
+ padding-right: 30px;
+ cursor: pointer;
+ line-height: 21px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.setting-checkbox {
+ margin-top: 3px;
+}
diff --git a/styles/modules/indicator.css b/styles/modules/indicator.css
new file mode 100644
index 0000000..8fb1f34
--- /dev/null
+++ b/styles/modules/indicator.css
@@ -0,0 +1,75 @@
+.notifications {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ transition: all 0.3s;
+ width: 240px;
+ opacity: 0;
+ transform: translateZ(0);
+ max-height: 50vh;
+ overflow: hidden;
+}
+
+.notifications.is-active {
+ opacity: 1;
+ z-index: 5;
+}
+
+.notification {
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ opacity: 0;
+ transition: all 0.3s ease-out;
+ transform: translateY(30px);
+ max-height: 0;
+ overflow: hidden;
+ line-height: 24px;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 0;
+ padding-bottom: 0;
+ font-size: 12px;
+ padding-left: 45px;
+ background-repeat: no-repeat;
+ background-position: 10px 10px;
+ background-image: url(../../images/icon/information-outline.svg);
+ color: #fff;
+}
+
+.notification a {
+ color: #fff;
+ text-decoration: none;
+ border-bottom: 1px #ccc solid;
+}
+
+.notification-error {
+ background-image: url(../../images/icon/alert-circle.svg);
+}
+
+.notification-welcome {
+ background-image: url(../../images/icon/emoticon.svg);
+}
+
+.notification.is-visible {
+ transform: translateY(0);
+}
+
+.notification.is-active {
+ margin-bottom: 10px;
+ opacity: 1;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ max-height: calc(100%);
+}
+
+.notification.is-visible:not(.is-active) {
+ height: 0;
+}
+
+.notification.is-active:nth-child(3) {
+ opacity: 0.5;
+}
+
+.notification.is-active:nth-child(3) ~ .notification {
+ opacity: 0;
+}
\ No newline at end of file
diff --git a/styles/modules/nav.css b/styles/modules/nav.css
new file mode 100644
index 0000000..41fc533
--- /dev/null
+++ b/styles/modules/nav.css
@@ -0,0 +1,284 @@
+.nav {
+ position: absolute;
+ width: 15%;
+ height: 100%;
+ width: 300px;
+ left: 0;
+ top: 0;
+ z-index: 11;
+ color: rgba(255, 255, 255, 0.6);
+ overflow: hidden;
+ transform: translateX(-300px);
+ transition: transform 300ms ease-out;
+ max-width: 100%;
+}
+
+.nav.is-swiping {
+ transition: none;
+}
+
+.nav.is-active {
+ transform: translateX(0);
+}
+
+.nav-button {
+ background-color: transparent;
+ display: block;
+ color: #fff;
+ border: none;
+ line-height: 22px;
+ font-size: 15px;
+ cursor: pointer;
+ transition: all 0.2s;
+ outline: none;
+ width: 100%;
+ text-align: left;
+ padding-left: 50px;
+ padding-right: 0px;
+ padding-bottom: 10px;
+ padding-top: 10px;
+ position: relative;
+}
+
+.has-touch .nav-button {
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 48px;
+ line-height: 48px;
+}
+
+.nav-button:hover,
+.nav-button.is-active,
+.nav-button:focus {
+ color: #fff;
+ background-color: hsla(0,0%,30%,1);
+}
+
+.nav-button::before {
+ width: 18px;
+ height: 18px;
+ content: '';
+ display: block;
+ position: absolute;
+ left: 20px;
+ top: 12px;
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.has-touch .nav-button::before {
+ top: 16px;
+}
+
+.has-touch .nav-button::after {
+ top: 15px;
+ transform: scale(1.5);
+}
+
+.open-button::before {
+ background-image: url(../../images/icon/open-in-app.svg);
+}
+
+.save-view-button::before {
+ background-image: url(../../images/icon/content-save.svg);
+}
+
+.photo-button::before {
+ background-image: url(../../images/icon/camera.svg);
+}
+
+.share-toggle-button::before {
+ background-image: url(../../images/icon/share-variant.svg);
+}
+
+.info-button::before {
+ background-image: url(../../images/icon/information-outline.svg);
+}
+
+.settings-button::before {
+ background-image: url(../../images/icon/settings.svg);
+}
+
+.nav-button::after {
+ content: '';
+ display: block;
+ width: 18px;
+ height: 18px;
+ position: absolute;
+ right: 20px;
+ top: 13px;
+ background-image: url(../../images/icon/chevron-down.svg);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ transition: all 0.3s;
+}
+
+.nav-button.is-active::after {
+ transform: rotate(-180deg);
+}
+
+.has-touch .nav-button.is-active::after {
+ transform: rotate(-180deg) scale(1.5);
+}
+
+.nav-headline {
+ height: 50px;
+ line-height: 50px;
+ color: #fff;
+ font-weight: normal;
+ padding-left: 20px;
+ font-size: 15px;
+ text-transform: uppercase;
+}
+
+.nav-toggle-button {
+ display: block;
+ width: 90px;
+ height: 30px;
+ position: absolute;
+ top: 10px;
+ left: 15px;
+ border: none;
+ text-indent: -5000px;
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ outline: 0;
+ z-index: 11;
+ transition: all 0.3s ease-out;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.nav-toggle-button.is-active {
+ border-color: transparent;
+ width: 30px;
+ transform: translateX(242px);
+}
+
+.nav-toggle-button.is-swiping {
+ transition: none;
+}
+
+.nav-toggle-button-text {
+ position: absolute;
+ height: 100%;
+ width: 50px;
+ text-indent: 0;
+ text-align: left;
+ left: 40px;
+ top: 0;
+ line-height: 30px;
+ font-size: 14px;
+ color: #666;
+ text-transform: uppercase;
+ overflow: hidden;
+ transition: all 0.3s ease-out;
+}
+
+.nav-toggle-button.is-active .nav-toggle-button-text {
+ width: 0;
+ opacity: 0;
+}
+
+.nav-toggle-button.is-swiping .nav-toggle-button-text {
+ transition: none;
+}
+
+.nav-toggle-button .svg-wrapper {
+ width: 30px;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.nav-toggle-button #svg {
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+
+.nav-toggle-button rect,
+.nav-toggle-button #menu {
+ transition: all 0.4s ease-out;
+}
+
+.nav-toggle-button #menu {
+ transform-origin: 12px 12px;
+ transform: rotateZ(0);
+}
+
+.nav-toggle-button rect {
+ transform-origin: 12px 12px;
+}
+
+.nav-toggle-button.is-swiping rect,
+.nav-toggle-button.is-swiping #menu {
+ transition: none;
+}
+
+.nav-toggle-button.is-active rect {
+ fill: #fff;
+}
+
+.nav-toggle-button.is-active #menu {
+ transform: rotateZ(-90deg);
+}
+
+.nav-toggle-button.is-active #rect-1 {
+ transform: rotateZ(45deg) translateX(0) translateY(5.1px);
+}
+
+.nav-toggle-button.is-active #rect-3 {
+ transform: rotateZ(-45deg) translateX(0) translateY(-5.1px);
+}
+
+.nav-toggle-button.is-active #rect-2 {
+ transform: scaleX(0);
+}
+
+@media screen and (max-width: 300px) {
+ .nav-toggle-button.is-active {
+ left: calc(100% - 41px);
+ }
+}
+
+@media screen and (max-width: 600px) {
+ body {
+ overflow: hidden;
+ }
+}
+
+@media screen and (max-height: 600px) {
+ .nav {
+ overflow: auto;
+ }
+
+ .nav .dialog.is-active {
+ max-height: none !important;
+ overflow: visible;
+ }
+
+ .nav .dialog-list:not(.is-empty),
+ .nav .shared-list:not(.is-empty),
+ .nav .about-content {
+ max-height: none !important;
+ overflow: visible;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .nav {
+ transform: translateX(0);
+ }
+
+ .nav-toggle-button {
+ display: none;
+ }
+}
diff --git a/styles/modules/panzoom.css b/styles/modules/panzoom.css
new file mode 100644
index 0000000..9dea277
--- /dev/null
+++ b/styles/modules/panzoom.css
@@ -0,0 +1,33 @@
+.panzoom {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ transition: all 0.2s;
+}
+
+.panzoom canvas {
+ image-rendering: -moz-crisp-edges;
+ image-rendering: -webkit-crisp-edges;
+ image-rendering: crisp-edges;
+ image-rendering: pixelated;
+ opacity: 0;
+}
+
+.panzoom.is-visible:not(.drag-over) canvas {
+ opacity: 1;
+ transition: opacity 0.2s;
+}
+
+.panzoom.drag-over {
+ background-color: #444;
+}
+
+.panzoom.drag-over canvas {
+ opacity: 0;
+}
+
+@media screen and (max-width: 800px) {
+ .has-touch .controls.is-active ~ .panzoom {
+ height: calc(100vh - 280px)
+ }
+}
\ No newline at end of file
diff --git a/styles/modules/workspace-nav.css b/styles/modules/workspace-nav.css
new file mode 100644
index 0000000..78e2610
--- /dev/null
+++ b/styles/modules/workspace-nav.css
@@ -0,0 +1,311 @@
+.workspace-nav {
+ z-index: 10;
+ width: 100%;
+ position: relative;
+}
+
+.workspace-controls {
+ position: absolute;
+ top: 0;
+ background-color: rgba(255, 255, 255, 0.4);
+ padding: 10px;
+ transform: translateY(-100%);
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row-reverse;
+}
+
+.workspace-controls .scale-to-original-button {
+ display: inline-block;
+}
+
+input.scale-slider {
+ width: calc(100% - 230px);
+ float: right;
+ position: relative;
+ top: 6px;
+ height: 20px;
+ display: none;
+ margin-right: 0;
+ margin-left: 0;
+ z-index: 14;
+}
+
+ .has-touch .workspace-controls .scale-slider {
+ min-height: 45px;
+ width: calc(100% - 260px);
+ top: 0;
+ }
+
+.workspace-controls .button {
+ margin-right: 10px;
+ float: left;
+ color: #333;
+ border-color: rgba(0, 0, 0, 0.1);
+}
+
+ .workspace-controls .button:hover,
+ .workspace-controls .button:active {
+ border-color: rgba(0, 0, 0, 0.9);
+ }
+
+ .has-touch .workspace-controls .button,
+ .workspace-controls .button[disabled],
+ .workspace-controls .button[disabled]:hover,
+ .workspace-controls .button[disabled]:active,
+ .workspace-controls .button[disabled]:focus {
+ border-color: rgba(0, 0, 0, 0.5);
+ }
+
+.workspace-controls .scale-label {
+ color: #333;
+ margin-left: 20px;
+ display: none;
+ height: 30px;
+ line-height: 30px;
+}
+
+ .has-touch .workspace-controls .scale-label {
+ font-size: 14px;
+ line-height: 45px;
+ text-align: right;
+ height: 45px;
+ }
+
+.workspace-controls .button {
+ float: right;
+ margin-right: 10px
+}
+
+.workspace-controls .controls-toggle-button {
+ float: left;
+}
+
+.fullscreen-button {
+ display: block;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 20px;
+ overflow: hidden;
+ text-indent: -5000px;
+ width: 30px;
+ height: 30px;
+ background-image: url(../../images/icon/fullscreen.svg);
+ background-color: transparent;
+ background-size: cover;
+ background-position: center;
+ border: none;
+ cursor: pointer;
+ transition: all 0.3s ease-out;
+ opacity: 1;
+}
+
+html:not(.has-touch) .fullscreen-button {
+ opacity: 0.7;
+}
+
+html:not(.has-touch) .fullscreen-button:hover {
+ opacity: 1;
+}
+
+.is-fullscreen .fullscreen-button {
+ background-image: url(../../images/icon/fullscreen-exit.svg);
+}
+
+.workspace-controls input[type=range]::-webkit-slider-runnable-track::before,
+.has-touch .workspace-controls input[type=range]::-webkit-slider-thumb {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+
+.workspace-controls input[type=range]:focus::-webkit-slider-thumb,
+.workspace-controls input[type=range]:active::-webkit-slider-thumb,
+.workspace-controls input[type=range]:focus::-webkit-slider-runnable-track::before,
+.workspace-controls input[type=range]:active::-webkit-slider-runnable-track::before,
+.has-touch .workspace-controls input[type=range]:focus::-webkit-slider-thumb,
+.has-touch .workspace-controls input[type=range]:active::-webkit-slider-thumb {
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+.workspace-controls input[type=range]::-webkit-slider-thumb::before,
+.workspace-controls input[type=range]::-webkit-slider-thumb::after {
+ background-color: rgba(0, 0, 0, 0.9);
+}
+
+.workspace-controls input[type=range]::-moz-range-track {
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 0) 0%,
+ rgba(0, 0, 0, 0) 41.9%,
+ rgba(0, 0, 0, 0.2) 42%,
+ rgba(0, 0, 0, 0.2) 58%,
+ rgba(0, 0, 0, 0) 58.1%,
+ rgba(0, 0, 0, 0) 100%
+ );
+}
+
+.workspace-controls .has-touch input[type=range]::-moz-range-track {
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 0) 0%,
+ rgba(0, 0, 0, 0) 49.9%,
+ rgba(0, 0, 0, 0.2) 50%,
+ rgba(0, 0, 0, 0.2) 55%,
+ rgba(0, 0, 0, 0) 55.1%,
+ rgba(0, 0, 0, 0) 100%
+ );
+}
+
+.workspace-controls input[type=range]::-moz-range-thumb {
+ background: radial-gradient(
+ ellipse at center,
+ rgba(0, 0, 0 ,1) 0%,
+ rgba(0, 0, 0 ,1) 30%,
+ rgba(0, 0, 0 ,0) 30.1%,
+ rgba(0, 0, 0 ,0) 100%
+ );
+}
+
+.workspace-controls input[type=range]::-moz-range-thumb:hover,
+.has-touch .workspace-controls input[type=range]::-moz-range-thumb {
+ background: radial-gradient(
+ ellipse at center,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 1) 30%,
+ rgba(0, 0, 0, 0.2) 30.1%,
+ rgba(0, 0, 0, 0.2) 100%
+ );
+}
+
+.workspace-controls input[type=range]:focus::-moz-range-thumb,
+.workspace-controls input[type=range]:active::-moz-range-thumb,
+.has-touch .workspace-controls input[type=range]:focus::-moz-range-thumb,
+.has-touch .workspace-controls input[type=range]:active::-moz-range-thumb {
+ background: radial-gradient(
+ ellipse at center,
+ rgba(0, 0, 0, 1) 0%,
+ rgba(0, 0, 0, 1) 30%,
+ rgba(0, 0, 0, 0.5) 30.1%,
+ rgba(0, 0, 0, 0.5) 100%
+ );
+}
+
+.workspace-controls input[type=range]::-ms-track {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+
+.workspace-controls input[type=range]::-ms-fill-lower,
+.workspace-controls input[type=range]::-ms-thumb {
+ background: #000;
+}
+
+.has-touch .workspace-controls input[type=range]::-ms-thumb {
+ border-color: rgba(0, 0, 0, 0.5);
+}
+
+.has-touch .workspace-controls input[type=range]:active::-ms-thumb,
+.has-touch .workspace-controls input[type=range]:focus::-ms-thumb {
+ border-color: rgba(0, 0, 0, 1);
+}
+
+/*workspace ui*/
+@media screen and (min-width: 300px) {
+ html:not(.has-touch) .workspace-controls .scale-slider {
+ display: inline-block;
+ }
+}
+
+@media screen and (min-width: 400px) {
+ html:not(.has-touch) .nav:not(.is-active) ~ .workspace .scale-label {
+ display: inline-block;
+ }
+
+ html:not(.has-touch) .nav:not(.is-active) ~ .workspace .scale-slider {
+ width: calc(100% - 300px);
+ }
+
+ .has-touch .nav:not(.is-active) ~ .workspace .scale-slider {
+ display: inline-block;
+ }
+}
+
+@media screen and (min-width: 700px) {
+ html:not(.has-touch) .nav ~ .workspace .scale-label {
+ display: inline-block;
+ }
+
+ html:not(.has-touch) .nav ~ .workspace .scale-slider {
+ width: calc(100% - 300px);
+ }
+
+ .has-touch .nav ~ .workspace .scale-slider {
+ display: inline-block;
+ }
+}
+
+@media screen and (min-width: 440px) {
+ .nav:not(.is-active) ~ .workspace .scale-slider {
+ width: calc(100% - 320px);
+ margin-left: 20px;
+ margin-right: 20px;
+ }
+
+ .has-touch .nav:not(.is-active) ~ .workspace .scale-slider {
+ width: calc(100% - 360px);
+ }
+
+ .has-touch .nav:not(.is-active) ~ .workspace .scale-label {
+ display: inline-block;
+ }
+}
+
+@media screen and (min-width: 740px) {
+ .nav ~ .workspace .scale-slider {
+ width: calc(100% - 320px);
+ margin-left: 20px;
+ margin-right: 20px;
+ }
+
+ .has-touch .nav ~ .workspace .scale-slider {
+ width: calc(100% - 360px);
+ }
+
+ .has-touch .nav ~ .workspace .scale-label {
+ display: inline-block;
+ }
+}
+
+@media screen and (min-width: 700px) {
+ .workspace-controls .controls-toggle-button {
+ padding-left: 20px;
+ position: relative;
+ }
+
+ .has-touch .workspace-controls .controls-toggle-button {
+ text-indent: 10px;
+ }
+
+ .workspace-controls .controls-toggle-button::before {
+ content: '';
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background-image: url(../../images/icon/chevron-down-black.svg);
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%) rotate(-180deg);
+ transition: all 0.3s ease-out;
+ }
+
+ .workspace-controls .controls-toggle-button.is-active::before {
+ transform: translateY(-50%) rotate(0deg);
+ }
+
+ .has-touch .workspace-controls .controls-toggle-button::before {
+ left: 5px;
+ }
+}
\ No newline at end of file
diff --git a/styles/modules/workspace.css b/styles/modules/workspace.css
new file mode 100644
index 0000000..bbaefd9
--- /dev/null
+++ b/styles/modules/workspace.css
@@ -0,0 +1,22 @@
+.workspace {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transition: all 0.3s ease-out;
+ display: flex;
+ flex-direction: column-reverse;
+}
+
+@media screen and (min-width: 600px) {
+ .nav.is-active ~ .workspace {
+ width: calc(100% - 300px);
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .nav ~ .workspace {
+ width: calc(100% - 300px);
+ }
+}
\ No newline at end of file