mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-17 13:50:04 +01:00
initial commit
This commit is contained in:
jywarren
36
.gitignore
vendored
Normal file
36
.gitignore
vendored
Normal file
@@ -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
|
||||
24
dist/imageboard.css
vendored
Normal file
24
dist/imageboard.css
vendored
Normal file
@@ -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;
|
||||
}
|
||||
22
dist/imageboard.js
vendored
Normal file
22
dist/imageboard.js
vendored
Normal file
@@ -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' });
|
||||
|
||||
});
|
||||
43
index.html
Normal file
43
index.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<title>ImageBoard</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="dist/imageboard.css" rel="stylesheet">
|
||||
|
||||
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="lib/imageselect.js"></script>
|
||||
<script src="dist/imageboard.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
|
||||
<h1>ImageBoard</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<p style="display:none;" class="spinner"><i class="fa fa-spinner fa-spin"></i></p>
|
||||
|
||||
<div id="drop"></div>
|
||||
<span id="file-select" class="upload"><input type="file" /></span>
|
||||
<p class="instructions">Select or drop an image here to begin.</p>
|
||||
|
||||
<div style="display:none;" class="controls">
|
||||
<a class="btn btn-lg btn-inverse upload"><i class="fa fa-upload"></i></a>
|
||||
<a style="display:none;" title="vectorcam.svg" class="btn btn-lg btn-inverse save" target="_blank"><i class="fa fa-save"></i></a>
|
||||
<a style="display:none;" class="btn btn-lg btn-inverse btn-options"><i class="fa fa-cog"></i></a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
57
lib/imageselect.js
Normal file
57
lib/imageselect.js
Normal file
@@ -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);
|
||||
|
||||
}
|
||||
27
package.json
Normal file
27
package.json
Normal file
@@ -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"
|
||||
}
|
||||
Reference in New Issue
Block a user