diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css old mode 100644 new mode 100755 index 808dfb0c..244e1b9b --- a/ui (gen4)/css/layout.css +++ b/ui (gen4)/css/layout.css @@ -177,8 +177,8 @@ button:hover { /********************************************************** Viewer ***/ .viewer { position: relative; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; overflow: hidden; /*border: solid blue 1px;*/ @@ -756,14 +756,14 @@ button:hover { box-sizing: border-box; border-radius: 50%; background: blue; - left: -25; + left: -25px; } .marks-visible.single-image-mode.viewer .mark:after { display: none; } .mark.bookmark:after { background: yellow; - left: -15; + left: -15px; } /****************************************************** Image info ***/ .inline-image-info { diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less index 943efaaa..3c16672a 100755 --- a/ui (gen4)/css/layout.less +++ b/ui (gen4)/css/layout.less @@ -277,8 +277,8 @@ button:hover { /********************************************************** Viewer ***/ .viewer { position: relative; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; overflow: hidden; /*border: solid blue 1px;*/ @@ -716,7 +716,7 @@ button:hover { background: blue; - left: -25; + left: -25px; } .marks-visible.single-image-mode.viewer .mark:after { display: none; @@ -724,7 +724,7 @@ button:hover { .mark.bookmark:after { background: yellow; - left: -15; + left: -15px; } diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html index e8240a4f..a7088119 100755 --- a/ui (gen4)/index.html +++ b/ui (gen4)/index.html @@ -6,51 +6,132 @@ + + + + + + + + + + + + + + + + + - -Unpopulated -NOTE: there can be only .ribbon-set element. - -
-
-
- - -Populated - -
-
-
-
-
- ... -
-
-
-
-
-
-
- ... -
- ... -
-
---> - -
+
- +
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index 1d7a3ee8..8b09018b 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -8,9 +8,60 @@ //var DEBUG = DEBUG != null ? DEBUG : true +/*********************************************************************/ +// +// This xpects the folowing HTML structure... +// +// Unpopulated: +// NOTE: there can be only .ribbon-set element. +// +//
+//
+//
+// +// +// Populated: +// +//
+//
+//
+//
+//
+// ... +//
+//
+//
+//
+//
+//
+//
+// ... +//
+// ... +//
+//
+// +// /*********************************************************************/ var RibbonsClassPrototype = { + // NOTE: these will return unattached objects... + createViewer: function(){ + return $('
') + .addClass('viewer') + .append($('
') + .addClass('ribbon-set')) + }, + createRibbon: function(gid){ + return $('
') + .addClass('ribbon') + .setAttribute('gid', JSON.stringify(gid)) + }, + createImage: function(gid){ + return $('
') + .addClass('image') + .setAttribute('gid', JSON.stringify(gid)) + }, } @@ -20,6 +71,11 @@ var RibbonsPrototype = { // // .viewer (jQuery object) // + + // Constructors... + createViewer: RibbonsClassPrototype.createViewer, + createRibbon: RibbonsClassPrototype.createRibbon, + createImage: RibbonsClassPrototype.createImage, // NOTE: these accept gids or jQuery objects... getRibbon: function(target){ @@ -41,18 +97,6 @@ var RibbonsPrototype = { return $(target).filter('.image') }, - // NOTE: these will return unattached objects... - createRibbon: function(gid){ - return $('
') - .addClass('ribbon') - .setAttribute('gid', JSON.stringify(gid)) - }, - createImage: function(gid){ - return $('
') - .addClass('image') - .setAttribute('gid', JSON.stringify(gid)) - }, - // NOTE: to remove a ribbon or an image just use .getRibbon(..).remove() // and .getImage(...).remove() respectivly. @@ -83,8 +127,12 @@ var RibbonsPrototype = { position = position < 0 ? 0 : position // place the ribbon... - if(ribbons.length <= position){ + if(ribbons.length == 0){ + this.viewer.find('ribbon-set').append(ribbon) + + } else if(ribbons.length <= position){ ribbons.last().after(ribbon) + } else { ribbons.eq(position).before(ribbon) } @@ -134,8 +182,9 @@ var RibbonsPrototype = { position = position < 0 ? 0 : position // place the image... - if(images.length <= position){ + if(images.length == 0 || images.length <= position){ ribbon.append(image) + } else { images.eq(position).before(image) }