X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/5dade46d5e6a2f767f33009ffd616fdae94f3c0a..f0e275b6eeffa2bee768e42ba5528308f81af228:/platforma/static/js/views/html.js diff --git a/platforma/static/js/views/html.js b/platforma/static/js/views/html.js index 18ab0295..97db6f07 100755 --- a/platforma/static/js/views/html.js +++ b/platforma/static/js/views/html.js @@ -12,15 +12,16 @@ var HTMLView = View.extend({ 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 = []; }, @@ -32,9 +33,7 @@ var HTMLView = View.extend({ /* upgrade editable elements */ $("*[x-editable]").each(function() { $(this).append( self.$menuTemplate.clone() ); - }); - - var n = 5001; + }); var doc_base = $('.htmlview .utwor', this.element); @@ -118,6 +117,34 @@ var HTMLView = View.extend({ 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) ); @@ -125,7 +152,38 @@ var HTMLView = View.extend({ 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) { @@ -148,8 +206,25 @@ var HTMLView = View.extend({ }, 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) @@ -167,37 +242,57 @@ var HTMLView = View.extend({ 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 = $('
'); - + 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 = $(''); + $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; }