project/templates/explorer/file_html.html

   1 {% extends "base.html" %}
   2
   3 {% block extrahead %}
   4     <script src="/static/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
   5     <script type="text/javascript" charset="utf-8">
   6         function aboveViewport(container, element, treshold) {
   7             return $(container).offset().top >= $(element).offset().top + $(element).height() + treshold;
   8         }
   9
  10         function belowViewport(container, element, treshold) {
  11             return $(container).offset().top + $(container).height() + treshold <= $(element).offset().top;
  12         }
  13
  14         var TRESHOLD = 600;
  15         var lastScroll = -1000;
  16
  17         function checkScroll() {
  18             console.log('checkScroll', $('#images').scrollTop(), lastScroll);
  19
  20             if (Math.abs($('#images').scrollTop() - lastScroll) > 300) {
  21                 console.log('checking!');
  22
  23                 var container = $('#images');
  24                 lastScroll = container.scrollTop();
  25
  26                 $('#images .image-box').each(function() {
  27                     if (aboveViewport(container, this, TRESHOLD)) {
  28                         $(this).html('loading...');
  29                     } else if (belowViewport(container, this, TRESHOLD)) {
  30                         $(this).html('loading...');
  31                     } else {
  32                         $(this).html('<img src="' + $(this).attr('src') + '" width="460" height="460"/>');
  33                     }
  34                 })
  35             }
  36             setTimeout(checkScroll, 2000);
  37         }
  38
  39         $(function() {
  40             $('#id_folders').change(function() {
  41                 $('#images').load('/images/' + $('#id_folders').val() + '/', function() {
  42                     lastScroll = -1000;
  43                 });
  44             });
  45
  46             setTimeout(checkScroll, 2000);
  47         });
  48     </script>
  49 {% endblock extrahead %}
  50
  51 {% block breadcrumbs %}<a href="/">Platforma Redakcyjna</a> ❯ plik {{ hash }}{% endblock breadcrumbs %}
  52
  53 {% block maincontent %}
  54     <div id="tabs"><a href="{% url file_xml hash %}">Źródło</a><a href="{% url file_html hash %}" class="active">HTML</a><div style="padding: 3px; margin-left: 10px">{{ image_folders_form.folders }}</div><div style="clear: both; height: 0; width: 0">&nbsp;</div></div>
  55
  56     <div id="images">
  57         <div class="image-box">
  58             <p>Aby zobaczyć obrazki wybierz folder z obrazkami powyżej.</p>
  59         </div>
  60     </div>
  61     <div id="file-text">
  62     {{ object|safe }}
  63     </div>
  64 {% endblock maincontent %}