eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-14 12:19:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

display add step menu with common modules as "quick" buttons (#479)

Browse Source 
* added icons, rearranging

* basic framework for addstep modules

* linked buttons to automatic step addition

* Delete package-lock.json

* rounded buttons and text movement in image sequencer select

* made null option visible in select dropdown

* package-lock.json
This commit is contained in:
Jonathan Xu
2018-11-21 19:49:48 -05:00
committed by Jeffrey Warren
parent 98c71b18a8
commit f672dc814a
7 changed files with 4236 additions and 4134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8190
dist/image-sequencer.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/image-sequencer.min.js vendored
View File

File diff suppressed because one or more lines are too long

59
examples/demo.css
View File

@@ -23,10 +23,21 @@ h1 {
color: #445;
}
.center-align {
display: flex;
justify-content: center;
text-align:center;
}
.header {
text-align: center;
}
.panel {
margin-left: 20px;
margin-right: 20px;
}
.nomargin {
margin: 0 !important;
}
@@ -159,16 +170,40 @@ h1 {
color:#BABABA;
}
#stepRemovedNotification{
background-color: #808b96;
padding:4px;
color:white;
border-radius:3px;
font-size:2rem;
position:fixed;
bottom:8px;
left:45%;
min-width:14rem;
text-align:center;
display:none;
.btn-circle{
width: 80px;
height: 80px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 40px;
margin-left: 5px;
margin-right: 5px;
}
.radio button{
cursor:pointer;
}
.radio.selected button{
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
}
.radio-group {
margin-bottom: 20px;
}
#stepRemovedNotification {
background-color: #808b96;
padding:4px;
color:white;
border-radius:3px;
font-size:2rem;
position:fixed;
bottom:8px;
left:45%;
min-width:14rem;
text-align:center;
display:none;
}

16
examples/demo.js
View File

@@ -14,6 +14,8 @@ window.onload = function() {
'<option value="' + m + '">' + modulesInfo[m].name + "</option>"
);
}
// Null option
addStepSelect.append('<option value="none" disabled selected>More modules...</option>');
}
refreshOptions();
@@ -33,9 +35,21 @@ window.onload = function() {
$("#addStep select").on("change", ui.selectNewStepUi);
$("#addStep #add-step-btn").on("click", ui.addStepUi);
//Module button radio selection
$('.radio-group .radio').on("click", function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
newStep = $(this).attr('data-value');
console.log(newStep);
//$("#addStep option[value=" + newStep + "]").attr('selected', 'selected');
$("#addStep select").val(newStep);
ui.selectNewStepUi();
ui.addStepUi();
$(this).removeClass('selected');
});
$('#download-btn').click(function() {
$('.img-thumbnail:last()').trigger("click");
return false;
});

46
examples/index.html
View File

@@ -27,9 +27,9 @@
<!-- Download.js for large files -->
<script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
<script src="lib/scrollToTop.js"></script>
</head>
@@ -37,6 +37,7 @@
<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">
<!-- for crop module: -->
<link href="../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
<link rel="stylesheet" href="demo.css">
@@ -76,14 +77,46 @@
<section id="addStep" class="panel panel-primary">
<div class="form-inline">
<div class="panel-body">
<div style="text-align:center;">
<p class="info">Select a new module to add to your sequence.</p>
<div class="row center-align radio-group">
<div>
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="brightness">
<i class="fa fa-sun-o fa-4x"></i>
</button>
<p>Brightness</p>
</div>
<div>
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="contrast">
<i class="fa fa-adjust fa-4x"></i>
</button>
<p>Contrast</p>
</div>
<div>
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="saturation">
<i class="fa fa-tint fa-4x"></i>
</button>
<p>Saturation</p>
</div>
<div>
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="rotate">
<i class="fa fa-rotate-right fa-4x"></i>
</button>
<p>Rotate</p>
</div>
<div>
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="crop">
<i class="fa fa-crop fa-4x"></i>
</button>
<p>Crop</p>
</div>
</div>
<div class="center-align">
<select class="form-control input-lg" id="selectStep">
<option value="none" disabled selected>Select a new step...</option>
<!-- The default null selection has been appended manually in demo.js
This is because the options in select are overritten when options are appended.-->
</select>
<button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>
</div>
<br />
<p class="info">Select a new module to add to your sequence.</p>
</div>
</div>
</section>
@@ -123,6 +156,7 @@
</section>
</div>
</div>
<div class="row">
<button class="btn btn-primary btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
</div>

6
examples/lib/defaultHtmlSequencerUi.js
View File

@@ -40,7 +40,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
function addStepUi() {
if ($(addStepSel + " select").val() == "none") return;
var newStepName = $(addStepSel + " select").val();
/*
@@ -57,9 +57,9 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
_sequencer
.addSteps(newStepName, options)
.run({ index: _sequencer.images.image1.steps.length - sequenceLength - 1 });
//enable save-sequence button if disabled initially
handleSaveSequence();
handleSaveSequence();
// add to URL hash too
setUrlHashParameter("steps", _sequencer.toString());

51
package-lock.json generated
View File

@@ -855,7 +855,7 @@
},
"browserify-cache-api": {
"version": "3.0.1",
"resolved": "http://registry.npmjs.org/browserify-cache-api/-/browserify-cache-api-3.0.1.tgz",
"resolved": "https://registry.npmjs.org/browserify-cache-api/-/browserify-cache-api-3.0.1.tgz",
"integrity": "sha1-liR+hT8Gj9bg1FzHPwuyzZd47wI=",
"dev": true,
"requires": {
@@ -889,7 +889,7 @@
},
"browserify-incremental": {
"version": "3.1.1",
"resolved": "http://registry.npmjs.org/browserify-incremental/-/browserify-incremental-3.1.1.tgz",
"resolved": "https://registry.npmjs.org/browserify-incremental/-/browserify-incremental-3.1.1.tgz",
"integrity": "sha1-BxPLdYckemMqnwjPG9FpuHi2Koo=",
"dev": true,
"requires": {
@@ -901,7 +901,7 @@
"dependencies": {
"JSONStream": {
"version": "0.10.0",
"resolved": "http://registry.npmjs.org/JSONStream/-/JSONStream-0.10.0.tgz",
"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.10.0.tgz",
"integrity": "sha1-dDSdDYlSK3HzDwoD/5vSDKbxKsA=",
"dev": true,
"requires": {
@@ -1778,6 +1778,11 @@
"integrity": "sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw=",
"dev": true
},
"downloadjs": {
"version": "1.4.7",
"resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
"integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
},
"dup": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dup/-/dup-1.0.0.tgz",
@@ -2743,12 +2748,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -2763,17 +2770,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -2890,7 +2900,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@@ -2902,6 +2913,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -2916,6 +2928,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -2923,12 +2936,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -2947,6 +2962,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3027,7 +3043,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -3039,6 +3056,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -3160,6 +3178,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4231,7 +4250,7 @@
},
"http-errors": {
"version": "1.6.3",
"resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
"dev": true,
"requires": {
@@ -5327,7 +5346,7 @@
},
"mkdirp": {
"version": "0.5.1",
"resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
@@ -5830,7 +5849,7 @@
},
"os-locale": {
"version": "1.4.0",
"resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
"dev": true,
"requires": {
@@ -7836,7 +7855,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -8760,7 +8779,7 @@
},
"wrap-ansi": {
"version": "2.1.0",
"resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
"dev": true,
"requires": {
@@ -8852,7 +8871,7 @@
},
"yargs-parser": {
"version": "4.2.1",
"resolved": "http://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
"integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=",
"dev": true,
"requires": {