fixes to vierwer/folding catalogue in menu
authorMarcin Koziej <marcin@lolownia.org>
Wed, 11 Dec 2013 09:01:11 +0000 (10:01 +0100)
committerMarcin Koziej <marcin@lolownia.org>
Wed, 11 Dec 2013 09:01:11 +0000 (10:01 +0100)
apps/catalogue/templates/catalogue/tag_list_split.html
apps/picture/templates/picture/picture_viewer.html
apps/wolnelektury_core/static/css/.#master.picture.css [new symlink]
apps/wolnelektury_core/static/css/base.css
apps/wolnelektury_core/static/css/master.picture.css
apps/wolnelektury_core/static/js/.#picture.js [new symlink]
apps/wolnelektury_core/static/js/picture.js

index d79618a..b398c37 100644 (file)
@@ -4,7 +4,7 @@
 <p class="mono">
   <a href="#" class="simple-toggler">{% trans "Literature" %}</a>
 </p>
 <p class="mono">
   <a href="#" class="simple-toggler">{% trans "Literature" %}</a>
 </p>
-<div class="simple-hidden-box">{{books|safe}}</div>
+<div class="simple-hidden-box simple-hidden-initially">{{books|safe}}</div>
 </div>
 {% endif %}
 
 </div>
 {% endif %}
 
@@ -13,6 +13,6 @@
 <p class="mono">
   <a href="#" class="simple-toggler">{% trans "Gallery" %}</a>
 </p>
 <p class="mono">
   <a href="#" class="simple-toggler">{% trans "Gallery" %}</a>
 </p>
-<div class="simple-hidden-box">{{pictures|safe}}</div>
+<div class="simple-hidden-box simple-hidden-initially">{{pictures|safe}}</div>
 </div>
 {% endif %}
 </div>
 {% endif %}
index 8caaae6..40cbd80 100644 (file)
             </ul>
         </div>
         <div id="info" class="moveright">
             </ul>
         </div>
         <div id="info" class="moveright">
+         <div class="sponsors">
+           <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" ></img>
+           </a>
+           <a href="http://www.nck.pl"><img src="{% static "img/logo_nck_200horiz_trans.png" %}" alt="Narodowe Centrum Kultury" ></img></a>
+         </div>
             {% book_info picture %}
         </div>
        {{ picture.html_file.read|safe }}
             {% book_info picture %}
         </div>
        {{ picture.html_file.read|safe }}
        <!-- main picture view -->
        <div id="picture-view">
          <ul class="toolbar">
        <!-- main picture view -->
        <div id="picture-view">
          <ul class="toolbar">
-           <li class="square button plus"><a href="#">&#x2795;<!-- heavy plus sign --></a></li>
-           <li class="square button minus"><a href="#">&#x2796;<!-- heavy minus sign --></a>
+           <li class="square button plus inactive"><a href="#">+<!--&#x2795;--><!-- heavy plus sign --></a></li>
+           <li class="square button minus inactive"><a href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a>
            </li>
            <li class="button"><a href="#picture-objects" class="dropdown">{% trans "Objects" %}</a></li>
            <li class="button"><a href="#picture-themes" class="dropdown">{% trans "Themes" %}</a></li>
          </ul>
            </li>
            <li class="button"><a href="#picture-objects" class="dropdown">{% trans "Objects" %}</a></li>
            <li class="button"><a href="#picture-themes" class="dropdown">{% trans "Themes" %}</a></li>
          </ul>
-         <div class="picture-wrap {% if picture.image_file|is_portrait %}portrait{% endif %}">
-           {% thumbnail picture.image_file "700x500" as pic %}
-           <img class="canvas initial" src="{{pic.url}}"/>
-           {% endthumbnail %}
+         {% thumbnail picture.image_file "700x500" as pic %}
+         <div class="picture-wrap {% if picture.image_file|is_portrait %}portrait{% endif %}" 
+              data-original-width="{{picture.width}}" data-original-height="{{picture.height}}"
+              data-width="{{pic.width}}" data-height="{{pic.height}}" style="background-image: url('{{pic.url}}');  width: {{pic.width}}px; height: {{pic.height}}px;">
            <img class="canvas loading original" src="{{ picture.image_file.url }}"/>
          </div>
            <img class="canvas loading original" src="{{ picture.image_file.url }}"/>
          </div>
+         {% endthumbnail %}
        </div>
         {{ piwik_tag|safe }}
        <div id="spinner"></div>
        </div>
         {{ piwik_tag|safe }}
        <div id="spinner"></div>
diff --git a/apps/wolnelektury_core/static/css/.#master.picture.css b/apps/wolnelektury_core/static/css/.#master.picture.css
new file mode 120000 (symlink)
index 0000000..6fc57f3
--- /dev/null
@@ -0,0 +1 @@
+marcin@mokovka.20108:1386468394
\ No newline at end of file
index 3496937..a8c458d 100755 (executable)
@@ -182,3 +182,7 @@ h3 {
     margin-top: 2.2em;
     margin-bottom: 1.6em;
 }
     margin-top: 2.2em;
     margin-bottom: 1.6em;
 }
+
+.simple-hidden-initially {
+    display: none;
+}
index ab4c49c..81bc698 100644 (file)
@@ -8,28 +8,16 @@
 }
  
 #picture-view .picture-wrap {
 }
  
 #picture-view .picture-wrap {
+    background-repeat: no-repeat;
     margin: 3rem auto 1rem auto;
     display: block;
     margin: 3rem auto 1rem auto;
     display: block;
+    position: relative;
     z-index: 10;
     z-index: 10;
-    cursor: move;
-}
-#picture-view .picture-wrap img {
-    z-index: 10;
-}
-
-#picture-view .picture-wrap {
-    width: 700px;
-}
+//    cursor: move;
 
 
-#picture-view .picture-wrap {
-    height: 500px;
 }
 
 
 }
 
 
-.picture-wrap img.original {
-    width: 100%;
-}
-
 .picture-wrap img.loading {
     margin-left: -10000px;
 }
 .picture-wrap img.loading {
     margin-left: -10000px;
 }
 
 .picture-wrap .mark .label {
     position: absolute;
 
 .picture-wrap .mark .label {
     position: absolute;
-    display: none; /*block;*/
-    color: rgba(200, 200, 200, 0.8);
+    display: block;
+    background-color: rgba(200, 200, 200, 0.7);
+    color: rgba(0,0,0,0.6);
     font-size: 0.9rem;
     font-size: 0.9rem;
-    bottom: -1.5em;
+//    bottom: -1.5em;
 }
 
 
 }
 
 
     background-color: #222;
 }
 
     background-color: #222;
 }
 
+.toolbar .button.inactive a:active,
+.toolbar .button.inactive a:link,
+.toolbar .button.inactive a:visited
+{
+    color: #606060 !important;
+    cursor: not-allowed;
+}
+
 .toolbar .button a {
     //background: #333;
     //opacity: 0.9;
 .toolbar .button a {
     //background: #333;
     //opacity: 0.9;
 
 .toolbar .button .dropdown-body a {
     height: 1.2rem;
 
 .toolbar .button .dropdown-body a {
     height: 1.2rem;
+    white-space: nowrap;
 }
 
 #picture-view .toolbar .button.square a {
     width: 4rem; //1.5rem;
 }
 
 #picture-view .toolbar .button.square a {
     width: 4rem; //1.5rem;
+    font-weight: bold;
 }
 
 li.button {
 }
 
 li.button {
@@ -100,8 +99,8 @@ li.button.square {
     float: left;
 }
 
     float: left;
 }
 
-#picture-view .toolbar .button a:link,
-#picture-view .toolbar .button a:visited {
+.toolbar .button a:link,
+.toolbar .button a:visited {
     color: #FFF;
 }
 
     color: #FFF;
 }
 
@@ -116,10 +115,11 @@ li.button.square {
 #sponsors {
     position: absolute;
     display: block;
 #sponsors {
     position: absolute;
     display: block;
-    top: 3.5rem;
-    right: 2rem;
+    left: 0;
+    bottom: 0;
+    width: 8rem;
+
     z-index:1;
     z-index:1;
-    width: 9rem;
 }
 #sponsors div {
     z-index: 10;
 }
 #sponsors div {
     z-index: 10;
diff --git a/apps/wolnelektury_core/static/js/.#picture.js b/apps/wolnelektury_core/static/js/.#picture.js
new file mode 120000 (symlink)
index 0000000..6fc57f3
--- /dev/null
@@ -0,0 +1 @@
+marcin@mokovka.20108:1386468394
\ No newline at end of file
index 052392a..0d6d0cb 100644 (file)
 
 (function($) {
 
 (function($) {
-    $.widget('wl.pictureviewer', {
-
-       options: {
-           steps: 6, // steps of zoom
-           max: -1, // max zoom in percent
-           plus_button: undefined,
-           minus_button: undefined,
-           height: 500, // height to scale to initially
-       },
-
-
-       _create: function() {
-           var self = this;
-           /* Calibrate */
-           self._zoom = 0;
-
-           // the initial thumbnailed picture
-
-
-           var img = self.element.find('img.initial').get(0);
-
-           self.initial_size = [ 
-               img.naturalWidth,
-               img.naturalHeight
-           ];
-
-           self.element.width(self.initial_size[0]);
-           self.element.height(self.initial_size[1]);
-           
-           self.initial_position = self.element.offset();
-
-           var original = self.element.find('img.original').get(0);
-           self._original = false;
-           self.original_loeaded = undefined; // callback
-           self._original_loaded = false;
-
-           self.spinner = $("#spinner").progressSpin();
-
-           $(original).load(function() {
-               console.log("loaded original");
-               self._original_loaded = true;
-               self.spinner.stop();
-               var cb = self.original_loaded;
-               self.original_loaded = undefined;
-               if (cb)
-                   cb()
-           });
-           
-           if (self.options.max <= 0) {
-               self.options.max = original.naturalWidth
-                   * 100 / self.initial_size[0];
-           }
-
-           self.element.css({
-               'margin': 0,
-           });
-
-           self.element.offset(self.initial_position);
-           //      self.element.draggable({containment:"parent"});
-
-           if (self.options.plus_button)
-               self.options.plus_button.click(
-                   function(ev) { self.zoom(1); });
-           if (self.options.minus_button)
-               self.options.minus_button.click(
-                   function(ev) { self.zoom(-1); });
-
-           self.options.areas_links.hover(function() {
-               $this = $(this);
-               var coords = $this.data("coords");
-               this._picture_mark = self.createMark({
-                   label: $this.text(),
-                   coords: coords,
-               });
-           }, function() {
-               $(this._picture_mark).remove();
-               this._picture_mark = undefined;
-           });
-           return self;
-       },
-
-       natural_size: function() {
-           var img = this.element.find('img.original').get(0);
-           return [ img.naturalWidth, img.naturalHeight ] 
-       },
-
-       currentZoom: function() { return this._zoom; },
-
-       initOriginal: function() {
-           var self = this;
-           function subst_original() {
-               self.element.find("img.initial").remove();
-               self.element.find("img.loading").removeClass("loading");
-               self._original = true;
-           }
-           if (!this._original) {
-               if (this._original_loaded) {
-                   return subst_original();
-               } else {
-                   self.original_loaded = subst_original;
-                   self.spinner.start();
-               }
-           }
-
-       },
-
-       zoom: function(steps) {
-           this.initOriginal();
-           var t = this._zoom + steps;
-           return this.zoomTo(t);
-       },
-
-       zoomForStep: function(step) {
-           // 0 => initial
-           // max_step-1 => max %
-           return 100 + (this.options.max - 100) / this.options.steps * step
-       },
-
-       zoomTo: function(level) {
-           if (level < 0 || level > this.options.steps)
-               return;
-           var ratio = this.zoomForStep(level) / 100;
-           var new_width  = ratio * this.initial_size[0];
-           var new_height = ratio * this.initial_size[1];
-           var target = {
-               'width': new_width,
-               'left': Math.max(0, 
-                                this.initial_position.left 
-                                - (new_width - this.initial_size[0])/2),
-               'top': Math.max(0, 
-                               this.initial_position.top 
-                               - (new_height - this.initial_size[1])/2),
-           };
-
-           this._zoom = level;
-
-           this.element.css(target);
-          
-
-//         this.element.animate(target, 1200); // default duration=400
-       },
-
-       allowedPosition: function(off) {
-           var x = undefined, fix_x = undefined;
-           var y = undefined, fix_y = undefined;
-           var w = this.element.width();
-           var h = this.element.height();
-           var cw = $(window).width();
-           var ch = $(window).height();
-           var off = off || this.element.offset();
-
-           if (w <= cw) {
-               var x = off.left;
-               if (x < 0) 
-                   fix_x = 0;
-               if (x + w > cw)
-                   fix_x = cw - w;
-           } else {
-               if (x > 0)
-                   fix_x = 0;
-               if (x + w < cw)
-                   fix_x = cw - w;
-           }
-
-           if (h <= ch) {
-               var y = off.top;
-               if (y < 0)
-                   fix_y = 0;
-               if (y + h > ch)
-                   fix_y = ch - h;
-           } else {
-               if (y > 0)
-                   fix_y = 0;
-               if (y + h < ch)
-                   fix_y = ch - h;
-           }
-           if (fix_x !== undefined || fix_y !== undefined)
-               return { top: fix_y, left: fix_x };
-           return undefined;
-
-       },
-
-       // mark
-       // {
-       //  label: "...",
-       //  coords: [x, y, w, h]
-       // }
-       createMark: function(mark) {
-           var $mark = $('<div class="mark"><div class="label">' + 
-                         mark.label + '</div></div>');
-           var ratio = this.zoomForStep(this.currentZoom()) *
-               this.initial_size[0] / (100 * this.natural_size()[0]);
-           var scale = function (v) { 
-               return v * ratio; 
-           }
-           if (mark.coords[1][0] < 0 || mark.coords[1][1] < 0) { // whole
-               var s = self.natural_size();
-               if (mark.coords[1][0] < 0) mark.coords[1][0] = s[0];
-               if (mark.coords[1][1] < 0) mark.coords[1][1] = s[1];
-           }
-
-           var coords = [[scale(mark.coords[0][0]), scale(mark.coords[0][1])],
-                         [scale(mark.coords[1][0]), scale(mark.coords[1][1])]];
-           this.element.append($mark);
-           $mark.width(coords[1][0] - coords[0][0]);
-           $mark.height(coords[1][1] - coords[0][1]);
-           $mark.css({left: coords[0][0], top: coords[0][1]});
-           return $mark.get(0);
-       },
-    });
+  $.widget('wl.pictureviewer', {
+    
+    options: {
+      step: 20, // step in % of initial image
+      plus_button: undefined,
+      minus_button: undefined,
+    },
+    ORIGINAL_LOADING: 0, 
+    ORIGINAL_AVAILABLE: 1, 
+    ORIGINAL_SHOWN: 2,
+
+    _create: function() {
+      var self = this;
+      self.initial_size = [ 
+       self.element.data('width'),
+       self.element.data('height') 
+      ];
+      self.original_size = [
+       self.element.data('original-width'),
+       self.element.data('original-height')
+      ];
+      self._zoom = 0;
+      self._ratio = 1.0;
+
+      self.original = self.element.find('img.original').eq(0);
+      
+      self._original_avaialble = self.ORIGINAL_LOADING;
+      function original_loaded() {
+       self._original_avaialble = self.ORIGINAL_AVAILABLE;
+       self.options.plus_button.removeClass('inactive');
+       self.options.minus_button.removeClass('inactive');
+       console.log("Original image available, sizes initial: " + self.initial_size + ", original: " + self.original_size);
+      };
+      self.original.load(original_loaded);
+
+      self.element.width(self.initial_size[0]);
+      self.element.height(self.initial_size[1]);
+
+      if (self.options.plus_button)
+       self.options.plus_button.click(
+         function(ev) { self.zoom(1); });
+      if (self.options.minus_button)
+       self.options.minus_button.click(
+         function(ev) { self.zoom(-1); });
+
+      self._initial_mark = null;
+      function clean_initial_mark() {
+       if (self._initial_mark) {
+         self._initial_mark.remove();
+         self._initial_mark = null;
+       }
+      }
+      var initial_hash = window.location.hash;
+      if (initial_hash) {
+       var mk = null;
+       if (initial_hash.startsWith('#object-')) {
+         $("[href=#picture-objects]").trigger('click');
+       } else if (initial_hash.startsWith('#theme-')) {
+         $("[href=#picutre-themes]").trigger('click');
+       }
+       mk = $("[href=" + initial_hash + "]").eq(0);
+       self._initial_mark = self.createMark({
+         label: mk.text(),
+         coords: mk.data('coords')
+       });
+      }      
+
+
+      self.options.areas_links.hover(function() {
+       clean_initial_mark();
+       $this = $(this);
+       var coords = $this.data("coords");
+       this._picture_mark = self.createMark({
+//       label: $this.text(),
+         coords: coords,
+       });
+      }, function() {
+       $(this._picture_mark).remove();
+       this._picture_mark = undefined;
+      }).click(function(ev) {
+       ev.preventDefault();
+       var $mark = self.element.find('.mark').eq(0);
+       var markPos = $mark.offset();
+       markPos = [markPos.left, markPos.top];
+       var markSize = [ $mark.width(), $mark.height() ]
+       var wSize = [ window.innerWidth, window.innerHeight ];
+       window.scrollTo(
+         markPos[0] + markSize[0]/2 - wSize[0]/2,
+         markPos[1] + markSize[1]/2 - wSize[1]/2       
+       );
+       
+      });
+
+      
+
+      return self;
+    },
+
+    currentSize: function() {
+      return [this.element.width(), this.element.height() ];
+    },
+
+    currentZoom: function() { return this._zoom; },
+
+    initOriginal: function() {
+      if (this._original_avaialble > this.ORIGINAL_LOADING && 
+         this._original_avaialble < this.ORIGINAL_SHOWN) {
+       this.element.css({'background-image': 'url('+ this.original.attr('src')+')', 'background-size':  this.initial_size[0]+'px'});
+       this._original_avaialble = this.ORIGINAL_SHOWN;
+      };
+    },
+
+    zoom: function(steps) {
+      this.initOriginal();
+      var t = this._zoom + steps;
+      return this.zoomTo(t);
+    },
+
+    zoomForStep: function(step) {
+      // 0 => initial
+      // max_step-1 => max %
+      if (step < 0) step = 0;
+      var zoomperc = 100 + step * this.options.step;
+      if (zoomperc * this.initial_size[0] > this.original_size[0] * 100) {
+       zoomperc = this.original_size[0] * 100 / this.initial_size[0];
+      };
+      return zoomperc;
+    },
+
+    zoomTo: function(level) {
+      var ratio = this.zoomForStep(level) / 100;
+      var new_width  = ratio * this.initial_size[0];
+      var new_height = ratio * this.initial_size[1];
+      var cs = this.currentSize();
+      if (new_width == cs[0]) 
+       return;
+
+      var target = {
+       'width': new_width + 'px',
+       'height': new_height + 'px',
+       'background-size': new_width + 'px',
+      };
+
+      this._zoom = level;
+      this._ratio = ratio;
+
+      this.element.css(target);
+    },
+
+    allowedPosition: function(off) {
+      var x = undefined, fix_x = undefined;
+      var y = undefined, fix_y = undefined;
+      var w = this.element.width();
+      var h = this.element.height();
+      var cw = $(window).width();
+      var ch = $(window).height();
+      var off = off || this.element.offset();
+
+      if (w <= cw) {
+       var x = off.left;
+       if (x < 0) 
+         fix_x = 0;
+       if (x + w > cw)
+         fix_x = cw - w;
+      } else {
+       if (x > 0)
+         fix_x = 0;
+       if (x + w < cw)
+         fix_x = cw - w;
+      }
+
+      if (h <= ch) {
+       var y = off.top;
+       if (y < 0)
+         fix_y = 0;
+       if (y + h > ch)
+         fix_y = ch - h;
+      } else {
+       if (y > 0)
+         fix_y = 0;
+       if (y + h < ch)
+         fix_y = ch - h;
+      }
+      if (fix_x !== undefined || fix_y !== undefined)
+       return { top: fix_y, left: fix_x };
+      return undefined;
+
+    },
+
+    // mark
+    // {
+    //  label: "...",
+    //  coords: [x, y, w, h]
+    // }
+    createMark: function(mark) {
+      if (mark.label === undefined)
+       mark.label = '';
+      var $mark = $('<div class="mark"><div class="label">' + 
+                   mark.label + '</div></div>');
+      var cs = this.currentSize()
+      var ratio = cs[0] / this.original_size[0];
+      var scale = function (v) { 
+       return v * ratio; 
+      }
+      if (mark.coords[1][0] < 0 || mark.coords[1][1] < 0) { // whole
+       var s = this.original_size;
+       if (mark.coords[1][0] < 0) mark.coords[1][0] = s[0];
+       if (mark.coords[1][1] < 0) mark.coords[1][1] = s[1];
+      }
+
+      var coords = [[scale(mark.coords[0][0]), scale(mark.coords[0][1])],
+                   [scale(mark.coords[1][0]), scale(mark.coords[1][1])]];
+      this.element.append($mark);
+      $mark.width(coords[1][0] - coords[0][0]);
+      $mark.height(coords[1][1] - coords[0][1]);
+      $mark.css({left: coords[0][0], top: coords[0][1]});
+      return $mark.get(0);
+    },
+  });
 }(jQuery));
 
 
 }(jQuery));
 
 
-$(document).ready(function(){
-    $(".picture-wrap").pictureviewer({
-       plus_button: $(".toolbar .button.plus"),
-       minus_button: $(".toolbar .button.minus"),
-       areas_links: $("#picture-objects a, #picture-themes a"),
-    });
-
-    $.highlightFade.defaults.speed = 3000;
-
-    $('.toolbar a.dropdown').each(function() {
-       $t = $(this);
-       $($t.attr('href')).hide().insertAfter(this);
-    });
-
-    function closeDD() {
-       $(this).removeClass('selected');
-       $($(this).attr('href')).slideUp('fast');
-       
+$(document).ready(function() {
+  $.highlightFade.defaults.speed = 3000;
+
+  $('.toolbar a.dropdown').each(function() {
+    $t = $(this);
+    $($t.attr('href')).hide().insertAfter(this);
+  });
+
+  function closeDD() {
+    $(this).removeClass('selected');
+    $($(this).attr('href')).slideUp('fast');
+    
+  }
+  $('.toolbar a.dropdown').click(function(ev) {
+    $("#sponsors:not(:hidden)").fadeOut();
+    ev.preventDefault();
+    if ($(this).hasClass('selected')) {
+      closeDD.call(this);
+    } else {
+      $(this).addClass('selected');
+      $($(this).attr('href')).slideDown('fast');
+      $(this).parent().siblings(".button:has(.dropdown)").children(".dropdown").each(closeDD);
     }
     }
-    $('.toolbar a.dropdown').click(function() {
-       if ($(this).hasClass('selected')) {
-           closeDD.call(this);
-       } else {
-           $(this).addClass('selected');
-           $($(this).attr('href')).slideDown('fast');
-           $(this).parent().siblings(".button:has(.dropdown)").children(".dropdown").each(closeDD);
-       }
-    });
+  });
 
 
+  $(".picture-wrap").pictureviewer({
+    plus_button: $(".toolbar .button.plus"),
+    minus_button: $(".toolbar .button.minus"),
+    areas_links: $("#picture-objects a, #picture-themes a"),
+  });
 
 });
 
 
 });