mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
refactoring the load mechanics, still not happy...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
0e78422f35
commit
fcac70f7de
214
ui (gen4)/css/experimenting.css
Executable file
214
ui (gen4)/css/experimenting.css
Executable file
@ -0,0 +1,214 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/* this will prevent odd blur effects when blurring out specific
|
||||
elements... */
|
||||
background: black;
|
||||
|
||||
/*font: OpenSans, sans-serif;*/
|
||||
}
|
||||
|
||||
/* show image gid... */
|
||||
.visible-gid .image:after {
|
||||
content: attr(gid);
|
||||
display: block;
|
||||
position: relative;
|
||||
color: red;
|
||||
margin: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border: solid 2px red;
|
||||
border-radius: 50%;
|
||||
background: black;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.image.current {
|
||||
border-color: red;
|
||||
}
|
||||
*/
|
||||
|
||||
.shadow {
|
||||
margin: 0px;
|
||||
z-index: 4000;
|
||||
}
|
||||
.ui-bounds-indicators {
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
/* basic animation... */
|
||||
.viewer:not(.no-transitions) {
|
||||
-webkit-transition: background-color 0.8s ease;
|
||||
-moz-transition: background-color 0.8s ease;
|
||||
-ms-transition: background-color 0.8s ease;
|
||||
-o-transition: background-color 0.8s ease;
|
||||
transition: background-color 0.8s ease;
|
||||
}
|
||||
|
||||
.viewer:not(.no-transitions) .ribbon-set:not(.no-transitions) {
|
||||
-webkit-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-moz-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-ms-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-o-transition: all 0.1s linear, transform 0.1s linear;
|
||||
transition: all 0.1s linear, transform 0.1s linear;
|
||||
}
|
||||
|
||||
.viewer:not(.no-transitions) .ribbon:not(.no-transitions) {
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
-moz-transition: all 0.1s ease-out;
|
||||
-ms-transition: all 0.1s ease-out;
|
||||
-o-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* XXX not 100% sure about this...
|
||||
*/
|
||||
:not(.no-transitions) .current-marker:not(.no-transitions) {
|
||||
-webkit-transition: transform 0.1s ease-out;
|
||||
-moz-transition: transform 0.1s ease-out;
|
||||
-ms-transition: transform 0.1s ease-out;
|
||||
-o-transition: transform 0.1s ease-out;
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* XXX should this be !important */
|
||||
.no-transitions {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* XXX think of a way not to use !important */
|
||||
.single-image-mode .ribbon,
|
||||
.single-image-mode .ribbon-set {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* TEST: this is mostly speed limited... */
|
||||
.ribbon {
|
||||
box-shadow: 5px 5px 50px -5px rgba(0, 0, 0, 0.2);
|
||||
|
||||
-webkit-transition: box-shadow 0.8s ease;
|
||||
-moz-transition: box-shadow 0.8s ease;
|
||||
-ms-transition: box-shadow 0.8s ease;
|
||||
-o-transition: box-shadow 0.8s ease;
|
||||
transition: box-shadow 0.8s ease;
|
||||
}
|
||||
.current.ribbon {
|
||||
box-shadow: 5px 5px 60px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.single-image-mode .ribbon {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Metadata viewer */
|
||||
.item-value-view .text:first-child,
|
||||
.browse-widget.metadata-view .list>div .text:first-child {
|
||||
width: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item-value-view .text:nth-child(2),
|
||||
.browse-widget.metadata-view .list>div .text:nth-child(2) {
|
||||
font-style: italic;
|
||||
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
|
||||
/* External Editor List */
|
||||
.browse-widget.editor-list .list>div:first-child .text:after {
|
||||
content: "(primary)";
|
||||
margin-left: 5px;
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
/* XXX this is ugly -- use a class... */
|
||||
.browse-widget.editor-list .list>div:first-child .button:nth-child(4) {
|
||||
opacity: 0.1;
|
||||
}
|
||||
.browse-widget.editor-list .list>div:nth-child(2):not(:last-child) .text:after {
|
||||
content: "(secondary)";
|
||||
margin-left: 5px;
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
/* XXX this is ugly -- use a class... */
|
||||
.browse-widget.editor-list .list>div:nth-child(2) .button:nth-child(3) {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
/* slideshow interval list... */
|
||||
.browse-widget.tail-action .list>div:last-child {
|
||||
margin-top: 0.2em;
|
||||
border-top: solid 1px rgba(255,255,255, 0.2);
|
||||
}
|
||||
.browse-widget.tail-action .list>div:last-child .text {
|
||||
font-style: italic;
|
||||
}
|
||||
.browse-widget.tail-action .list>div:last-child .button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* DEBUG stuff... */
|
||||
.container-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border-top: solid 1px black;
|
||||
border-left: solid 1px black;
|
||||
}
|
||||
.container-center:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: -11px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom: solid 1px black;
|
||||
border-right: solid 1px black;
|
||||
}
|
||||
.point {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border: solid 1px blue;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
||||
background: yellow;
|
||||
|
||||
transition-origin: 50% 50%;
|
||||
|
||||
z-index: 9999;
|
||||
}
|
||||
.point {
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
/* DEBUG end */
|
||||
|
||||
@ -55,8 +55,12 @@ var CLIActions = actions.Actions({
|
||||
|
||||
return this.loadImages(path)
|
||||
.then(function(){
|
||||
that.saveIndex(path)
|
||||
|
||||
that.makePreviews('all')
|
||||
|
||||
//that.readAllMetadata()
|
||||
//
|
||||
that
|
||||
.sortImages()
|
||||
// XXX for some reason this is not running from cli
|
||||
@ -87,7 +91,7 @@ module.CLI = core.ImageGridFeatures.Feature({
|
||||
var that = this
|
||||
// get the arguments...
|
||||
if(this.runtime == 'nw'){
|
||||
var argv = requirejs('nw.gui').App.argv
|
||||
var argv = nw.App.argv
|
||||
|
||||
// XXX appears to have a stray '--help' lodged in
|
||||
// all the time...
|
||||
|
||||
@ -14,7 +14,8 @@ if(typeof(process) != 'undefined'){
|
||||
var fse = requirejs('fs-extra')
|
||||
var pathlib = requirejs('path')
|
||||
var glob = requirejs('glob')
|
||||
var file = requirejs('./file')
|
||||
|
||||
var file = require('file')
|
||||
}
|
||||
|
||||
var data = require('data')
|
||||
|
||||
@ -26,7 +26,8 @@ if(typeof(process) != 'undefined'){
|
||||
var fse = requirejs('fs-extra')
|
||||
var pathlib = requirejs('path')
|
||||
var glob = requirejs('glob')
|
||||
var file = requirejs('./file')
|
||||
|
||||
var file = require('file')
|
||||
}
|
||||
|
||||
|
||||
@ -38,6 +39,7 @@ if(typeof(process) != 'undefined'){
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
var SharpActions = actions.Actions({
|
||||
|
||||
@ -4,24 +4,24 @@
|
||||
*
|
||||
**********************************************************************/
|
||||
|
||||
var pathlib = require('path')
|
||||
var events = require('events')
|
||||
|
||||
var fse = require('fs-extra')
|
||||
var glob = require('glob')
|
||||
|
||||
// XXX seems that we need different buids of this for use with node and nw...
|
||||
// XXX BUG: nw-gyp does not support msvs2015...
|
||||
//var sharp = require('sharp')
|
||||
|
||||
var guaranteeEvents = require('guarantee-events')
|
||||
|
||||
|
||||
define(function(require){ var module = {}
|
||||
|
||||
|
||||
//var DEBUG = DEBUG != null ? DEBUG : true
|
||||
|
||||
if(typeof(process) != 'undefined'){
|
||||
var pathlib = requirejs('path')
|
||||
var events = requirejs('events')
|
||||
|
||||
var fse = requirejs('fs-extra')
|
||||
var glob = requirejs('glob')
|
||||
|
||||
var guaranteeEvents = requirejs('guarantee-events')
|
||||
|
||||
} else {
|
||||
return module
|
||||
}
|
||||
|
||||
var data = require('data')
|
||||
var images = require('images')
|
||||
|
||||
|
||||
@ -13,225 +13,9 @@
|
||||
|
||||
<link rel="stylesheet" href="css/loader.css">
|
||||
|
||||
<!-- XXX remove before use... -->
|
||||
<style>
|
||||
<link rel="stylesheet" href="css/experimenting.css">
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/* this will prevent odd blur effects when blurring out specific
|
||||
elements... */
|
||||
background: black;
|
||||
|
||||
/*font: OpenSans, sans-serif;*/
|
||||
}
|
||||
|
||||
/* show image gid... */
|
||||
.visible-gid .image:after {
|
||||
content: attr(gid);
|
||||
display: block;
|
||||
position: relative;
|
||||
color: red;
|
||||
margin: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border: solid 2px red;
|
||||
border-radius: 50%;
|
||||
background: black;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.image.current {
|
||||
border-color: red;
|
||||
}
|
||||
*/
|
||||
|
||||
.shadow {
|
||||
margin: 0px;
|
||||
z-index: 4000;
|
||||
}
|
||||
.ui-bounds-indicators {
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
/* basic animation... */
|
||||
.viewer:not(.no-transitions) {
|
||||
-webkit-transition: background-color 0.8s ease;
|
||||
-moz-transition: background-color 0.8s ease;
|
||||
-ms-transition: background-color 0.8s ease;
|
||||
-o-transition: background-color 0.8s ease;
|
||||
transition: background-color 0.8s ease;
|
||||
}
|
||||
|
||||
.viewer:not(.no-transitions) .ribbon-set:not(.no-transitions) {
|
||||
-webkit-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-moz-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-ms-transition: all 0.1s linear, transform 0.1s linear;
|
||||
-o-transition: all 0.1s linear, transform 0.1s linear;
|
||||
transition: all 0.1s linear, transform 0.1s linear;
|
||||
}
|
||||
|
||||
.viewer:not(.no-transitions) .ribbon:not(.no-transitions) {
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
-moz-transition: all 0.1s ease-out;
|
||||
-ms-transition: all 0.1s ease-out;
|
||||
-o-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* XXX not 100% sure about this...
|
||||
*/
|
||||
:not(.no-transitions) .current-marker:not(.no-transitions) {
|
||||
-webkit-transition: transform 0.1s ease-out;
|
||||
-moz-transition: transform 0.1s ease-out;
|
||||
-ms-transition: transform 0.1s ease-out;
|
||||
-o-transition: transform 0.1s ease-out;
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* XXX should this be !important */
|
||||
.no-transitions {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* XXX think of a way not to use !important */
|
||||
.single-image-mode .ribbon,
|
||||
.single-image-mode .ribbon-set {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* TEST: this is mostly speed limited... */
|
||||
.ribbon {
|
||||
box-shadow: 5px 5px 50px -5px rgba(0, 0, 0, 0.2);
|
||||
|
||||
-webkit-transition: box-shadow 0.8s ease;
|
||||
-moz-transition: box-shadow 0.8s ease;
|
||||
-ms-transition: box-shadow 0.8s ease;
|
||||
-o-transition: box-shadow 0.8s ease;
|
||||
transition: box-shadow 0.8s ease;
|
||||
}
|
||||
.current.ribbon {
|
||||
box-shadow: 5px 5px 60px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.single-image-mode .ribbon {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Metadata viewer */
|
||||
.item-value-view .text:first-child,
|
||||
.browse-widget.metadata-view .list>div .text:first-child {
|
||||
width: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item-value-view .text:nth-child(2),
|
||||
.browse-widget.metadata-view .list>div .text:nth-child(2) {
|
||||
font-style: italic;
|
||||
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
|
||||
/* External Editor List */
|
||||
.browse-widget.editor-list .list>div:first-child .text:after {
|
||||
content: "(primary)";
|
||||
margin-left: 5px;
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
/* XXX this is ugly -- use a class... */
|
||||
.browse-widget.editor-list .list>div:first-child .button:nth-child(4) {
|
||||
opacity: 0.1;
|
||||
}
|
||||
.browse-widget.editor-list .list>div:nth-child(2):not(:last-child) .text:after {
|
||||
content: "(secondary)";
|
||||
margin-left: 5px;
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
/* XXX this is ugly -- use a class... */
|
||||
.browse-widget.editor-list .list>div:nth-child(2) .button:nth-child(3) {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
/* slideshow interval list... */
|
||||
.browse-widget.tail-action .list>div:last-child {
|
||||
margin-top: 0.2em;
|
||||
border-top: solid 1px rgba(255,255,255, 0.2);
|
||||
}
|
||||
.browse-widget.tail-action .list>div:last-child .text {
|
||||
font-style: italic;
|
||||
}
|
||||
.browse-widget.tail-action .list>div:last-child .button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* DEBUG stuff... */
|
||||
.container-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border-top: solid 1px black;
|
||||
border-left: solid 1px black;
|
||||
}
|
||||
.container-center:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: -11px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom: solid 1px black;
|
||||
border-right: solid 1px black;
|
||||
}
|
||||
.point {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border: solid 1px blue;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
||||
background: yellow;
|
||||
|
||||
transition-origin: 50% 50%;
|
||||
|
||||
z-index: 9999;
|
||||
}
|
||||
.point {
|
||||
-webkit-transition: all 0.2s linear;
|
||||
-moz-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
/* DEBUG end */
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
if(window.require && window.nw){
|
||||
window.__devtools_failsafe = setTimeout(function(){
|
||||
|
||||
@ -4,20 +4,16 @@
|
||||
*
|
||||
**********************************************************************/
|
||||
|
||||
if(typeof(process) != 'undefined'){
|
||||
var os = require('os')
|
||||
var fs = require('fs')
|
||||
var path = require('path')
|
||||
var glob = require('glob')
|
||||
var guaranteeEvents = require('guarantee-events')
|
||||
}
|
||||
|
||||
|
||||
define(function(require){ var module = {}
|
||||
|
||||
// XXX HACK...
|
||||
// ...for some reason this gets loaded in browser...
|
||||
if(typeof(process) == 'undefined'){
|
||||
if(typeof(process) != 'undefined'){
|
||||
var os = requirejs('os')
|
||||
var fs = requirejs('fs')
|
||||
var path = requirejs('path')
|
||||
var glob = requirejs('glob')
|
||||
var guaranteeEvents = requirejs('guarantee-events')
|
||||
|
||||
} else {
|
||||
return module
|
||||
}
|
||||
|
||||
|
||||
@ -19,29 +19,24 @@ if((typeof(process) != 'undefined' ? process : {}).__nwjs){
|
||||
// Setup requirejs if we are in node/nw...
|
||||
//
|
||||
// NOTE: no need to do this in browser...
|
||||
//
|
||||
// XXX this will create a second requirejs instance with node
|
||||
// compatibility...
|
||||
// ...would be nice if we could avoid this...
|
||||
// XXX setting nodeRequire on existing requirejs will change how
|
||||
// everything is loaded...
|
||||
if(typeof(process) != 'undefined'){
|
||||
|
||||
var requirejs = require('requirejs')
|
||||
|
||||
global.requirejs = requirejs
|
||||
if(typeof(window) != 'undefined'){
|
||||
window.requirejs = requirejs
|
||||
}
|
||||
|
||||
requirejs.config({
|
||||
nodeRequire: require,
|
||||
//baseUrl: __dirname,
|
||||
|
||||
// XXX this does not work on direct filesystem access...
|
||||
//urlArgs: 'bust='+Date.now(),
|
||||
})
|
||||
var requirejs =
|
||||
global.requirejs =
|
||||
window.requirejs =
|
||||
require('requirejs')
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
define(function(require){ var module = {}
|
||||
//requirejs(['viewer'], function(viewer){
|
||||
|
||||
//var DEBUG = DEBUG != null ? DEBUG : true
|
||||
|
||||
@ -70,6 +65,12 @@ $(function(){
|
||||
|
||||
// XXX this is not for production...
|
||||
'experiments',
|
||||
|
||||
// XXX BUG: disabling features on this level does not
|
||||
// work, yet works deeper down...
|
||||
// Example:
|
||||
// '-ui' // will throw an error:
|
||||
// // Feature "-ui" not loaded...
|
||||
])
|
||||
|
||||
|
||||
@ -120,3 +121,4 @@ $(function(){
|
||||
/**********************************************************************
|
||||
* vim:set ts=4 sw=4 : */
|
||||
return module })
|
||||
//})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user