.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.model.load();
+
+ this.currentOpen = null;
+ this.currentFocused = null;
+ this.themeBoxes = [];
},
modelDataChanged: function(property, value) {
$('.htmlview', this.element).html(value);
this.updatePrintLink();
+ var self = this;
+
+ /* upgrade editable elements */
+ $("*[x-editable]").each(function() {
+ $(this).append( self.$menuTemplate.clone() );
+ });
+
+ var n = 5001;
+
+ var doc_base = $('.htmlview .utwor', this.element);
+
+ /* mark themes */
+ $(".theme-ref").each(function() {
+ var id = $(this).attr('x-theme-class');
+
+ var end = $("span.theme-end[x-theme-class = " + id+"]");
+ var begin = $("span.theme-begin[x-theme-class = " + id+"]");
+
+ var h = $(this).outerHeight();
+
+ h = Math.max(h, end.offset().top - begin.offset().top);
+ $(this).css('height', h);
+ });
},
updatePrintLink: function() {
if (value == 'synced' || value == 'dirty') {
this.unfreeze();
} else if (value == 'unsynced') {
+ if(this.currentOpen) this.closeWithoutSave(this.currentOpen);
this.freeze('Niezsynchronizowany...');
} else if (value == 'loading') {
this.freeze('Ćadowanie...');
this.updatePrintLink();
this.element.bind('click', this.itemClicked.bind(this));
+ // this.element.bind('mouseover', this.itemHover.bind(this));
},
reload: function() {
{
var self = this;
- console.log('click:', event, event.ctrlKey, event.target);
- var editableContent = null;
+ console.log('click:', event, event.ctrlKey, event.target);
var $e = $(event.target);
- var n = 0;
+ if($e.hasClass('annotation'))
+ {
+ var $box = $e.parent();
+
+ if(this.currentFocused)
+ {
+ if($box[0] == this.currentFocused[0]) {
+ console.log('unfocus of current');
+ this.unfocusAnnotation();
+ return false;
+ }
+
+ console.log('switch unfocus');
+ this.unfocusAnnotation();
+ }
+
+ this.focusAnnotation($box);
+ 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) );
+
+ if($e.hasClass('accept-button'))
+ this.closeWithSave( this.editableFor($e) );
+
+ if($e.hasClass('reject-button'))
+ this.closeWithoutSave( this.editableFor($e) );
+ },
+
+ unfocusAnnotation: function() {
+ if(!this.currentFocused)
+ return false;
+
+ if(this.currentOpen
+ && this.currentOpen.is("*[x-annotation-box]")
+ && this.currentOpen.parent()[0] == this.currentFocused[0])
+ return false;
+
+ this.currentFocused.removeAttr('x-focused');
+ this.currentFocused = null;
+ },
+
+ focusAnnotation: function($e) {
+ this.currentFocused = $e;
+ $e.attr('x-focused', 'focused');
+ },
- while( ($e[0] != this.element[0]) && !($e.attr('wl2o:editable'))
- && n < 50)
+ closeWithSave: function($e) {
+ var $edit = $e.data('edit-overlay');
+ var newText = $('textarea', $edit).val();
+
+ this.model.putXMLPart($e, newText, function($e, html) {
+ this.renderPart($e, html);
+ $edit.remove();
+ $e.removeAttr('x-open');
+ }.bind(this) );
+ this.currentOpen = null;
+ },
+
+ closeWithoutSave: function($e) {
+ var $edit = $e.data('edit-overlay');
+ $edit.remove();
+ $e.removeAttr('x-open');
+ this.currentOpen = null;
+ },
+
+ renderPart: function($e, html) {
+ $e.html(html);
+ $e.append( this.$menuTemplate.clone() );
+ },
+
+ editableFor: function($button)
+ {
+ var $e = $button;
+ var n = 0;
+
+ while( ($e[0] != this.element[0]) && !($e.attr('x-editable')) && n < 50)
{
// console.log($e, $e.parent(), this.element);
$e = $e.parent();
n += 1;
}
-
- if(!$e.attr('wl2o:editable'))
- return true;
-
- // start edition on this node
-
- var $overlay = $(
- '<div class="html-editarea">\n\
- <p class="html-editarea-toolbar">\n\
- <button class="html-editarea-save-button" type="button">Zapisz</button>\n\
- <button class="html-editarea-cancel-button" type="button">Anuluj</button>\n\
- </p>\n\
- <textarea></textarea>\n\
- </div>');
-
- var x = $e[0].offsetLeft;
- var y = $e[0].offsetTop;
- var w = $e.outerWidth();
- var h = $e.innerHeight();
- $overlay.css({position: 'absolute', height: h, left: "5%", top: y, width: "90%"});
- $e.offsetParent().append($overlay);
-
- // load the original XML content
- console.log($e, $e.offsetParent(), $overlay);
-
- $('.html-editarea-cancel-button', $overlay).click(function() {
- $overlay.remove();
- });
+ if(!$e.attr('x-editable'))
+ throw Exception("Click outside of editable")
- $('.html-editarea-save-button', $overlay).click(function() {
- $overlay.remove();
+ console.log("Trigger", $button, " yields editable: ", $e);
+ return $e;
+ },
- // put the part back to the model
- self.model.putXMLPart($e, $('textarea', $overlay).val());
- });
+ openForEdit: function($origin)
+ {
+ if(this.currentOpen && this.currentOpen != $origin) {
+ this.closeWithSave(this.currentOpen);
+ }
+
+ var x = $origin[0].offsetLeft;
+ var y = $origin[0].offsetTop;
+ var w = $origin.outerWidth();
+ var h = $origin.innerHeight();
- $('textarea', $overlay).focus(function() {
- $overlay.css('z-index', 3000);
- }).blur(function() {
- $overlay.css('z-index', 2000);
- });
+ 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($e, function(path, data) {
+ this.model.getXMLPart($origin, function(path, data) {
$('textarea', $overlay).val(data);
});
-
+
+ this.currentOpen = $origin;
+ $origin.attr('x-open', 'open');
+
+ if($origin.is("*[x-annotation-box]"))
+ {
+ var $b = $origin.parent();
+ if(this.currentFocused) {
+ if($b[0] != this.currentFocused[0])
+ this.unfocusAnnotation();
+ }
+
+ this.focusAnnotation($origin);
+ }
+ else {
+ if(this.currentFocused) this.unfocusAnnotation();
+ }
+
return false;
}