X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/f0e275b6eeffa2bee768e42ba5528308f81af228..061f517181630ee982c33aee63965b18965fd5aa:/platforma/static/js/views/html.js?ds=inline diff --git a/platforma/static/js/views/html.js b/platforma/static/js/views/html.js index 97db6f07..0b1234ce 100755 --- a/platforma/static/js/views/html.js +++ b/platforma/static/js/views/html.js @@ -6,15 +6,14 @@ var HTMLView = View.extend({ template: 'html-view-template', init: function(element, model, parent, template) { - this._super(element, model, template); - this.parent = parent; + var submodel = model.contentModels['html']; + this._super(element, submodel, template); + this.parent = parent; this.model - .addObserver(this, 'data', this.modelDataChanged.bind(this)) + .addObserver(this, 'data', this.modelDataChanged.bind(this)) .addObserver(this, 'state', this.modelStateChanged.bind(this)); - - - this.$menuTemplate = $(render_template('html-view-frag-menu-template', this)); + this.modelStateChanged('state', this.model.get('state')); this.modelDataChanged('data', this.model.get('data')); @@ -25,20 +24,19 @@ var HTMLView = View.extend({ this.themeBoxes = []; }, - modelDataChanged: function(property, value) { - $('.htmlview', this.element).html(value); + modelDataChanged: function(property, value) + { + if(!value) return; + + // the xml model changed + var container = $('.htmlview', this.element); + container.empty(); + container.append(value); + this.updatePrintLink(); - var self = this; - - /* upgrade editable elements */ - $("*[x-editable]").each(function() { - $(this).append( self.$menuTemplate.clone() ); - }); - - var doc_base = $('.htmlview .utwor', this.element); - - /* mark themes */ - $(".theme-ref").each(function() { + + /* mark themes */ + /* $(".theme-ref", this.$docbase).each(function() { var id = $(this).attr('x-theme-class'); var end = $("span.theme-end[x-theme-class = " + id+"]"); @@ -48,7 +46,7 @@ var HTMLView = View.extend({ h = Math.max(h, end.offset().top - begin.offset().top); $(this).css('height', h); - }); + }); */ }, updatePrintLink: function() { @@ -72,33 +70,77 @@ var HTMLView = View.extend({ } else if (value == 'error') { this.freeze(this.model.get('error')); $('.xml-editor-ref', this.overlay).click( - function(event) { - console.log("Sending scroll rq.", this); - try { - var href = $(this).attr('href').split('-'); - var line = parseInt(href[1]); - var column = parseInt(href[2]); + function(event) { + console.log("Sending scroll rq.", this); + try { + var href = $(this).attr('href').split('-'); + var line = parseInt(href[1]); + var column = parseInt(href[2]); - $(document).trigger('xml-scroll-request', {line:line, column:column}); - } catch(e) { - console.log(e); - } + $(document).trigger('xml-scroll-request', { + line:line, + column:column + }); + } catch(e) { + console.log(e); + } - return false; - }); + return false; + }); } }, render: function() { - this.element.unbind('click'); + if(this.$docbase) + this.$docbase.unbind('click'); + + if(this.$printLink) + this.$printLink.unbind(); + + if(this.$addThemeButton) + this.$addThemeButton.unbind(); - if(this.$printLink) this.$printLink.unbind(); this._super(); - this.$printLink = $('.html-print-link', this.element); + + this.$printLink = $('.htmlview-toolbar .html-print-link', this.element); + this.$docbase = $('.htmlview', this.element); + this.$addThemeButton = $('.htmlview-toolbar .html-add-motive', this.element); + + this.$debugButton = $('.htmlview-toolbar .html-serialize', this.element); + this.updatePrintLink(); + this.$docbase.bind('click', this.itemClicked.bind(this)); + this.$addThemeButton.click( this.addTheme.bind(this) ); + this.$debugButton.click( this.serialized.bind(this) ); + }, - this.element.bind('click', this.itemClicked.bind(this)); - // this.element.bind('mouseover', this.itemHover.bind(this)); + serialized: function() { + this.model.set('state', 'dirty'); + console.log( this.model.serializer.serializeToString(this.model.get('data')) ); + }, + + renderPart: function($e, html) { + // 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() ); }, reload: function() { @@ -144,15 +186,28 @@ var HTMLView = View.extend({ * - this greatly simplifies the whole click check */ + if( $e.hasClass('theme-ref') ) + { + console.log($e); + this.selectTheme($e.attr('x-theme-class')); + return false; + } + /* other buttons */ - if($e.hasClass('edit-button')) - this.openForEdit( this.editableFor($e) ); + try { + if($e.hasClass('edit-button')) + this.openForEdit( this.editableFor($e) ); - if($e.hasClass('accept-button')) - this.closeWithSave( this.editableFor($e) ); + if($e.hasClass('accept-button')) + this.closeWithSave( this.editableFor($e) ); - if($e.hasClass('reject-button')) - this.closeWithoutSave( this.editableFor($e) ); + if($e.hasClass('reject-button')) + this.closeWithoutSave( this.editableFor($e) ); + } catch(e) { + messageCenter.addMessage('error', "wlsave", 'Błąd:' + e.text); + } + + return false; }, unfocusAnnotation: function() @@ -164,15 +219,17 @@ var HTMLView = View.extend({ } if(this.currentOpen - && this.currentOpen.is("*[x-annotation-box]") - && this.currentOpen.parent()[0] == this.currentFocused[0]) - { + && 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'}); + $box.css({ + 'display': 'none' + }); // this.currentFocused.removeAttr('x-focused'); // this.currentFocused.hide(); this.currentFocused = null; @@ -181,21 +238,20 @@ var HTMLView = View.extend({ focusAnnotation: function($e) { this.currentFocused = $e; var $box = $("*[x-annotation-box]", $e); - $box.css({'display': 'block'}); + $box.css({ + 'display': 'block' + }); - // $e.attr('x-focused', 'focused'); + // $e.attr('x-focused', 'focused'); }, 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; + this.model.updateWithWLML($e, newText); + $edit.remove(); + this.currentOpen = null; }, closeWithoutSave: function($e) { @@ -205,28 +261,6 @@ var HTMLView = View.extend({ this.currentOpen = null; }, - renderPart: function($e, html) { - // 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) { var $e = $button; @@ -252,50 +286,138 @@ var HTMLView = View.extend({ this.closeWithSave(this.currentOpen); } - var x = $origin[0].offsetLeft; - var y = $origin[0].offsetTop; - var w = $origin.outerWidth(); - var h = $origin.innerHeight(); + var $box = null - console.log("Editable:", $origin, " offsetParent:", $origin[0].offsetParent); + // annotations overlay their sub box - not their own box // + if($origin.is(".annotation-inline-box")) + $box = $("*[x-annotation-box]", $origin); + else + $box = $origin; + + var x = $box[0].offsetLeft; + var y = $box[0].offsetTop; + var w = $box.outerWidth(); + var h = $box.innerHeight(); + + console.log("Edit origin:", $origin, " box:", $box); + console.log("offsetParent:", $box[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); - }); + $overlay.css({ + position: 'absolute', + height: h, + left: x, + top: y, + width: '95%' + }); + + try { + $('textarea', $overlay).val( this.model.asWLML($origin[0]) ); - 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); - } + if($origin.is(".annotation-inline-box")) + { + if(this.currentFocused) { + // if some other is focused + if($origin[0] != this.currentFocused[0]) { + this.unfocusAnnotation(); + this.focusAnnotation($origin); + } // already focues + } + else { // nothing was focused + this.focusAnnotation($origin); + } } - else { // nothing was focused - this.focusAnnotation($b); + else { // this item is not focusable + if(this.currentFocused) this.unfocusAnnotation(); } + + $($box[0].offsetParent).append($overlay); + $origin.data('edit-overlay', $overlay); + + this.currentOpen = $origin; + $origin.attr('x-open', 'open'); } - else { // this item is not focusable - if(this.currentFocused) this.unfocusAnnotation(); + catch(e) { + console.log("Can't open", e); } - - this.currentOpen = $origin; - $origin.attr('x-open', 'open'); return false; + }, + + addTheme: function() + { + var selection = window.getSelection(); + var n = selection.rangeCount; + + console.log("Range count:", n); + + if(n == 0) + window.alert("Nie zaznaczono żadnego obszaru"); + + // for now allow only 1 range + if(n > 1) + window.alert("Zaznacz jeden obszar"); + + + // from this point, we will assume that the ranges are disjoint + for(var i=0; i < n; i++) + { + var range = selection.getRangeAt(i); + console.log(i, range.startContainer, range.endContainer); + var date = (new Date()).getTime(); + var random = Math.floor(4000000000*Math.random()); + var id = (''+date) + '-' + (''+random); + + var spoint = document.createRange(); + var epoint = document.createRange(); + + spoint.setStart(range.startContainer, range.startOffset); + epoint.setStart(range.endContainer, range.endOffset); + + // insert theme-ref + + var elem = $('Nowy motyw'); + elem.attr('x-attr-qname-'+id, 'id'); + elem.attr('x-attr-value-'+id, 'm'+id); + spoint.insertNode(elem[0]); + + // insert theme-begin + elem = $(''); + elem.attr('x-attr-qname-'+id, 'id'); + elem.attr('x-attr-value-'+id, 'b'+id); + spoint.insertNode(elem[0]); + + elem = $(''); + elem.attr('x-attr-qname-'+id, 'id'); + elem.attr('x-attr-value-'+id, 'e'+id); + epoint.insertNode(elem[0]); + } + + //selection.removeAllRanges(); + }, + + selectTheme: function(themeId) + { + var selection = document.getSelection(); + + // remove current selection + selection.removeAllRanges(); + + var range = document.createRange(); + var s = $('#m'+themeId)[0]; + var e = $('#e'+themeId)[0]; + console.log('Selecting range:', themeId, range, s, e); + + if(s && e) { + range.setStartAfter(s); + range.setEndBefore(e); + selection.addRange(range); + } } - }); // Register view