From 1f7357ba418d8fd9afe3e685c24b068d30cc368c Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sun, 21 May 2023 19:43:29 +0300 Subject: [PATCH] tweaking... Signed-off-by: Alex A. Naanou --- Viewer/css/ribbons.css | 432 +++++++++++++++++++++++++++++++++++++++ Viewer/features/cli.js | 2 + Viewer/features/sharp.js | 10 +- 3 files changed, 442 insertions(+), 2 deletions(-) create mode 100644 Viewer/css/ribbons.css diff --git a/Viewer/css/ribbons.css b/Viewer/css/ribbons.css new file mode 100644 index 00000000..5567454a --- /dev/null +++ b/Viewer/css/ribbons.css @@ -0,0 +1,432 @@ +/********************************************************************** +* +* Modern experimental ribbon layout... +* +* +********************************************************* Settings ***/ + + + +/********************************************************** Viewer ***/ +.viewer { + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; + + /*border: solid blue 1px;*/ + box-sizing: border-box; + + user-select: none; +} + +/* XXX this is a stub for printing help/docs... */ +@media print { + +.viewer { + display: none; +} + +} + + +/****************************************** Ribbon set and locator ***/ +.ribbon-set { + position: absolute; + display: block; + + top: 50%; + left: 50%; + + /* NOTE: this needs for scaling/zooming to behave correctly and not + shift the element, when its dimensions change... + ...this is because .ribbon-set will both be used for scaling + and aligning... */ + transform-origin: top left; + + will-change: transform; +} +.ribbon-locator { + position: relative; + + top: 0; + left: 0; + + will-change: transform; +} + + +/********************************************************** Ribbon ***/ +/* XXX for some reason setting image size in vmin stops this from +stretching in width... */ +.shadow, +.ribbon { + position: relative; + display: block; + /* XXX BUG: setting this will mess up new ribbon creation.... + display: inline-block;*/ + height: auto; + /*min-width: 0px;*/ + width: auto; + overflow: visible; + white-space: nowrap; + font-size: 0; + + float: left; + clear: both; + + background: var(--ribbon-background-color); + + margin-top: var(--ribbon-margin); + margin-bottom: var(--ribbon-margin); + + will-change: transform; +} +.ribbon:empty { + display: none; +} + +/* XXX would be good to make this sticky -- always visible... */ +.ribbon[title]:before { + display: block; + position: absolute; + content: attr(title); + + font-size: 52pt; + font-style: italic; + font-weight: bold; + + color: white; + text-shadow: black 2px 2px 15px; + + top: -2pt; + right: 100%; + margin-right: 20pt; +} +.single-image-mode .ribbon[title]:before { + display: none; +} + +.base-ribbon-marker { + position: absolute; + height: 100%; + + color: transparent; + font-size: 20pt; + font-weight: bold; +} +.base-ribbon-marker:after { + content: "base ribbon"; + + display: block; + + position: absolute; + width: var(--image-tile-size); + bottom: 0px; + left: 0px; + padding: 5px; + box-sizing: border-box; + + z-index: 1000; + + color: white; + background: black; + opacity: 0.2; + + font-size: 20pt; + font-weight: bold; + + transform-origin: bottom left; + transform: rotate(-90deg); +} +.single-image-mode.viewer .base-ribbon-marker { + display: none; +} + + + +/*********************************************************** Image ***/ +.marker, +.current-marker, +.mark, +.image { + position: relative; + display: inline-block; + vertical-align: middle; + text-align:left; + width: var(--image-tile-size); + height: var(--image-tile-size); + font-size: 12pt; + overflow: hidden; + + box-sizing: border-box; + color: white; + /* XXX do we need this??? + text-shadow: + black 0.1em 0.1em 0.4em, + black 0.1em 0.1em; */ + + /* NOTE: we can't set the bg color here because it will get + affected by filters... */ + background: no-repeat 50% transparent; + background-size: contain; + border: solid var(--image-border) transparent; + + /* XXX we are taking care of this in code -- see if we can use this */ + image-orientation: none; +} + +.image { + padding: var(--single-image-indicator-size); + background-color: var(--image-background-color); +} +.single-image-mode .image { + background-color: none; +} + +.image div { + display: block; + position: absolute; + + max-width: var(--image-tile-size); + width: auto; + max-height: var(--image-tile-size); + height: auto; + + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + + white-space: normal; + text-align: center; + text-overflow: ellipsis; + /*font-size: 2vh;*/ + + pointer-events: none; +} + +.crisp-resize .image { + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; +} + + + +/* +.current.image { + border: solid 5px red; +} +*/ + +/* NOTE: this is essentially a ribbon... */ +.shadow { + position: absolute; + overflow: visible; + + width: auto; + height: auto; + margin: 0px; + + background: black; + + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -ms-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; + transition: all 0.1s ease-in; +} +.shadow { + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + -o-transform-origin: 0 0; + transform-origin: 0 0; +} +.image.moving { + visibility: hidden; +} + + +.current-marker { + display: none; + position: absolute; + border: solid 5px red; + background: none; + z-index: 100; + + top: 0; + left: 0; + margin-top: calc(-1 * var(--image-tile-size) / 2); + margin-left: calc(-1 * var(--image-tile-size) / 2); + + /* pass events through... (do we need IE10-?) */ + pointer-events: none; +} + +.marker { + width: 50px; + border: none; + background: no-repeat 50% transparent; + background-color: transparent; + color: white; +} +.marker:after { + display: block; + position: absolute; + content: "marker"; + font-size: 32px; + font-weight: bold; + text-align: center; + overflow: visible; + + width: 200px; + height: 32px; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -100px; + + transform-origin: center center; + transform: rotate(270deg) scaleY(1) scaleX(1); + + opacity: 0.5; +} +.single-image-mode.viewer .marker { + display: none; +} + + +/* single image mode transitions */ +/* XXX still buggy and not too needed... +.single-image-mode.viewer .image { + position: absolute; + top: 0px; + left: 0px; + + opacity: 0; + + .transition(opacity); +} +.single-image-mode.viewer .current.image { + opacity: 1; +} +*/ + + +/* image turning... */ +/* NOTE: need to account for proportions after turning... */ +.image[orientation="90"] { + transform: rotate(90deg) scaleY(1) scaleX(1); +} +.image[orientation="180"] { + transform: rotate(180deg) scaleY(1) scaleX(1); +} +.image[orientation="270"] { + transform: rotate(270deg) scaleY(1) scaleX(1); +} + + +/* Flipped vertically only... */ +/* NOTE: wee need to do all possible combinations here as we can't + combine different parts of a transform attr from different + classes */ +.image[flipped*="vertical"] { + transform: rotate(0deg) scaleY(1) scaleX(-1); +} +.image[orientation="90"][flipped="vertical"] { + transform: rotate(90deg) scaleY(1) scaleX(-1) +} +.image[orientation="180"][flipped="vertical"] { + transform: rotate(180deg) scaleY(1) scaleX(-1) +} +.image[orientation="270"][flipped="vertical"] { + transform: rotate(270deg) scaleY(1) scaleX(-1) +} + + +/* Flipped horizontally only... */ +.image[flipped*="horizontal"] { + transform: rotate(0deg) scaleY(-1) scaleX(1); +} +.image[orientation="90"][flipped="horizontal"] { + .transform(90deg, -1) +} +.image[orientation="180"][flipped="horizontal"] { + .transform(180deg, -1) +} +.image[orientation="270"][flipped="horizontal"] { + .transform(270deg, -1) +} + +/* Flipped vertically and horizontally... */ +.image[flipped*="vertical"][flipped*="horizontal"] { + transform: rotate(0deg) scaleY(-1) scaleX(-1) +} +.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] { + transform: rotate(90deg) scaleY(-1) scaleX(-1) +} +.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] { + transform: rotate(180deg) scaleY(-1) scaleX(-1) +} +.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] { + transform: rotate(270deg) scaleY(-1) scaleX(-1) +} + + + +/* image separators... */ +.ribbon-image-separators.viewer .image { + box-shadow: + 9px 4px 0 -8px rgba(128,128,128,0.2), + -9px 4px 0 -8px rgba(128,128,128,0.2); +} +.ribbon-image-separators.viewer .image[orientation="90"], +.ribbon-image-separators.viewer .image[orientation="270"] { + box-shadow: + 4px 9px 0 -8px rgba(128,128,128,0.2), + 4px -9px 0 -8px rgba(128,128,128,0.2); +} +.ribbon-image-separators.single-image-mode.viewer .image { + box-shadow: none; +} + + + +/* default backgrounds */ +/* XXX not sure if we need these... +.image { + background-image: url(images/loading.gif); +} +.image[orientation="90"] { + background-image: url(images/loading-90deg.gif); +} +.image[orientation="180"] { + background-image: url(images/loading-180deg.gif); +} +.image[orientation="270"] { + background-image: url(images/loading-270deg.gif); +} +*/ + + +/* separator test */ +/* +.image.red+.image:not(.red):before { + display: inline-block; + position: relative; + content: ""; + top:0px; + left: -50px; + width: 100px; + height: 100%; + + background-color: yellow; +} +*/ + + + + + +/********************************************************************** +* vim:set spell ft=css : */ diff --git a/Viewer/features/cli.js b/Viewer/features/cli.js index 14898d1d..3c44efad 100755 --- a/Viewer/features/cli.js +++ b/Viewer/features/cli.js @@ -511,6 +511,8 @@ var CLIActions = actions.Actions({ return Promise.all([ // NOTE: no need to call .cacheMetadata(..) as // it is already running after .loadImages(..) + // XXX for some reason this reports making previews + // but does not actually make them... index.makePreviews('all') ])} }) .then(function(){ return index diff --git a/Viewer/features/sharp.js b/Viewer/features/sharp.js index 8df53e1e..c517f235 100755 --- a/Viewer/features/sharp.js +++ b/Viewer/features/sharp.js @@ -616,7 +616,9 @@ var SharpActions = actions.Actions({ .sort() .reverse() if(sizes){ - sizes = sizes instanceof Array ? sizes : [sizes] + sizes = sizes instanceof Array ? + sizes + : [sizes] // normalize to preview size... sizes = (this.config['preview-normalized'] ? @@ -632,7 +634,8 @@ var SharpActions = actions.Actions({ sizes = cfg_sizes } // XXX we should cache this on a previous stage... - var index_dir = this.config['index-dir'] || '.ImageGrid' + var index_dir = this.config['index-dir'] + || '.ImageGrid' // get/normalize images... return [ @@ -653,6 +656,9 @@ var SharpActions = actions.Actions({ ...args, ] }, // generate image paths... + // XXX BUG: for some reason base_path here gets the first argument to .makePreviews)(..) + // .makePreviews('all') + // will create previews in ./all/.ImageGrid/... function(gid, sizes, path_tpl, index_dir, base_path){ var that = this var img = this.images[gid]