cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'develop'

Browse Source
This commit is contained in:
Georg Fischer 2015-12-23 23:29:16 +01:00
commit 6828476874
119 changed files with 11866 additions and 1764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.gitignore vendored
View File

@ -2,7 +2,6 @@
.DS_Store .DS_Store
.AppleDouble .AppleDouble
.LSOverride .LSOverride
Icon
# Thumbnails # Thumbnails
._* ._*
@ -23,3 +22,9 @@ $RECYCLE.BIN/
# SublimeText project files # SublimeText project files
*.sublime-workspace *.sublime-workspace
# build script dependencies
node_modules/
# production folder
production/

20
LICENSE Normal file
View File

@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2015 Georg Fischer
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

43
README.md
View File

@ -3,19 +3,50 @@ image glitch experiment
this is an experiment for the web browser. it corrupts jpg images so that they appear "glitched". this is an experiment for the web browser. it corrupts jpg images so that they appear "glitched".
[![triangulation experiment screen shot](http://dl.dropboxusercontent.com/u/1098704/Screenshots/github-glitch.png)](http://snorpey.github.io/jpg-glitch/) [![glitch experiment screen shot](images/screenshot.png)](http://snorpey.github.io/jpg-glitch/)
[online demo](http://snorpey.github.io/jpg-glitch/) [online demo](http://snorpey.github.io/jpg-glitch/)
this experiment is very much based on the [smack my glitch up js](https://github.com/Hugosslade/smackmyglitchupjs) script. this experiment is very much based on the [smack my glitch up js](https://github.com/Hugosslade/smackmyglitchupjs) script.
glitch effect code
---
if you're a developer and just interested in the code for the glitch effect, there's a separate repository for that: [glitch-canvas](https://github.com/snorpey/glitch-canvas).
third party code used in this experiment third party code used in this experiment
--- ---
* [html5slider](http://frankyan.com/labs/html5slider/) by [fryn](https://github.com/fryn), MIT license * [localforage](https://github.com/mozilla/localForage) by [mozilla](https://github.com/mozilla), Apache License 2.0
* [js signals](http://millermedeiros.github.io/js-signals/) by [millermedeiros](https://github.com/millermedeiros), MIT license * [requirejs](http://requirejs.org/), by [jrburke](jrburke), BSD & MIT license
* [require js](http://requirejs.org/), by [jrburke](jrburke), BSD & MIT license * [almond](https://github.com/jrburke/almond), by [jrburke](jrburke), BSD & MIT license
* [raf js](https://gist.github.com/paulirish/1579671), by [paulirish](https://github.com/paulirish), MIT license * [javascript-md5](https://blueimp.github.io/JavaScript-MD5/), by [blueimp](https://github.com/blueimp), MIT license
* [reqwest](https://github.com/ded/reqwest/), by [ded](https://github.com/ded), MIT license
* [glitch-canvas](https://github.com/snorpey/glitch-canvas/), by [snorpey](https://github.com/snorpey), MIT license
* [material design icons](https://github.com/Templarian/MaterialDesign), by [templarian](https://github.com/templarian), Open Font License 1.1
license license
--- ---
[MIT License](http://www.opensource.org/licenses/mit-license.php) [MIT License](LICENSE)
development
---
if you're interested in adding features, fixing bugs the code, or running the tool on your own server, here are some pointers to help you get familar with the code base.
if you have questions about the code, don't hesitate to open an [issue](issues) or send me an email.
* ``config.js``: all defaults and settings are in here
* ``glitcher.js`` the main app starting point. all events are hooked up in here.
* the app does not use any big dom libraries or app frameworks (like jquery, angular or react)
* where possible, the app uses webworkers for complex tasks
* all strings that are displayed to the user are located in the ``lang/`` folder. for each language, a different file is created.
* the app uses a serviceworker to make it available offline in [browsers](http://caniuse.com/#feat=serviceworkers) that support it
* the app was built without any preprocessors in mind. using the [build script](#build-script) is entirely optional and not required to get the app to work.
build script
---
the build script takes care of concatenating and minifying all scripts and styles. it uses [gruntjs](http://gruntjs.com/).
please make sure that both [nodejs](http://nodejs.org/) and grunt-cli are [set up properly](http://gruntjs.com/getting-started) on your machine.
run ```npm install``` from within the ```build/``` folder to install the dependencies of the build script.
to build, run ```grunt production``` from within the ```build/``` folder. the optimized files will get copied to the ```production/``` folder.

216
build/Gruntfile.js Normal file
View File

@ -0,0 +1,216 @@
// http://gruntjs.com/configuring-tasks
module.exports = function( grunt ) {
var grunt_configuration = {
pkg: grunt.file.readJSON( 'package.json' ),
// concatenate all javascript files in scripts folder and compress them;
// replace requirejs with the more lightweight almond js
requirejs: {
production: {
options: {
name: 'lib/almond',
include: 'glitcher',
baseUrl: '../scripts/',
mainConfigFile: '../scripts/glitcher.js',
out: '../production/glitcher.min.js',
wrap: true
}
}
},
// minify css files in styles dir
cssmin: {
production: {
files: {
'../production/glitcher.min.css': [ '../styles/glitcher.css' ]
}
}
},
// minify svg files
svgmin: {
production: {
options: {
plugins: [
{ removeViewBox: false }
]
},
files: [ {
expand: true,
cwd: '../',
src: 'images/icon/*.svg',
dest: '../production/'
}, {
expand: true,
cwd: '../',
src: 'images/logos/*.svg',
dest: '../production/'
} ]
}
},
uglify: {
options: {
compress: {
dead_code: true,
properties: true,
booleans: true,
unused: true,
hoist_funs: true,
hoist_vars: true,
if_return: true,
join_vars: true
},
mangle: {
sort: true,
toplevel: true
}
},
production: {
files: [
{ src: '../serviceworker.js', dest: '../production/serviceworker.min.js' },
{ src: '../scripts/workers/glitchworker.js', dest: '../production/glitchworker.min.js' },
{ src: [
'../scripts/lib/localforage.nopromises.js',
'../scripts/lib/md5.js',
'../scripts/workers/storageworker.js'
], dest: '../production/storageworker.min.js' },
{ src: [
'../scripts/lib/localforage.nopromises.js',
'../scripts/workers/settingsworker.js'
], dest: '../production/settingsworker.min.js' }
]
}
},
// copy the index file
copy: {
productionTextBasedFiles: {
options: { processContent: updateContent },
files: [
{ src: '../index.html', dest: '../production/index.html' },
{ src: '../manifest.json', dest: '../production/manifest.json' },
{ src: '../.gitignore', dest: '../production/.gitignore' },
{ src: '../LICENSE', dest: '../production/LICENSE' },
{
expand: true,
cwd: '../',
src: [ 'lang/*.json' ],
dest: '../production/'
},
// copying these files 'in place' to apply updateContent function
// that updates some of the paths in the minified files
{ src: '../production/glitcher.min.js', dest: '../production/glitcher.min.js' },
{ src: '../production/serviceworker.min.js', dest: '../production/serviceworker.min.js' },
{ src: '../production/storageworker.min.js', dest: '../production/storageworker.min.js' },
{ src: '../production/settingsworker.min.js', dest: '../production/settingsworker.min.js' },
{ src: '../production/glitcher.min.css', dest: '../production/glitcher.min.css' }
]
},
productionBinaryFiles: {
files: [ {
expand: true,
cwd: '../',
src: [ 'images/*.jpg' ],
dest: '../production/'
}, {
expand: true,
cwd: '../',
src: [ 'images/logos/*.png' ],
dest: '../production/'
},
{ src: '../favicon.ico', dest: '../production/favicon.ico' } ]
}
},
// minify index file in production dir
// including css and javascript
htmlmin: {
production: {
options: {
removeComments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: {
compress: {
dead_code: true,
properties: true,
booleans: true,
unused: true,
hoist_funs: true,
hoist_vars: true,
if_return: true,
join_vars: true
},
mangle: {
sort: true,
toplevel: true
}
},
removeScriptTypeAttributes: true
},
files: [ {
src: '../production/index.html', dest: '../production/index.html'
} ]
}
},
};
// replace javscript and css paths when copying files
function updateContent ( content, path ) {
if ( path === '../index.html' ) {
content = content
.replace( 'styles/glitcher.css', 'glitcher.min.css' )
.replace( 'scripts/lib/require.js', 'glitcher.min.js' )
.replace( 'serviceworker.js', 'serviceworker.min.js' )
.replace( "scriptEl.setAttribute( 'data-main', 'scripts/glitcher.js' );", '' );
}
if ( path === '../production/glitcher.min.js' ) {
content = content
.replace( 'scripts/workers/glitchworker.js', 'glitchworker.min.js' )
.replace( 'scripts/workers/storageworker.js', 'storageworker.min.js' )
.replace( 'scripts/workers/settingsworker.js', 'settingsworker.min.js' );
}
if ( path === '../production/serviceworker.min.js' ) {
content = content
.replace( /v\d+(.?\d*)+::/g, 'b' + Date.now() + '::' ) // 'v1.0.1::'' -> 'b{timestamp}'
.replace( 'styles/glitcher.css', 'glitcher.min.css' )
.replace( 'scripts/glitcher.js', 'glitcher.min.js' )
.replace( 'scripts/workers/glitchworker.js', 'glitchworker.min.js' )
.replace( 'scripts/workers/storageworker.js', 'storageworker.min.js' )
.replace( 'scripts/workers/settingsworker.js', 'settingsworker.min.js' );
}
if ( path === '../production/storageworker.min.js' || '../production/settingsworker.min.js' ) {
content = content.replace( /,importScripts\(.*\),/, ',' ); // replaces importScripts
}
if ( path === '../production/glitcher.min.css' ) {
content = content.replace( /\.\.\/images\//gi, 'images/' ); // replaces importScripts
}
if ( path === '../manifest.json' ) {
content = content.replace( 'serviceworker.js', 'serviceworker.min.js' );
}
return content;
}
grunt.initConfig( grunt_configuration );
grunt.loadNpmTasks( 'grunt-contrib-requirejs' );
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
grunt.loadNpmTasks( 'grunt-contrib-copy' );
grunt.loadNpmTasks( 'grunt-contrib-htmlmin' );
grunt.loadNpmTasks( 'grunt-svgmin' );
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.registerTask( 'default', [ 'requirejs', 'cssmin', 'svgmin', 'uglify', 'copy', 'htmlmin' ] );
grunt.registerTask( 'production', [ 'requirejs', 'cssmin', 'copy' ] );
grunt.registerTask( 'js', [ 'requirejs', 'uglify', 'copy' ] );
grunt.registerTask( 'css', [ 'cssmin' ] );
grunt.registerTask( 'cp', [ 'copy' ] );
grunt.registerTask( 'html', [ 'copy', 'htmlmin' ] );
};

14
build/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "distort-grid-build",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.6.1",
"grunt-contrib-htmlmin": "~0.6.0",
"grunt-contrib-imagemin": "~0.3.0",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-uglify": "^0.11.0",
"grunt-svgmin": "^3.1.0"
}
}

BIN
images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
images/icon/alert-circle.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 412 B

1
images/icon/camera.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 530 B

1
images/icon/chevron-down-black.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

1
images/icon/chevron-down.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

1
images/icon/content-save.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 457 B

1
images/icon/delete.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 388 B

1
images/icon/emoticon.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 707 B

1
images/icon/fullscreen-exit.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 380 B

1
images/icon/fullscreen.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 381 B

1
images/icon/information-outline.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 506 B

7
images/icon/nav.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="#000">
<rect id="rect-1" x="3" y="16" width="18" height="2"></rect>
<rect id="rect-2" x="3" y="6" width="18" height="2"></rect>
<rect id="rect-3" x="3" y="11" width="18" height="2"></rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 305 B

1
images/icon/open-in-app.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M12,10L8,14H11V20H13V14H16M19,4H5C3.89,4 3,4.9 3,6V18A2,2 0 0,0 5,20H9V18H5V8H19V18H15V20H19A2,2 0 0,0 21,18V6A2,2 0 0,0 19,4Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 433 B

1
images/icon/settings.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
images/icon/share-variant.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

BIN
images/lincoln.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
images/logos/glitch-144x144.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

24
images/logos/glitch-144x144.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="144px" height="144px" viewBox="0 0 144 144" enable-background="new 0 0 144 144" xml:space="preserve">
<g>
<path fill="#343434" d="M18.609,140.648h106.782c8.433,0,15.256-6.83,15.256-15.256V18.606c0-8.424-6.823-15.255-15.256-15.255
H18.609c-8.387,0-15.255,6.794-15.255,15.255v106.786C3.354,133.818,10.191,140.648,18.609,140.648z"/>
<path fill="#F3961D" d="M87.511,37.058H34.008c1.334-5.356,4.209-10.063,8.157-13.676H79.35
C83.298,26.995,86.17,31.702,87.511,37.058z"/>
<path fill="#D32F2E" d="M57.989,16.074c7.188,0,13.675,2.808,18.591,7.307H39.396C44.312,18.882,50.799,16.074,57.989,16.074z"/>
<path fill="#FBC013" d="M91.689,43.724c0,2.436-0.417,4.76-1.007,7.01H37.4c-0.592-2.25-1.009-4.574-1.009-7.01
c0-2.31,0.369-4.521,0.901-6.667h53.502C91.324,39.203,91.689,41.415,91.689,43.724z"/>
<path fill="#24B7CF" d="M70.768,71.375c-6.995,0-13.308-2.682-18.175-6.965h36.354C84.076,68.693,77.761,71.375,70.768,71.375z"/>
<path fill="#CCD642" d="M84.213,64.41H47.862c-4.068-3.576-7.047-8.283-8.466-13.676h53.286
C91.259,56.126,88.28,60.834,84.213,64.41z"/>
<path fill="#4D8EC7" d="M67.366,85.438c13.62,0,26.067,2.473,35.706,6.547H31.667C41.302,87.911,53.749,85.438,67.366,85.438z"/>
<rect x="22.616" y="119.367" fill="#A45D9D" width="110.595" height="7.307"/>
<path fill="#61539A" d="M129.25,112.85v6.488H18.653v-6.488c0-2.488,0.718-4.895,1.952-7.188h106.693
C128.534,107.955,129.25,110.361,129.25,112.85z"/>
<path fill="#5565A8" d="M124.117,105.662H17.422c2.897-5.393,8.942-10.124,17.125-13.677h72.451
C115.178,95.539,121.225,100.27,124.117,105.662z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/logos/glitch-168x168.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

24
images/logos/glitch-168x168.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="168px" height="168px" viewBox="0 0 168 168" enable-background="new 0 0 168 168" xml:space="preserve">
<g>
<path fill="#343434" d="M20.498,165.649h127.004c10.029,0,18.145-8.124,18.145-18.145V20.495c0-10.02-8.115-18.145-18.145-18.145
H20.498c-9.976,0-18.145,8.081-18.145,18.145v127.01C2.354,157.525,10.486,165.649,20.498,165.649z"/>
<path fill="#F3961D" d="M104.156,42.44H40.521c1.587-6.37,5.007-11.969,9.702-16.267H94.45
C99.146,30.472,102.562,36.07,104.156,42.44z"/>
<path fill="#D32F2E" d="M68.922,17.483c8.549,0,16.265,3.34,22.112,8.691H46.808C52.655,20.823,60.371,17.483,68.922,17.483z"/>
<path fill="#FBC013" d="M107.417,50.369c0,2.897-0.496,5.662-1.197,8.337H42.848c-0.704-2.675-1.2-5.44-1.2-8.337
c0-2.747,0.438-5.377,1.072-7.929h63.634C106.982,44.992,107.417,47.623,107.417,50.369z"/>
<path fill="#24B7CF" d="M82.534,83.256c-8.319,0-15.828-3.189-21.617-8.284h43.239C98.362,80.066,90.853,83.256,82.534,83.256z"/>
<path fill="#CCD642" d="M100.108,74.972H56.873c-4.838-4.253-8.382-9.852-10.069-16.266h63.377
C108.489,65.121,104.945,70.719,100.108,74.972z"/>
<path fill="#4D8EC7" d="M78.882,99.982c16.199,0,31.004,2.941,42.468,7.787H36.423C47.883,102.924,62.687,99.982,78.882,99.982z"/>
<rect x="23.899" y="140.337" fill="#A45D9D" width="131.54" height="8.691"/>
<path fill="#61539A" d="M152.092,132.586v7.716H20.551v-7.716c0-2.96,0.854-5.821,2.321-8.55h126.898
C151.24,126.765,152.092,129.626,152.092,132.586z"/>
<path fill="#5565A8" d="M147.45,124.036H20.551c3.446-6.414,10.636-12.04,20.367-16.267h86.173
C136.818,111.996,144.012,117.622,147.45,124.036z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/logos/glitch-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

22
images/logos/glitch-192x192.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="192px" height="192px" viewBox="0 0 192 192" enable-background="new 0 0 192 192" xml:space="preserve">
<path fill="#343434" d="M22.957,190.043h146.449c11.564,0,20.922-9.368,20.922-20.923V22.666c0-11.554-9.357-20.922-20.922-20.922
H22.957c-11.503,0-20.922,9.318-20.922,20.922V169.12C2.035,180.675,11.413,190.043,22.957,190.043z"/>
<path fill="#F3961D" d="M119.424,47.971H46.047c1.829-7.345,5.772-13.801,11.187-18.757h50.998
C113.646,34.169,117.585,40.625,119.424,47.971z"/>
<path fill="#D32F2E" d="M78.794,19.192c9.858,0,18.755,3.851,25.498,10.021H53.295C60.038,23.043,68.935,19.192,78.794,19.192z"/>
<path fill="#FBC013" d="M123.184,57.113c0,3.34-0.572,6.529-1.38,9.614H48.729c-0.812-3.085-1.384-6.273-1.384-9.614
c0-3.167,0.505-6.201,1.236-9.143h73.376C122.683,50.913,123.184,53.946,123.184,57.113z"/>
<path fill="#24B7CF" d="M94.491,95.035c-9.593,0-18.251-3.678-24.927-9.552h49.86C112.743,91.357,104.083,95.035,94.491,95.035z"/>
<path fill="#CCD642" d="M114.756,85.483H64.901c-5.579-4.904-9.665-11.36-11.611-18.756h73.08
C124.42,74.123,120.334,80.579,114.756,85.483z"/>
<path fill="#4D8EC7" d="M90.279,114.322c18.68,0,35.751,3.392,48.97,8.979H41.32C54.534,117.714,71.605,114.322,90.279,114.322z"/>
<rect x="26.88" y="160.854" fill="#A45D9D" width="151.679" height="10.022"/>
<path fill="#61539A" d="M174.698,151.917v8.897H23.019v-8.897c0-3.413,0.985-6.712,2.677-9.858h146.326
C173.717,145.205,174.698,148.504,174.698,151.917z"/>
<path fill="#5565A8" d="M169.346,142.059H23.019c3.974-7.396,12.263-13.883,23.485-18.757h99.365
C157.086,128.176,165.381,134.663,169.346,142.059z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/logos/glitch-48x48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

24
images/logos/glitch-48x48.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g>
<path fill="#343434" d="M6.623,46.344h34.754c2.745,0,4.966-2.224,4.966-4.966V6.621c0-2.741-2.221-4.965-4.966-4.965H6.623
c-2.73,0-4.966,2.211-4.966,4.965v34.757C1.657,44.12,3.883,46.344,6.623,46.344z"/>
<path fill="#F3961D" d="M26.921,12.683H9.507c0.435-1.743,1.37-3.275,2.655-4.451h12.103C25.55,9.407,26.484,10.939,26.921,12.683z
"/>
<path fill="#D32F2E" d="M15.556,5.854c2.339,0,4.451,0.914,6.051,2.378H9.504C11.104,6.768,13.216,5.854,15.556,5.854z"/>
<path fill="#FBC013" d="M29.364,14.853c0,0.793-0.136,1.55-0.328,2.281H11.694c-0.192-0.731-0.328-1.488-0.328-2.281
c0-0.752,0.12-1.472,0.293-2.17h17.414C29.246,13.381,29.364,14.101,29.364,14.853z"/>
<path fill="#24B7CF" d="M24.129,23.852c-2.275,0-4.331-0.872-5.915-2.267h11.832C28.46,22.979,26.405,23.852,24.129,23.852z"/>
<path fill="#CCD642" d="M28.423,21.585H16.592c-1.324-1.163-2.294-2.696-2.756-4.451h17.343
C30.716,18.889,29.746,20.422,28.423,21.585z"/>
<path fill="#4D8EC7" d="M19.094,28.373c4.433,0,8.484,0.806,11.622,2.132H7.476C10.611,29.179,14.662,28.373,19.094,28.373z"/>
<rect x="7.476" y="39.417" fill="#A45D9D" width="35.995" height="2.378"/>
<path fill="#61539A" d="M41.747,37.296v2.111H5.75v-2.111c0-0.81,0.234-1.594,0.636-2.341h34.726
C41.514,35.702,41.747,36.486,41.747,37.296z"/>
<path fill="#5565A8" d="M39.256,34.955H4.529c0.942-1.754,2.91-3.294,5.573-4.45h23.581C36.346,31.661,38.313,33.201,39.256,34.955
z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/logos/glitch-72x72.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

24
images/logos/glitch-72x72.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="72px" height="72px" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
<g>
<path fill="#343434" d="M9.307,70.322h53.387c4.216,0,7.627-3.416,7.627-7.627V9.305c0-4.211-3.411-7.626-7.627-7.626H9.307
c-4.193,0-7.627,3.396-7.627,7.626v53.39C1.68,66.906,5.099,70.322,9.307,70.322z"/>
<path fill="#F3961D" d="M40.486,18.616H13.737c0.667-2.677,2.104-5.031,4.078-6.838h18.591
C38.381,13.585,39.816,15.938,40.486,18.616z"/>
<path fill="#D32F2E" d="M23.029,8.125c3.593,0,6.837,1.403,9.295,3.653H13.732C16.191,9.528,19.435,8.125,23.029,8.125z"/>
<path fill="#FBC013" d="M44.239,21.949c0,1.217-0.208,2.38-0.503,3.505H17.098c-0.296-1.125-0.504-2.288-0.504-3.505
c0-1.155,0.185-2.261,0.45-3.333h26.749C44.058,19.688,44.239,20.793,44.239,21.949z"/>
<path fill="#24B7CF" d="M36.198,35.772c-3.496,0-6.653-1.34-9.087-3.482h18.176C42.852,34.433,39.694,35.772,36.198,35.772z"/>
<path fill="#CCD642" d="M42.794,32.291H24.62c-2.034-1.788-3.523-4.142-4.233-6.837h26.641
C46.316,28.149,44.827,30.503,42.794,32.291z"/>
<path fill="#4D8EC7" d="M28.464,42.718c6.809,0,13.033,1.236,17.852,3.273H10.616C15.434,43.955,21.656,42.718,28.464,42.718z"/>
<rect x="10.616" y="59.682" fill="#A45D9D" width="55.293" height="3.653"/>
<path fill="#61539A" d="M63.261,56.423v3.244H7.967v-3.244c0-1.244,0.359-2.447,0.976-3.594h53.343
C62.902,53.976,63.261,55.179,63.261,56.423z"/>
<path fill="#5565A8" d="M59.434,52.829H6.091c1.447-2.695,4.471-5.061,8.562-6.837h36.223
C54.964,47.769,57.987,50.134,59.434,52.829z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/logos/glitch-96x96.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

24
images/logos/glitch-96x96.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
<g>
<path fill="#343434" d="M13.399,92.489h69.201c5.465,0,9.887-4.427,9.887-9.887V13.397c0-5.459-4.422-9.886-9.887-9.886H13.399
c-5.436,0-9.887,4.402-9.887,9.886v69.205C3.513,88.062,7.944,92.489,13.399,92.489z"/>
<path fill="#F3961D" d="M53.815,25.467H19.142c0.865-3.471,2.729-6.521,5.287-8.863h24.098
C51.085,18.945,52.947,21.996,53.815,25.467z"/>
<path fill="#D32F2E" d="M31.187,11.868c4.658,0,8.862,1.819,12.049,4.735H19.137C22.323,13.688,26.527,11.868,31.187,11.868z"/>
<path fill="#FBC013" d="M58.681,29.787c0,1.578-0.271,3.085-0.652,4.543h-34.53c-0.383-1.458-0.653-2.965-0.653-4.543
c0-1.497,0.239-2.931,0.584-4.32h34.673C58.444,26.856,58.681,28.29,58.681,29.787z"/>
<path fill="#24B7CF" d="M48.257,47.706c-4.532,0-8.624-1.737-11.778-4.514h23.56C56.882,45.969,52.789,47.706,48.257,47.706z"/>
<path fill="#CCD642" d="M56.806,43.192H33.249c-2.637-2.317-4.567-5.368-5.487-8.862h34.533
C61.373,37.824,59.442,40.875,56.806,43.192z"/>
<path fill="#4D8EC7" d="M38.231,56.709c8.826,0,16.894,1.603,23.14,4.243H15.097C21.341,58.312,29.407,56.709,38.231,56.709z"/>
<rect x="15.097" y="78.697" fill="#A45D9D" width="71.673" height="4.735"/>
<path fill="#61539A" d="M83.336,74.474v4.205H11.662v-4.205c0-1.612,0.466-3.172,1.266-4.658h69.144
C82.872,71.302,83.336,72.861,83.336,74.474z"/>
<path fill="#5565A8" d="M78.375,69.815H9.23c1.877-3.494,5.795-6.561,11.098-8.863h46.953
C72.582,63.255,76.501,66.321,78.375,69.815z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

109
index.html
View File

@ -2,37 +2,88 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>image glitch experiment</title> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/global.css" /> <link rel="manifest" href="manifest.json" />
<link rel="icon" type="image/png" href="images/logos/glitch-48x48.png" sizes="48x48" />
<link rel="icon" type="image/png" href="images/logos/glitch-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="images/logos/glitch-144x144.png" sizes="144x144" />
<link rel="apple-touch-icon" sizes="96x96" href="images/logos/glitch-96x96.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/logos/glitch-144x144.png" />
<title>Image Glitch Tool</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, Roboto, 'Lucida Grande', sans-serif; }
body > p, .description { margin: 50px auto; max-width: 500px; width: 90%; }
.is-good-enough .min-requirements, .has-js .js-required { display: none; }
.text { opacity: 1; }
.has-js .text { opacity: 0; transition: opacity 0.8s ease-in; }
.text p + p, .text p + div { margin-top: 1em; }
.is-too-old .text { opacity: 1 }
.is-loading .text { opacity: 0 }
.app-loader { display: inline-block; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 90px; transition: opacity 0.1s; }
.loader { opacity: 0; }
.is-loading .loader { opacity: 1; }
.loader::before, .loader::after { content: ''; display: block; position: absolute; top: 8px; left: 18px; width: 20px; height: 20px; border-radius: 40px; border: 2px currentColor solid; z-index: 1; transform: scale(0.5); opacity: 0; }
.is-loading .loader::before { animation: pulse 2s infinite; }
.is-loading .loader::after { animation: pulse 2s infinite; animation-delay: 1s; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(0.5); } }
</style>
<script>document.documentElement.setAttribute( 'class', 'has-js' );</script>
</head> </head>
<body> <body>
<article class="content"> <article class="description text">
<h1 class="headline">glitch images</h1> <p>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.</p>
<p>drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corripted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p> <p>This app corrupts some bytes in an image. Because of the way <a href="https://en.wikipedia.org/wiki/JPEG">JPEG encoding</a> works, the corrupted file still shows a corrupted image. It was inspired by <a href="http://github.com/soulwire">soulwire</a>’s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in Flash.</p>
<p>This tool was created by <a href="http://snorpey.com/">Georg</a>. He is always happy to learn about the things that people are creating with his tools. You can follow him on <a href="https://twitter.com/snorpey">Twitter</a> or explore the source code of this app on <a href="https://github.com/snorpey/jpg-glitch">GitHub</a>.</p>
<p>If you like the glitcher, you can check out some of Georg’s other <a href="http://snorpey.github.io/experiments/">JavaScript experiments</a>.</p>
<p class="min-requirements text">
<strong>Please note</strong>: <span class="js-required">javascript and </span><a href="http://caniuse.com/#feat=addeventlistener,canvas,classlist,es5,json,queryselector">modern browsers</a> are required for this app to work.
</p>
</article> </article>
<div class="content" id="controls"> <svg id="svg" xmlns="http://www.w3.org/2000/svg"></svg>
<div class="control-wrapper"> <script>
<label class="control-label" for="amount">glitch amount</label> var testCanvas = document.createElement( 'canvas' );
<input class="control-input" type="range" id="amount" min="0" max="100" value="50" />
</div> if (
<div class="control-wrapper"> 'querySelector' in document &&
<label class="control-label" for="seed">seed</label> 'addEventListener' in window &&
<input class="control-input" type="range" id="seed" min="0" max="100" value="50" /> Array.prototype.forEach &&
</div> document.createElement( 'a' ).classList &&
<div class="control-wrapper"> ( testCanvas.getContext && testCanvas.getContext( '2d' ) )
<label class="control-label" for="iterations">iterations</label> ) {
<input class="control-input" type="range" id="iterations" min="1" max="50" value="5" /> if ( 'serviceWorker' in navigator ) {
</div> if ( location.protocol !== 'https:' && location.host !== 'localhost' ) {
<div class="control-wrapper"> location.protocol = 'https:';
<label class="control-label" for="quality">jpg quality</label> } else {
<input class="control-input" type="range" id="quality" min="1" max="90" value="50" /> navigator.serviceWorker.register( 'serviceworker.js' );
</div> }
</div> }
<div class="export-wrapper">
<button id="save-button" class="button">export image</button> var loaderEl = document.createElement( 'div' );
<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a> loaderEl.classList.add( 'loader' );
</div> loaderEl.classList.add( 'app-loader' );
<canvas id="canvas"></canvas> loaderEl.textContent = 'Loading…';
<script src="scripts/lib/require-2.1.4.js" data-main="scripts/src/main"></script> document.body.appendChild( loaderEl );
var scriptEl = document.createElement( 'script' );
scriptEl.setAttribute( 'data-main', 'scripts/glitcher.js' );
scriptEl.async = true;
scriptEl.src = 'scripts/lib/require.js';
document.documentElement.classList.add( 'is-loading' );
document.documentElement.classList.add( 'is-good-enough' );
document.body.appendChild( scriptEl );
testCanvas = null;
var linkEl = document.createElement( 'link' );
linkEl.href = 'styles/glitcher.css';
linkEl.rel = 'stylesheet';
document.head.appendChild( linkEl );
} else {
setTimeout( function () {
document.documentElement.setAttribute( 'class', 'has-js is-too-old' );
}, 20 );
}
</script>
</body> </body>
</html> </html>

134
lang/de-de.json Normal file
View File

@ -0,0 +1,134 @@
{
"lang": "en-us",
"index": {
"title": "Image Glitch Werkzeug",
"description": "Mit diesem Programm kannst du ein Bild so bearbeiten, dass es kaputt aussieht. Ziehe ein Bild in das Browserfenster um loszulegen.\n\nDas Programm verändert einige Bytes in der Bilddatei. Aufgrund der Art und Weise wie der [JPEG Logarithmus](https://de.wikipedia.org/wiki/JPEG) funktioniert, wird trotz eigenlich unlesbarer Rohdaten weiterhin ein Bild erzeugt. Dieses Programm ist angelehnt an ein ähnliches Experiment von [experiment](http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator) von [soulwire](http://github.com/soulwire) in Flash.\n\nDieses Programm wurde von [Georg](http://snorpey.com/) entwickelt. Er freut sich übrigens immer, von den Nutzern seiner Programme zu hören wie sie die Programme einsetzen. Du kannst Georg bei [Twitter](https://twitter.com/snorpey) folgen oder dir den Quellcode dieses Programms bei [GitHub](https://github.com/snorpey/jpg-glitch) ansehen.\n\nFalls dir dieses Programm gefallen hat, gefallen dir vielleicht auch Georgs andere [Experimente](http://snorpey.github.io/experiments/)."
},
"settings": {
"settings": "Einstellungen",
"settingstitle": "Ändere die Einstellungen des Programms",
"canzoomwithpointer": "Erlaube Zoomen mit Mausrad und Gesten",
"resizeuploadedimages": "Große Bilder verkleinen, um Fehler zu vermeiden",
"language": "Sprache (Language)",
"languageoptions": {
"de-de": "Deutsch DE",
"en-us": "Englisch (English US)"
},
"error": {
"save": "Konnte die Einstellungen nicht im Browser speichern.",
"load": "Konnte die Einstellungen nicht vom Browser laden."
}
},
"about": {
"info": "Über",
"infotitle": "Weitere Informationen über dieses Programm"
},
"controls": {
"controls": "Regler",
"controlstitle": "Regler ein- und ausblenden",
"randomize": "Zufall",
"randomizetitle": "Zufällige Reglerwerte wählen",
"center": "Mittig",
"centertitle": "Zentriere das Bild auf dem Bildschirm",
"original": "100%",
"originaltitle": "Zoome zur Originalgröße des Bildes",
"zoom": "Zoom",
"amount": "Betrag",
"seed": "Startwert",
"iterations": "Wiederholungen",
"quality": "Qualität",
"fullscreen": "Vollbild",
"fullscreentitle": "Vollbild ein- und ausschalten"
},
"nav": {
"menu": "Menü",
"menutitle": "Hauptmenü ein- und ausschalten"
},
"file": {
"open": "Öffnen",
"opentitle": "Eine Datei von deinem Gerät öffnen",
"import": "Importieren",
"importtitle": "Öffne ein Bild von deiner Festplatte",
"recent": "Bilder aus vorherigen Sitzungen",
"norecent": "Noch keine Bilder vorhanden",
"untitled": "Ohne Titel",
"del": "Löschen",
"deltitle": "Dieses Bild aus dem Speicher deines Browsers löschen",
"openimage": "Öffnen",
"openimagetitle": "Dieses Bild laden",
"offline": "Offline nehmen",
"offlinetitle": "Dieses Bild von Imgur löschen und vom Netz nehmen",
"openlink": "Link öffnen",
"openlinktitle": "Das Bild in einen neuen Browsertab öffnen",
"save": "Speichern",
"savetitle": "Aktuelles Bild für spätere Sitzungen speichern",
"download": "Herunterladen",
"downloadtitle": "Lade das bearbeitete Bild auf herunter",
"saveinbrowser": "Speichern",
"saveinbrowsertitle": "Speichere das Bild im Speicher deines Browsers",
"error": {
"load": "Konnte vorherige Sitzung nicht laden.",
"save": "Konnte aktuelle Sitzung nicht speichern.",
"openimage": "Kann das Bild nicht öffnen.",
"openfile": "Kann die Datei nicht öffnen."
},
"message": {
"before": "Das gleiche Bild wurde vorher schonmal gespeichert.",
"save": "Die Datei wurde in deinem Browser gespeichert.",
"del": "Eine Datei wurde aus dem Speicher deines Browsers gelöscht.",
"resize": "Dein Bild wurde etwas verkleinert, um Programmfehler zu vermeiden."
}
},
"share": {
"share": "Teilen",
"sharetitle": "Teile das Bild im Internet",
"info": "Du kannst das Bild auf [Imgur](https://imgur.com) hochladen, um es mit anderen zu teilen. Bitte beachte dass das Bild dann öffentlich einsehbar ist und die [Terms of Service](https://imgur.com/tos) von Imgur gelten.",
"openon": "Das Bild auf {$1} öffnen",
"openontitle": "Das Bild öffnen, dass auf {$1} geteilt wurde",
"shareon": "Auf {$1} teilen",
"shareontitle": "Das Bild auf {$1} teilen",
"upload": "Bild auf Imgur Hochladen",
"uploadtitle": "Lade das Bild auf Imgur hoch, um es mit anderen zu teilen",
"uploading": "Lade Bild hoch…",
"imagelink": "Online Link zum Bild",
"imagelinktitle": "Du kannst diesen Link nehmen um das Bild auf anderen Seiten zu teilen oder hochzuladen",
"opennewtabtitle": "Öffne das Bild in einem neuen Browsertab",
"imgur": "Imgur",
"reddit": "Reddit",
"twitter": "Twitter",
"facebook": "Facebook",
"pinterest": "Pinterest",
"recentlyshared": "Kürzlich geteilte Bilder",
"untitled": "Ohne Titel",
"openlink": "Öffne Link",
"openlinktitle": "Das Bild in einen neuen Browsertab öffnen",
"offline": "Offline nehmen",
"offlinetitle": "Dieses Bild von Imgur löschen und vom Netz nehmen",
"error": {
"base64": "Es gibt keine Base64-Adresse zum hochladen",
"upload": "Konnte das Bild nicht auf Imgur hochladen."
},
"message": {
"upload": "Das Bild wurde zu Imgur hochgeladen. [Bild öffnen.]({$1})",
"del": "Das Bild wurde von Imgur gelöscht."
}
},
"webcam": {
"webcam": "Webcam",
"webcamtitle": "Mache ein Bild mit deiner Webcam",
"webcamlabel": "Foto",
"trigger": "Ein Foto machen",
"triggertitle": "Klicken, um ein Foto mit deiner Webcam zu machen",
"picture": "Webcam Foto von {$1}",
"error": {
"access": "Der Zugriff auf deine Webcam wurde leider verweigert."
}
},
"welcome": {
"firstvisit": [
"Hallo! Es scheint als wärst du zum ersten Mal hier.",
"Um loszulegen, ziehe an den Reglern am unteren Fensterrand um das Bild zu bearbeiten.",
"Du kannst auch ein Bild importieren. Klicke dazu einfach im Menü auf ÖFFNEN."
]
}
}

135
lang/en-us.json Normal file
View File

@ -0,0 +1,135 @@
{
"lang": "en-us",
"index": {
"title": "Image Glitch Tool",
"description": "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.\n\nThis app corrupts some bytes in an image. Because of the way [JPEG encoding](https://en.wikipedia.org/wiki/JPEG) works, the corrupted file still shows a corrupted image. It was inspired by [soulwire](http://github.com/soulwire)’s [experiment](http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator) in Flash.\n\nThis tool was created by [Georg](http://snorpey.com/). He is always happy to learn about the things that people are creating with his tools. You can follow him on [Twitter](https://twitter.com/snorpey) or explore the source code of this app on [GitHub](https://github.com/snorpey/jpg-glitch).\n\nIf you like this glitch tool, you can check out some of Georg’s other [JavaScript experiments](http://snorpey.github.io/experiments/)."
},
"settings": {
"settings": "Settings",
"settingstitle": "Change the tool settings",
"canzoomwithpointer": "Enable zooming with mousewheel and touch gestures",
"language": "Language (Sprache)",
"languageoptions": {
"de-de": "German (Deutsch DE)",
"en-us": "English US"
},
"resizeuploadedimages": "Resize big images to avoid errors",
"error": {
"save": "Could not save settings to your browser.",
"load": "Could not load previous settings data from your browser."
}
},
"about": {
"info": "Info",
"infotitle": "Learn about the author of this tool."
},
"controls": {
"controls": "Controls",
"controlstitle": "Show and hide controls",
"randomize": "Randomize",
"randomizetitle": "Randomize control values",
"center": "Center",
"centertitle": "Fit image to screen",
"original": "100%",
"originaltitle": "Zoom image to its original size 100%",
"zoom": "Zoom",
"amount": "Amount",
"seed": "Seed",
"iterations": "Iterations",
"quality": "Quality",
"fullscreen": "Fullscreen",
"fullscreentitle": "Toggle Fullscreen"
},
"nav": {
"menu": "Menu",
"menutitle": "Toggle the main menu"
},
"file": {
"open": "Open",
"opentitle": "Open an image from your device",
"import": "Import File",
"importtitle": "Import image from your hard drive",
"recent": "Open recently edited file",
"norecent": "No recently edited files available",
"untitled": "Untitled",
"del": "delete",
"deltitle": "Delete this image from your browser’s storage",
"openimage": "Open",
"openimagetitle": "Open this image from your browser’s storage",
"offline": "Take Offline",
"offlinetitle": "Delete this image from Imgur",
"openlink": "Open Link",
"openlinktitle": "Open image link in new browser tab",
"save": "Save",
"savetitle": "Save current image for later sessions",
"download": "Download Image",
"downloadtitle": "Download the glitched image to your device",
"saveinbrowser": "Save in Browser",
"saveinbrowsertitle": "Save image in your browser’s storage",
"error": {
"load": "Could not get previous session data from your browser.",
"save": "Could not save data to your browser.",
"openimage": "Could not open image.",
"openfile": "Could not open file."
},
"message": {
"before": "This file has been saved before.",
"save": "A file was saved to your browser’s storage.",
"del": "A file was deleted from your browser’s storage.",
"resize": "Your image was scaled down a bit to work better with this app."
}
},
"share": {
"share": "Share",
"sharetitle": "Share your glitched image on the internet",
"info": "You can upload the image to [Imgur](https://imgur.com) to share it. Please note that after uploading the image will be publicly visible on the internet and the Imgur's [terms of service](https://imgur.com/tos) apply.",
"openon": "Open image on {$1}",
"openontitle": "Open the image you shared on {$1}",
"shareon": "Share image on {$1}",
"shareontitle": "Share your glitched image on {$1}",
"upload": "Upload Image to Imgur",
"uploadtitle": "Upload your glitched image to Imgur and share it with others online",
"uploading": "Uploading Image…",
"imagelink": "Online link to image",
"imagelinktitle": "You can use this link to share the image or embed it on other sites",
"opennewtabtitle": "Open the image in a new browser tab",
"imgur": "Imgur",
"reddit": "Reddit",
"twitter": "Twitter",
"facebook": "Facebook",
"pinterest": "Pinterest",
"recentlyshared": "Recently shared images",
"untitled": "Untitled",
"openlink": "Open Link",
"openlinktitle": "Open the online link of this image in a new browser tab",
"offline": "Take Offline",
"offlinetitle": "Delete this image from Imgur",
"error": {
"base64": "No base64 URL to upload.",
"upload": "Could not upload file to Imgur.",
"del": "Could not delete file from Imgur."
},
"message": {
"upload": "The image was successfully uploaded to Imgur. [Click here to open it]({$1})",
"del": "The image was successfully deleted from Imgur."
}
},
"webcam": {
"webcam": "Webcam",
"webcamtitle": "Take a picture with your webcam",
"webcamlabel": "Take a Picture",
"trigger": "Take Picture",
"triggertitle": "Click to take a picture with your webcam",
"picture": "'Webcam Picture {$1}",
"error": {
"access": "Could not access your webcam."
}
},
"welcome": {
"firstvisit": [
"Welcome! Looks like this is your first time here.",
"To get started, you can drag the sliders below and glitch an image.",
"You can also import an image from your device. Just click on the OPEN button in the menu."
]
}
}

BIN
lincoln.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 188 KiB

39
manifest.json Normal file
View File

@ -0,0 +1,39 @@
{
"name": "Image Glitch Tool",
"short_name": "Glitch Tool",
"start_url": "./?utm_source=web_app_manifest",
"display": "standalone",
"background_color": "white",
"orientation": "any",
"icons": [ {
"src": "images/logos/glitch-48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "images/logos/glitch-72x72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "images/logos/glitch-96x96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "images/logos/glitch-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/logos/glitch-168x168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "images/logos/glitch-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/logos/glitch-192x192.svg",
"sizes": "144x144 168x168 192x192",
"density": 2
} ],
"theme_color": "black",
"service_worker": { "src": "serviceworker.js" }
}

38
scripts/aux/canvas.js
View File

@ -1,38 +0,0 @@
/*global define*/
define(
function()
{
var update = false;
function resize( canvas, size )
{
if ( canvas.width !== size.width )
{
canvas.width = size.width;
update = true;
}
if ( canvas.height !== size.height )
{
canvas.height = size.height;
update = true;
}
if ( update )
{
canvas.width = size.width;
canvas.height = size.height;
}
update = false;
}
function clear( canvas, ctx )
{
ctx.clearRect( ctx, 0, 0, canvas.width, canvas.height );
}
return { resize: resize, clear: clear };
}
);

48
scripts/aux/feature-test.js
View File

@ -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;
}
);

192
scripts/aux/glitch.js
View File

@ -1,192 +0,0 @@
/*global define*/
define(
[ 'aux/canvas' ],
function( canvas_helper )
{
var canvas = document.createElement( 'canvas' );
var ctx = canvas.getContext( '2d' );
var tmp_canvas = document.createElement( 'canvas' );
var tmp_ctx = tmp_canvas.getContext( '2d' );
var canvas_size = { width: 10, height: 10 };
var base64_chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var base64_map = base64_chars.split( '' );
var reverse_base64_map = { };
var iterations;
var quality;
var seed;
var amount;
var base64;
var byte_array;
var jpg_header_length;
var img;
var new_image_data;
var i;
var len;
base64_map.forEach( function( val, key ) { reverse_base64_map[val] = key; } );
function getGlitchedImageSrc( image_data, input, callback )
{
seed = input.seed / 100;
quality = input.quality / 100;
amount = input.amount / 100;
iterations = input.iterations;
canvas_helper.resize( canvas, image_data );
canvas_helper.resize( tmp_canvas, image_data );
base64 = getBase64FromImageData( image_data, quality );
byte_array = base64ToByteArray( base64 );
jpg_header_length = getJpegHeaderSize( byte_array );
for ( i = 0; i < iterations; i++ )
{
glitchJpegBytes( byte_array, jpg_header_length, seed, amount, i, iterations );
}
img = new Image();
img.onload = function() {
ctx.drawImage( img, 0, 0 );
new_image_data = ctx.getImageData( 0, 0, image_data.width, image_data.height );
callback( new_image_data );
};
img.src = byteArrayToBase64( byte_array );
}
function glitchJpegBytes( byte_array, jpg_header_length, seed, amount, i, len )
{
var max_index = byte_array.length - jpg_header_length - 4;
var px_min = parseInt( max_index / len * i, 10 );
var px_max = parseInt( max_index / len * ( i + 1 ), 10 );
var delta = px_max - px_min;
var px_i = parseInt( px_min + delta * seed, 10 );
if ( px_i > max_index )
{
px_i = max_index;
}
var index = Math.floor( jpg_header_length + px_i );
byte_array[index] = Math.floor( amount * 256 );
}
function getBase64FromImageData( image_data, quality )
{
var q = typeof quality === 'number' && quality < 1 && quality > 0 ? quality : 0.1;
tmp_ctx.putImageData( image_data, 0, 0 );
return tmp_canvas.toDataURL( 'image/jpeg', q );
}
function getJpegHeaderSize( data )
{
var result = 417;
for ( var i = 0, l = data.length; i < l; i++ )
{
if ( data[i] === 0xFF && data[i + 1] === 0xDA )
{
result = i + 2;
break;
}
}
return result;
}
// https://github.com/mutaphysis/smackmyglitchupjs/blob/master/glitch.html
// base64 is 2^6, byte is 2^8, every 4 base64 values create three bytes
function base64ToByteArray( str )
{
var result = [ ];
var digit_num;
var cur;
var prev;
for ( var i = 23, l = str.length; i < l; i++ )
{
cur = reverse_base64_map[ str.charAt( i ) ];
digit_num = ( i - 23 ) % 4;
switch ( digit_num )
{
// case 0: first digit - do nothing, not enough info to work with
case 1: // second digit
result.push( prev << 2 | cur >> 4 );
break;
case 2: // third digit
result.push( ( prev & 0x0f ) << 4 | cur >> 2 );
break;
case 3: // fourth digit
result.push( ( prev & 3 ) << 6 | cur );
break;
}
prev = cur;
}
return result;
}
function byteArrayToBase64( arr )
{
var result = [ 'data:image/jpeg;base64,' ];
var byte_num;
var cur;
var prev;
var i;
for ( var i = 0, l = arr.length; i < l; i++ )
{
cur = arr[i];
byte_num = i % 3;
switch ( byte_num )
{
case 0: // first byte
result.push( base64_map[ cur >> 2 ] );
break;
case 1: // second byte
result.push( base64_map[( prev & 3 ) << 4 | ( cur >> 4 )] );
break;
case 2: // third byte
result.push( base64_map[( prev & 0x0f ) << 2 | ( cur >> 6 )] );
result.push( base64_map[cur & 0x3f] );
break;
}
prev = cur;
}
if ( byte_num === 0 )
{
result.push( base64_map[( prev & 3 ) << 4] );
result.push( '==' );
}
else if ( byte_num === 1 )
{
result.push( base64_map[( prev & 0x0f ) << 2] );
result.push( '=' );
}
return result.join( '' );
}
function getImageDataCopy( image_data )
{
var copy = tmp_ctx.createImageData( image_data.width, image_data.height );
copy.data.set( image_data.data );
return copy;
}
return getGlitchedImageSrc;
}
);

43
scripts/config.js Normal file
View File

@ -0,0 +1,43 @@
define(
function () {
return {
keys: {
// this is my api key
// please get your own if you're hosting this app
// on a different server.
// https://api.imgur.com/oauth2/addclient
// thank you.
imgur: 'a4c24380d884932',
storage: 'glitch-items'
},
defaultControlParams: {
amount: { min: 0, max: 99, value: 24 },
seed: { min: 0, max: 100, value: 53 },
iterations: { min: 0, max: 100, value: 21 },
quality: { min: 1, max: 99, value: 46 }
},
defaultImage: {
name: 'AbrahamLincoln',
path: 'images/lincoln.jpg'
},
workers: {
glitch: 'scripts/workers/glitchworker.js',
storage: 'scripts/workers/storageworker.js',
settings: 'scripts/workers/settingsworker.js'
},
language: {
dir: 'lang',
preset: 'en-us'
},
settings: {
canZoomWithPointer: { value: true },
resizeUploadedImages: { value: true },
language: { value: 'en-us', options: [ 'en-us', 'de-de' ] }
},
localForage: {
name : 'glitchtool',
storeName : 'keyvaluepairs'
}
};
}
);

331
scripts/glitcher.js Normal file
View File

@ -0,0 +1,331 @@
/*global require, requirejs, define*/
// gf: http://requirejs.org/docs/api.html#config
requirejs.config( {
baseUrl: 'scripts/',
waitSeconds: 10
} );
require( [
'config',
'util/browser',
'views/appview',
'views/navview',
'views/controlsview',
'views/openfileview',
'views/fullscreenview',
'views/webcamview',
'views/canvasview',
'views/canvascontrolsview',
'views/saveview',
'views/shareview',
'views/indicatorview',
'views/workspacenavview',
'views/aboutview',
'views/draganddropview',
'views/workspaceview',
'views/welcomeview',
'views/settingsview',
'models/controlsmodel',
'models/imagemodel',
'models/glitchmodel',
'models/storagemodel',
'models/sharemodel',
'models/networkmodel',
'models/settingsmodel',
'models/localisationmodel',
'lib/localforage.nopromises'
], function (
config,
browser,
AppView,
NavView,
ControlsView,
OpenFileView,
FullscreenView,
WebCamView,
CanvasView,
CanvasControlsView,
SaveView,
ShareView,
IndicatorView,
WorkspaceNavView,
AboutView,
DragAndDropView,
WorkspaceView,
WelcomeView,
SettingsView,
ControlsModel,
ImageModel,
GlitchModel,
StorageModel,
ShareModel,
NetworkModel,
SettingsModel,
LocalisationModel,
localforage
) {
var imageModel = ImageModel();
var glitchModel = GlitchModel();
var shareModel = ShareModel();
var storageModel = StorageModel();
var controlsModel = ControlsModel( config.defaultControlParams );
var networkModel = NetworkModel();
var settingsModel = SettingsModel();
var localisationModel = LocalisationModel.sharedInstance;
var appView = AppView( document.body );
var navView = NavView( appView.el );
var workspaceView = WorkspaceView( appView.el );
var workspaceNavView = WorkspaceNavView( workspaceView.el );
var canvasControlsView = CanvasControlsView( workspaceNavView.el );
var controlsView = ControlsView( workspaceNavView.el, canvasControlsView.el, config.defaultControlParams );
var indicatorView = IndicatorView( workspaceView.el );
var canvasView = CanvasView( workspaceView.el, navView.el );
var openFileView = OpenFileView( navView.el );
var saveView = SaveView( navView.el );
var webcamView = WebCamView( navView.el );
var shareView = ShareView( navView.el );
var aboutView = AboutView( navView.el );
var settingsView = SettingsView( navView.el );
var fullscreenView = FullscreenView( workspaceView.el );
var dragAndDropView = DragAndDropView( canvasView.el );
var welcomeView = WelcomeView();
function init () {
addCSSClasses();
addSubscribers();
networkModel.checkConnectivity();
if ( browser.test( 'localforage' ) && localforage ) {
setUpLocalForage( function () {
storageModel.load();
settingsModel.load();
} );
} else {
settingsModel.load();
controlsView.loadInitialValues();
loadInitialItem();
}
document.documentElement.classList.add( 'is-loaded' );
setTimeout( function () {
document.documentElement.classList.remove( 'is-loading' );
}, 10 );
}
// hooks up all messaging between items
// using publisher/subscriber model
function addSubscribers () {
controlsView
.on( 'update', controlsModel.setValue )
.on( 'random', controlsModel.randomizeValues );
controlsModel
.on( 'update', controlsView.setValue )
.on( 'update', glitchModel.setValue )
.on( 'update', shareView.hideShareLinks );
canvasControlsView
.on( 'center', canvasView.animateToCenter )
.on( 'scale', canvasView.setScale );
canvasView
.on( 'scale', canvasControlsView.setScale )
.on( 'dblclick', canvasView.animateToCenter );
openFileView
.on( 'openfile', imageModel.loadFromFile )
.on( 'openfromlocalstorage', storageModel.loadItem )
.on( 'deletefromlocalstorage', storageModel.removeLocalData )
.on( 'deletefromimgur', shareModel.remove );
saveView
.on( 'savetolocalstorage', glitchModel.getImageGenerationFn( saveNewEntry ) )
.on( 'savetolocalstorage', updateDownloadLink )
.on( 'show', updateDownloadLink );
navView.on( 'toggleend', canvasView.resized );
imageModel
.on( 'load', glitchModel.setImageData )
.on( 'load', openFileView.dialog.hide )
.on( 'load', canvasView.animateToCenter )
.on( 'load', canvasView.show )
.on( 'update', canvasView.hide )
.on( 'error', indicatorView.showError )
.on( 'error', indicatorView.hideLoading )
.on( 'statusmessage', indicatorView.showMessage );
glitchModel
.on( 'glitch', canvasView.putImageData )
.on( 'glitch', canvasView.createImageUrl( shareModel.updateUrl ) )
.on( 'glitch', updateDownloadLink );
shareView
.on( 'share', shareModel.upload )
.on( 'deletefromimgur', shareModel.remove );
shareModel
.on( 'uploadstart', shareView.showUpload )
.on( 'uploadend', shareView.hideUpload )
.on( 'uploadcomplete', shareView.uploadComplete )
.on( 'uploadcomplete', glitchModel.getImageGenerationFn( saveNewEntry ) )
.on( 'removecomplete', storageModel.removeImgurData )
.on( 'removecomplete', shareView.hideShareLinks )
.on( 'error', indicatorView.showError )
.on( 'error', shareView.handleError )
.on( 'statusmessage', indicatorView.showMessage );
webcamView
.on( 'video', imageModel.loadFromVideo )
.on( 'error', indicatorView.showError );
dragAndDropView
.on( 'drop', imageModel.loadFromFile )
.on( 'drop', canvasView.hide );
welcomeView
.on( 'message', indicatorView.showWelcome );
workspaceView
.on( 'click', navView.closeSmallScreenNav );
settingsView
.on( 'settingchange', settingsModel.setValue );
storageModel
.on( 'update', openFileView.updateList )
.on( 'update', shareView.updateList )
.on( 'update', loadInitialItem )
.on( 'loaditem', loadEntry )
.on( 'statusmessage', indicatorView.showMessage )
.on( 'error', indicatorView.showError )
.on( 'firstvisit', welcomeView.show );
networkModel
.on( 'connect', shareView.showOnlineOptions )
.on( 'disconnect', shareView.hideOnlineOptions )
.on( 'connect', appView.showOnlineOptions )
.on( 'disconnect', appView.hideOnlineOptions );
settingsModel
.on( 'update', canvasView.panZoom.settingUpdated )
.on( 'update', imageModel.settingUpdated )
.on( 'update', settingsView.settingUpdated )
.on( 'update', localisationModel.settingUpdated )
.on( 'error', indicatorView.showError );
localisationModel
.on( 'error', indicatorView.showError );
}
function addCSSClasses () {
if ( browser.test( 'touch' ) ) {
document.documentElement.classList.add( 'has-touch' );
}
}
function setUpLocalForage ( callback ) {
if ( localforage ) {
localforage.config( config.localForage );
var driver = [
localforage.WEBSQL,
localforage.INDEXEDDB,
localforage.LOCALSTORAGE
];
if ( browser.test( 'safari' ) ) {
driver = localforage.LOCALSTORAGE;
}
localforage
.setDriver( driver )
.then( callback );
} else {
if ( typeof callback === 'function' ) {
callback();
}
}
}
function loadInitialItem ( entries ) {
var lastItemUID = -1;
// load last saved item if possible,
// otherwise, load default image
if ( entries && Object.keys( entries ).length ) {
var now = Date.now();
var delta = Infinity;
for ( var uid in entries ) {
if ( entries[uid].timestamp ) {
if ( now - entries[uid].timestamp < delta ) {
delta = now - entries[uid].timestamp;
lastItemUID = uid;
}
}
}
}
storageModel.off( 'update', loadInitialItem );
if ( lastItemUID !== -1 ) {
storageModel.loadItem( lastItemUID );
} else {
imageModel.loadFromURL( config.defaultImage.path, config.defaultImage.name );
controlsView.loadInitialValues();
}
}
// saves new item to local storage
function saveNewEntry ( thumbnail, publicURL, imgurID, deleteHash ) {
var item = {
thumbnail: thumbnail,
src: imageModel.getLastImageSRC(),
values: controlsModel.getValues(),
name: imageModel.getLastFileName()
};
if ( publicURL ) {
item.publicUrl = publicURL;
}
if ( imgurID ) {
item.imgurID = imgurID;
}
if ( deleteHash ) {
item.deleteHash = deleteHash;
}
storageModel.add( item );
}
// loads item from localstorage
function loadEntry ( uid, entry ) {
for ( var key in entry.values ) {
controlsModel.setValue( key, entry.values[key] );
}
imageModel.loadFromURL( entry.src, entry.name );
}
// updates the download link url every time the controls were updated.
// add a delay of 200 to we don't update the DOM too often
var downloadLinkTimeoutId = NaN;
function updateDownloadLink () {
if ( saveView.getActive() ) {
clearTimeout( downloadLinkTimeoutId );
downloadLinkTimeoutId = setTimeout( function () {
glitchModel.getImageGenerationFn( saveView.updateDownloadLink, 'original' )( imageModel.getLastFileName() )
}, 200 );
}
}
init();
} );

430
scripts/lib/almond.js Normal file
View File

@ -0,0 +1,430 @@
/**
* @license almond 0.3.1 Copyright (c) 2011-2014, The Dojo Foundation All Rights Reserved.
* Available via the MIT or new BSD license.
* see: http://github.com/jrburke/almond for details
*/
//Going sloppy to avoid 'use strict' string cost, but strict practices should
//be followed.
/*jslint sloppy: true */
/*global setTimeout: false */
var requirejs, require, define;
(function (undef) {
var main, req, makeMap, handlers,
defined = {},
waiting = {},
config = {},
defining = {},
hasOwn = Object.prototype.hasOwnProperty,
aps = [].slice,
jsSuffixRegExp = /\.js$/;
function hasProp(obj, prop) {
return hasOwn.call(obj, prop);
}
/**
* Given a relative module name, like ./something, normalize it to
* a real name that can be mapped to a path.
* @param {String} name the relative name
* @param {String} baseName a real name that the name arg is relative
* to.
* @returns {String} normalized name
*/
function normalize(name, baseName) {
var nameParts, nameSegment, mapValue, foundMap, lastIndex,
foundI, foundStarMap, starI, i, j, part,
baseParts = baseName && baseName.split("/"),
map = config.map,
starMap = (map && map['*']) || {};
//Adjust any relative paths.
if (name && name.charAt(0) === ".") {
//If have a base name, try to normalize against it,
//otherwise, assume it is a top-level require that will
//be relative to baseUrl in the end.
if (baseName) {
name = name.split('/');
lastIndex = name.length - 1;
// Node .js allowance:
if (config.nodeIdCompat && jsSuffixRegExp.test(name[lastIndex])) {
name[lastIndex] = name[lastIndex].replace(jsSuffixRegExp, '');
}
//Lop off the last part of baseParts, so that . matches the
//"directory" and not name of the baseName's module. For instance,
//baseName of "one/two/three", maps to "one/two/three.js", but we
//want the directory, "one/two" for this normalization.
name = baseParts.slice(0, baseParts.length - 1).concat(name);
//start trimDots
for (i = 0; i < name.length; i += 1) {
part = name[i];
if (part === ".") {
name.splice(i, 1);
i -= 1;
} else if (part === "..") {
if (i === 1 && (name[2] === '..' || name[0] === '..')) {
//End of the line. Keep at least one non-dot
//path segment at the front so it can be mapped
//correctly to disk. Otherwise, there is likely
//no path mapping for a path starting with '..'.
//This can still fail, but catches the most reasonable
//uses of ..
break;
} else if (i > 0) {
name.splice(i - 1, 2);
i -= 2;
}
}
}
//end trimDots
name = name.join("/");
} else if (name.indexOf('./') === 0) {
// No baseName, so this is ID is resolved relative
// to baseUrl, pull off the leading dot.
name = name.substring(2);
}
}
//Apply map config if available.
if ((baseParts || starMap) && map) {
nameParts = name.split('/');
for (i = nameParts.length; i > 0; i -= 1) {
nameSegment = nameParts.slice(0, i).join("/");
if (baseParts) {
//Find the longest baseName segment match in the config.
//So, do joins on the biggest to smallest lengths of baseParts.
for (j = baseParts.length; j > 0; j -= 1) {
mapValue = map[baseParts.slice(0, j).join('/')];
//baseName segment has config, find if it has one for
//this name.
if (mapValue) {
mapValue = mapValue[nameSegment];
if (mapValue) {
//Match, update name to the new value.
foundMap = mapValue;
foundI = i;
break;
}
}
}
}
if (foundMap) {
break;
}
//Check for a star map match, but just hold on to it,
//if there is a shorter segment match later in a matching
//config, then favor over this star map.
if (!foundStarMap && starMap && starMap[nameSegment]) {
foundStarMap = starMap[nameSegment];
starI = i;
}
}
if (!foundMap && foundStarMap) {
foundMap = foundStarMap;
foundI = starI;
}
if (foundMap) {
nameParts.splice(0, foundI, foundMap);
name = nameParts.join('/');
}
}
return name;
}
function makeRequire(relName, forceSync) {
return function () {
//A version of a require function that passes a moduleName
//value for items that may need to
//look up paths relative to the moduleName
var args = aps.call(arguments, 0);
//If first arg is not require('string'), and there is only
//one arg, it is the array form without a callback. Insert
//a null so that the following concat is correct.
if (typeof args[0] !== 'string' && args.length === 1) {
args.push(null);
}
return req.apply(undef, args.concat([relName, forceSync]));
};
}
function makeNormalize(relName) {
return function (name) {
return normalize(name, relName);
};
}
function makeLoad(depName) {
return function (value) {
defined[depName] = value;
};
}
function callDep(name) {
if (hasProp(waiting, name)) {
var args = waiting[name];
delete waiting[name];
defining[name] = true;
main.apply(undef, args);
}
if (!hasProp(defined, name) && !hasProp(defining, name)) {
throw new Error('No ' + name);
}
return defined[name];
}
//Turns a plugin!resource to [plugin, resource]
//with the plugin being undefined if the name
//did not have a plugin prefix.
function splitPrefix(name) {
var prefix,
index = name ? name.indexOf('!') : -1;
if (index > -1) {
prefix = name.substring(0, index);
name = name.substring(index + 1, name.length);
}
return [prefix, name];
}
/**
* Makes a name map, normalizing the name, and using a plugin
* for normalization if necessary. Grabs a ref to plugin
* too, as an optimization.
*/
makeMap = function (name, relName) {
var plugin,
parts = splitPrefix(name),
prefix = parts[0];
name = parts[1];
if (prefix) {
prefix = normalize(prefix, relName);
plugin = callDep(prefix);
}
//Normalize according
if (prefix) {
if (plugin && plugin.normalize) {
name = plugin.normalize(name, makeNormalize(relName));
} else {
name = normalize(name, relName);
}
} else {
name = normalize(name, relName);
parts = splitPrefix(name);
prefix = parts[0];
name = parts[1];
if (prefix) {
plugin = callDep(prefix);
}
}
//Using ridiculous property names for space reasons
return {
f: prefix ? prefix + '!' + name : name, //fullName
n: name,
pr: prefix,
p: plugin
};
};
function makeConfig(name) {
return function () {
return (config && config.config && config.config[name]) || {};
};
}
handlers = {
require: function (name) {
return makeRequire(name);
},
exports: function (name) {
var e = defined[name];
if (typeof e !== 'undefined') {
return e;
} else {
return (defined[name] = {});
}
},
module: function (name) {
return {
id: name,
uri: '',
exports: defined[name],
config: makeConfig(name)
};
}
};
main = function (name, deps, callback, relName) {
var cjsModule, depName, ret, map, i,
args = [],
callbackType = typeof callback,
usingExports;
//Use name if no relName
relName = relName || name;
//Call the callback to define the module, if necessary.
if (callbackType === 'undefined' || callbackType === 'function') {
//Pull out the defined dependencies and pass the ordered
//values to the callback.
//Default to [require, exports, module] if no deps
deps = !deps.length && callback.length ? ['require', 'exports', 'module'] : deps;
for (i = 0; i < deps.length; i += 1) {
map = makeMap(deps[i], relName);
depName = map.f;
//Fast path CommonJS standard dependencies.
if (depName === "require") {
args[i] = handlers.require(name);
} else if (depName === "exports") {
//CommonJS module spec 1.1
args[i] = handlers.exports(name);
usingExports = true;
} else if (depName === "module") {
//CommonJS module spec 1.1
cjsModule = args[i] = handlers.module(name);
} else if (hasProp(defined, depName) ||
hasProp(waiting, depName) ||
hasProp(defining, depName)) {
args[i] = callDep(depName);
} else if (map.p) {
map.p.load(map.n, makeRequire(relName, true), makeLoad(depName), {});
args[i] = defined[depName];
} else {
throw new Error(name + ' missing ' + depName);
}
}
ret = callback ? callback.apply(defined[name], args) : undefined;
if (name) {
//If setting exports via "module" is in play,
//favor that over return value and exports. After that,
//favor a non-undefined return value over exports use.
if (cjsModule && cjsModule.exports !== undef &&
cjsModule.exports !== defined[name]) {
defined[name] = cjsModule.exports;
} else if (ret !== undef || !usingExports) {
//Use the return value from the function.
defined[name] = ret;
}
}
} else if (name) {
//May just be an object definition for the module. Only
//worry about defining if have a module name.
defined[name] = callback;
}
};
requirejs = require = req = function (deps, callback, relName, forceSync, alt) {
if (typeof deps === "string") {
if (handlers[deps]) {
//callback in this case is really relName
return handlers[deps](callback);
}
//Just return the module wanted. In this scenario, the
//deps arg is the module name, and second arg (if passed)
//is just the relName.
//Normalize module name, if it contains . or ..
return callDep(makeMap(deps, callback).f);
} else if (!deps.splice) {
//deps is a config object, not an array.
config = deps;
if (config.deps) {
req(config.deps, config.callback);
}
if (!callback) {
return;
}
if (callback.splice) {
//callback is an array, which means it is a dependency list.
//Adjust args if there are dependencies
deps = callback;
callback = relName;
relName = null;
} else {
deps = undef;
}
}
//Support require(['a'])
callback = callback || function () {};
//If relName is a function, it is an errback handler,
//so remove it.
if (typeof relName === 'function') {
relName = forceSync;
forceSync = alt;
}
//Simulate async callback;
if (forceSync) {
main(undef, deps, callback, relName);
} else {
//Using a non-zero value because of concern for what old browsers
//do, and latest browsers "upgrade" to 4 if lower value is used:
//http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-settimeout:
//If want a value immediately, use require('id') instead -- something
//that works in almond on the global level, but not guaranteed and
//unlikely to work in other AMD implementations.
setTimeout(function () {
main(undef, deps, callback, relName);
}, 4);
}
return req;
};
/**
* Just drops the config on the floor, but returns req in case
* the config return value is used.
*/
req.config = function (cfg) {
return req(cfg);
};
/**
* Expose module registry for debugging and tooling
*/
requirejs._defined = defined;
define = function (name, deps, callback) {
if (typeof name !== 'string') {
throw new Error('See almond README: incorrect module build, no module name');
}
//This module may not have dependencies
if (!deps.splice) {
//deps is not an array, so probably means
//an object literal or factory function for
//the value. Adjust args.
callback = deps;
deps = [];
}
if (!hasProp(defined, name) && !hasProp(waiting, name)) {
waiting[name] = [name, deps, callback];
}
};
define.amd = {
jQuery: true
};
}());

292
scripts/lib/glitch-canvas-with-worker.js Normal file
View File

@ -0,0 +1,292 @@
//! glitch-canvas by snorpey, MIT License
(function(window, factory) {
if (typeof define === "function" && define.amd) {
define(factory);
} else if (typeof exports === "object") {
module.exports = factory();
} else {
window.glitch = factory();
}
})(this, function() {
function Glitcher ( webworkerPath ) {
if ( ! ( this instanceof Glitcher ) ) {
return new Glitcher( webworkerPath );
}
var self = this
var canvas1El = document.createElement( 'canvas' );
var canvas2El = document.createElement( 'canvas' );
var ctx1 = canvas1El.getContext( '2d' );
var ctx2 = canvas2El.getContext( '2d' );
var img = new Image();
var base64;
var img;
var newImageData;
var i;
var len;
var params;
var worker;
var base64Chars;
var base64Map;
var reversedBase64Map;
var byteArrayImageData;
var jpgHeaderLength;
function init () {
if ( webworkerPath && 'Worker' in window ) {
worker = new Worker( webworkerPath );
worker.addEventListener( 'message', workerResponded, false );
} else {
base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
base64Map = base64Chars.split( '' );
reversedBase64Map = { };
base64Map.forEach( function ( val, key ) {
reversedBase64Map[val] = key;
} );
}
return self;
}
function glitch ( imageData, parameters, callback ) {
if (
isValidImageData( imageData ) &&
isType( parameters, 'parameters', 'object' ) &&
isType( callback, 'callback', 'function' )
) {
resizeCanvas( canvas1El, imageData );
resizeCanvas( canvas2El, imageData );
params = getNormalizedParameters( parameters );
base64 = getBase64FromImageData( imageData, params.quality );
img.onload = function () {
ctx1.drawImage( img, 0, 0 );
newImageData = ctx1.getImageData( 0, 0, imageData.width, imageData.height );
callback ( newImageData );
img.onload = null;
};
if ( worker ) {
worker.postMessage( { glitch: { base64: base64, parameters: params } } );
} else {
byteArrayImageData = base64ToByteArray( base64 );
jpgHeaderLength = getJpegHeaderSize( byteArrayImageData );
for ( i = 0, len = params.iterations; i < len; i++ ) {
glitchJpegBytes( byteArrayImageData, jpgHeaderLength, params.seed, params.amount, i, params.iterations );
}
img.src = byteArrayToBase64( byteArrayImageData );
}
}
return self;
}
function workerResponded ( event ) {
if ( event && event.data && event.data.glitched ) {
glitched( event.data.glitched );
} else {
window.console && console.log( 'glitchworker response', event.data );
}
}
function workerFailed ( err ) {
window.console && console.log( err.message || err );
}
function glitched ( newBase64ImageData ) {
img.src = newBase64ImageData;
}
function resizeCanvas ( canvas, size ) {
if ( canvas.width !== size.width ) {
canvas.width = size.width;
}
if ( canvas.height !== size.height ) {
canvas.height = size.height;
}
}
function getNormalizedParameters ( parameters ) {
return {
seed: ( parameters.seed || 0 ) / 100,
quality: ( parameters.quality || 0 ) / 100,
amount: ( parameters.amount || 0 ) / 100,
iterations: parameters.iterations || 0
};
}
function getBase64FromImageData ( imageData, quality ) {
var q = typeof quality === 'number' && quality < 1 && quality > 0 ? quality : .1;
ctx2.putImageData( imageData, 0, 0 );
var base64 = canvas2El.toDataURL( 'image/jpeg', q );
switch ( base64.length % 4 ) {
case 3:
base64 += '=';
break;
case 2:
base64 += '==';
break;
case 1:
base64 += '===';
break;
}
return base64;
}
function isValidImageData ( imageData ) {
if (
isType( imageData, 'imageData', 'object' ) &&
isType( imageData.width, 'imageData.width', 'number' ) &&
isType( imageData.height, 'imageData.height', 'number' ) &&
isType( imageData.data, 'imageData.data', 'object' ) &&
isType( imageData.data.length, 'imageData.data.length', 'number' ) &&
checkNumber( imageData.data.length, 'imageData.data.length', isPositive, '> 0' )
) {
return true;
} else {
return false;
}
}
function isType ( it, name, expectedType ) {
if ( typeof it === expectedType ) {
return true;
} else {
error( it, 'typeof ' + name, '"' + expectedType + '"', '"' + typeof it + '"' );
return false;
}
}
function checkNumber ( it, name, condition, conditionName ) {
if ( condition( it ) === true) {
return true;
} else {
error( it, name, conditionName, 'not' );
}
}
function isPositive ( nr ) {
return nr > 0;
}
function error ( it, name, expected, result ) {
throw new Error( 'glitch(): Expected ' + name + ' to be ' + expected + ', but it was ' + result + '.' );
}
// all functions beyond this point are only used if no webworker is available
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;
}
self.glitch = glitch;
self.init = init;
}
return Glitcher;
});

285
scripts/lib/html5slider.js
View File

@ -1,285 +0,0 @@
/*
html5slider - a JS implementation of <input type=range> for Firefox 16 and up
https://github.com/fryn/html5slider
Copyright (c) 2010-2013 Frank Yan, <http://frankyan.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
(function() {
// test for native support
var test = document.createElement('input');
try {
test.type = 'range';
if (test.type == 'range')
return;
} catch (e) {
return;
}
// test for required property support
test.style.background = 'linear-gradient(red, red)';
if (!test.style.backgroundImage || !('MozAppearance' in test.style) ||
!document.mozSetImageElement || !this.MutationObserver)
return;
var scale;
var isMac = navigator.platform == 'MacIntel';
var thumb = {
radius: isMac ? 9 : 6,
width: isMac ? 22 : 12,
height: isMac ? 16 : 20
};
var track = 'linear-gradient(transparent ' + (isMac ?
'6px, #999 6px, #999 7px, #ccc 8px, #bbb 9px, #bbb 10px, transparent 10px' :
'9px, #999 9px, #bbb 10px, #fff 11px, transparent 11px') +
', transparent)';
var styles = {
'min-width': thumb.width + 'px',
'min-height': thumb.height + 'px',
'max-height': thumb.height + 'px',
padding: '0 0 ' + (isMac ? '2px' : '1px'),
border: 0,
'border-radius': 0,
cursor: 'default',
'text-indent': '-999999px' // -moz-user-select: none; breaks mouse capture
};
var options = {
attributes: true,
attributeFilter: ['min', 'max', 'step', 'value']
};
var forEach = Array.prototype.forEach;
var onInput = document.createEvent('HTMLEvents');
onInput.initEvent('input', true, false);
var onChange = document.createEvent('HTMLEvents');
onChange.initEvent('change', true, false);
if (document.readyState == 'loading')
document.addEventListener('DOMContentLoaded', initialize, true);
else
initialize();
function initialize() {
// create initial sliders
forEach.call(document.querySelectorAll('input[type=range]'), transform);
// create sliders on-the-fly
new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes)
forEach.call(mutation.addedNodes, function(node) {
check(node);
if (node.childElementCount)
forEach.call(node.querySelectorAll('input'), check);
});
});
}).observe(document, { childList: true, subtree: true });
}
function check(input) {
if (input.localName == 'input' && input.type != 'range' &&
input.getAttribute('type') == 'range')
transform(input);
}
function transform(slider) {
var isValueSet, areAttrsSet, isChanged, isClick, prevValue, rawValue, prevX;
var min, max, step, range, value = slider.value;
// lazily create shared slider affordance
if (!scale) {
scale = document.body.appendChild(document.createElement('hr'));
style(scale, {
'-moz-appearance': isMac ? 'scale-horizontal' : 'scalethumb-horizontal',
display: 'block',
visibility: 'visible',
opacity: 1,
position: 'fixed',
top: '-999999px'
});
document.mozSetImageElement('__sliderthumb__', scale);
}
// reimplement value and type properties
var getValue = function() { return '' + value; };
var setValue = function setValue(val) {
value = '' + val;
isValueSet = true;
draw();
delete slider.value;
slider.value = value;
Object.defineProperty(slider, 'value', {
get: getValue,
set: setValue
});
};
Object.defineProperty(slider, 'value', {
get: getValue,
set: setValue
});
Object.defineProperty(slider, 'type', {
get: function() { return 'range'; }
});
// sync properties with attributes
['min', 'max', 'step'].forEach(function(prop) {
if (slider.hasAttribute(prop))
areAttrsSet = true;
Object.defineProperty(slider, prop, {
get: function() { return this.hasAttribute(prop) ? this.getAttribute(prop) : ''; },
set: function(val) { val === null ? this.removeAttribute(prop) : this.setAttribute(prop, val); }
});
});
// initialize slider
slider.readOnly = true;
style(slider, styles);
update();
new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName != 'value') {
update();
areAttrsSet = true;
}
// note that value attribute only sets initial value
else if (!isValueSet) {
value = slider.getAttribute('value');
draw();
}
});
}).observe(slider, options);
slider.addEventListener('mousedown', onDragStart, true);
slider.addEventListener('keydown', onKeyDown, true);
slider.addEventListener('focus', onFocus, true);
slider.addEventListener('blur', onBlur, true);
function onDragStart(e) {
isClick = true;
setTimeout(function() { isClick = false; }, 0);
if (e.button || !range)
return;
var width = parseFloat(getComputedStyle(this, 0).width);
var multiplier = (width - thumb.width) / range;
if (!multiplier)
return;
// distance between click and center of thumb
var dev = e.clientX - this.getBoundingClientRect().left - thumb.width / 2 -
(value - min) * multiplier;
// if click was not on thumb, move thumb to click location
if (Math.abs(dev) > thumb.radius) {
isChanged = true;
this.value -= -dev / multiplier;
}
rawValue = value;
prevX = e.clientX;
this.addEventListener('mousemove', onDrag, true);
this.addEventListener('mouseup', onDragEnd, true);
}
function onDrag(e) {
var width = parseFloat(getComputedStyle(this, 0).width);
var multiplier = (width - thumb.width) / range;
if (!multiplier)
return;
rawValue += (e.clientX - prevX) / multiplier;
prevX = e.clientX;
isChanged = true;
this.value = rawValue;
}
function onDragEnd() {
this.removeEventListener('mousemove', onDrag, true);
this.removeEventListener('mouseup', onDragEnd, true);
slider.dispatchEvent(onChange);
}
function onKeyDown(e) {
if (e.keyCode > 36 && e.keyCode < 41) { // 37-40: left, up, right, down
onFocus.call(this);
isChanged = true;
this.value = value + (e.keyCode == 38 || e.keyCode == 39 ? step : -step);
}
}
function onFocus() {
if (!isClick)
this.style.boxShadow = !isMac ? '0 0 0 2px #fb0' :
'inset 0 0 20px rgba(0,127,255,.1), 0 0 1px rgba(0,127,255,.4)';
}
function onBlur() {
this.style.boxShadow = '';
}
// determines whether value is valid number in attribute form
function isAttrNum(value) {
return !isNaN(value) && +value == parseFloat(value);
}
// validates min, max, and step attributes and redraws
function update() {
min = isAttrNum(slider.min) ? +slider.min : 0;
max = isAttrNum(slider.max) ? +slider.max : 100;
if (max < min)
max = min > 100 ? min : 100;
step = isAttrNum(slider.step) && slider.step > 0 ? +slider.step : 1;
range = max - min;
draw(true);
}
// recalculates value property
function calc() {
if (!isValueSet && !areAttrsSet)
value = slider.getAttribute('value');
if (!isAttrNum(value))
value = (min + max) / 2;;
// snap to step intervals (WebKit sometimes does not - bug?)
value = Math.round((value - min) / step) * step + min;
if (value < min)
value = min;
else if (value > max)
value = min + ~~(range / step) * step;
}
// renders slider using CSS background ;)
function draw(attrsModified) {
calc();
if (isChanged && value != prevValue)
slider.dispatchEvent(onInput);
isChanged = false;
if (!attrsModified && value == prevValue)
return;
prevValue = value;
var position = range ? (value - min) / range * 100 : 0;
var bg = '-moz-element(#__sliderthumb__) ' + position + '% no-repeat, ';
style(slider, { background: bg + track });
}
}
function style(element, styles) {
for (var prop in styles)
element.style.setProperty(prop, styles[prop], 'important');
}
})();

2103
scripts/lib/localforage.nopromises.js Normal file
View File

File diff suppressed because it is too large Load Diff

274
scripts/lib/md5.js Normal file
View File

@ -0,0 +1,274 @@
/*
* JavaScript MD5 1.0.1
* https://github.com/blueimp/JavaScript-MD5
*
* Copyright 2011, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*
* Based on
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/
/*jslint bitwise: true */
/*global unescape, define */
(function ($) {
'use strict';
/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safe_add(x, y) {
var lsw = (x & 0xFFFF) + (y & 0xFFFF),
msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF);
}
/*
* Bitwise rotate a 32-bit number to the left.
*/
function bit_rol(num, cnt) {
return (num << cnt) | (num >>> (32 - cnt));
}
/*
* These functions implement the four basic operations the algorithm uses.
*/
function md5_cmn(q, a, b, x, s, t) {
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b);
}
function md5_ff(a, b, c, d, x, s, t) {
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}
function md5_gg(a, b, c, d, x, s, t) {
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}
function md5_hh(a, b, c, d, x, s, t) {
return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}
function md5_ii(a, b, c, d, x, s, t) {
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}
/*
* Calculate the MD5 of an array of little-endian words, and a bit length.
*/
function binl_md5(x, len) {
/* append padding */
x[len >> 5] |= 0x80 << (len % 32);
x[(((len + 64) >>> 9) << 4) + 14] = len;
var i, olda, oldb, oldc, oldd,
a = 1732584193,
b = -271733879,
c = -1732584194,
d = 271733878;
for (i = 0; i < x.length; i += 16) {
olda = a;
oldb = b;
oldc = c;
oldd = d;
a = md5_ff(a, b, c, d, x[i], 7, -680876936);
d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);
c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);
b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);
a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);
d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);
c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);
b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);
a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);
d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);
c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);
d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);
a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);
d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);
c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);
b = md5_gg(b, c, d, a, x[i], 20, -373897302);
a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);
d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);
c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);
a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);
d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);
c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);
b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);
a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);
d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);
c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);
b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);
d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);
c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);
b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);
d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);
c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);
b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);
d = md5_hh(d, a, b, c, x[i], 11, -358537222);
c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);
b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);
a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);
d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);
b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);
a = md5_ii(a, b, c, d, x[i], 6, -198630844);
d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);
c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);
a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);
d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);
c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);
a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);
d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);
b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);
a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);
d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);
b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);
a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd);
}
return [a, b, c, d];
}
/*
* Convert an array of little-endian words to a string
*/
function binl2rstr(input) {
var i,
output = '';
for (i = 0; i < input.length * 32; i += 8) {
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xFF);
}
return output;
}
/*
* Convert a raw string to an array of little-endian words
* Characters >255 have their high-byte silently ignored.
*/
function rstr2binl(input) {
var i,
output = [];
output[(input.length >> 2) - 1] = undefined;
for (i = 0; i < output.length; i += 1) {
output[i] = 0;
}
for (i = 0; i < input.length * 8; i += 8) {
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xFF) << (i % 32);
}
return output;
}
/*
* Calculate the MD5 of a raw string
*/
function rstr_md5(s) {
return binl2rstr(binl_md5(rstr2binl(s), s.length * 8));
}
/*
* Calculate the HMAC-MD5, of a key and some data (raw strings)
*/
function rstr_hmac_md5(key, data) {
var i,
bkey = rstr2binl(key),
ipad = [],
opad = [],
hash;
ipad[15] = opad[15] = undefined;
if (bkey.length > 16) {
bkey = binl_md5(bkey, key.length * 8);
}
for (i = 0; i < 16; i += 1) {
ipad[i] = bkey[i] ^ 0x36363636;
opad[i] = bkey[i] ^ 0x5C5C5C5C;
}
hash = binl_md5(ipad.concat(rstr2binl(data)), 512 + data.length * 8);
return binl2rstr(binl_md5(opad.concat(hash), 512 + 128));
}
/*
* Convert a raw string to a hex string
*/
function rstr2hex(input) {
var hex_tab = '0123456789abcdef',
output = '',
x,
i;
for (i = 0; i < input.length; i += 1) {
x = input.charCodeAt(i);
output += hex_tab.charAt((x >>> 4) & 0x0F) +
hex_tab.charAt(x & 0x0F);
}
return output;
}
/*
* Encode a string as utf-8
*/
function str2rstr_utf8(input) {
return unescape(encodeURIComponent(input));
}
/*
* Take string arguments and return either raw or hex encoded strings
*/
function raw_md5(s) {
return rstr_md5(str2rstr_utf8(s));
}
function hex_md5(s) {
return rstr2hex(raw_md5(s));
}
function raw_hmac_md5(k, d) {
return rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d));
}
function hex_hmac_md5(k, d) {
return rstr2hex(raw_hmac_md5(k, d));
}
function md5(string, key, raw) {
if (!key) {
if (!raw) {
return hex_md5(string);
}
return raw_md5(string);
}
if (!raw) {
return hex_hmac_md5(key, string);
}
return raw_hmac_md5(key, string);
}
if (typeof define === 'function' && define.amd) {
define(function () {
return md5;
});
} else {
$.md5 = md5;
}
}(this));

31
scripts/lib/raf.js
View File

@ -1,31 +0,0 @@
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());

401
scripts/lib/require-2.1.4.js → scripts/lib/require.js
View File

@ -1,5 +1,5 @@
/** vim: et:ts=4:sw=4:sts=4 /** vim: et:ts=4:sw=4:sts=4
* @license RequireJS 2.1.4 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved. * @license RequireJS 2.1.20 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
* Available via the MIT or new BSD license. * Available via the MIT or new BSD license.
* see: http://github.com/jrburke/requirejs for details * see: http://github.com/jrburke/requirejs for details
*/ */
@ -12,7 +12,7 @@ var requirejs, require, define;
(function (global) { (function (global) {
var req, s, head, baseElement, dataMain, src, var req, s, head, baseElement, dataMain, src,
interactiveScript, currentlyAddingScript, mainScript, subPath, interactiveScript, currentlyAddingScript, mainScript, subPath,
version = '2.1.4', version = '2.1.20',
commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg, commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,
cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g, cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,
jsSuffixRegExp = /\.js$/, jsSuffixRegExp = /\.js$/,
@ -21,8 +21,7 @@ var requirejs, require, define;
ostring = op.toString, ostring = op.toString,
hasOwn = op.hasOwnProperty, hasOwn = op.hasOwnProperty,
ap = Array.prototype, ap = Array.prototype,
apsp = ap.splice, isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document),
isBrowser = !!(typeof window !== 'undefined' && navigator && document),
isWebWorker = !isBrowser && typeof importScripts !== 'undefined', isWebWorker = !isBrowser && typeof importScripts !== 'undefined',
//PS3 indicates loaded and complete, but need to wait for complete //PS3 indicates loaded and complete, but need to wait for complete
//specifically. Sequence is 'loading', 'loaded', execution, //specifically. Sequence is 'loading', 'loaded', execution,
@ -108,7 +107,10 @@ var requirejs, require, define;
if (source) { if (source) {
eachProp(source, function (value, prop) { eachProp(source, function (value, prop) {
if (force || !hasProp(target, prop)) { if (force || !hasProp(target, prop)) {
if (deepStringMixin && typeof value !== 'string') { if (deepStringMixin && typeof value === 'object' && value &&
!isArray(value) && !isFunction(value) &&
!(value instanceof RegExp)) {
if (!target[prop]) { if (!target[prop]) {
target[prop] = {}; target[prop] = {};
} }
@ -134,7 +136,11 @@ var requirejs, require, define;
return document.getElementsByTagName('script'); return document.getElementsByTagName('script');
} }
//Allow getting a global that expressed in function defaultOnError(err) {
throw err;
}
//Allow getting a global that is expressed in
//dot notation, like 'a.b.c'. //dot notation, like 'a.b.c'.
function getGlobal(value) { function getGlobal(value) {
if (!value) { if (!value) {
@ -173,7 +179,7 @@ var requirejs, require, define;
if (typeof requirejs !== 'undefined') { if (typeof requirejs !== 'undefined') {
if (isFunction(requirejs)) { if (isFunction(requirejs)) {
//Do not overwrite and existing requirejs instance. //Do not overwrite an existing requirejs instance.
return; return;
} }
cfg = requirejs; cfg = requirejs;
@ -191,19 +197,27 @@ var requirejs, require, define;
var inCheckLoaded, Module, context, handlers, var inCheckLoaded, Module, context, handlers,
checkLoadedTimeoutId, checkLoadedTimeoutId,
config = { config = {
//Defaults. Do not set a default for map
//config to speed up normalize(), which
//will run faster if there is no default.
waitSeconds: 7, waitSeconds: 7,
baseUrl: './', baseUrl: './',
paths: {}, paths: {},
bundles: {},
pkgs: {}, pkgs: {},
shim: {}, shim: {},
map: {},
config: {} config: {}
}, },
registry = {}, registry = {},
//registry of just enabled modules, to speed
//cycle breaking code when lots of modules
//are registered, but not activated.
enabledRegistry = {},
undefEvents = {}, undefEvents = {},
defQueue = [], defQueue = [],
defined = {}, defined = {},
urlFetched = {}, urlFetched = {},
bundlesMap = {},
requireCounter = 1, requireCounter = 1,
unnormalizedCounter = 1; unnormalizedCounter = 1;
@ -218,20 +232,19 @@ var requirejs, require, define;
*/ */
function trimDots(ary) { function trimDots(ary) {
var i, part; var i, part;
for (i = 0; ary[i]; i += 1) { for (i = 0; i < ary.length; i++) {
part = ary[i]; part = ary[i];
if (part === '.') { if (part === '.') {
ary.splice(i, 1); ary.splice(i, 1);
i -= 1; i -= 1;
} else if (part === '..') { } else if (part === '..') {
if (i === 1 && (ary[2] === '..' || ary[0] === '..')) { // If at the start, or previous value is still ..,
//End of the line. Keep at least one non-dot // keep them so that when converted to a path it may
//path segment at the front so it can be mapped // still work when converted to a path, even though
//correctly to disk. Otherwise, there is likely // as an ID it is less than ideal. In larger point
//no path mapping for a path starting with '..'. // releases, may be better to just kick out an error.
//This can still fail, but catches the most reasonable if (i === 0 || (i === 1 && ary[2] === '..') || ary[i - 1] === '..') {
//uses of .. continue;
break;
} else if (i > 0) { } else if (i > 0) {
ary.splice(i - 1, 2); ary.splice(i - 1, 2);
i -= 2; i -= 2;
@ -251,54 +264,45 @@ var requirejs, require, define;
* @returns {String} normalized name * @returns {String} normalized name
*/ */
function normalize(name, baseName, applyMap) { function normalize(name, baseName, applyMap) {
var pkgName, pkgConfig, mapValue, nameParts, i, j, nameSegment, var pkgMain, mapValue, nameParts, i, j, nameSegment, lastIndex,
foundMap, foundI, foundStarMap, starI, foundMap, foundI, foundStarMap, starI, normalizedBaseParts,
baseParts = baseName && baseName.split('/'), baseParts = (baseName && baseName.split('/')),
normalizedBaseParts = baseParts,
map = config.map, map = config.map,
starMap = map && map['*']; starMap = map && map['*'];
//Adjust any relative paths. //Adjust any relative paths.
if (name && name.charAt(0) === '.') { if (name) {
//If have a base name, try to normalize against it, name = name.split('/');
//otherwise, assume it is a top-level require that will lastIndex = name.length - 1;
//be relative to baseUrl in the end.
if (baseName) { // If wanting node ID compatibility, strip .js from end
if (getOwn(config.pkgs, baseName)) { // of IDs. Have to do this here, and not in nameToUrl
//If the baseName is a package name, then just treat it as one // because node allows either .js or non .js to map
//name to concat the name with. // to same file.
normalizedBaseParts = baseParts = [baseName]; if (config.nodeIdCompat && jsSuffixRegExp.test(name[lastIndex])) {
} else { name[lastIndex] = name[lastIndex].replace(jsSuffixRegExp, '');
}
// Starts with a '.' so need the baseName
if (name[0].charAt(0) === '.' && baseParts) {
//Convert baseName to array, and lop off the last part, //Convert baseName to array, and lop off the last part,
//so that . matches that 'directory' and not name of the baseName's //so that . matches that 'directory' and not name of the baseName's
//module. For instance, baseName of 'one/two/three', maps to //module. For instance, baseName of 'one/two/three', maps to
//'one/two/three.js', but we want the directory, 'one/two' for //'one/two/three.js', but we want the directory, 'one/two' for
//this normalization. //this normalization.
normalizedBaseParts = baseParts.slice(0, baseParts.length - 1); normalizedBaseParts = baseParts.slice(0, baseParts.length - 1);
name = normalizedBaseParts.concat(name);
} }
name = normalizedBaseParts.concat(name.split('/'));
trimDots(name); trimDots(name);
//Some use of packages may use a . path to reference the
//'main' module name, so normalize for that.
pkgConfig = getOwn(config.pkgs, (pkgName = name[0]));
name = name.join('/'); name = name.join('/');
if (pkgConfig && name === pkgName + '/' + pkgConfig.main) {
name = pkgName;
}
} else if (name.indexOf('./') === 0) {
// No baseName, so this is ID is resolved relative
// to baseUrl, pull off the leading dot.
name = name.substring(2);
}
} }
//Apply map config if available. //Apply map config if available.
if (applyMap && (baseParts || starMap) && map) { if (applyMap && map && (baseParts || starMap)) {
nameParts = name.split('/'); nameParts = name.split('/');
for (i = nameParts.length; i > 0; i -= 1) { outerLoop: for (i = nameParts.length; i > 0; i -= 1) {
nameSegment = nameParts.slice(0, i).join('/'); nameSegment = nameParts.slice(0, i).join('/');
if (baseParts) { if (baseParts) {
@ -315,16 +319,12 @@ var requirejs, require, define;
//Match, update name to the new value. //Match, update name to the new value.
foundMap = mapValue; foundMap = mapValue;
foundI = i; foundI = i;
break; break outerLoop;
} }
} }
} }
} }
if (foundMap) {
break;
}
//Check for a star map match, but just hold on to it, //Check for a star map match, but just hold on to it,
//if there is a shorter segment match later in a matching //if there is a shorter segment match later in a matching
//config, then favor over this star map. //config, then favor over this star map.
@ -345,7 +345,11 @@ var requirejs, require, define;
} }
} }
return name; // If the name points to a package's name, use
// the package main instead.
pkgMain = getOwn(config.pkgs, name);
return pkgMain ? pkgMain : name;
} }
function removeScript(name) { function removeScript(name) {
@ -363,12 +367,17 @@ var requirejs, require, define;
function hasPathFallback(id) { function hasPathFallback(id) {
var pathConfig = getOwn(config.paths, id); var pathConfig = getOwn(config.paths, id);
if (pathConfig && isArray(pathConfig) && pathConfig.length > 1) { if (pathConfig && isArray(pathConfig) && pathConfig.length > 1) {
removeScript(id);
//Pop off the first array value, since it failed, and //Pop off the first array value, since it failed, and
//retry //retry
pathConfig.shift(); pathConfig.shift();
context.require.undef(id); context.require.undef(id);
context.require([id]);
//Custom require that does not do map translation, since
//ID is "absolute", already mapped/resolved.
context.makeRequire(null, {
skipMap: true
})([id]);
return true; return true;
} }
} }
@ -434,7 +443,16 @@ var requirejs, require, define;
return normalize(name, parentName, applyMap); return normalize(name, parentName, applyMap);
}); });
} else { } else {
normalizedName = normalize(name, parentName, applyMap); // If nested plugin references, then do not try to
// normalize, as it will not normalize correctly. This
// places a restriction on resourceIds, and the longer
// term solution is not to normalize until plugins are
// loaded and all normalizations to allow for async
// loading of a loader plugin. But for now, fixes the
// common uses. Details in #1131
normalizedName = name.indexOf('!') === -1 ?
normalize(name, parentName, applyMap) :
name;
} }
} else { } else {
//A regular module. //A regular module.
@ -494,7 +512,12 @@ var requirejs, require, define;
fn(defined[id]); fn(defined[id]);
} }
} else { } else {
getModule(depMap).on(name, fn); mod = getModule(depMap);
if (mod.error && name === 'error') {
fn(mod.error);
} else {
mod.on(name, fn);
}
} }
} }
@ -530,11 +553,13 @@ var requirejs, require, define;
function takeGlobalQueue() { function takeGlobalQueue() {
//Push all the globalDefQueue items into the context's defQueue //Push all the globalDefQueue items into the context's defQueue
if (globalDefQueue.length) { if (globalDefQueue.length) {
//Array splice in the values since the context code has a each(globalDefQueue, function(queueItem) {
//local var ref to defQueue, so cannot just reassign the one var id = queueItem[0];
//on context. if (typeof id === 'string') {
apsp.apply(defQueue, context.defQueueMap[id] = true;
[defQueue.length - 1, 0].concat(globalDefQueue)); }
defQueue.push(queueItem);
});
globalDefQueue = []; globalDefQueue = [];
} }
} }
@ -551,7 +576,7 @@ var requirejs, require, define;
mod.usingExports = true; mod.usingExports = true;
if (mod.map.isDefine) { if (mod.map.isDefine) {
if (mod.exports) { if (mod.exports) {
return mod.exports; return (defined[mod.map.id] = mod.exports);
} else { } else {
return (mod.exports = defined[mod.map.id] = {}); return (mod.exports = defined[mod.map.id] = {});
} }
@ -565,9 +590,9 @@ var requirejs, require, define;
id: mod.map.id, id: mod.map.id,
uri: mod.map.url, uri: mod.map.url,
config: function () { config: function () {
return (config.config && getOwn(config.config, mod.map.id)) || {}; return getOwn(config.config, mod.map.id) || {};
}, },
exports: defined[mod.map.id] exports: mod.exports || (mod.exports = {})
}); });
} }
} }
@ -576,6 +601,7 @@ var requirejs, require, define;
function cleanRegistry(id) { function cleanRegistry(id) {
//Clean up machinery used for waiting modules. //Clean up machinery used for waiting modules.
delete registry[id]; delete registry[id];
delete enabledRegistry[id];
} }
function breakCycle(mod, traced, processed) { function breakCycle(mod, traced, processed) {
@ -607,7 +633,7 @@ var requirejs, require, define;
} }
function checkLoaded() { function checkLoaded() {
var map, modId, err, usingPathFallback, var err, usingPathFallback,
waitInterval = config.waitSeconds * 1000, waitInterval = config.waitSeconds * 1000,
//It is possible to disable the wait interval by using waitSeconds of 0. //It is possible to disable the wait interval by using waitSeconds of 0.
expired = waitInterval && (context.startTime + waitInterval) < new Date().getTime(), expired = waitInterval && (context.startTime + waitInterval) < new Date().getTime(),
@ -624,8 +650,8 @@ var requirejs, require, define;
inCheckLoaded = true; inCheckLoaded = true;
//Figure out the state of all the modules. //Figure out the state of all the modules.
eachProp(registry, function (mod) { eachProp(enabledRegistry, function (mod) {
map = mod.map; var map = mod.map,
modId = map.id; modId = map.id;
//Skip things that are not enabled or in error state. //Skip things that are not enabled or in error state.
@ -805,7 +831,7 @@ var requirejs, require, define;
}, },
/** /**
* Checks is the module is ready to define itself, and if so, * Checks if the module is ready to define itself, and if so,
* define it. * define it.
*/ */
check: function () { check: function () {
@ -820,7 +846,10 @@ var requirejs, require, define;
factory = this.factory; factory = this.factory;
if (!this.inited) { if (!this.inited) {
// Only fetch if not already in the defQueue.
if (!hasProp(context.defQueueMap, id)) {
this.fetch(); this.fetch();
}
} else if (this.error) { } else if (this.error) {
this.emit('error', this.error); this.emit('error', this.error);
} else if (!this.defining) { } else if (!this.defining) {
@ -833,8 +862,13 @@ var requirejs, require, define;
if (this.depCount < 1 && !this.defined) { if (this.depCount < 1 && !this.defined) {
if (isFunction(factory)) { if (isFunction(factory)) {
//If there is an error listener, favor passing //If there is an error listener, favor passing
//to that instead of throwing an error. //to that instead of throwing an error. However,
if (this.events.error) { //only do it for define()'d modules. require
//errbacks should not be called for failures in
//their callbacks (#699). However if a global
//onError is set, use that.
if ((this.events.error && this.map.isDefine) ||
req.onError !== defaultOnError) {
try { try {
exports = context.execCb(id, factory, depExports, exports); exports = context.execCb(id, factory, depExports, exports);
} catch (e) { } catch (e) {
@ -844,17 +878,14 @@ var requirejs, require, define;
exports = context.execCb(id, factory, depExports, exports); exports = context.execCb(id, factory, depExports, exports);
} }
if (this.map.isDefine) { // Favor return value over exports. If node/cjs in play,
//If setting exports via 'module' is in play, // then will not have a return value anyway. Favor
//favor that over return value and exports. After that, // module.exports assignment over exports object.
//favor a non-undefined return value over exports use. if (this.map.isDefine && exports === undefined) {
cjsModule = this.module; cjsModule = this.module;
if (cjsModule && if (cjsModule) {
cjsModule.exports !== undefined &&
//Make sure it is not already the exports value
cjsModule.exports !== this.exports) {
exports = cjsModule.exports; exports = cjsModule.exports;
} else if (exports === undefined && this.usingExports) { } else if (this.usingExports) {
//exports already set the defined value. //exports already set the defined value.
exports = this.exports; exports = this.exports;
} }
@ -862,8 +893,8 @@ var requirejs, require, define;
if (err) { if (err) {
err.requireMap = this.map; err.requireMap = this.map;
err.requireModules = [this.map.id]; err.requireModules = this.map.isDefine ? [this.map.id] : null;
err.requireType = 'define'; err.requireType = this.map.isDefine ? 'define' : 'require';
return onError((this.error = err)); return onError((this.error = err));
} }
@ -883,7 +914,7 @@ var requirejs, require, define;
} }
//Clean up //Clean up
delete registry[id]; cleanRegistry(id);
this.defined = true; this.defined = true;
} }
@ -914,6 +945,7 @@ var requirejs, require, define;
on(pluginMap, 'defined', bind(this, function (plugin) { on(pluginMap, 'defined', bind(this, function (plugin) {
var load, normalizedMap, normalizedMod, var load, normalizedMap, normalizedMod,
bundleId = getOwn(bundlesMap, this.map.id),
name = this.map.name, name = this.map.name,
parentName = this.map.parentMap ? this.map.parentMap.name : null, parentName = this.map.parentMap ? this.map.parentMap.name : null,
localRequire = context.makeRequire(map.parentMap, { localRequire = context.makeRequire(map.parentMap, {
@ -959,6 +991,14 @@ var requirejs, require, define;
return; return;
} }
//If a paths config, then just load that file instead to
//resolve the plugin, as it is built into that paths layer.
if (bundleId) {
this.map.url = context.nameToUrl(bundleId);
this.load();
return;
}
load = bind(this, function (value) { load = bind(this, function (value) {
this.init([], function () { return value; }, null, { this.init([], function () { return value; }, null, {
enabled: true enabled: true
@ -1049,6 +1089,7 @@ var requirejs, require, define;
}, },
enable: function () { enable: function () {
enabledRegistry[this.map.id] = this;
this.enabled = true; this.enabled = true;
//Set flag mentioning that the module is enabling, //Set flag mentioning that the module is enabling,
@ -1080,12 +1121,22 @@ var requirejs, require, define;
this.depCount += 1; this.depCount += 1;
on(depMap, 'defined', bind(this, function (depExports) { on(depMap, 'defined', bind(this, function (depExports) {
if (this.undefed) {
return;
}
this.defineDep(i, depExports); this.defineDep(i, depExports);
this.check(); this.check();
})); }));
if (this.errback) { if (this.errback) {
on(depMap, 'error', this.errback); on(depMap, 'error', bind(this, this.errback));
} else if (this.events.error) {
// No direct errback on this module, but something
// else is listening for errors, so be sure to
// propagate the error correctly.
on(depMap, 'error', bind(this, function(err) {
this.emit('error', err);
}));
} }
} }
@ -1189,13 +1240,15 @@ var requirejs, require, define;
while (defQueue.length) { while (defQueue.length) {
args = defQueue.shift(); args = defQueue.shift();
if (args[0] === null) { if (args[0] === null) {
return onError(makeError('mismatch', 'Mismatched anonymous define() module: ' + args[args.length - 1])); return onError(makeError('mismatch', 'Mismatched anonymous define() module: ' +
args[args.length - 1]));
} else { } else {
//args are id, deps, factory. Should be normalized by the //args are id, deps, factory. Should be normalized by the
//define() function. //define() function.
callGetModule(args); callGetModule(args);
} }
} }
context.defQueueMap = {};
} }
context = { context = {
@ -1205,9 +1258,11 @@ var requirejs, require, define;
defined: defined, defined: defined,
urlFetched: urlFetched, urlFetched: urlFetched,
defQueue: defQueue, defQueue: defQueue,
defQueueMap: {},
Module: Module, Module: Module,
makeModuleMap: makeModuleMap, makeModuleMap: makeModuleMap,
nextTick: req.nextTick, nextTick: req.nextTick,
onError: onError,
/** /**
* Set a configuration for the context. * Set a configuration for the context.
@ -1221,28 +1276,38 @@ var requirejs, require, define;
} }
} }
//Save off the paths and packages since they require special processing, //Save off the paths since they require special processing,
//they are additive. //they are additive.
var pkgs = config.pkgs, var shim = config.shim,
shim = config.shim,
objs = { objs = {
paths: true, paths: true,
bundles: true,
config: true, config: true,
map: true map: true
}; };
eachProp(cfg, function (value, prop) { eachProp(cfg, function (value, prop) {
if (objs[prop]) { if (objs[prop]) {
if (prop === 'map') { if (!config[prop]) {
mixin(config[prop], value, true, true); config[prop] = {};
} else {
mixin(config[prop], value, true);
} }
mixin(config[prop], value, true, true);
} else { } else {
config[prop] = value; config[prop] = value;
} }
}); });
//Reverse map the bundles
if (cfg.bundles) {
eachProp(cfg.bundles, function (value, prop) {
each(value, function (v) {
if (v !== prop) {
bundlesMap[v] = prop;
}
});
});
}
//Merge shim //Merge shim
if (cfg.shim) { if (cfg.shim) {
eachProp(cfg.shim, function (value, id) { eachProp(cfg.shim, function (value, id) {
@ -1263,29 +1328,25 @@ var requirejs, require, define;
//Adjust packages if necessary. //Adjust packages if necessary.
if (cfg.packages) { if (cfg.packages) {
each(cfg.packages, function (pkgObj) { each(cfg.packages, function (pkgObj) {
var location; var location, name;
pkgObj = typeof pkgObj === 'string' ? { name: pkgObj } : pkgObj; pkgObj = typeof pkgObj === 'string' ? {name: pkgObj} : pkgObj;
name = pkgObj.name;
location = pkgObj.location; location = pkgObj.location;
if (location) {
config.paths[name] = pkgObj.location;
}
//Create a brand new object on pkgs, since currentPackages can //Save pointer to main module ID for pkg name.
//be passed in again, and config.pkgs is the internal transformed
//state for all package configs.
pkgs[pkgObj.name] = {
name: pkgObj.name,
location: location || pkgObj.name,
//Remove leading dot in main, so main paths are normalized, //Remove leading dot in main, so main paths are normalized,
//and remove any trailing .js, since different package //and remove any trailing .js, since different package
//envs have different conventions: some use a module name, //envs have different conventions: some use a module name,
//some use a file name. //some use a file name.
main: (pkgObj.main || 'main') config.pkgs[name] = pkgObj.name + '/' + (pkgObj.main || 'main')
.replace(currDirRegExp, '') .replace(currDirRegExp, '')
.replace(jsSuffixRegExp, '') .replace(jsSuffixRegExp, '');
};
}); });
//Done with modifications, assing packages back to context config
config.pkgs = pkgs;
} }
//If there are any "waiting to execute" modules in the registry, //If there are any "waiting to execute" modules in the registry,
@ -1296,7 +1357,7 @@ var requirejs, require, define;
//late to modify them, and ignore unnormalized ones //late to modify them, and ignore unnormalized ones
//since they are transient. //since they are transient.
if (!mod.inited && !mod.map.unnormalized) { if (!mod.inited && !mod.map.unnormalized) {
mod.map = makeModuleMap(id); mod.map = makeModuleMap(id, null, true);
} }
}); });
@ -1345,7 +1406,7 @@ var requirejs, require, define;
//Synchronous access to one module. If require.get is //Synchronous access to one module. If require.get is
//available (as in the Node adapter), prefer that. //available (as in the Node adapter), prefer that.
if (req.get) { if (req.get) {
return req.get(context, deps, relMap); return req.get(context, deps, relMap, localRequire);
} }
//Normalize module name, if it contains . or .. //Normalize module name, if it contains . or ..
@ -1396,7 +1457,7 @@ var requirejs, require, define;
* plain URLs like nameToUrl. * plain URLs like nameToUrl.
*/ */
toUrl: function (moduleNamePlusExt) { toUrl: function (moduleNamePlusExt) {
var ext, url, var ext,
index = moduleNamePlusExt.lastIndexOf('.'), index = moduleNamePlusExt.lastIndexOf('.'),
segment = moduleNamePlusExt.split('/')[0], segment = moduleNamePlusExt.split('/')[0],
isRelative = segment === '.' || segment === '..'; isRelative = segment === '.' || segment === '..';
@ -1408,9 +1469,8 @@ var requirejs, require, define;
moduleNamePlusExt = moduleNamePlusExt.substring(0, index); moduleNamePlusExt = moduleNamePlusExt.substring(0, index);
} }
url = context.nameToUrl(normalize(moduleNamePlusExt, return context.nameToUrl(normalize(moduleNamePlusExt,
relMap && relMap.id, true), ext || '.fake'); relMap && relMap.id, true), ext, true);
return ext ? url : url.substring(0, url.length - 5);
}, },
defined: function (id) { defined: function (id) {
@ -1433,10 +1493,23 @@ var requirejs, require, define;
var map = makeModuleMap(id, relMap, true), var map = makeModuleMap(id, relMap, true),
mod = getOwn(registry, id); mod = getOwn(registry, id);
mod.undefed = true;
removeScript(id);
delete defined[id]; delete defined[id];
delete urlFetched[map.url]; delete urlFetched[map.url];
delete undefEvents[id]; delete undefEvents[id];
//Clean queued defines too. Go backwards
//in array so that the splices do not
//mess up the iteration.
eachReverse(defQueue, function(args, i) {
if (args[0] === id) {
defQueue.splice(i, 1);
}
});
delete context.defQueueMap[id];
if (mod) { if (mod) {
//Hold on to listeners in case the //Hold on to listeners in case the
//module will be attempted to be reloaded //module will be attempted to be reloaded
@ -1456,7 +1529,7 @@ var requirejs, require, define;
/** /**
* Called to enable a module if it is still in the registry * Called to enable a module if it is still in the registry
* awaiting enablement. A second arg, parent, the parent module, * awaiting enablement. A second arg, parent, the parent module,
* is passed in for context, when this method is overriden by * is passed in for context, when this method is overridden by
* the optimizer. Not shown here to keep code compact. * the optimizer. Not shown here to keep code compact.
*/ */
enable: function (depMap) { enable: function (depMap) {
@ -1497,6 +1570,7 @@ var requirejs, require, define;
callGetModule(args); callGetModule(args);
} }
context.defQueueMap = {};
//Do this after the cycle of callGetModule in case the result //Do this after the cycle of callGetModule in case the result
//of those calls/init calls changes the registry. //of those calls/init calls changes the registry.
@ -1529,9 +1603,20 @@ var requirejs, require, define;
* it is assumed to have already been normalized. This is an * it is assumed to have already been normalized. This is an
* internal API, not a public one. Use toUrl for the public API. * internal API, not a public one. Use toUrl for the public API.
*/ */
nameToUrl: function (moduleName, ext) { nameToUrl: function (moduleName, ext, skipExt) {
var paths, pkgs, pkg, pkgPath, syms, i, parentModule, url, var paths, syms, i, parentModule, url,
parentPath; parentPath, bundleId,
pkgMain = getOwn(config.pkgs, moduleName);
if (pkgMain) {
moduleName = pkgMain;
}
bundleId = getOwn(bundlesMap, moduleName);
if (bundleId) {
return context.nameToUrl(bundleId, ext, skipExt);
}
//If a colon is in the URL, it indicates a protocol is used and it is just //If a colon is in the URL, it indicates a protocol is used and it is just
//an URL to a file, or if it starts with a slash, contains a query arg (i.e. ?) //an URL to a file, or if it starts with a slash, contains a query arg (i.e. ?)
@ -1545,7 +1630,6 @@ var requirejs, require, define;
} else { } else {
//A module that needs to be converted to a path. //A module that needs to be converted to a path.
paths = config.paths; paths = config.paths;
pkgs = config.pkgs;
syms = moduleName.split('/'); syms = moduleName.split('/');
//For each module name segment, see if there is a path //For each module name segment, see if there is a path
@ -1553,7 +1637,7 @@ var requirejs, require, define;
//and work up from it. //and work up from it.
for (i = syms.length; i > 0; i -= 1) { for (i = syms.length; i > 0; i -= 1) {
parentModule = syms.slice(0, i).join('/'); parentModule = syms.slice(0, i).join('/');
pkg = getOwn(pkgs, parentModule);
parentPath = getOwn(paths, parentModule); parentPath = getOwn(paths, parentModule);
if (parentPath) { if (parentPath) {
//If an array, it means there are a few choices, //If an array, it means there are a few choices,
@ -1563,22 +1647,12 @@ var requirejs, require, define;
} }
syms.splice(0, i, parentPath); syms.splice(0, i, parentPath);
break; break;
} else if (pkg) {
//If module name is just the package name, then looking
//for the main module.
if (moduleName === pkg.name) {
pkgPath = pkg.location + '/' + pkg.main;
} else {
pkgPath = pkg.location;
}
syms.splice(0, i, pkgPath);
break;
} }
} }
//Join the path parts together, then figure out if baseUrl is needed. //Join the path parts together, then figure out if baseUrl is needed.
url = syms.join('/'); url = syms.join('/');
url += (ext || (/\?/.test(url) ? '' : '.js')); url += (ext || (/^data\:|\?/.test(url) || skipExt ? '' : '.js'));
url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url; url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;
} }
@ -1594,7 +1668,7 @@ var requirejs, require, define;
}, },
/** /**
* Executes a module callack function. Broken out as a separate function * Executes a module callback function. Broken out as a separate function
* solely to allow the build system to sequence the files in the built * solely to allow the build system to sequence the files in the built
* layer in the right sequence. * layer in the right sequence.
* *
@ -1632,7 +1706,7 @@ var requirejs, require, define;
onScriptError: function (evt) { onScriptError: function (evt) {
var data = getScriptData(evt); var data = getScriptData(evt);
if (!hasPathFallback(data.id)) { if (!hasPathFallback(data.id)) {
return onError(makeError('scripterror', 'Script error', evt, [data.id])); return onError(makeError('scripterror', 'Script error for: ' + data.id, evt, [data.id]));
} }
} }
}; };
@ -1761,8 +1835,19 @@ var requirejs, require, define;
* function. Intercept/override it if you want custom error handling. * function. Intercept/override it if you want custom error handling.
* @param {Error} err the error object. * @param {Error} err the error object.
*/ */
req.onError = function (err) { req.onError = defaultOnError;
throw err;
/**
* Creates the node for the load command. Only used in browser envs.
*/
req.createNode = function (config, moduleName, url) {
var node = config.xhtml ?
document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
document.createElement('script');
node.type = config.scriptType || 'text/javascript';
node.charset = 'utf-8';
node.async = true;
return node;
}; };
/** /**
@ -1779,12 +1864,10 @@ var requirejs, require, define;
node; node;
if (isBrowser) { if (isBrowser) {
//In the browser so use a script tag //In the browser so use a script tag
node = config.xhtml ? node = req.createNode(config, moduleName, url);
document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') : if (config.onNodeCreated) {
document.createElement('script'); config.onNodeCreated(node, config, moduleName, url);
node.type = config.scriptType || 'text/javascript'; }
node.charset = 'utf-8';
node.async = true;
node.setAttribute('data-requirecontext', context.contextName); node.setAttribute('data-requirecontext', context.contextName);
node.setAttribute('data-requiremodule', moduleName); node.setAttribute('data-requiremodule', moduleName);
@ -1817,7 +1900,7 @@ var requirejs, require, define;
node.attachEvent('onreadystatechange', context.onScriptLoad); node.attachEvent('onreadystatechange', context.onScriptLoad);
//It would be great to add an error handler here to catch //It would be great to add an error handler here to catch
//404s in IE9+. However, onreadystatechange will fire before //404s in IE9+. However, onreadystatechange will fire before
//the error handler, so that does not help. If addEvenListener //the error handler, so that does not help. If addEventListener
//is used, then IE will fire error before load, but we cannot //is used, then IE will fire error before load, but we cannot
//use that pathway given the connect.microsoft.com issue //use that pathway given the connect.microsoft.com issue
//mentioned above about not doing the 'script execute, //mentioned above about not doing the 'script execute,
@ -1846,6 +1929,7 @@ var requirejs, require, define;
return node; return node;
} else if (isWebWorker) { } else if (isWebWorker) {
try {
//In a web worker, use importScripts. This is not a very //In a web worker, use importScripts. This is not a very
//efficient use of importScripts, importScripts will block until //efficient use of importScripts, importScripts will block until
//its script is downloaded and evaluated. However, if web workers //its script is downloaded and evaluated. However, if web workers
@ -1856,6 +1940,13 @@ var requirejs, require, define;
//Account for anonymous modules //Account for anonymous modules
context.completeLoad(moduleName); context.completeLoad(moduleName);
} catch (e) {
context.onError(makeError('importscripts',
'importScripts failed for ' +
moduleName + ' at ' + url,
e,
[moduleName]));
}
} }
}; };
@ -1873,7 +1964,7 @@ var requirejs, require, define;
} }
//Look for a data-main script attribute, which could also adjust the baseUrl. //Look for a data-main script attribute, which could also adjust the baseUrl.
if (isBrowser) { if (isBrowser && !cfg.skipDataMain) {
//Figure out baseUrl. Get it from the script tag with require.js in it. //Figure out baseUrl. Get it from the script tag with require.js in it.
eachReverse(scripts(), function (script) { eachReverse(scripts(), function (script) {
//Set the 'head' where we can append children by //Set the 'head' where we can append children by
@ -1887,24 +1978,31 @@ var requirejs, require, define;
//baseUrl, if it is not already set. //baseUrl, if it is not already set.
dataMain = script.getAttribute('data-main'); dataMain = script.getAttribute('data-main');
if (dataMain) { if (dataMain) {
//Preserve dataMain in case it is a path (i.e. contains '?')
mainScript = dataMain;
//Set final baseUrl if there is not already an explicit one. //Set final baseUrl if there is not already an explicit one.
if (!cfg.baseUrl) { if (!cfg.baseUrl) {
//Pull off the directory of data-main for use as the //Pull off the directory of data-main for use as the
//baseUrl. //baseUrl.
src = dataMain.split('/'); src = mainScript.split('/');
mainScript = src.pop(); mainScript = src.pop();
subPath = src.length ? src.join('/') + '/' : './'; subPath = src.length ? src.join('/') + '/' : './';
cfg.baseUrl = subPath; cfg.baseUrl = subPath;
dataMain = mainScript;
} }
//Strip off any trailing .js since dataMain is now //Strip off any trailing .js since mainScript is now
//like a module name. //like a module name.
dataMain = dataMain.replace(jsSuffixRegExp, ''); mainScript = mainScript.replace(jsSuffixRegExp, '');
//If mainScript is still a path, fall back to dataMain
if (req.jsExtRegExp.test(mainScript)) {
mainScript = dataMain;
}
//Put the data-main script in the files to load. //Put the data-main script in the files to load.
cfg.deps = cfg.deps ? cfg.deps.concat(dataMain) : [dataMain]; cfg.deps = cfg.deps ? cfg.deps.concat(mainScript) : [mainScript];
return true; return true;
} }
@ -1932,12 +2030,13 @@ var requirejs, require, define;
//This module may not have dependencies //This module may not have dependencies
if (!isArray(deps)) { if (!isArray(deps)) {
callback = deps; callback = deps;
deps = []; deps = null;
} }
//If no name, and callback is a function, then figure out if it a //If no name, and callback is a function, then figure out if it a
//CommonJS thing with dependencies. //CommonJS thing with dependencies.
if (!deps.length && isFunction(callback)) { if (!deps && isFunction(callback)) {
deps = [];
//Remove comments from the callback string, //Remove comments from the callback string,
//look for require calls, and pull them into the dependencies, //look for require calls, and pull them into the dependencies,
//but only if there are function args. //but only if there are function args.
@ -1976,14 +2075,18 @@ var requirejs, require, define;
//where the module name is not known until the script onload event //where the module name is not known until the script onload event
//occurs. If no context, use the global queue, and get it processed //occurs. If no context, use the global queue, and get it processed
//in the onscript load callback. //in the onscript load callback.
(context ? context.defQueue : globalDefQueue).push([name, deps, callback]); if (context) {
context.defQueue.push([name, deps, callback]);
context.defQueueMap[name] = true;
} else {
globalDefQueue.push([name, deps, callback]);
}
}; };
define.amd = { define.amd = {
jQuery: true jQuery: true
}; };
/** /**
* Executes the text. Normally just uses eval, but can be modified * Executes the text. Normally just uses eval, but can be modified
* to use a better, environment-specific call. Only used for transpiling * to use a better, environment-specific call. Only used for transpiling

632
scripts/lib/reqwest.js Normal file
View File

@ -0,0 +1,632 @@
/*!
* 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 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'
, uniqid = 0
, callbackPrefix = 'reqwest_' + (+new Date())
, lastValue // data stored by the most recent JSONP callback
, xmlHttpRequest = 'XMLHttpRequest'
, xDomainRequest = 'XDomainRequest'
, noop = function () {}
, isArray = typeof Array.isArray == 'function'
? Array.isArray
: function (a) {
return a instanceof Array
}
, defaultHeaders = {
'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'
}
}
, xhr = function(o) {
// is it x-domain
if (o['crossOrigin'] === true) {
var xhr = context[xmlHttpRequest] ? new XMLHttpRequest() : null
if (xhr && 'withCredentials' in xhr) {
return xhr
} else if (context[xDomainRequest]) {
return new XDomainRequest()
} else {
throw new Error('Browser does not support cross-origin requests')
}
} else if (context[xmlHttpRequest]) {
return new XMLHttpRequest()
} else if (XHR2) {
return new XHR2()
} else {
return new ActiveXObject('Microsoft.XMLHTTP')
}
}
, globalSetupOptions = {
dataFilter: function (data) {
return data
}
}
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 (succeed(r)) success(r.request)
else
error(r.request)
}
}
}
function setHeaders(http, o) {
var headers = o['headers'] || {}
, h
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] && !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']
}
}
function generalCallback(data) {
lastValue = data
}
function urlappend (url, s) {
return url + (/\?/.test(url) ? '&' : '?') + s
}
function handleJsonp(o, fn, err, url) {
var reqId = uniqid++
, 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')
, loaded = 0
, isIE10 = navigator.userAgent.indexOf('MSIE 10.0') !== -1
if (match) {
if (match[3] === '?') {
url = url.replace(cbreg, '$1=' + cbval) // wildcard callback func name
} else {
cbval = match[3] // provided callback func name
}
} else {
url = urlappend(url, cbkey + '=' + cbval) // no callback details, add 'em
}
context[cbval] = generalCallback
script.type = 'text/javascript'
script.src = url
script.async = true
if (typeof script.onreadystatechange !== 'undefined' && !isIE10) {
// 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
script.htmlFor = script.id = '_reqwest_' + reqId
}
script.onload = script.onreadystatechange = function () {
if ((script[readyState] && script[readyState] !== 'complete' && script[readyState] !== 'loaded') || loaded) {
return false
}
script.onload = script.onreadystatechange = null
script.onclick && script.onclick()
// Call the user callback with the last value stored and clean up values and scripts.
fn(lastValue)
lastValue = undefined
head.removeChild(script)
loaded = 1
}
// Add the script to the DOM head
head.appendChild(script)
// Enable JSONP timeout
return {
abort: function () {
script.onload = script.onreadystatechange = null
err({}, 'Request is aborted: timeout', {})
lastValue = undefined
head.removeChild(script)
loaded = 1
}
}
}
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)
, 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) {
url = urlappend(url, data)
data = null
}
if (o['type'] == 'jsonp') return handleJsonp(o, fn, err, url)
// 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 (context[xDomainRequest] && http instanceof context[xDomainRequest]) {
http.onload = fn
http.onerror = err
// NOTE: see
// http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/30ef3add-767c-4436-b8a9-f1ca19b4812e
http.onprogress = function() {}
sendWait = true
} else {
http.onreadystatechange = handleReadyState(this, fn, err)
}
o['before'] && o['before'](http)
if (sendWait) {
setTimeout(function () {
http.send(data)
}, 200)
} else {
http.send(data)
}
return http
}
function Reqwest(o, fn) {
this.o = o
this.fn = fn
init.apply(this, arguments)
}
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.timeout = null
// whether request has been fulfilled for purpose
// of tracking the Promises
this._fulfilled = false
// success handlers
this._successHandler = function(){}
this._fulfillmentHandlers = []
// error handlers
this._errorHandlers = []
// complete (both success and fail) handlers
this._completeHandlers = []
this._erred = false
this._responseArgs = {}
var self = this
fn = fn || function () {}
if (o['timeout']) {
this.timeout = setTimeout(function () {
timedOut()
}, o['timeout'])
}
if (o['success']) {
this._successHandler = function () {
o['success'].apply(o, arguments)
}
}
if (o['error']) {
this._errorHandlers.push(function () {
o['error'].apply(o, arguments)
})
}
if (o['complete']) {
this._completeHandlers.push(function () {
o['complete'].apply(o, arguments)
})
}
function complete (resp) {
o['timeout'] && clearTimeout(self.timeout)
self.timeout = null
while (self._completeHandlers.length > 0) {
self._completeHandlers.shift()(resp)
}
}
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)
, r = filteredResponse
try {
resp.responseText = r
} catch (e) {
// can't assign this in IE<=8, just ignore
}
if (r) {
switch (type) {
case 'json':
try {
resp = context.JSON ? context.JSON.parse(r) : eval('(' + r + ')')
} catch (err) {
return error(resp, 'Could not parse JSON in response', err)
}
break
case 'js':
resp = eval(r)
break
case 'html':
resp = r
break
case 'xml':
resp = resp.responseXML
&& resp.responseXML.parseError // IE trololo
&& resp.responseXML.parseError.errorCode
&& resp.responseXML.parseError.reason
? null
: resp.responseXML
break
}
}
self._responseArgs.resp = resp
self._fulfilled = true
fn(resp)
self._successHandler(resp)
while (self._fulfillmentHandlers.length > 0) {
resp = self._fulfillmentHandlers.shift()(resp)
}
complete(resp)
}
function timedOut() {
self._timedOut = true
self.request.abort()
}
function error(resp, msg, t) {
resp = self.request
self._responseArgs.resp = resp
self._responseArgs.msg = msg
self._responseArgs.t = t
self._erred = true
while (self._errorHandlers.length > 0) {
self._errorHandlers.shift()(resp, msg, t)
}
complete(resp)
}
this.request = getRequest.call(this, success, error)
}
Reqwest.prototype = {
abort: function () {
this._aborted = true
this.request.abort()
}
, retry: function () {
init.call(this, this.o, this.fn)
}
/**
* Small deviation from the Promises A CommonJs specification
* http://wiki.commonjs.org/wiki/Promises/A
*/
/**
* `then` will execute upon successful requests
*/
, then: function (success, fail) {
success = success || function () {}
fail = fail || function () {}
if (this._fulfilled) {
this._responseArgs.resp = success(this._responseArgs.resp)
} else if (this._erred) {
fail(this._responseArgs.resp, this._responseArgs.msg, this._responseArgs.t)
} else {
this._fulfillmentHandlers.push(success)
this._errorHandlers.push(fail)
}
return this
}
/**
* `always` will execute whether the request succeeds or fails
*/
, always: function (fn) {
if (this._fulfilled || this._erred) {
fn(this._responseArgs.resp)
} else {
this._completeHandlers.push(fn)
}
return this
}
/**
* `fail` will execute when the request fails
*/
, fail: function (fn) {
if (this._erred) {
fn(this._responseArgs.resp, this._responseArgs.msg, this._responseArgs.t)
} else {
this._errorHandlers.push(fn)
}
return this
}
, 'catch': function (fn) {
return this.fail(fn)
}
}
function reqwest(o, fn) {
return new Reqwest(o, fn)
}
// normalize newline variants according to spec -> CRLF
function normalize(s) {
return s ? s.replace(/\r?\n/g, '\r\n') : ''
}
function serial(el, cb) {
var n = el.name
, t = el.tagName.toLowerCase()
, 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']))
}
, ch, ra, val, i
// don't serialize elements that are disabled or without a name
if (el.disabled || !n) return
switch (t) {
case 'input':
if (!/reset|button|image|file/i.test(el.type)) {
ch = /checkbox/i.test(el.type)
ra = /radio/i.test(el.type)
val = el.value
// WebKit gives us "" instead of "on" if a checkbox has no value, so correct it here
;(!(ch || ra) || el.checked) && cb(n, normalize(ch && val === '' ? 'on' : val))
}
break
case 'textarea':
cb(n, normalize(el.value))
break
case 'select':
if (el.type.toLowerCase() === 'select-one') {
optCb(el.selectedIndex >= 0 ? el.options[el.selectedIndex] : null)
} else {
for (i = 0; el.length && i < el.length; i++) {
el.options[i].selected && optCb(el.options[i])
}
}
break
}
}
// collect up all form elements found from the passed argument elements all
// the way down to child elements; pass a '<form>' or form fields.
// called with 'this'=callback to use for serial() on each element
function eachFormElement() {
var cb = this
, e, i
, serializeSubtags = function (e, tags) {
var i, j, fa
for (i = 0; i < tags.length; i++) {
fa = e[byTag](tags[i])
for (j = 0; j < fa.length; j++) serial(fa[j], cb)
}
}
for (i = 0; i < arguments.length; i++) {
e = arguments[i]
if (/input|select|textarea/i.test(e.tagName)) serial(e, cb)
serializeSubtags(e, [ 'input', 'select', 'textarea' ])
}
}
// standard query string style serialization
function serializeQueryString() {
return reqwest.toQueryString(reqwest.serializeArray.apply(null, arguments))
}
// { 'name': 'value', ... } style serialization
function serializeHash() {
var hash = {}
eachFormElement.apply(function (name, value) {
if (name in hash) {
hash[name] && !isArray(hash[name]) && (hash[name] = [hash[name]])
hash[name].push(value)
} else hash[name] = value
}, arguments)
return hash
}
// [ { name: 'name', value: 'value' }, ... ] style serialization
reqwest.serializeArray = function () {
var arr = []
eachFormElement.apply(function (name, value) {
arr.push({name: name, value: value})
}, arguments)
return arr
}
reqwest.serialize = function () {
if (arguments.length === 0) return ''
var opt, fn
, args = Array.prototype.slice.call(arguments, 0)
opt = args.pop()
opt && opt.nodeType && args.push(opt) && (opt = null)
opt && (opt = opt.type)
if (opt == 'map') fn = serializeHash
else if (opt == 'array') fn = reqwest.serializeArray
else fn = serializeQueryString
return fn.apply(null, args)
}
reqwest.toQueryString = function (o, trad) {
var prefix, i
, traditional = trad || false
, s = []
, enc = encodeURIComponent
, add = function (key, value) {
// If value is a function, invoke it and return its value
value = ('function' === typeof value) ? value() : (value == null ? '' : value)
s[s.length] = enc(key) + '=' + enc(value)
}
// 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'])
} else {
// If traditional, encode the "old" way (the way 1.3.2 or older
// did it), otherwise encode params recursively.
for (prefix in o) {
if (o.hasOwnProperty(prefix)) buildParams(prefix, o[prefix], traditional, add)
}
}
// spaces should be + according to spec
return s.join('&').replace(/%20/g, '+')
}
function buildParams(prefix, obj, traditional, add) {
var name, i, v
, rbracket = /\[\]$/
if (isArray(obj)) {
// Serialize array item.
for (i = 0; obj && i < obj.length; i++) {
v = obj[i]
if (traditional || rbracket.test(prefix)) {
// Treat each array item as a scalar.
add(prefix, v)
} else {
buildParams(prefix + '[' + (typeof v === 'object' ? i : '') + ']', v, traditional, add)
}
}
} else if (obj && obj.toString() === '[object Object]') {
// Serialize object item.
for (name in obj) {
buildParams(prefix + '[' + name + ']', obj[name], traditional, add)
}
} else {
// Serialize scalar item.
add(prefix, obj)
}
}
reqwest.getcallbackPrefix = function () {
return callbackPrefix
}
// 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.ajaxSetup = function (options) {
// options = options || {}
// for (var k in options) {
// globalSetupOptions[k] = options[k]
// }
// }
return reqwest
});

445
scripts/lib/signals-1.0.0.js
View File

@ -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 <http://millermedeiros.github.com/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.
* <br />- <strong>This is an internal constructor and shouldn't be called by regular users.</strong>
* <br />- 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.
* <p>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.</p>
* @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
* <br />- inspired by Robert Penner's AS3 Signals.
* @name Signal
* @author Miller Medeiros
* @constructor
*/
function Signal() {
/**
* @type Array.<SignalBinding>
* @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.
* <p><strong>IMPORTANT:</strong> 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.</p>
* @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.
* <p><strong>IMPORTANT:</strong> should be called only during signal dispatch, calling it before/after dispatch won't affect signal broadcast.</p>
* @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).
* <p><strong>IMPORTANT:</strong> calling any method on the signal instance after calling dispose will throw errors.</p>
*/
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));

109
scripts/models/controlsmodel.js Normal file
View File

@ -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;
}
);

81
scripts/models/glitchmodel.js Normal file
View File

@ -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;
}
)

169
scripts/models/imagemodel.js Normal file
View File

@ -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;
}
);

159
scripts/models/localisationmodel.js Normal file
View File

@ -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;
}
);

39
scripts/models/networkmodel.js Normal file
View File

@ -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;
}
);

178
scripts/models/settingsmodel.js Normal file
View File

@ -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;
}
);

107
scripts/models/sharemodel.js Normal file
View File

@ -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;
}
);

300
scripts/models/storagemodel.js Normal file
View File

@ -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;
}
);

53
scripts/src/controls.js vendored
View File

@ -1,53 +0,0 @@
/*global define*/
define(
function()
{
var values = { };
var is_initialized = false;
var signals;
function init( shared )
{
signals = shared.signals;
if ( shared.feature['query-selector-all'] )
{
var wrapper = document.getElementById( 'controls' );
var controls = document.querySelectorAll( '.control-input' );
wrapper.className += ' is-active';
for ( var i = 0; i < controls.length; i++ )
{
var control = controls[i];
control.addEventListener( 'change', controlUpdated, false );
updateValue( control.id, control.value );
}
is_initialized = true;
signals['control-updated'].dispatch( values );
}
}
function controlUpdated( event )
{
var target = event.target;
updateValue( target.id, target.value );
}
function updateValue( key, value )
{
values[key] = value;
if ( is_initialized )
{
signals['control-updated'].dispatch( values );
}
}
return { init: init };
}
);

43
scripts/src/dragdrop.js vendored
View File

@ -1,43 +0,0 @@
/*global define*/
define(
function()
{
var signals;
var reader;
var feature;
function init( shared )
{
feature = shared.feature;
signals = shared.signals;
if ( feature['drag-drop' ] && feature['file-api' ] )
{
document.addEventListener( 'drop', dropped, false );
document.addEventListener( 'dragover', preventDefault, false );
document.addEventListener( 'dragleave', preventDefault, false );
reader = new FileReader();
reader.addEventListener( 'load', fileLoaded, false );
}
}
function preventDefault( event )
{
event.preventDefault();
}
function dropped( event )
{
event.preventDefault();
reader.readAsDataURL( event.dataTransfer.files[0] );
}
function fileLoaded( event )
{
signals['set-new-src'].dispatch( event.target.result );
}
return { init: init };
}
);

31
scripts/src/export-png.js
View File

@ -1,31 +0,0 @@
/*global define*/
define(
function()
{
var signals;
var png_button;
function init( shared )
{
signals = shared.signals;
png_button = document.getElementById( 'png-button' );
signals['export-png'].add( generatePNG );
signals['control-updated'].add( hideLink );
png_button.addEventListener( 'click', hideLink, false );
}
function generatePNG( data_url )
{
png_button.href = data_url;
png_button.classList.add( 'is-active' );
}
function hideLink()
{
png_button.classList.remove( 'is-active' );
}
return { init: init };
}
);

45
scripts/src/image.js
View File

@ -1,45 +0,0 @@
/*global define*/
define(
function()
{
var signals;
var image;
var initialized = false;
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( 'lincoln.jpg' );
}
function imageLoaded()
{
signals['image-loaded'].dispatch( image );
initialized = true;
}
function setSrc( src )
{
image.src = src;
if (
initialized &&
image.naturalWidth !== undefined &&
image.naturalWidth !== 0
)
{
signals['image-loaded'].dispatch( image );
}
}
return { init: init };
}
);

75
scripts/src/main.js
View File

@ -1,75 +0,0 @@
/*global require, requirejs, define, Modernizr, _basepath_ */
// http://requirejs.org/docs/api.html#config
var path = typeof _basepath_ === 'string' ? _basepath_ + '/' : '';
requirejs.config(
{
baseUrl: path + 'scripts/',
waitSeconds: 5,
urlArgs: 'bust=' + ( new Date() ).getTime(),
shim: {
'lib/delaunay': { exports: 'triangulate' }
}
}
);
require(
[
'src/process',
'src/image',
'src/dragdrop',
'src/controls',
'src/export-png',
'src/save-button',
'aux/feature-test',
'lib/signals-1.0.0',
'lib/html5slider'
],
function(
process,
image,
dragdrop,
controls,
png,
save_button,
testFeatures,
Signal
)
{
testFeatures( init, showError );
function init( supported_features )
{
var shared = {
feature: supported_features,
signals: {
'image-loaded' : new Signal(),
'set-new-src' : new Signal(),
'control-updated' : new Signal(),
'export-png' : new Signal(),
'saved' : new Signal()
}
};
process.init( shared );
dragdrop.init( shared );
controls.init( shared );
png.init( shared );
save_button.init( shared );
image.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 );
}
}
);

113
scripts/src/process.js
View File

@ -1,113 +0,0 @@
/*global define, requestAnimationFrame*/
define(
[ 'aux/glitch', 'aux/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['saved'].add( exportData );
}
function controlsUpdated( new_values )
{
values = getAdjustedValues( new_values );
update();
}
function generate( img )
{
if ( ! is_processing )
{
image = img;
processImage( image );
}
}
function requestTick()
{
if ( ! is_processing )
{
requestAnimationFrame( update );
}
is_processing = true;
}
function update()
{
if ( image )
{
processImage( image );
}
else
{
is_processing = false;
}
}
function processImage( img )
{
is_processing = true;
canvas_helper.clear( tmp_canvas, tmp_ctx );
canvas_helper.clear( canvas, ctx );
canvas_helper.resize( tmp_canvas, img );
canvas_helper.resize( canvas, img );
tmp_ctx.drawImage( img, 0, 0 );
image_data = tmp_ctx.getImageData( 0, 0, tmp_canvas.width, tmp_canvas.height );
glitch( image_data, values, draw );
}
function draw( image_data )
{
canvas_helper.resize( canvas, image_data );
ctx.putImageData( image_data, 0, 0 );
is_processing = false;
image_data = null;
}
function exportData()
{
signals['export-png'].dispatch( 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 };
}
);

25
scripts/src/save-button.js
View File

@ -1,25 +0,0 @@
/*global define*/
define(
function()
{
var signals;
var save_button;
function init( shared )
{
signals = shared.signals;
save_button = document.getElementById( 'save-button' );
save_button.addEventListener( 'click', buttonClicked, false );
}
function buttonClicked( event )
{
event.preventDefault();
signals['saved'].dispatch();
}
return { init: init };
}
);

128
scripts/util/addpublishers.js Normal file
View File

@ -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;
}
);

80
scripts/util/browser.js Normal file
View File

@ -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
};
}
);

85
scripts/util/canvas.js Normal file
View File

@ -0,0 +1,85 @@
/*global define*/
define(
function () {
var canvas = document.createElement( 'canvas' );
var ctx = canvas.getContext( '2d' );
function resizeImage ( content, size, callback, returnType ) {
var image = new Image();
var scale = 1;
var isImageData = false;
var isString = false;
image.addEventListener( 'load', imageLoaded );
// url
if ( typeof content === 'string' ) {
isString = true;
image.src = content;
}
// 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 ( ! isString && ! isImageData ) {
callback( 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();
}
}
}
}
}
}
return {
resizeImage: resizeImage
};
}
);

43
scripts/util/css.js Normal file
View File

@ -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
}
}
);

37
scripts/util/dom.js Normal file
View File

@ -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
};
}
);

107
scripts/util/el.js Normal file
View File

@ -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
}
}
);

11
scripts/util/localizetext.js Normal file
View File

@ -0,0 +1,11 @@
/*global define*/
define(
[ 'models/localisationmodel' ],
function ( LocalisationModel ) {
function loc () {
return LocalisationModel.sharedInstance.localizeText.apply( LocalisationModel.sharedInstance, arguments );
}
return loc;
}
);

22
scripts/util/math.js Normal file
View File

@ -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
};
}
);

24
scripts/util/mediastream.js Normal file
View File

@ -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();
} );
};
}
}
)

35
scripts/util/object.js Normal file
View File

@ -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
};
}
);

79
scripts/util/string.js Normal file
View File

@ -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 = '<a href="$2"' + attributeStr + '>$1</a>';
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 + '>' : '<br />';
var startTag = '<' + tag + '>';
var endTag = '</' + tag + '>';
if ( options && options.cssClasses && typeof options.cssClasses === 'string' ) {
startTag = '<' + tag + ' class="' + options.cssClasses + '">';
}
return startTag + str
.replace( /\n{2}/g, '&nbsp;' + endTag + startTag )
.replace(/\n/g, '&nbsp;' + lineBreakTag ) +
endTag;
}
return {
toCamelCase: toCamelCase,
autop: autop,
markdownToHtml: markdownToHtml,
markdownLinksToHtml: markdownLinksToHtml
};
}
)

82
scripts/util/time.js Normal file
View File

@ -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
};
}
);

25
scripts/views/aboutview.js Normal file
View File

@ -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;
}
);

34
scripts/views/appview.js Normal file
View File

@ -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;
}
);

71
scripts/views/canvascontrolsview.js Normal file
View File

@ -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;
}
)

86
scripts/views/canvasview.js Normal file
View File

@ -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;
}
);

156
scripts/views/controlsview.js Normal file
View File

@ -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;
}
);

121
scripts/views/dialog.js Normal file
View File

@ -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;
}
);

61
scripts/views/draganddropview.js Normal file
View File

@ -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;
}
);

68
scripts/views/fullscreenview.js Normal file
View File

@ -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;
}
);

128
scripts/views/indicatorview.js Normal file
View File

@ -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;
}
);

277
scripts/views/navview.js Normal file
View File

@ -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;
}
)

234
scripts/views/openfileview.js Normal file
View File

@ -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;
}
);

371
scripts/views/panzoom.js Normal file
View File

@ -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;
}
);

87
scripts/views/saveview.js Normal file
View File

@ -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;
}
);

130
scripts/views/settingsview.js Normal file
View File

@ -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;
}
);

337
scripts/views/shareview.js Normal file
View File

@ -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;
}
);

133
scripts/views/webcamview.js Normal file
View File

@ -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;
}
);

36
scripts/views/welcomeview.js Normal file
View File

@ -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;
}
);

19
scripts/views/workspacenavview.js Normal file
View File

@ -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;
}
);

26
scripts/views/workspaceview.js Normal file
View File

@ -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;
}
)

139
scripts/workers/glitchworker.js Normal file
View File

@ -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;
}

Some files were not shown because too many files have changed in this diff Show More