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             if (Math.abs($('#images').scrollTop() - lastScroll) > 300) {
  19                 var container = $('#images');
  20                 lastScroll = container.scrollTop();
  21
  22                 $('#images .image-box').each(function() {
  23                     if (aboveViewport(container, this, TRESHOLD)) {
  24                         $(this).html('loading...');
  25                     } else if (belowViewport(container, this, TRESHOLD)) {
  26                         $(this).html('loading...');
  27                     } else {
  28                         $(this).html('<img src="' + $(this).attr('src') + '" width="460" height="460"/>');
  29                     }
  30                 })
  31             }
  32             setTimeout(checkScroll, 2000);
  33         }
  34
  35         $(function() {
  36             $('#id_folders').change(function() {
  37                 $('#images').load('/images/' + $('#id_folders').val() + '/', function() {
  38                     lastScroll = -1000;
  39                 });
  40             });
  41
  42             setTimeout(checkScroll, 2000);
  43         });
  44     </script>
  45 {% endblock extrahead %}
  46
  47 {% block breadcrumbs %}<a href="/">Platforma Redakcyjna</a> ❯ plik {{ hash }}{% endblock breadcrumbs %}
  48
  49 {% block maincontent %}
  50     <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>
  51
  52     <div id="images">
  53         <div class="image-box">
  54             <p>Aby zobaczyć obrazki wybierz folder z obrazkami powyżej.</p>
  55         </div>
  56     </div>
  57     <div id="file-text">
  58     {{ object|safe }}
  59     </div>
  60 {% endblock maincontent %}