From 6a1f4fda80df11dd37c7921cceb7839b4dbbe78f Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Fri, 29 Nov 2013 22:00:59 +0100 Subject: [PATCH 1/4] update user interface --- index.html | 89 ++++----- scripts/main.js | 3 + scripts/src/intro.js | 47 +++++ styles/main.css | 420 ++++++++++++++++++++++++------------------- 4 files changed, 339 insertions(+), 220 deletions(-) create mode 100644 scripts/src/intro.js diff --git a/index.html b/index.html index ace1d33..d4a3dd7 100644 --- a/index.html +++ b/index.html @@ -6,51 +6,60 @@ -
-

glitch images

-

drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way jpg encoding works, the corrupted file still shows something. inspired by soulwires experiment in flash. this experiment was created by georg. you can follow him on twitter or explore the source code on github.

-

if you like this one, you can check out some of his other javascript experiments.

-
-
-
- - - + +
+
+

glitch images

+ + + + + download bitmap file (.png) +
+ + + + + + sorry, something went wrong. maybe try again? +
+
-
- - - -
-
- - - -
-
- - - -
-
-
- - - - - download bitmap file (.png) -
- - - - - - sorry, something went wrong. maybe try again? +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
- + +
+
+

drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way jpg encoding works, the corrupted file still shows something. inspired by soulwires experiment in flash. this experiment was created by georg. you can follow him on twitter or explore the source code on github.

+

if you like this one, you can check out some of his other javascript experiments.

+ +
+
diff --git a/scripts/main.js b/scripts/main.js index 40d3f2c..ed519fe 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -20,6 +20,7 @@ require( 'src/import-button', 'src/random-button', 'src/upload-imgur', + 'src/intro', 'util/feature-test', 'lib/signals-1.0.0' ], @@ -33,6 +34,7 @@ require( import_button, random_button, imgur, + intro, testFeatures, Signal ) @@ -62,6 +64,7 @@ require( image.init( shared ); file.init( shared ); imgur.init( shared ); + intro.init( shared ); } function showError( required_features ) diff --git a/scripts/src/intro.js b/scripts/src/intro.js new file mode 100644 index 0000000..d1b12a3 --- /dev/null +++ b/scripts/src/intro.js @@ -0,0 +1,47 @@ +/*global define*/ +define( + function() + { + var signals; + var is_open = true; + var element = document.querySelectorAll( '.intro' )[0]; + var button = document.querySelectorAll( '.intro-button' )[0]; + var close_button = element.querySelectorAll( '.close' )[0]; + + function init( shared ) + { + signals = shared.signals; + button.addEventListener( 'click', buttonClicked ); + close_button.addEventListener( 'click', close ); + } + + function buttonClicked( event ) + { + if ( is_open ) + { + close(); + } + + else + { + open(); + } + } + + function open() + { + button.classList.add( 'is-active' ); + element.classList.add( 'is-active' ); + is_open = true; + } + + function close() + { + button.classList.remove( 'is-active' ); + element.classList.remove( 'is-active' ); + is_open = false; + } + + return { init: init }; + } +); \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index db4f527..cb5b271 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,40 +1,59 @@ -* -{ +* { margin: 0; padding: 0; } -body -{ - padding: 50px; +body { font-family: sans-serif; color: #666; line-height: 18px; - font-size: 12px; + font-size: 14px; } -a -{ +a { color: #06f; text-decoration: none; } -a:hover -{ +a:hover { text-decoration: underline; } -.is-hidden -{ +.is-hidden { display: none; } -.button -{ - background-color: #eaeaea; +.full-width { + width: 100%; +} + +.dark-bg { + background-color: #333; +} + +.light-bg { + background-color: #efefef; + border-bottom: 1px #ddd solid; +} + +.center { + max-width: 860px; + margin-left: auto; + margin-right: auto; +} + +.nav-wrapper { + padding-top: 17px; + padding-bottom: 17px; + position: relative; + z-index: 3; +} + +.button { + background-color: #ddd; padding: 5px 9px; display: inline-block; - color: #06f; + color: #666; font-weight: normal; border-radius: 2px; cursor: pointer; @@ -43,223 +62,264 @@ a:hover font-size: 12px; text-decoration: none; line-height: normal; + margin-right: 4px; } -.button:hover -{ +.button:hover { background-color: #06f; color: #fff; text-decoration: none; } -#random-button -{ +.dark-bg .button { + background-color: #666; + color: #ccc; +} + +.dark-bg .button:hover { + background-color: #999; + color: #fff; +} + +.dark-bg a { + color: #ddd; +} + +#random-button { position: relative; - top: 3px; + top: 6px; } -.headline -{ - font-size: 12px; - color: #333; - margin-bottom: 10px; +.headline { + font-size: 16px; + color: #fff; + display: inline-block; + font-weight: normal; + margin-right: 20px; + position: relative; + top: 1px; } -.intro -{ - max-width: 650px; +.intro { + width: 100%; + position: absolute; + top: -100%; + background-color: #fff; + background-color: rgba(255,255,255, 0.9); + -webkit-transition: all 0.5s ease-in; + transition: all 0.5s ease-in; } -#controls -{ - float: left; - margin-top: 30px; +.intro.is-active { + top: 0; +} + +.intro .center { + padding: 30px; + max-width: 580px; + position: relative; +} + +.intro .close { + position: absolute; + top: 10px; + right: 10px; + display: block; + font-size: 16px; + background-color: transparent; + border: none; + color: #06f; +} + +.intro-button { + font-size: 17px; + padding-top: 0px; + padding-bottom: 3px; + float: right; +} + +.intro-button.is-active, +.intro-button.is-active:hover { + background-color: #ddd; + color: #666; +} + +#controls { display: none; } -#controls.is-active -{ +#controls.is-active { display: block; } - .control-wrapper - { - float: left; - width: 200px; - margin-right: 20px; - } +.control-wrapper { + display: inline-block; + width: 160px; + margin-right: 20px; +} - .control-label - { - display: block; - color: #666; - } +.control-label { + font-size: 11px; + display: block; + color: #666; + text-align: center; + max-width: 120px; +} - .control-slider - { - display: block; - float: left; - border: none; - width: 160px; - height: 1px; - margin-top: 6px; - background: #ddd; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } +.control-slider { + display: block; + float: left; + border: none; + width: 120px; + height: 1px; + margin-top: 6px; + background: #ddd; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} - .control-number - { - display: block; - color: #333; - float: right; - border: none; - max-width: 30px; - font-family: sans-serif; - } +.control-number { + display: block; + color: #333; + float: right; + border: none; + max-width: 30px; + font-family: sans-serif; + background-color: transparent; +} -#import-input -{ +#import-input { display: none; } -.export-wrapper -{ - clear: both; - float: left; - margin-top: 30px; +.download-link { + display: none; } - .download-link - { - display: none; - } +.download-link.is-active { + display: inline-block; + margin-left: 15px; +} - .download-link.is-active - { - display: inline-block; - margin-left: 15px; - } +.download-link span { + color: #999; + display: inline-block; + text-decoration: none; + margin-left: 4px; +} - .download-link span - { - color: #999; - display: inline-block; - text-decoration: none; - margin-left: 4px; - } - -#imgur-button -{ +#imgur-button { width: 85px; } #imgur-button.is-uploading, -#imgur-button.is-uploading:hover -{ - background-color: #eaeaea; - color: #06f; +#imgur-button.is-uploading:hover { + background-color: #ddd; + color: #666; cursor: default; } - #imgur-button span - { - display: block; - width: 154px; - transition: margin-left 0.5s ease-in; - transition-property: margin-left top; - text-align: left; - overflow: hidden; - } +#imgur-button span { + display: block; + width: 154px; + -webkit-transition: margin-left 0.5s ease-in; + transition: margin-left 0.5s ease-in; + -webkit-transition-property: margin-left top; + transition-property: margin-left top; + text-align: left; + overflow: hidden; +} +#imgur-button.is-uploading span { + margin-left: -76px; +} - #imgur-button.is-uploading span - { - margin-left: -76px; - } +#imgur-button span::after { + content: 'loading…'; + display: inline-block; + padding-left: 15px; + color: #999; +} - #imgur-button span::after - { - content: 'loading…'; - display: inline-block; - padding-left: 15px; - color: #999; - } - -#imgur-url-container -{ +#imgur-url-container { display: inline-block; opacity: 0; + -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } -#imgur-url-container.is-active -{ +#imgur-url-container.is-active { opacity: 1; } - #imgur-url-input - { - padding: 4px 9px; - border: 1px #CCC solid; - border-radius: 3px; - font-family: sans-serif; - font-size: 13px; - color: #7C7C7C; - } +#imgur-url-input { + padding: 5px 9px 4px 9px; + border: none; + border-radius: 2px; + font-family: sans-serif; + font-size: 13px; + color: #333; + margin-right: 7px; + position: relative; + top: 1px; +} - #imgur-url-error - { - padding: 5px 9px; - line-height: normal; - color: #999; - } +#imgur-url-error { + padding: 5px 9px; + line-height: normal; + color: #999; +} - #imgur-url-input, - #imgur-url-link, - #imgur-url-error - { - display: none; - } - - #imgur-url-container.upload-successful #imgur-url-input, - #imgur-url-container.upload-successful #imgur-url-link - { - display: inline-block; - } - - #imgur-url-container.upload-failed #imgur-url-error - { - display: inline-block; - } - -.social-link -{ +#imgur-url-input, +#imgur-url-link, +#imgur-url-error { display: none; } - .upload-successful .social-link - { - display: inline-block; +#imgur-url-container.upload-successful #imgur-url-input, +#imgur-url-container.upload-successful #imgur-url-link { + display: inline-block; +} + +#imgur-url-container.upload-failed #imgur-url-error { + display: inline-block; +} + +.social-link { + display: none; +} + +.upload-successful .social-link { + display: inline-block; +} + +.missing-feature { + clear: both; +} + +.canvas-wrapper { + width: 100%; + margin-top: 30px; + position: relative; + background-color: rgba(255, 255, 255, 0.9); + line-height: 1.7; +} + +#canvas { + margin-left: auto; + margin-right: auto; + display: block; + max-width: 100%; +} + +@media all and (max-width: 860px) { + .nav-wrapper { + text-align: center; } - -.missing-feature -{ - clear: both; -} - -.canvas-wrapper -{ - width: 100%; - clear: both; - float: left; - margin-top: 30px; - -} - #canvas - { - display: block; - max-width: 100%; - } \ No newline at end of file + .center { + padding-left: 10px; + padding-right: 10px; + } +} \ No newline at end of file From 2810d7ac765a8630c8e20b814cd1dbbf84591432 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Fri, 29 Nov 2013 22:09:10 +0100 Subject: [PATCH 2/4] update ui; add open and close button to ui; close intro when new image is uploaded; --- index.html | 3 ++- scripts/main.js | 1 + scripts/src/dragdrop.js | 1 + scripts/src/import-button.js | 1 + scripts/src/intro.js | 1 + styles/main.css | 2 +- 6 files changed, 7 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d4a3dd7..ddc27be 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,8 @@
-

drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way jpg encoding works, the corrupted file still shows something. inspired by soulwires experiment in flash. this experiment was created by georg. you can follow him on twitter or explore the source code on github.

+

drag an image into the browser window to modify it.

+

this script corrupts some bytes in a jpg image. because of the way jpg encoding works, the corrupted file still shows something. inspired by soulwires experiment in flash. this experiment was created by georg. you can follow him on twitter or explore the source code on github.

if you like this one, you can check out some of his other javascript experiments.

diff --git a/scripts/main.js b/scripts/main.js index ed519fe..879bc97 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -51,6 +51,7 @@ require( 'set-new-src' : new Signal(), 'control-set' : new Signal(), 'control-updated' : new Signal(), + 'close-intro' : new Signal(), 'image-data-url-requested' : new Signal() } }; diff --git a/scripts/src/dragdrop.js b/scripts/src/dragdrop.js index c24482d..80a7d51 100644 --- a/scripts/src/dragdrop.js +++ b/scripts/src/dragdrop.js @@ -34,6 +34,7 @@ define( ) { signals['load-file'].dispatch( event.dataTransfer.files[0] ); + signals['close-intro'].dispatch(); } } diff --git a/scripts/src/import-button.js b/scripts/src/import-button.js index ccd6a52..f101b37 100644 --- a/scripts/src/import-button.js +++ b/scripts/src/import-button.js @@ -50,6 +50,7 @@ define( ) { signals['load-file'].dispatch( event.target.files[0] ); + signals['close-intro'].dispatch(); } } diff --git a/scripts/src/intro.js b/scripts/src/intro.js index d1b12a3..1d0426e 100644 --- a/scripts/src/intro.js +++ b/scripts/src/intro.js @@ -13,6 +13,7 @@ define( signals = shared.signals; button.addEventListener( 'click', buttonClicked ); close_button.addEventListener( 'click', close ); + signals['close-intro'].add( close ); } function buttonClicked( event ) diff --git a/styles/main.css b/styles/main.css index cb5b271..1645193 100644 --- a/styles/main.css +++ b/styles/main.css @@ -129,6 +129,7 @@ a:hover { background-color: transparent; border: none; color: #06f; + cursor: pointer; } .intro-button { @@ -300,7 +301,6 @@ a:hover { .canvas-wrapper { width: 100%; - margin-top: 30px; position: relative; background-color: rgba(255, 255, 255, 0.9); line-height: 1.7; From 67487ed7be96ff0a45f7afb705cb558275e4ce0d Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Fri, 29 Nov 2013 22:16:50 +0100 Subject: [PATCH 3/4] ipdate intro button --- index.html | 5 ++--- styles/main.css | 3 --- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index ddc27be..e214cb6 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,7 @@ image glitch experiment - - +

glitch images

@@ -23,7 +22,7 @@ sorry, something went wrong. maybe try again?
- +
diff --git a/styles/main.css b/styles/main.css index 1645193..cdf0438 100644 --- a/styles/main.css +++ b/styles/main.css @@ -133,9 +133,6 @@ a:hover { } .intro-button { - font-size: 17px; - padding-top: 0px; - padding-bottom: 3px; float: right; } From e14be9efdc466954e6321002052573c40e275d82 Mon Sep 17 00:00:00 2001 From: Georg Fischer Date: Fri, 29 Nov 2013 22:17:18 +0100 Subject: [PATCH 4/4] remove hardcoded image url from script --- scripts/src/image.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/src/image.js b/scripts/src/image.js index 563cb3e..c383680 100644 --- a/scripts/src/image.js +++ b/scripts/src/image.js @@ -5,6 +5,7 @@ define( var signals; var image; var initialized = false; + var defaultimage = document.body.getAttribute( 'data-defaultimage' ); function init( shared ) { @@ -17,7 +18,7 @@ define( // the image "Abraham Lincoln November 1863" is public domain: // https://en.wikipedia.org/wiki/File:Abraham_Lincoln_November_1863.jpg - setSrc( 'lincoln.jpg' ); + setSrc( defaultimage ); } function imageLoaded()