WIP - adding widget to create annotations.
--- a/src/css/LdtPlayer.css Wed Dec 28 17:07:20 2011 +0100
+++ b/src/css/LdtPlayer.css Wed Dec 28 17:07:45 2011 +0100
@@ -568,3 +568,40 @@
background:url('imgs/right_handle.gif') no-repeat scroll transparent;
z-index: 2;
}
+
+.Ldt-createAnnotationWidget {
+ font-size: 12px;
+ font-family: "Arial", "Verdana", "sans-serif";
+ background-color:#eeeeee;
+ background:url('imgs/wire_pattern.png') repeat scroll transparent ;
+ border: 1px solid #b6b8b8;
+}
+
+.Ldt-createAnnotation-DoubleBorder {
+ border: 1px solid white;
+ overflow: auto;
+ padding: 7px;
+}
+
+.Ldt-createAnnotation-Title {
+ font-size: 12pt;
+ color : #0068c4;
+ float: left;
+ margin-right: 5px;
+}
+
+.Ldt-createAnnotation-TimeFrame {
+ font-size: 12pt;
+ color : #ff5589;
+ float: left;
+}
+
+.Ldt-createAnnotation-userAvatar {
+ float: right;
+}
+
+.Ldt-createAnnotation-Description {
+ width: 470px;
+ height: 56px;
+ float: left;
+}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/createAnnotationWidget.js Wed Dec 28 17:07:45 2011 +0100
@@ -0,0 +1,48 @@
+IriSP.createAnnotationWidget = function(Popcorn, config, Serializer) {
+ IriSP.Widget.call(this, Popcorn, config, Serializer);
+ this._hidden = true;
+};
+
+
+IriSP.createAnnotationWidget.prototype = new IriSP.Widget();
+
+IriSP.createAnnotationWidget.prototype.clear = function() {
+ this.selector.find(".Ldt-SaTitle").text("");
+ this.selector.find(".Ldt-SaDescription").text("");
+ this.selector.find(".Ldt-SaKeywordText").text("");
+};
+
+IriSP.createAnnotationWidget.prototype.showWidget = function() {
+ this.layoutManager.slice.after("ArrowWidget")
+ .before("createAnnotationWidget")
+ .jQuerySelector().hide();
+ this.selector.show();
+};
+
+IriSP.createAnnotationWidget.prototype.hideWidget = function() {
+ this.selector.hide();
+ this.layoutManager.slice.after("ArrowWidget")
+ .before("createAnnotationWidget")
+ .jQuerySelector().show();
+};
+
+IriSP.createAnnotationWidget.prototype.draw = function() {
+ var _this = this;
+
+ var annotationMarkup = IriSP.templToHTML(IriSP.createAnnotationWidget_template);
+ this.selector.append(annotationMarkup);
+ this.selector.hide();
+
+ this._Popcorn.listen("IriSP.PlayerWidget.AnnotateButton.clicked",
+ IriSP.wrap(this, this.handleAnnotateSignal));
+};
+
+IriSP.createAnnotationWidget.prototype.handleAnnotateSignal = function() {
+ if (this._hidden == false) {
+ this.selector.hide();
+ this._hidden = true;
+ } else {
+ this.selector.show();
+ this._hidden = false;
+ }
+};
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/createAnnotationWidget.html Wed Dec 28 17:07:45 2011 +0100
@@ -0,0 +1,21 @@
+{{! template for the annotation creation widget }}
+<div class='Ldt-createAnnotationWidget'>
+ <!-- ugly div because we want to have a double border -->
+ <div class='Ldt-createAnnotation-DoubleBorder'>
+ <div style='margin-bottom: 7px; overflow: auto;'>
+ <div class='Ldt-createAnnotation-Title'>310</div>
+ <div class='Ldt-createAnnotation-TimeFrame'>(03:10-07:45)</div>
+ </div>
+
+ <div style='overflow: auto;'>
+ <textarea class='Ldt-createAnnotation-Description'></textarea>
+ <img src='{{img_dir}}/profile_arrow.png' class='Ldt-createAnnotation-profileArrow'></img>
+ <div class='Ldt-createAnnotation-userAvatar'>
+ <img class='Ldt-createAnnotation-userAvatar'src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img>
+ </div>
+ </div>
+
+ <div class='Ldt-createAnnotation-keywords'>Add keywords : </div>
+ <div class='Ldt-createAnnotation-submitButton'>Submit</div>
+ </div>
+</div>
--- a/test/integration/polemic.htm Wed Dec 28 17:07:20 2011 +0100
+++ b/test/integration/polemic.htm Wed Dec 28 17:07:45 2011 +0100
@@ -108,6 +108,12 @@
format:'cinelab',
src:'polemic_fr.json',
type:'json'}
+ },
+ {type: "createAnnotationWidget",
+ metadata:{
+ format:'cinelab',
+ src:'polemic_fr.json',
+ type:'json'}
}
]
},