Commit 99d119e3 authored by Alexandre Leray's avatar Alexandre Leray
Browse files

Prepare AA to include jquery.tiling.js

parent e80d3c06
$(document).ready(function () {
// SIDEBAR
(function () {
var c = $("#sidebar_content");
var stayOpen = c.is(":visible");
$("#sidebar_content").resizable({
handles: "e"
});
$("#sidebar_toggle").click(function () {
if (!c.is(":visible")) {
c.show();
stayOpen = true;
} else {
c.hide();
stayOpen = false;
}
});
var hider = $.delayedaction(function () {
c.hide();
}, 500);
$("#sidebar_rollover").mouseover(function () {
if (!c.is(":visible")) {
c.show();
}
}).mouseout(function () {
if (!stayOpen) hider.do_soon();
});
c.mouseover(function () {
hider.cancel();
}).mouseout(function () {
if (!stayOpen) hider.do_soon();
});
})();
/* TAGSTOOL */
/* Show/Hide tags of a tag category */
function activate_tagstool() {
$("#tagstool .tagcatname").each(function () {
var tagcat = $(this).closest(".tagcat");
var body = $(".tagcatbody", tagcat);
$(this).toggle(
function(){ body.show('fast');},
function(){ body.hide('fast');}
);
});
// this makes sure that the tags are draggable (drag & drop into an annotation edit textarea)
$("#tagstool a.tagtool").each(function () {
$(this).draggable({helper: 'clone'});
});
}
activate_tagstool();
$(".tagtool").mouseover(function(){
$('.tagtooledit', $(this)).css('display', 'inline');
});
$(".tagtool").mouseout(function(){
$('.tagtooledit', $(this)).css('display', 'none');
});
});
......@@ -522,11 +522,11 @@ add_delegate((function () {
var videotag = null;
// Init
var tagstr = "<video";
var tagstr = "<audio";
if (o.controls) { tagstr += " controls"; }
if (o.autoplay) { tagstr += " autoplay"; }
if (o.autobuffer) { tagstr += " autobuffer"; }
tagstr += ">browser has no video tag support</video>";
tagstr += ">browser has no video tag support</audio>";
videotag = $(tagstr).attr("src", o.src).appendTo(media.element).get(0);
/* Bind events */
......
$(document).ready(function () {
// SARMA
// Calculate column width according to number of annotations
box_nb = $("div.aa-playlist").length;
width = 100/box_nb;
$("div.aa-playlist").css("width", width + "%");
// Changes the font-size according to the column size
width_px = parseInt($("div.aa-playlist").css("width"));
fontsize = width_px/20;
$("div.aa-playlist-section").css("fontSize", fontsize + "px");
$("div.aa-playlist-section").css("lineHeight", "1.2em");
// Header fades out when mouse doesn't move for X sec.
//$(window).mousemove(function(){
//$("#header, #resource_header").stop().show().css('opacity',1).animate({
//opacity: 0
//}, 5000);
//});
// SARMA END
});
......@@ -14,9 +14,23 @@ a:hover {
}
/* HEADER */
button#bt_show_header {
position: fixed;
top: 2em;
right: 2em;
z-index: 99;
}
div#header {
background-color: white;
position: static;
position: fixed;
z-index: 100;
top: 2em;
left: 2em;
right: 2em;
bottom: 2em;
display: none;
border: 1px solid black;
}
div#header input[type=text] {
border: 1px solid black;
......@@ -30,34 +44,34 @@ div#player {
float: left;
}
/* PLAYER */
iframe {
border: none !important;
height: 100px !important;
width: 98% !important;
padding: 0 1%;
margin-top: -100px;
}
/*iframe {*/
/*border: none !important;*/
/*height: 100px !important;*/
/*width: 98% !important;*/
/*padding: 0 1%;*/
/*margin-top: -100px;*/
/*}*/
/* PLAYGROUND */
div#scrollable {
padding: 0 2em;
width: auto;
right: 0;
}
div#pasteboard {
height: 100%;
width: 100%;
position: static;
}
div#pasteboard_contents {
top: 0;
left: 0;
position: static;
height: 100%;
}
div#resource_annotations {
height: 100%;
}
/*div#scrollable { */
/*padding: 0 2em;*/
/*width: auto;*/
/*right: 0;*/
/*}*/
/*div#pasteboard {*/
/*height: 100%;*/
/*width: 100%;*/
/*position: static;*/
/*}*/
/*div#pasteboard_contents {*/
/*top: 0;*/
/*left: 0;*/
/*position: static;*/
/*height: 100%;*/
/*}*/
/*div#resource_annotations {*/
/*height: 100%;*/
/*}*/
/* SIDEBAR */
div#sidebar {
......@@ -77,34 +91,33 @@ div#tagtools {
/* ANNOTATION */
.aa-playlist {
position: static !important;
float: left;
height: 100% !important;
border: none;
}
.aa-playlist-play-menu {
position: relative;
margin-top: -18px;
}
.aa-playlist-play-menu:hover {
display: block !important;
/*position: static !important;*/
/*float: left;*/
/*height: 100% !important;*/
border: 1px solid black;
}
/*.aa-playlist-play-menu {*/
/*position: relative;*/
/*margin-top: -18px;*/
/*}*/
/*.aa-playlist-play-menu:hover {*/
/*display: block !important;*/
/*}*/
.aa-playlist-edit-menu {
position: relative;
margin-top: -16px;
}
/*.aa-playlist-edit-menu {*/
/*position: relative;*/
/*margin-top: -16px;*/
/*}*/
.aa-playlist-display {
font-size: 20px;
line-height: 22px;
padding: 18px;
background-color: white !important;
}
.aa-playlist-section {
border-top: none !important;
border-bottom: none !important;
padding: 12px 0;
padding: 12px 18px;
}
.aa-playlist-section-active {
background-color: #EEE;
......@@ -114,5 +127,5 @@ div#tagtools {
color: DarkGray;
}
.aa-playlist-edit {
border: 1px solid SpringGreen;
/*border: 1px solid SpringGreen;*/
}
{% load markup %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:dcterms="http://purl.org/dc/terms/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:vcard="http://www.w3.org/2006/vcard/ns#"
xmlns:biografr="http://biografr.com/ontology#"
xmlns:aa="http://activearchives.org/terms#"
>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>{% block title %}Oral Site{% endblock %}</title>
<!--JQUERY-->
<link rel="stylesheet" href="{{MEDIA_URL}}aabrowser/lib/jquery/jquery-ui.css" type="text/css" charset="utf-8" />
<script src="{{MEDIA_URL}}aabrowser/lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/lib/jquery/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<!--RDFQUERY-->
<script src="{{MEDIA_URL}}aabrowser/lib/rdfquery/jquery.rdfquery.rules.min-1.0.js" type="text/javascript" charset="utf-8"></script>
<!--FLOWPLAYER-->
<script src="{{MEDIA_URL}}aabrowser/lib/swfobject/swfobject.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/lib/flowplayer/flowplayer.js" type="text/javascript" charset="utf-8"> </script>
<link rel="flowplayer" href="{{MEDIA_URL}}aabrowser/lib/flowplayer/flowplayer.swf" />
<link rel="flowplayeraudio" href="{{MEDIA_URL}}aabrowser/lib/flowplayer/flowplayer.audio.swf" />
<link rel="flowplayerpseudostreaming" href="{{MEDIA_URL}}aabrowser/lib/flowplayer/flowplayer.pseudostreaming.swf" />
<!--OTHER LIB-->
<script src="{{MEDIA_URL}}aabrowser/lib/shortcut.js" type="text/javascript" charset="utf-8"></script>
<!--AA-->
<script src="{{MEDIA_URL}}aabrowser/jquery.caret.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.log.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.timecode.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.delayedaction.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.timeline.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.animatedsetter.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.ui.autoscrollable.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.ui.timedtext.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.ui.playable.js" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/jquery.ui.playlist.js" type="text/javascript" charset="utf-8"></script>
<!--PAGE SPECIFIC JS-->
<script src="{{ MEDIA_URL }}aabrowser/aa.base.js" type="text/javascript" charset="utf-8"></script>
<!--CSS-->
<link rel="stylesheet" href="{{MEDIA_URL}}aabrowser/jquery.aascrubber.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="{{MEDIA_URL}}aabrowser/styles.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="{{MEDIA_URL}}sarma.css" type="text/css" charset="utf-8" />
{% block extrahead %}{% endblock extrahead %}
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('button#bt_show_header').click(function(e) {
$('div#header').slideDown('slow');
});
$('button#bt_hide_header').click(function(e) {
$('div#header').slideUp('slow');
});
});
</script>
</head>
<body>
<!--<div id="sidebar">-->
<!--<div id="sidebar_content">-->
<!--{% block sidebar %}-->
<!--{% include 'sidebar.html' %}-->
<!--{% endblock sidebar %}-->
<!--{% block tagstool %}-->
<!--{% include 'tagstool.html' %}-->
<!--{% endblock tagstool %}-->
<!--</div>[>.content<]-->
<!--<div id="sidebar_rollover"></div>-->
<!--<div id="sidebar_toggle"></div>-->
<!--</div>[>sidebar<]-->
<button type="button" id="bt_show_header">+</button>
<div id="header">
<table>
<tr>
<!-- Add-resource bar -->
<td id='url-bar'>
<form method="post" action="{% url aa-add %}">
{% csrf_token %}
<div id="aa_add_input">
<input type="text" name="s" value="{% block searchbar %}{{ navurl }}{% endblock %}" />
</div>
<div id="aa_add_submit">
<input type="submit" name="_submit" value="ok" />
</div>
{% if results %}
<div>result: {{ resource }} {{ status }}</div>
{% endif %}
{% if message %}
<div class="message">{{ message|textile }}</div>
{% endif %}
</form>
</td>
{% block tools %}{% endblock %}
<td>
<button type="button" id="bt_hide_header">-</button>
</td>
</tr>
</table>
{% block extra-header %}{% endblock %}
</div>
<div id="scrollable">
{% block main %}
<div id="content">
{% block header %}{% endblock header %}
{% block list %}
{% endblock list %}
</div>
{% endblock %}
</div>
{% block fixed %}{% endblock %}
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>{%block title%}active archives{%endblock%}</title>
<link rel="stylesheet" href="{{MEDIA_URL}}aabrowser/lib/jquery/jquery-ui.css" type="text/css" charset="utf-8" />
<script src="{{MEDIA_URL}}aabrowser/lib/jquery/jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}aabrowser/lib/jquery/jquery-ui.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<link rel="stylesheet" href="{{MEDIA_URL}}aabrowser/styles.css" type="text/css" charset="utf-8" />
{%block extrahead%}
{%endblock%}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
{% extends "base.html" %}
{% block body %}
<h1>File uploaded</h1>
<form action="{%url aa-add %}" method="post">{% csrf_token %}
<input type="submit" value="add to archive" />
<input type="hidden" name="s" value="{{ file_url }}" />
</form>
{% endblock %}
{% extends "aa_base.html" %}
{% load aamarkup %}
{% load markup %}
{% load thumbnail %}
{% block body %}
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function () {
$("#aa_add_input").focus();
});
// ]]>
</script>
{% endblock %}
{% load aamarkup %}{% for section in sections %}{% if section.start != None %}{{section.start}} {%if section.end != None%}{{section.end}}{%endif%}{%endif%} {{section.obj.source|tosingleline|safe}}
{% endfor %}
{% load aamarkup %}
{% load markup %}
<div class="aa-playlist" data-resource="{{annotation.resource.url}}" data-id="{{annotation.id}}" style="top: {{annotation.top}}px; left: {{annotation.left}}px; width: {{annotation.width}}px; height: {{annotation.height}}px">
{% for section in annotation.ssections %}
<div class="aa-playlist-section" data-id="{{section.id}}" data-url="{%if section.resource %}{{section.resource.url}}{%else%}{{section.annotation.resource.url}}{%endif%}"{%if section.resource%} data-edit-url="{{section.resource.get_absolute_url}}"{%endif%}{%if section.start != None %} data-start="{{section.start}}"{%endif%}{%if section.end %} data-end="{{section.end}}"{%endif%}>
{{section.source|aalinks|textile}}
<textarea class="aa-playlist-section-source">{{section.source}}</textarea>
</div>
{% endfor %}
</div>
{% load aamarkup %}{% for section in sections %}{{forloop.counter}}
{% if section.start != None %}{{section.start|secs2srttimecode}} --> {%if section.end != None%}{{section.end|secs2srttimecode}}{%endif%}{%endif%}
{{section.obj.source|safe}}
{% endfor %}
{% extends "aa_simple_base.html" %}
{% block body %}
<h2>Import Audacity Labels</h2>
<div>Attach to resource: {{a.resource.url}}</div>
<form enctype="multipart/form-data" method="post" action="">{% csrf_token %}
{{form.as_table}}
<div>
<input type="submit" value="import" />
</div>
</form>
{% endblock %}
{% extends "resource.html" %}
{% load markup %}
{% load aamarkup %}
{% block resourcecontent %}
<div id="player"></div>
{% endblock %}
{% block resource_header %}
{% endblock resource_header %}
{% block annotations %}
{{ block.super }}
<div class="aa-playlist" data-resource="{{resource.url}}" style="top: 50px; left: 50px; width: 320px; height: 400px">
<div class="aa-playlist-section" data-url="{{resource.url}}">
<h2>Automatic playlist</h2>
<textarea class="aa-playlist-section-source"></textarea>
</div>
{% for section in playlist_sections %}
<div class="aa-playlist-section" data-url="{{section.aresource.url}}" data-edit-url="{{section.aresource.get_absolute_url}}"{%if section.start != None %} data-start="{{section.start}}"{%endif%}{%if section.end %} data-end="{{section.end}}"{%endif%}>
{{section.source|aalinks|textile}}
<textarea class="aa-playlist-section-source">{{section.source}}</textarea>
</div>
{% endfor %}
</div>
{% endblock annotations %}
{% extends "aa_base.html" %}
{% load markup %}
{% load aamarkup %}
{% load thumbnail %}
{%block extrahead %}
<script type="text/javascript" charset="utf-8">
var RESOURCE_INFO_URL = "{% url aabrowser.views.resource_info %}";
var RESOURCE_VIEW_URL = "{% url aabrowser.views.resource resource.id %}";
var ANNOTATION_URL_TEMPLATE = "{% url aabrowser.views.annotation 0 %}";
var aa = {};
(function ($) {
$(function () {
// Keyboard shortcuts
shortcut.add("Ctrl+Shift+Down", function () {
var ct = $("#player").playable("getCurrentTime");
$("body").trigger("pastetimecode", ct);
});
shortcut.add("Ctrl+Shift+Left", function () {
var ct = $("#player").playable("getCurrentTime");
$("#player").playable("seek", Math.max(0, ct-5));
});
shortcut.add("Ctrl+Shift+Right", function () {
var ct = $("#player").playable("getCurrentTime");
$("#player").playable("seek", ct+5);
});
shortcut.add("Ctrl+Shift+Up", function () {
$("#player").playable("toggle");
});
function load_annotation (annotation_id) {
// console.log("load_annotation", annotation_id, ANNOTATION_URL_TEMPLATE);
var tmp = $("<div></div>").appendTo("#resource_annotations");
var url = ANNOTATION_URL_TEMPLATE.replace(/\/0\//, "/"+annotation_id+"/");
tmp.load(url, function () {
// $.log("postload", tmp);
var a = $(".aa-playlist", tmp);
// remove from tmp
a.appendTo("#resource_annotations");
activate_annotation(a, annotation_id);
tmp.remove();
});
}
//$(document).bind("play", function (evt, url, start, end) {
// console.log("document.play", evt, url, start, end);
//});
var playInfoByURL = {};
function play (url, start, end, endedcallback) {
info = playInfoByURL[url];
if (info === undefined) {
$.getJSON(RESOURCE_INFO_URL, {url: url}, function (data) {
playInfoByURL[url] = data;
play(url, start, end, endedcallback);
});
} else {
// console.log("play", url, start, end);
$("#player").playable({
src: info.cacheurl,
start: start,
end: end,
delegate: info.delegate,
autoplay: true,
controls: {
autoHide: true,
height: 24,
backgroundColor: "#FFFFFF",
buttonColor: "#000000",
buttonOverColor: "#999999",
timeFontSize: 9,
timeColor: "#000000",
timeSeparator: "/",
durationColor: "#000000",
fullscreen: false,
},
ended: endedcallback,
timeupdate: function (evt, params) {
$(".aa-playlist").playlist("doTimeUpdate", params.time, url);
}
});
}
}
$(document).bind("playrequest", function (evt, url, start, end, endedcallback) {
// console.log("PLAYREQUEST");
play(url, start, end, endedcallback);
});
/* [EDIT] button */
$("#edit_mode_button").click(function(){ $(this).toggleClass('active'); });
/* Evt. start the player (to make the resource appear) */
$("#player[data-url]").each(function () {
play($(this).attr("data-url"));
});