ImageBoard

commit e7521de0578e11fde7c11a48049e494f13ff7f23 Author: jywarren Date: Sun Jan 1 16:10:50 2017 -0500 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..195c8f8d --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directory +node_modules + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +*.swp +todo.txt diff --git a/dist/imageboard.css b/dist/imageboard.css new file mode 100644 index 00000000..6adbbf39 --- /dev/null +++ b/dist/imageboard.css @@ -0,0 +1,24 @@ + +body { + padding: 20px; +} + +.header { + text-align: center; +} + +.panel { + padding: 10px; +} + +#drop { + background: #efefef; + padding: 10px; + width: 100%; + height: 50px; + margin-bottom: 10px; +} + +#drop.hover { + background: #ddd; +} diff --git a/dist/imageboard.js b/dist/imageboard.js new file mode 100644 index 00000000..02076b70 --- /dev/null +++ b/dist/imageboard.js @@ -0,0 +1,22 @@ +(function(exports){ + + if (typeof module === 'undefined') + exports = ImageBoard; + else + module.exports = ImageBoard; + +})(typeof exports === 'undefined'? this['ImageBoard']={}: exports); + +var ImageBoard = function ImageBoard(options){ + +} + + + + + +jQuery(document).ready(function($) { + + var imageSelect = imageselect({ selector: '#drop' }); + +}); diff --git a/index.html b/index.html new file mode 100644 index 00000000..01d540b2 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + ImageBoard + + + + + + + + + + + + + + + + + + + + +

+ +

Select or drop an image here to begin.

+ + + + + + diff --git a/lib/imageselect.js b/lib/imageselect.js new file mode 100644 index 00000000..1b8ad273 --- /dev/null +++ b/lib/imageselect.js @@ -0,0 +1,57 @@ +function imageselect(options) { + + // fake jQuery-like DOM selector + $ = $ || function $(query){ + return document.querySelector(query); + } + + options = options || {}; + options.selector = options.selector || "#dropzone"; + options.output = options.output || function output(image) { + return image; + } + + var image; + + // CSS UI + + $(options.selector).on('dragenter',function(e) { + $(options.selector).addClass('hover'); + }); + + $(options.selector).on('dragleave',function(e) { + $(options.selector).removeClass('hover'); + }); + + // Drag & Drop behavior + + var onDrop = function(e) { + e.preventDefault(); + e.stopPropagation(); // stops the browser from redirecting. + + var files = e.dataTransfer.files; + for (var i = 0, f; f = files[i]; i++) { + // Read the File objects in this FileList. + + reader = new FileReader() + reader.onload = function(e) { + // we should trigger "load" event here + + // this is done once per image: + options.output(event.target.result); + } + reader.readAsDataURL(f); + + } + } + + function onDragOver(e) { + e.stopPropagation(); + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. + } + + $(options.selector).on('dragover', onDragOver, false); + $(options.selector)[0].addEventListener('drop', onDrop, false); + +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..78f8853f --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "imageboard", + "version": "0.0.1", + "description": "A modular JavaScript image manipulation library modeled on a storyboard.", + "main": "dist/imageboard.js", + "scripts": {}, + "repository": { + "type": "git", + "url": "git+https://github.com/jywarren/imageboard.git" + }, + "keywords": [ + "images", + "Public Lab" + ], + "author": "Public Lab", + "license": "GPL-3.0", + "bugs": { + "url": "https://github.com/jywarren/imageboard/issues" + }, + "dependencies": { + "font-awesome": "~4.5.0", + "bootstrap": "~3.2.0", + "jquery": "~2" + }, + "devDependencies": {}, + "homepage": "https://github.com/jywarren/imageboard" +}