added articleMockup.js to tree
This commit is contained in:
parent
a64bfc5239
commit
f4b7a962c7
|
@ -461,7 +461,7 @@ def view_page(request, id):
|
||||||
"""
|
"""
|
||||||
id = int(id)
|
id = int(id)
|
||||||
page = Page.objects.get(pk=id)
|
page = Page.objects.get(pk=id)
|
||||||
d = page.get_dict()
|
d = page.get_dict(1)
|
||||||
return render_to_response("view_page.html", d)
|
return render_to_response("view_page.html", d)
|
||||||
|
|
||||||
def view_article(request, id):
|
def view_article(request, id):
|
||||||
|
|
127
edgware/static/js/articleMockup.js
Normal file
127
edgware/static/js/articleMockup.js
Normal file
|
@ -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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user