diff --git a/index.html b/index.html index 8d6d065..4678135 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,8 @@
+ + download bitmap file (.png)
diff --git a/scripts/main.js b/scripts/main.js index 129f0af..1ac5d14 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -20,6 +20,7 @@ require( 'src/controls', 'src/export-png', 'src/save-button', + 'src/import-button', 'util/feature-test', 'lib/signals-1.0.0', 'lib/html5slider' @@ -31,6 +32,7 @@ require( controls, png, save_button, + import_button, testFeatures, Signal ) @@ -55,6 +57,7 @@ require( controls.init( shared ); png.init( shared ); save_button.init( shared ); + import_button.init( shared ); image.init( shared ); } diff --git a/scripts/src/import-button.js b/scripts/src/import-button.js new file mode 100644 index 0000000..15f4baf --- /dev/null +++ b/scripts/src/import-button.js @@ -0,0 +1,65 @@ +/*global define*/ +define( + [ 'util/trigger-event' ], + function( triggerEvent ) + { + var feature; + var signals; + var import_button; + var import_input; + var file_reader; + var image; + var file_loading = false; + var allowed_file_types = [ 'image/png', 'image/jpg', 'image/jpeg' ]; + + function init( shared ) + { + signals = shared.signals; + feature = shared.feature; + + // http://www.html5rocks.com/en/tutorials/file/dndfiles/ + if ( feature['file-api' ] ) + { + file_reader = new FileReader(); + + import_button = document.getElementById( 'import-button' ); + import_input = document.getElementById( 'import-input' ); + + file_reader.addEventListener( 'load', fileLoaded, false ); + import_button.addEventListener( 'click', buttonClicked, false ); + import_input.addEventListener( 'change', fileSelected, false ); + } + } + + function buttonClicked( event ) + { + event.preventDefault(); + + if ( ! file_loading ) + { + triggerEvent( import_input, 'click' ); + } + } + + function fileSelected( event ) + { + var files = event.target.files; + + if ( + files[0] && + files[0].type && + allowed_file_types.indexOf( files[0].type ) !== -1 + ) + { + file_reader.readAsDataURL( files[0] ); + } + } + + function fileLoaded( event ) + { + signals['set-new-src'].dispatch( event.target.result ); + } + + return { init: init }; + } +); \ No newline at end of file diff --git a/scripts/util/trigger-event.js b/scripts/util/trigger-event.js new file mode 100644 index 0000000..04dadd1 --- /dev/null +++ b/scripts/util/trigger-event.js @@ -0,0 +1,71 @@ +/*global define*/ +define( + function() + { + // http://stackoverflow.com/a/2381862/229189 + function triggerEvent( node, event_name ) + { + var doc; + + if ( node.ownerDocument ) + { + doc = node.ownerDocument; + } + + else if ( node.nodeType === 9 ) + { + doc = node; + } + + else + { + throw new Error('Invalid node passed to fireEvent: ' + node.id); + } + + if ( node.fireEvent ) + { + // IE-style + var event = doc.createEventObject(); + + event.synthetic = true; + + node.fireEvent( 'on' + event_name, event ); + } + + else if ( node.dispatchEvent ) + { + var event_class = ''; + + switch ( event_name ) + { + case 'click': + case 'mousedown': + case 'mouseup': + event_class = 'MouseEvents'; + break; + + case 'focus': + case 'change': + case 'blur': + case 'select': + event_class = 'HTMLEvents'; + break; + + default: + throw 'triggerEvent: Couldn’t find an event class for event ' + event_name + '.'; + break; + } + + var event = doc.createEvent( event_class ); + var bubbles = event_name == 'change' ? false : true; + + event.initEvent( event_name, bubbles, true ); + + event.synthetic = true; + node.dispatchEvent( event ); + } + } + + return triggerEvent; + } +); \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index fdb3ed1..d6970a2 100644 --- a/styles/global.css +++ b/styles/global.css @@ -89,6 +89,11 @@ a:hover width: 100px; } +#import-input +{ + display: none; +} + #canvas { clear: both;