project/templates/explorer/file_xml.html

   1 {% extends "base.html" %}
   2
   3 {% block extrahead %}
   4     <script src="/static/js/jquery.fieldselection.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             $('#rozdzial-button').click(function(event) {
  49                 console.log($('#id_text').getSelection().text);
  50                 $('#id_text').replaceSelection('<rozdzial>' + $('#id_text').getSelection().text + '</rozdzial>', true);
  51                 event.preventDefault();
  52             });
  53         });
  54     </script>
  55 {% endblock extrahead %}
  56
  57 {% block breadcrumbs %}<a href="/">Platforma Redakcyjna</a> ❯ plik {{ hash }}{% endblock breadcrumbs %}
  58
  59 {% block maincontent %}
  60     <div id="tabs"><a href="{% url file_xml hash %}" class="active">Źródło</a><a href="{% url file_html hash %}">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>
  61
  62     <div id="images">
  63         <div class="image-box">
  64             <p>Aby zobaczyć obrazki wybierz folder z obrazkami powyżej.</p>
  65         </div>
  66     </div>
  67     <form action="." method="post" accept-charset="utf-8">
  68         <a href="#" id="rozdzial-button">Rodział</a>
  69         {{ form.text }}
  70         <p>Użytkownik: {{ form.user }} Opis zmian: {{ form.commit_message }} <input type="submit" value="Zapisz"/></p>
  71     </form>
  72 {% endblock maincontent %}