added articleMockup.js to tree

edgware/editor/views.py

@@ -461,7 +461,7 @@ def view_page(request, id):
   """
   id = int(id)
   page = Page.objects.get(pk=id)
-  d = page.get_dict()
+  d = page.get_dict(1)
   return render_to_response("view_page.html", d)
 
 def view_article(request, id):

edgware/static/js/articleMockup.js

@@ -0,0 +1,127 @@
+var currPageNo = 0;
+$(document).ready(function() {
+//  $('.srt').srt();
+  $('.icon').tooltip({
+    showURL: false
+    });
+  $('.toggleButton').click(function() {
+    $(this).parent().parent().find('.toggleButton').each(function() { $(this).parent().show(); });
+    $(this).parent().hide();
+    });
+  SRT_BASE = "/static/mockup/srt/";
+  $('.videoBtn').click(function() {
+    var e = $('#videoWrap');
+    var player = e.find('video');
+    var videoFname = $(this).attr("data-file");
+    var videoPath = player.attr("data-base") + videoFname;
+    player.attr('src', videoPath);
+    player.get(0).load();
+    var descPath = SRT_BASE + videoFname.replace(".ogv", ".description.srt");
+    var transPath = SRT_BASE + videoFname.replace(".ogv", ".transcript.srt");
+    e.find(".Description").attr("data-srt", descPath);
+    e.find(".Transcript").attr("data-srt", transPath);
+    e.find('.srt').srt();
+    $('#videoWrap').fadeIn();  
+    });
+
+  $('.audioBtn').click(function() {
+    var e = $('#audioWrap');  
+    $('audio').get(0).pause();
+    e.remove().appendTo($(this).parents('.page'));
+    $(this).parents('.page').animate({'height': "1270px"}, 500);
+    $(this).parents('.mediaicons').animate({"bottom": "60px"}, 500);
+    var player = e.find('audio');
+    var audioFname = $(this).attr("data-file");
+    var audioPath = player.attr("data-base") + audioFname;
+    player.attr("src", audioPath);
+    player.get(0).load();
+//    var descPath = SRT_BASE + audioFname.replace(".ogg", ".srt");
+    var transPath = SRT_BASE + audioFname.replace(".ogg", ".srt");
+//    e.find(".Description").attr("data-srt", descPath);
+    e.find(".Transcript").attr("data-srt", transPath);
+    e.find(".Transcript").html('');
+    e.find(".srt").srt();
+    $('#audioWrap').fadeIn();
+    return false;
+    });
+
+//  $('.audioBtn').colorbox({width: '350px', height: '180px', inline: true, href: '#audioWrap'});
+  $('.videoBtn').colorbox({width: '445px', height: '550px', inline: true, href: '#videoWrap'});
+//  $('.audioBtn').colorbox({width: '445px', height: '550px', inline: true, href: '#audioWrap'});
+  scrollPages();
+  $('#languageBtn').toggle(function() {
+    $('.arabicBtn').hide();
+    $('.englishBtn').show();
+    $(this).css("direction", "ltr");
+    $('.english').hide();
+    $('.arabic').show();
+    $('#scrollDots').css("direction", "rtl");
+    }, function() {
+    $('.arabicBtn').show();
+    $('.englishBtn').hide();
+    $(this).css("direction", "rtl");
+    $('.english').show();
+    $('.arabic').hide();
+    $('#scrollDots').css("direction", "ltr");
+    });
+});
+
+function scrollPages() {
+  var DOT_DEFAULT = '/static/images/pageOff.png';
+  var DOT_HOVER = '/static/images/pagehover.png';
+  var DOT_CURRENT = '/static/images/pageOn.png';
+  var PAGE_HEIGHT = 1270;
+  var OFFSET_VAL = 80;
+  var noOfPages = $('.page').length;
+  var currentPage = -1;
+//  var dotHtml = '<img src="/static/images/oldenglish/dot.gif" alt="dot" class="dot" /><br />';
+  for (var i=0; i < noOfPages; i++) {
+    var img = $('<img />');
+    img.attr('src', DOT_DEFAULT).attr('alt', 'o').addClass('dot').data("index", i);
+    img.click(function() {
+      var index = $(this).data("index");
+      var page = $('.page').eq(index);
+      var top = page.offset().top - 20;
+      top = top < 0 ? 0: top;
+      $('html, body').animate({'scrollTop': top}, 'slow');
+      selectDot($(this));
+      });
+    img.hover(function() {
+      if (!$(this).hasClass('selectedDot')) {
+        $(this).attr('src', DOT_HOVER);
+        }
+      }, function() {
+      if ($(this).data("index") == currentPage) {
+        $(this).attr("src", DOT_CURRENT);
+        } else {
+        $(this).attr('src', DOT_DEFAULT);
+        }
+      });
+    var d = $('<div />').addClass('dotDiv');
+    d.append(img);
+    $('#scrollDots').append(d);
+    previousScrollTop = 0;
+    }
+
+  $(document).scroll(documentScroll);
+  documentScroll();
+  $('#scrollDots').append('<br />');
+
+  function documentScroll() {
+    var scrollTop = $(document).scrollTop();
+    var pageNo = Math.floor((scrollTop + OFFSET_VAL) / PAGE_HEIGHT);
+    if (pageNo < 0) pageNo = 0;
+    if (pageNo != currentPage) {
+      selectDot($('.dot').eq(pageNo));
+      }
+    }
+
+
+  function selectDot(e) {
+    $('.selectedDot').attr('src', DOT_DEFAULT).removeClass('selectedDot');
+    e.attr("src", DOT_CURRENT).addClass("selectedDot");
+    currentPage = e.data("index");
+    }
+  }
+
+