this.model
.addObserver(this, 'data', this.modelDataChanged.bind(this))
.addObserver(this, 'state', this.modelStateChanged.bind(this));
-
- $('.htmlview', this.element).html(this.model.get('data'));
+
this.$menuTemplate = $(render_template('html-view-frag-menu-template', this));
-
this.modelStateChanged('state', this.model.get('state'));
+ this.modelDataChanged('data', this.model.get('data'));
+
this.model.load();
this.currentOpen = null;
+ this.currentFocused = null;
this.themeBoxes = [];
},
/* upgrade editable elements */
$("*[x-editable]").each(function() {
$(this).append( self.$menuTemplate.clone() );
- });
-
- var n = 5001;
+ });
var doc_base = $('.htmlview .utwor', this.element);
console.log('click:', event, event.ctrlKey, event.target);
var $e = $(event.target);
+ if($e.hasClass('annotation'))
+ {
+ if(this.currentOpen) return false;
+
+ var $p = $e.parent();
+ if(this.currentFocused)
+ {
+ console.log(this.currentFocused, $p);
+ if($p[0] == this.currentFocused[0]) {
+ console.log('unfocus of current');
+ this.unfocusAnnotation();
+ return false;
+ }
+
+ console.log('switch unfocus');
+ this.unfocusAnnotation();
+ }
+
+ this.focusAnnotation($p);
+ return false;
+ }
+
+ /*
+ * Clicking outside of focused area doesn't unfocus by default
+ * - this greatly simplifies the whole click check
+ */
+
+ /* other buttons */
if($e.hasClass('edit-button'))
this.openForEdit( this.editableFor($e) );
this.closeWithSave( this.editableFor($e) );
if($e.hasClass('reject-button'))
- this.closeWithoutSave( this.editableFor($e) );
+ this.closeWithoutSave( this.editableFor($e) );
+ },
+
+ unfocusAnnotation: function()
+ {
+ if(!this.currentFocused)
+ {
+ console.log('Redundant unfocus');
+ return false;
+ }
+
+ if(this.currentOpen
+ && this.currentOpen.is("*[x-annotation-box]")
+ && this.currentOpen.parent()[0] == this.currentFocused[0])
+ {
+ console.log("Can't unfocus open box");
+ return false;
+ }
+
+ var $box = $("*[x-annotation-box]", this.currentFocused);
+ $box.css({'display': 'none'});
+ // this.currentFocused.removeAttr('x-focused');
+ // this.currentFocused.hide();
+ this.currentFocused = null;
+ },
+
+ focusAnnotation: function($e) {
+ this.currentFocused = $e;
+ var $box = $("*[x-annotation-box]", $e);
+ $box.css({'display': 'block'});
+
+ // $e.attr('x-focused', 'focused');
},
closeWithSave: function($e) {
},
renderPart: function($e, html) {
- $e.html(html);
- $e.append( this.$menuTemplate.clone() );
+ // exceptions aren't good, but I don't have a better idea right now
+ if($e.attr('x-annotation-box')) {
+ // replace the whole annotation
+ var $p = $e.parent();
+ $p.html(html);
+ var $box = $('*[x-annotation-box]', $p);
+ $box.append( this.$menuTemplate.clone() );
+
+ if(this.currentFocused && $p[0] == this.currentFocused[0])
+ {
+ this.currentFocused = $p;
+ $box.css({'display': 'block'});
+ }
+
+ return;
+ }
+
+ $e.html(html);
+ $e.append( this.$menuTemplate.clone() );
},
editableFor: function($button)
if(!$e.attr('x-editable'))
throw Exception("Click outside of editable")
+ console.log("Trigger", $button, " yields editable: ", $e);
return $e;
},
openForEdit: function($origin)
{
if(this.currentOpen && this.currentOpen != $origin) {
- this.closeWithSave(this.currentOpen);
-
+ this.closeWithSave(this.currentOpen);
}
-
- // start edition on this node
- var $overlay = $('<div class="html-editarea"><textarea></textarea></div>');
-
+
var x = $origin[0].offsetLeft;
var y = $origin[0].offsetTop;
var w = $origin.outerWidth();
var h = $origin.innerHeight();
-
- $overlay.css({position: 'absolute', height: h, left: x, top: y, width: '95%'});
-
- $origin.offsetParent().append($overlay);
- $origin.data('edit-overlay', $overlay);
-
- this.model.getXMLPart($origin, function(path, data) {
- $('textarea', $overlay).val(data);
- });
- this.currentOpen = $origin;
- $origin.attr('x-open', 'open');
-
+ console.log("Editable:", $origin, " offsetParent:", $origin[0].offsetParent);
+ console.log("Dimensions: ", x, y, w , h);
+
+ // start edition on this node
+ var $overlay = $('<div class="html-editarea"><textarea></textarea></div>');
+ $overlay.css({position: 'absolute', height: h, left: x, top: y, width: '95%'});
+ $($origin[0].offsetParent).append($overlay);
+ $origin.data('edit-overlay', $overlay);
+
+ this.model.getXMLPart($origin, function(path, data) {
+ $('textarea', $overlay).val(data);
+ });
+
+ if($origin.is("*[x-annotation-box]"))
+ {
+ var $b = $origin.parent();
+ if(this.currentFocused) {
+ // if some other is focused
+ if($b[0] != this.currentFocused[0]) {
+ this.unfocusAnnotation();
+ this.focusAnnotation($b);
+ }
+ // already focues
+ }
+ else { // nothing was focused
+ this.focusAnnotation($b);
+ }
+ }
+ else { // this item is not focusable
+ if(this.currentFocused) this.unfocusAnnotation();
+ }
+
+ this.currentOpen = $origin;
+ $origin.attr('x-open', 'open');
+
return false;
}