mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
split editor into html demo, js and css...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
edad81f4b0
commit
49f1951622
270
ui/experiments/editor.css
Executable file
270
ui/experiments/editor.css
Executable file
@ -0,0 +1,270 @@
|
|||||||
|
.panel {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 450px;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
border: solid 2px silver;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.5);
|
||||||
|
opacity: 0.95;
|
||||||
|
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
.panel summary {
|
||||||
|
padding-left: 3px;
|
||||||
|
background: silver
|
||||||
|
}
|
||||||
|
.panel summary::-webkit-details-marker {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
.panel .close-button {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
cursor: hand;
|
||||||
|
}
|
||||||
|
.panel .close-button:hover {
|
||||||
|
font-weight: bold;
|
||||||
|
color: red;
|
||||||
|
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.panel button,
|
||||||
|
.panel details,
|
||||||
|
.panel .state {
|
||||||
|
margin: 1px;
|
||||||
|
font-size: 11px;
|
||||||
|
border: solid 1px #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
/* needed for dragging */
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.panel details {
|
||||||
|
margin: 3px;
|
||||||
|
border: solid 1px silver;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.panel details summary {
|
||||||
|
background: #ddd;
|
||||||
|
/*
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.4);
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
.panel .sub-panel-content {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel button:active,
|
||||||
|
.panel .state:active {
|
||||||
|
background: silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* main controls */
|
||||||
|
.panel .control {
|
||||||
|
white-space:nowrap;
|
||||||
|
}
|
||||||
|
.panel .control .title {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
.panel .control .slider {
|
||||||
|
-webkit-appearance: none !important;
|
||||||
|
width: 150px;
|
||||||
|
height: 3px;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.panel .control.at-default .slider {
|
||||||
|
}
|
||||||
|
.panel .control .slider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none !important;
|
||||||
|
height: 13px;
|
||||||
|
width: 13px;
|
||||||
|
/*border: solid 1px gray;*/
|
||||||
|
border: solid 2px #aaa;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.panel .control.at-default .slider::-webkit-slider-thumb {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.panel .control .value {
|
||||||
|
-webkit-appearance: none !important;
|
||||||
|
display: inline-block;
|
||||||
|
width: 25px;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 11px;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.panel .control input::-webkit-outer-spin-button,
|
||||||
|
.panel .control input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none !important;
|
||||||
|
}
|
||||||
|
.panel .control .reset {
|
||||||
|
visibility: hidden;
|
||||||
|
border: solid 1px transparent;
|
||||||
|
}
|
||||||
|
.panel .control:hover button.reset {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.panel .control .reset:hover {
|
||||||
|
border: solid 1px silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Snapshots */
|
||||||
|
.panel .state {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 1px;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
.panel .state.ui-draggable-dragging {
|
||||||
|
box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
.panel .states {
|
||||||
|
min-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* misc */
|
||||||
|
.panel hr {
|
||||||
|
border: none;
|
||||||
|
border-top: solid 1px silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* dark theme */
|
||||||
|
.dark .panel {
|
||||||
|
border: solid 2px #333;
|
||||||
|
background: black;
|
||||||
|
color: silver;
|
||||||
|
box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.dark .panel summary {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
.dark .panel summary::-webkit-details-marker {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.dark .panel button,
|
||||||
|
.dark .panel .state,
|
||||||
|
.dark .panel details {
|
||||||
|
border: solid 1px #333;
|
||||||
|
/* needed for dragging */
|
||||||
|
background: #080808;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.dark .panel details {
|
||||||
|
border: solid 1px #333;
|
||||||
|
}
|
||||||
|
.dark .panel details summary {
|
||||||
|
background: #333;
|
||||||
|
color: silver;
|
||||||
|
}
|
||||||
|
.dark .panel .state:active,
|
||||||
|
.dark .panel button:active {
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
.dark .panel .control .slider {
|
||||||
|
border: solid 1px #555;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
.dark .panel .control.at-default .slider {
|
||||||
|
}
|
||||||
|
.dark .panel .control .slider::-webkit-slider-thumb {
|
||||||
|
border: solid 2px #aaa;
|
||||||
|
background: black;
|
||||||
|
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.dark .panel .control.at-default .slider::-webkit-slider-thumb {
|
||||||
|
border: solid 1px gray;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.dark .panel .control .value {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
.dark .panel .control .reset:hover {
|
||||||
|
border: solid 1px #333;
|
||||||
|
}
|
||||||
|
.dark .panel hr {
|
||||||
|
border: none;
|
||||||
|
border-top: solid 1px #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* gray theme */
|
||||||
|
|
||||||
|
.gray .panel {
|
||||||
|
border: solid 2px #444;
|
||||||
|
background: #333;
|
||||||
|
color: silver;
|
||||||
|
box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.gray .panel summary {
|
||||||
|
background: #444;
|
||||||
|
}
|
||||||
|
.gray .panel summary::-webkit-details-marker {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.gray .panel button,
|
||||||
|
.gray .panel .state,
|
||||||
|
.gray .panel details {
|
||||||
|
border: solid 1px #444;
|
||||||
|
/* needed for dragging */
|
||||||
|
background: #333;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.gray .panel details {
|
||||||
|
border: solid 1px #454545;
|
||||||
|
}
|
||||||
|
.gray .panel details summary {
|
||||||
|
background: #444;
|
||||||
|
color: silver;
|
||||||
|
}
|
||||||
|
.gray .panel .state:active,
|
||||||
|
.gray .panel button:active {
|
||||||
|
background: #444;
|
||||||
|
}
|
||||||
|
.gray .panel .control .slider {
|
||||||
|
border: solid 1px #555;
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
.gray .panel .control.at-default .slider {
|
||||||
|
}
|
||||||
|
.gray .panel .control .slider::-webkit-slider-thumb {
|
||||||
|
border: solid 2px #aaa;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
.gray .panel .control.at-default .slider::-webkit-slider-thumb {
|
||||||
|
border: solid 1px gray;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.gray .panel .control .value {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
.gray .panel .control .reset:hover {
|
||||||
|
border: solid 1px #444;
|
||||||
|
}
|
||||||
|
.gray .panel hr {
|
||||||
|
border: none;
|
||||||
|
border-top: solid 1px #444;
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,625 +1,25 @@
|
|||||||
<html>
|
<html>
|
||||||
|
<link rel="stylesheet" type="text/css" href="editor.css">
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.panel {
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 450px;
|
|
||||||
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
border: solid 2px silver;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
background: white;
|
|
||||||
box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.5);
|
|
||||||
opacity: 0.95;
|
|
||||||
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
.panel summary {
|
|
||||||
padding-left: 3px;
|
|
||||||
background: silver
|
|
||||||
}
|
|
||||||
.panel summary::-webkit-details-marker {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
.panel .close-button {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
cursor: hand;
|
|
||||||
}
|
|
||||||
.panel .close-button:hover {
|
|
||||||
font-weight: bold;
|
|
||||||
color: red;
|
|
||||||
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.panel button,
|
|
||||||
.panel details,
|
|
||||||
.panel .state {
|
|
||||||
margin: 1px;
|
|
||||||
font-size: 11px;
|
|
||||||
border: solid 1px #aaa;
|
|
||||||
border-radius: 4px;
|
|
||||||
/* needed for dragging */
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.panel details {
|
|
||||||
margin: 3px;
|
|
||||||
border: solid 1px silver;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.panel details summary {
|
|
||||||
background: #ddd;
|
|
||||||
/*
|
|
||||||
background: white;
|
|
||||||
box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.4);
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
.panel .sub-panel-content {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel button:active,
|
|
||||||
.panel .state:active {
|
|
||||||
background: silver;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* main controls */
|
|
||||||
.panel .control {
|
|
||||||
white-space:nowrap;
|
|
||||||
}
|
|
||||||
.panel .control .title {
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
.panel .control .slider {
|
|
||||||
-webkit-appearance: none !important;
|
|
||||||
width: 150px;
|
|
||||||
height: 3px;
|
|
||||||
border: solid 1px #ccc;
|
|
||||||
border-radius: 2px;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.panel .control.at-default .slider {
|
|
||||||
}
|
|
||||||
.panel .control .slider::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none !important;
|
|
||||||
height: 13px;
|
|
||||||
width: 13px;
|
|
||||||
/*border: solid 1px gray;*/
|
|
||||||
border: solid 2px #aaa;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: white;
|
|
||||||
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
.panel .control.at-default .slider::-webkit-slider-thumb {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.panel .control .value {
|
|
||||||
-webkit-appearance: none !important;
|
|
||||||
display: inline-block;
|
|
||||||
width: 25px;
|
|
||||||
text-align: right;
|
|
||||||
font-size: 11px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.panel .control input::-webkit-outer-spin-button,
|
|
||||||
.panel .control input::-webkit-inner-spin-button {
|
|
||||||
-webkit-appearance: none !important;
|
|
||||||
}
|
|
||||||
.panel .control .reset {
|
|
||||||
visibility: hidden;
|
|
||||||
border: solid 1px transparent;
|
|
||||||
}
|
|
||||||
.panel .control:hover button.reset {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.panel .control .reset:hover {
|
|
||||||
border: solid 1px silver;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Snapshots */
|
|
||||||
.panel .state {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 1px;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
.panel .state.ui-draggable-dragging {
|
|
||||||
box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
.panel .states {
|
|
||||||
min-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* misc */
|
|
||||||
.panel hr {
|
|
||||||
border: none;
|
|
||||||
border-top: solid 1px silver;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* dark theme */
|
|
||||||
.dark .panel {
|
|
||||||
border: solid 2px #333;
|
|
||||||
background: black;
|
|
||||||
color: silver;
|
|
||||||
box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.dark .panel summary {
|
|
||||||
background: #333;
|
|
||||||
}
|
|
||||||
.dark .panel summary::-webkit-details-marker {
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
.dark .panel button,
|
|
||||||
.dark .panel .state,
|
|
||||||
.dark .panel details {
|
|
||||||
border: solid 1px #333;
|
|
||||||
/* needed for dragging */
|
|
||||||
background: #080808;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
.dark .panel details {
|
|
||||||
border: solid 1px #333;
|
|
||||||
}
|
|
||||||
.dark .panel details summary {
|
|
||||||
background: #333;
|
|
||||||
color: silver;
|
|
||||||
}
|
|
||||||
.dark .panel .state:active,
|
|
||||||
.dark .panel button:active {
|
|
||||||
background: #222;
|
|
||||||
}
|
|
||||||
.dark .panel .control .slider {
|
|
||||||
border: solid 1px #555;
|
|
||||||
background: black;
|
|
||||||
}
|
|
||||||
.dark .panel .control.at-default .slider {
|
|
||||||
}
|
|
||||||
.dark .panel .control .slider::-webkit-slider-thumb {
|
|
||||||
border: solid 2px #aaa;
|
|
||||||
background: black;
|
|
||||||
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.dark .panel .control.at-default .slider::-webkit-slider-thumb {
|
|
||||||
border: solid 1px gray;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.dark .panel .control .value {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
.dark .panel .control .reset:hover {
|
|
||||||
border: solid 1px #333;
|
|
||||||
}
|
|
||||||
.dark .panel hr {
|
|
||||||
border: none;
|
|
||||||
border-top: solid 1px #333;
|
|
||||||
}
|
|
||||||
/* local stuff */
|
|
||||||
|
|
||||||
body.dark {
|
body.dark {
|
||||||
background: #0a0a0a;
|
background: #0a0a0a;
|
||||||
color: silver;
|
color: silver;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* gray theme */
|
|
||||||
|
|
||||||
.gray .panel {
|
|
||||||
border: solid 2px #444;
|
|
||||||
background: #333;
|
|
||||||
color: silver;
|
|
||||||
box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.gray .panel summary {
|
|
||||||
background: #444;
|
|
||||||
}
|
|
||||||
.gray .panel summary::-webkit-details-marker {
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
.gray .panel button,
|
|
||||||
.gray .panel .state,
|
|
||||||
.gray .panel details {
|
|
||||||
border: solid 1px #444;
|
|
||||||
/* needed for dragging */
|
|
||||||
background: #333;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
.gray .panel details {
|
|
||||||
border: solid 1px #454545;
|
|
||||||
}
|
|
||||||
.gray .panel details summary {
|
|
||||||
background: #444;
|
|
||||||
color: silver;
|
|
||||||
}
|
|
||||||
.gray .panel .state:active,
|
|
||||||
.gray .panel button:active {
|
|
||||||
background: #444;
|
|
||||||
}
|
|
||||||
.gray .panel .control .slider {
|
|
||||||
border: solid 1px #555;
|
|
||||||
background: #222;
|
|
||||||
}
|
|
||||||
.gray .panel .control.at-default .slider {
|
|
||||||
}
|
|
||||||
.gray .panel .control .slider::-webkit-slider-thumb {
|
|
||||||
border: solid 2px #aaa;
|
|
||||||
background: #333;
|
|
||||||
}
|
|
||||||
.gray .panel .control.at-default .slider::-webkit-slider-thumb {
|
|
||||||
border: solid 1px gray;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.gray .panel .control .value {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
.gray .panel .control .reset:hover {
|
|
||||||
border: solid 1px #444;
|
|
||||||
}
|
|
||||||
.gray .panel hr {
|
|
||||||
border: none;
|
|
||||||
border-top: solid 1px #444;
|
|
||||||
}
|
|
||||||
/* local stuff */
|
|
||||||
|
|
||||||
body.gray {
|
body.gray {
|
||||||
background: #333;
|
background: #333;
|
||||||
color: silver;
|
color: silver;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script src="jquery.js"></script>
|
<script src="jquery.js"></script>
|
||||||
<script src="jquery-ui.js"></script>
|
<script src="jquery-ui.js"></script>
|
||||||
|
<script src="editor.js"></script>
|
||||||
<script>
|
<script>
|
||||||
/*********************************************************************/
|
|
||||||
|
|
||||||
// XXX this exists in jli, remove when not needed...
|
|
||||||
jQuery.fn.sortChildren = function(func){
|
|
||||||
return $(this).each(function(_, e){
|
|
||||||
return $(e).append($(e).children().detach().get().sort(func))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
|
||||||
|
|
||||||
// XXX make this add new filters in the correct position...
|
|
||||||
function updateFilter(e, f, v, order){
|
|
||||||
e = $(e)
|
|
||||||
var state = e
|
|
||||||
.css('-webkit-filter')
|
|
||||||
state = state == 'none' ? '' : state + ' '
|
|
||||||
// update existing filter...
|
|
||||||
if(RegExp(f).test(state)){
|
|
||||||
state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), f+'('+v+')')
|
|
||||||
// add new filter...
|
|
||||||
} else {
|
|
||||||
state += f+'('+v+')'
|
|
||||||
state = sortFilterStr(state, order)
|
|
||||||
}
|
|
||||||
e.css({
|
|
||||||
'-webkit-filter': state,
|
|
||||||
})
|
|
||||||
return v
|
|
||||||
}
|
|
||||||
function resetFilter(e, f){
|
|
||||||
e = $(e)
|
|
||||||
var state = e
|
|
||||||
.css('-webkit-filter')
|
|
||||||
state = state == 'none' ? '' : state + ' '
|
|
||||||
state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), '').trim()
|
|
||||||
e.css({
|
|
||||||
'-webkit-filter': state,
|
|
||||||
})
|
|
||||||
return e
|
|
||||||
}
|
|
||||||
function sortFilterStr(state, order){
|
|
||||||
order = order == null ? getSliderOrder() : order
|
|
||||||
state = state.split(/\s+/)
|
|
||||||
state.sort(function(a, b){
|
|
||||||
a = order.indexOf(a.replace(/\(.*/, ''))
|
|
||||||
b = order.indexOf(b.replace(/\(.*/, ''))
|
|
||||||
return a - b
|
|
||||||
})
|
|
||||||
return state.join(' ')
|
|
||||||
}
|
|
||||||
function getSliderOrder(){
|
|
||||||
return $('.filter-list').sortable('toArray')
|
|
||||||
}
|
|
||||||
// NOTE: this will return only the set filters...
|
|
||||||
function getFilterOrder(target){
|
|
||||||
return $(target)
|
|
||||||
.css('-webkit-filter')
|
|
||||||
.split(/\s*\([^\)]*\)\s*/g)
|
|
||||||
.slice(0, -1)
|
|
||||||
}
|
|
||||||
function sortFilterSliders(order){
|
|
||||||
return $('.filter-list').sortChildren(function(a, b){
|
|
||||||
a = order.indexOf(a.id)
|
|
||||||
b = order.indexOf(b.id)
|
|
||||||
return a - b
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function resetPrevRange(e){
|
|
||||||
e = $(e).prev('input[type=range]')
|
|
||||||
e.val(e.attr('default'))
|
|
||||||
.change()
|
|
||||||
}
|
|
||||||
|
|
||||||
// XXX order the sliders...
|
|
||||||
function loadSliderState(target){
|
|
||||||
var res = $(target)
|
|
||||||
.css('-webkit-filter')
|
|
||||||
var state = res
|
|
||||||
.split(/\s*\(\s*|\s*\)\s*/g)
|
|
||||||
.reverse()
|
|
||||||
.slice(1)
|
|
||||||
// reset sliders do defaults...
|
|
||||||
$('input[type=range]').each(function(i, e){
|
|
||||||
e = $(e)
|
|
||||||
e.val(e.attr('default')).change()
|
|
||||||
})
|
|
||||||
// set the saved values...
|
|
||||||
while(state.length > 0){
|
|
||||||
// XXX avoid using ids...
|
|
||||||
var e = $('[filter='+state.pop()+']')
|
|
||||||
if(e.prop('normalize')){
|
|
||||||
e.val(v2r(parseFloat(state.pop()))).change()
|
|
||||||
} else {
|
|
||||||
e.val(parseFloat(state.pop())).change()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
|
|
||||||
var DEFAULT_FILTER_ORDER = [
|
|
||||||
'brightness',
|
|
||||||
'contrast',
|
|
||||||
'saturate',
|
|
||||||
'hue-rotate',
|
|
||||||
'grayscale',
|
|
||||||
'invert',
|
|
||||||
'sepia'
|
|
||||||
]
|
|
||||||
|
|
||||||
function saveState(target){
|
|
||||||
var l = $('.state').last().text()
|
|
||||||
l = l == '' ? 0 : parseInt(l)+1
|
|
||||||
var state = $(target).css('-webkit-filter')
|
|
||||||
$('<div/>')
|
|
||||||
.text(l)
|
|
||||||
.addClass('state')
|
|
||||||
.attr({
|
|
||||||
state: state,
|
|
||||||
sliders: getSliderOrder().join(' ')
|
|
||||||
})
|
|
||||||
// load state...
|
|
||||||
.click(function(){
|
|
||||||
loadSliderState($(target).css('-webkit-filter', state))
|
|
||||||
sortFilterSliders($(this).attr('sliders').split(' '))
|
|
||||||
})
|
|
||||||
.appendTo($('.states'))
|
|
||||||
.draggable({
|
|
||||||
revert: 'invalid',
|
|
||||||
revertDuration: 200,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function clearStates(){
|
|
||||||
$('.state').remove()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function makeAbsRange(text, filter, target, min, max, dfl, step, translate, normalize){
|
|
||||||
min = min == null ? 0 : min
|
|
||||||
max = max == null ? 1 : max
|
|
||||||
dfl = dfl == null ? min : dfl
|
|
||||||
step = step == null ? 0.01 : step
|
|
||||||
translate = translate == null ? function(v){return v} : translate
|
|
||||||
normalize = normalize == null ? false : true
|
|
||||||
|
|
||||||
var elem = $('<div class="control range"></div>')
|
|
||||||
.attr({
|
|
||||||
id: filter,
|
|
||||||
})
|
|
||||||
$('<span class="title"/>')
|
|
||||||
.html(text)
|
|
||||||
.appendTo(elem)
|
|
||||||
var range = $('<input class="slider" type="range">')
|
|
||||||
.attr({
|
|
||||||
filter: filter,
|
|
||||||
min: min,
|
|
||||||
max: max,
|
|
||||||
step: step,
|
|
||||||
default: dfl,
|
|
||||||
})
|
|
||||||
.prop('normalize', normalize)
|
|
||||||
.val(dfl)
|
|
||||||
.change(function(){
|
|
||||||
var val = this.valueAsNumber
|
|
||||||
value.val(val)
|
|
||||||
updateFilter(target, filter, translate(val))
|
|
||||||
if(parseFloat(val) == dfl){
|
|
||||||
elem.addClass('at-default')
|
|
||||||
} else {
|
|
||||||
elem.removeClass('at-default')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.appendTo(elem)
|
|
||||||
var value = $('<input type="number" class="value"/>')
|
|
||||||
.attr({
|
|
||||||
min: min,
|
|
||||||
max: max,
|
|
||||||
step: step,
|
|
||||||
})
|
|
||||||
.val(dfl)
|
|
||||||
.change(function(){
|
|
||||||
range.val($(this).val()).change()
|
|
||||||
})
|
|
||||||
.appendTo(elem)
|
|
||||||
$('<button class="reset">×</button>')
|
|
||||||
.click(function(){
|
|
||||||
range.val(dfl).change()
|
|
||||||
resetFilter(target, filter)
|
|
||||||
})
|
|
||||||
.appendTo(elem)
|
|
||||||
return elem
|
|
||||||
}
|
|
||||||
function makeLogRange(text, filter, target){
|
|
||||||
return makeAbsRange(text, filter, target, -100, 100, 0, 0.1, r2v, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
var C = 43.47
|
|
||||||
|
|
||||||
function r2v(r){
|
|
||||||
return Math.pow(Math.E, r/C)
|
|
||||||
}
|
|
||||||
|
|
||||||
function v2r(v){
|
|
||||||
return Math.log(v)*C
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeControls(target){
|
|
||||||
// tool panel...
|
|
||||||
var panel = $('<details open/>')
|
|
||||||
.addClass('panel')
|
|
||||||
.css({
|
|
||||||
position: 'absolute',
|
|
||||||
top: '100px',
|
|
||||||
left: '100px',
|
|
||||||
})
|
|
||||||
.append($('<summary>Edit</summary>')
|
|
||||||
.append($('<span/>')
|
|
||||||
.addClass('close-button')
|
|
||||||
.click(function(){
|
|
||||||
$(this).parents('.panel').hide()
|
|
||||||
return false
|
|
||||||
})
|
|
||||||
.html('×')))
|
|
||||||
.draggable({
|
|
||||||
containment: $('body'),
|
|
||||||
scroll: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
// wrapper for sub-panels...
|
|
||||||
var content = $('<span class="panel-content">')
|
|
||||||
.sortable({
|
|
||||||
forcePlaceholderSize: true,
|
|
||||||
start: function(e, ui){
|
|
||||||
ui.placeholder.height(ui.helper.outerHeight());
|
|
||||||
ui.placeholder.width(ui.helper.outerWidth());
|
|
||||||
},
|
|
||||||
opacity: 0.5,
|
|
||||||
})
|
|
||||||
.appendTo(panel)
|
|
||||||
|
|
||||||
// filters...
|
|
||||||
$('<details open/>')
|
|
||||||
.append($('<summary>Filters</summary>'))
|
|
||||||
.append($('<div class="sub-panel-content"/>')
|
|
||||||
.append($('<div class="filter-list"/>')
|
|
||||||
.append(makeLogRange('Brightness:', 'brightness', target))
|
|
||||||
.append(makeLogRange('Contrast:', 'contrast', target))
|
|
||||||
.append(makeLogRange('Saturation:', 'saturate', target))
|
|
||||||
.append(makeAbsRange('Hue:', 'hue-rotate', target, -180, 180, 0, 0.5, function(v){ return v+'deg' }))
|
|
||||||
.append(makeAbsRange('Grayscale:', 'grayscale', target))
|
|
||||||
.append(makeAbsRange('Invert:', 'invert', target))
|
|
||||||
.append(makeAbsRange('Sepia:', 'sepia', target))
|
|
||||||
.sortable({
|
|
||||||
axis: 'y',
|
|
||||||
})
|
|
||||||
.on('sortstop', function(){
|
|
||||||
// update image filter order...
|
|
||||||
var img = $(target)
|
|
||||||
img.css('-webkit-filter', sortFilterStr(img.css('-webkit-filter')))
|
|
||||||
}))
|
|
||||||
.append($('<hr>'))
|
|
||||||
.append('Reset: ')
|
|
||||||
.append($('<button>Values</button>')
|
|
||||||
.click(function(){
|
|
||||||
$('.reset').click()
|
|
||||||
}))
|
|
||||||
.append($('<button>Order</button>')
|
|
||||||
.click(function(){
|
|
||||||
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
|
||||||
}))
|
|
||||||
.append($('<button>All</button>')
|
|
||||||
.click(function(){
|
|
||||||
$('.reset').click()
|
|
||||||
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
|
||||||
})))
|
|
||||||
.appendTo(content)
|
|
||||||
|
|
||||||
// snapshots...
|
|
||||||
$('<details open/>')
|
|
||||||
.append($('<summary>Snapshots</summary>'))
|
|
||||||
.append($('<div class="sub-panel-content"/>')
|
|
||||||
.append($('<div class="states"/>'))
|
|
||||||
.append($('<hr>'))
|
|
||||||
.append($('<button/>')
|
|
||||||
.click(function(){ saveState(target) })
|
|
||||||
.text('Save'))
|
|
||||||
.append($('<button/>')
|
|
||||||
.addClass('remove-state-drop-target')
|
|
||||||
.click(function(){ clearStates() })
|
|
||||||
.text('Clear')
|
|
||||||
.droppable({
|
|
||||||
accept: '.state',
|
|
||||||
activate: function(e, ui){
|
|
||||||
$(this).text('Delete')
|
|
||||||
},
|
|
||||||
deactivate: function(e, ui){
|
|
||||||
$(this).text('Clear')
|
|
||||||
},
|
|
||||||
drop: function(e, ui){
|
|
||||||
ui.helper.remove()
|
|
||||||
}
|
|
||||||
|
|
||||||
})))
|
|
||||||
.appendTo(content)
|
|
||||||
|
|
||||||
return panel
|
|
||||||
}
|
|
||||||
|
|
||||||
function reloadControls(target){
|
|
||||||
clearStates()
|
|
||||||
var state = loadSliderState(target)
|
|
||||||
|
|
||||||
// nothing set -- default sort...
|
|
||||||
if(state == 'none'){
|
|
||||||
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
|
||||||
|
|
||||||
// load existing sort state...
|
|
||||||
} else {
|
|
||||||
sortFilterSliders(getFilterOrder(target).concat(DEFAULT_FILTER_ORDER))
|
|
||||||
}
|
|
||||||
// make a snapshot...
|
|
||||||
saveState(target)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************************************/
|
|
||||||
|
|
||||||
|
|
||||||
function toggleThemes(){
|
function toggleThemes(){
|
||||||
|
|||||||
355
ui/experiments/editor.js
Executable file
355
ui/experiments/editor.js
Executable file
@ -0,0 +1,355 @@
|
|||||||
|
/**********************************************************************
|
||||||
|
*
|
||||||
|
*
|
||||||
|
**********************************************************************/
|
||||||
|
|
||||||
|
var DEFAULT_FILTER_ORDER = [
|
||||||
|
'brightness',
|
||||||
|
'contrast',
|
||||||
|
'saturate',
|
||||||
|
'hue-rotate',
|
||||||
|
'grayscale',
|
||||||
|
'invert',
|
||||||
|
'sepia'
|
||||||
|
]
|
||||||
|
|
||||||
|
var SLIDER_SCALE = 43.47
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
// XXX this exists in jli, remove when not needed...
|
||||||
|
jQuery.fn.sortChildren = function(func){
|
||||||
|
return $(this).each(function(_, e){
|
||||||
|
return $(e).append($(e).children().detach().get().sort(func))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
function r2v(r){
|
||||||
|
return Math.pow(Math.E, r/SLIDER_SCALE)
|
||||||
|
}
|
||||||
|
|
||||||
|
function v2r(v){
|
||||||
|
return Math.log(v)*SLIDER_SCALE
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************************************/
|
||||||
|
|
||||||
|
// Update filter in target image...
|
||||||
|
//
|
||||||
|
function updateFilter(e, f, v, order){
|
||||||
|
e = $(e)
|
||||||
|
var state = e
|
||||||
|
.css('-webkit-filter')
|
||||||
|
state = state == 'none' ? '' : state + ' '
|
||||||
|
// update existing filter...
|
||||||
|
if(RegExp(f).test(state)){
|
||||||
|
state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), f+'('+v+')')
|
||||||
|
// add new filter...
|
||||||
|
} else {
|
||||||
|
state += f+'('+v+')'
|
||||||
|
state = sortFilterStr(state, order)
|
||||||
|
}
|
||||||
|
e.css({
|
||||||
|
'-webkit-filter': state,
|
||||||
|
})
|
||||||
|
return v
|
||||||
|
}
|
||||||
|
function resetFilter(e, f){
|
||||||
|
e = $(e)
|
||||||
|
var state = e
|
||||||
|
.css('-webkit-filter')
|
||||||
|
state = state == 'none' ? '' : state + ' '
|
||||||
|
state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), '').trim()
|
||||||
|
e.css({
|
||||||
|
'-webkit-filter': state,
|
||||||
|
})
|
||||||
|
return e
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getSliderOrder(){
|
||||||
|
return $('.filter-list').sortable('toArray')
|
||||||
|
}
|
||||||
|
// NOTE: this will return only the set filters...
|
||||||
|
function getFilterOrder(target){
|
||||||
|
return $(target)
|
||||||
|
.css('-webkit-filter')
|
||||||
|
.split(/\s*\([^\)]*\)\s*/g)
|
||||||
|
.slice(0, -1)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function sortFilterStr(state, order){
|
||||||
|
order = order == null ? getSliderOrder() : order
|
||||||
|
state = state.split(/\s+/)
|
||||||
|
state.sort(function(a, b){
|
||||||
|
a = order.indexOf(a.replace(/\(.*/, ''))
|
||||||
|
b = order.indexOf(b.replace(/\(.*/, ''))
|
||||||
|
return a - b
|
||||||
|
})
|
||||||
|
return state.join(' ')
|
||||||
|
}
|
||||||
|
function sortFilterSliders(order){
|
||||||
|
return $('.filter-list').sortChildren(function(a, b){
|
||||||
|
a = order.indexOf(a.id)
|
||||||
|
b = order.indexOf(b.id)
|
||||||
|
return a - b
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Load state of sliders from target...
|
||||||
|
//
|
||||||
|
function loadSliderState(target){
|
||||||
|
var res = $(target)
|
||||||
|
.css('-webkit-filter')
|
||||||
|
var state = res
|
||||||
|
.split(/\s*\(\s*|\s*\)\s*/g)
|
||||||
|
.reverse()
|
||||||
|
.slice(1)
|
||||||
|
// reset sliders to defaults...
|
||||||
|
$('input[type=range]').each(function(i, e){
|
||||||
|
e = $(e)
|
||||||
|
e.val(e.attr('default')).change()
|
||||||
|
})
|
||||||
|
// set the saved values...
|
||||||
|
while(state.length > 0){
|
||||||
|
// XXX avoid using ids...
|
||||||
|
var e = $('[filter='+state.pop()+']')
|
||||||
|
if(e.prop('normalize')){
|
||||||
|
e.val(v2r(parseFloat(state.pop()))).change()
|
||||||
|
} else {
|
||||||
|
e.val(parseFloat(state.pop())).change()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function saveSnapshot(target){
|
||||||
|
var l = $('.state').last().text()
|
||||||
|
l = l == '' ? 0 : parseInt(l)+1
|
||||||
|
var state = $(target).css('-webkit-filter')
|
||||||
|
$('<div/>')
|
||||||
|
.text(l)
|
||||||
|
.addClass('state')
|
||||||
|
.attr({
|
||||||
|
state: state,
|
||||||
|
sliders: getSliderOrder().join(' ')
|
||||||
|
})
|
||||||
|
// load state...
|
||||||
|
.click(function(){
|
||||||
|
loadSliderState($(target).css('-webkit-filter', state))
|
||||||
|
sortFilterSliders($(this).attr('sliders').split(' '))
|
||||||
|
})
|
||||||
|
.appendTo($('.states'))
|
||||||
|
.draggable({
|
||||||
|
revert: 'invalid',
|
||||||
|
revertDuration: 200,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function clearSnapshots(){
|
||||||
|
$('.state').remove()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Re-read filters form target image and reset the controls...
|
||||||
|
//
|
||||||
|
function reloadControls(target){
|
||||||
|
clearSnapshots()
|
||||||
|
var state = loadSliderState(target)
|
||||||
|
|
||||||
|
// nothing set -- default sort...
|
||||||
|
if(state == 'none'){
|
||||||
|
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
||||||
|
|
||||||
|
// load existing sort state...
|
||||||
|
} else {
|
||||||
|
sortFilterSliders(getFilterOrder(target).concat(DEFAULT_FILTER_ORDER))
|
||||||
|
}
|
||||||
|
// make a snapshot...
|
||||||
|
saveSnapshot(target)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**********************************************************************
|
||||||
|
* Element constructors...
|
||||||
|
*/
|
||||||
|
|
||||||
|
function makeAbsRange(text, filter, target, min, max, dfl, step, translate, normalize){
|
||||||
|
min = min == null ? 0 : min
|
||||||
|
max = max == null ? 1 : max
|
||||||
|
dfl = dfl == null ? min : dfl
|
||||||
|
step = step == null ? 0.01 : step
|
||||||
|
translate = translate == null ? function(v){return v} : translate
|
||||||
|
normalize = normalize == null ? false : true
|
||||||
|
|
||||||
|
var elem = $('<div class="control range"></div>')
|
||||||
|
.attr({
|
||||||
|
id: filter,
|
||||||
|
})
|
||||||
|
$('<span class="title"/>')
|
||||||
|
.html(text)
|
||||||
|
.appendTo(elem)
|
||||||
|
var range = $('<input class="slider" type="range">')
|
||||||
|
.attr({
|
||||||
|
filter: filter,
|
||||||
|
min: min,
|
||||||
|
max: max,
|
||||||
|
step: step,
|
||||||
|
default: dfl,
|
||||||
|
})
|
||||||
|
.prop('normalize', normalize)
|
||||||
|
.val(dfl)
|
||||||
|
.change(function(){
|
||||||
|
var val = this.valueAsNumber
|
||||||
|
value.val(val)
|
||||||
|
updateFilter(target, filter, translate(val))
|
||||||
|
if(parseFloat(val) == dfl){
|
||||||
|
elem.addClass('at-default')
|
||||||
|
} else {
|
||||||
|
elem.removeClass('at-default')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.appendTo(elem)
|
||||||
|
var value = $('<input type="number" class="value"/>')
|
||||||
|
.attr({
|
||||||
|
min: min,
|
||||||
|
max: max,
|
||||||
|
step: step,
|
||||||
|
})
|
||||||
|
.val(dfl)
|
||||||
|
.change(function(){
|
||||||
|
range.val($(this).val()).change()
|
||||||
|
})
|
||||||
|
.appendTo(elem)
|
||||||
|
$('<button class="reset">×</button>')
|
||||||
|
.click(function(){
|
||||||
|
range.val(dfl).change()
|
||||||
|
resetFilter(target, filter)
|
||||||
|
})
|
||||||
|
.appendTo(elem)
|
||||||
|
return elem
|
||||||
|
}
|
||||||
|
function makeLogRange(text, filter, target){
|
||||||
|
return makeAbsRange(text, filter, target, -100, 100, 0, 0.1, r2v, true)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function makeControls(target){
|
||||||
|
// tool panel...
|
||||||
|
var panel = $('<details open/>')
|
||||||
|
.addClass('panel')
|
||||||
|
.css({
|
||||||
|
position: 'absolute',
|
||||||
|
top: '100px',
|
||||||
|
left: '100px',
|
||||||
|
})
|
||||||
|
.append($('<summary>Edit</summary>')
|
||||||
|
.append($('<span/>')
|
||||||
|
.addClass('close-button')
|
||||||
|
.click(function(){
|
||||||
|
$(this).parents('.panel').hide()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
.html('×')))
|
||||||
|
.draggable({
|
||||||
|
containment: 'parent',
|
||||||
|
scroll: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
// wrapper for sub-panels...
|
||||||
|
var content = $('<span class="panel-content">')
|
||||||
|
.sortable({
|
||||||
|
forcePlaceholderSize: true,
|
||||||
|
start: function(e, ui){
|
||||||
|
ui.placeholder.height(ui.helper.outerHeight());
|
||||||
|
ui.placeholder.width(ui.helper.outerWidth());
|
||||||
|
},
|
||||||
|
opacity: 0.7,
|
||||||
|
})
|
||||||
|
.appendTo(panel)
|
||||||
|
|
||||||
|
// filters...
|
||||||
|
$('<details open/>')
|
||||||
|
.append($('<summary>Filters</summary>'))
|
||||||
|
.append($('<div class="sub-panel-content"/>')
|
||||||
|
.append($('<div class="filter-list"/>')
|
||||||
|
.append(makeLogRange('Brightness:', 'brightness', target))
|
||||||
|
.append(makeLogRange('Contrast:', 'contrast', target))
|
||||||
|
.append(makeLogRange('Saturation:', 'saturate', target))
|
||||||
|
.append(makeAbsRange('Hue:', 'hue-rotate', target,
|
||||||
|
-180, 180, 0, 0.5, function(v){ return v+'deg' }))
|
||||||
|
.append(makeAbsRange('Grayscale:', 'grayscale', target))
|
||||||
|
.append(makeAbsRange('Invert:', 'invert', target))
|
||||||
|
.append(makeAbsRange('Sepia:', 'sepia', target))
|
||||||
|
.sortable({
|
||||||
|
axis: 'y',
|
||||||
|
})
|
||||||
|
.on('sortstop', function(){
|
||||||
|
// update image filter order...
|
||||||
|
var img = $(target)
|
||||||
|
img.css('-webkit-filter', sortFilterStr(img.css('-webkit-filter')))
|
||||||
|
}))
|
||||||
|
.append($('<hr>'))
|
||||||
|
.append('Reset: ')
|
||||||
|
.append($('<button>Values</button>')
|
||||||
|
.click(function(){
|
||||||
|
$('.reset').click()
|
||||||
|
}))
|
||||||
|
.append($('<button>Order</button>')
|
||||||
|
.click(function(){
|
||||||
|
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
||||||
|
}))
|
||||||
|
.append($('<button>All</button>')
|
||||||
|
.click(function(){
|
||||||
|
$('.reset').click()
|
||||||
|
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
||||||
|
})))
|
||||||
|
.appendTo(content)
|
||||||
|
|
||||||
|
// snapshots...
|
||||||
|
$('<details open/>')
|
||||||
|
.append($('<summary>Snapshots</summary>'))
|
||||||
|
.append($('<div class="sub-panel-content"/>')
|
||||||
|
.append($('<div class="states"/>'))
|
||||||
|
.append($('<hr>'))
|
||||||
|
.append($('<button/>')
|
||||||
|
.click(function(){ saveSnapshot(target) })
|
||||||
|
.text('Save'))
|
||||||
|
.append($('<button/>')
|
||||||
|
.addClass('remove-state-drop-target')
|
||||||
|
.click(function(){ clearSnapshots() })
|
||||||
|
.text('Clear')
|
||||||
|
.droppable({
|
||||||
|
accept: '.state',
|
||||||
|
activate: function(e, ui){
|
||||||
|
$(this).text('Delete')
|
||||||
|
},
|
||||||
|
deactivate: function(e, ui){
|
||||||
|
$(this).text('Clear')
|
||||||
|
},
|
||||||
|
drop: function(e, ui){
|
||||||
|
ui.helper.remove()
|
||||||
|
}
|
||||||
|
|
||||||
|
})))
|
||||||
|
.appendTo(content)
|
||||||
|
|
||||||
|
return panel
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**********************************************************************
|
||||||
|
* vim set: sw=4 ts=4 : */
|
||||||
Loading…
x
Reference in New Issue
Block a user