X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/c988cd5d12cb6203ca8216e05bcbc202e14a04f8..35ca9353f12d0c6b65da2ac05675791d38793ab1:/platforma/static/js/views/html.js diff --git a/platforma/static/js/views/html.js b/platforma/static/js/views/html.js index 8aff5f06..2dba1c12 100755 --- a/platforma/static/js/views/html.js +++ b/platforma/static/js/views/html.js @@ -8,7 +8,9 @@ var HTMLView = View.extend({ init: function(element, model, parent, template) { var submodel = model.contentModels['html']; this._super(element, submodel, template); - this.parent = parent; + this.parent = parent; + + this.themeEditor = new ThemeEditDialog( $('#theme-edit-dialog') ); this.model .addObserver(this, 'data', this.modelDataChanged.bind(this)) @@ -100,41 +102,29 @@ var HTMLView = View.extend({ if(this.$addThemeButton) this.$addThemeButton.unbind(); + if(this.$addAnnotation) + this.$addAnnotation.unbind(); + this._super(); this.$printLink = $('.htmlview-toolbar .html-print-link', this.element); this.$docbase = $('.htmlview', this.element); - this.$addThemeButton = $('.htmlview-toolbar .html-add-motive', this.element); + this.$addThemeButton = $('.htmlview-toolbar .html-add-theme', this.element); + this.$addAnnotation = $('.htmlview-toolbar .html-add-annotation', 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.$addAnnotation.click( this.addAnnotation.bind(this) ); + // this.$debugButton.click( this.serialized.bind(this) ); }, - 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' - }); - } + /* serialized: function() { + this.model.set('state', 'dirty'); + console.log( this.model.serializer.serializeToString(this.model.get('data')) ); + }, */ - return; - } - - $e.html(html); - $e.append( this.$menuTemplate.clone() ); - }, - reload: function() { this.model.load(true); }, @@ -178,25 +168,44 @@ 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')); + if( $e.hasClass('motyw')) + { + this.selectTheme($e.attr('theme-class')); + return false; + } + + if( $e.hasClass('theme-text-list') ) + { + this.selectTheme($e.parent().attr('theme-class')); return false; } /* other buttons */ try { + var editable = this.editableFor($e); + + if(!editable) + return false; + + if($e.hasClass('delete-button')) + this.deleteElement(editable); + if($e.hasClass('edit-button')) - this.openForEdit( this.editableFor($e) ); + { + if( editable.hasClass('motyw') ) + this.editTheme(editable); + else + this.openForEdit(editable); + } if($e.hasClass('accept-button')) - this.closeWithSave( this.editableFor($e) ); + this.closeWithSave(editable); if($e.hasClass('reject-button')) - this.closeWithoutSave( this.editableFor($e) ); + this.closeWithoutSave(editable); + } catch(e) { - messageCenter.addMessage('error', "wlsave", 'BÅÄ d:' + e.text); + messageCenter.addMessage('error', "wlsave", 'BÅÄ d:' + e.toString()); } return false; @@ -240,10 +249,16 @@ var HTMLView = View.extend({ closeWithSave: function($e) { var $edit = $e.data('edit-overlay'); var newText = $('textarea', $edit).val(); - - this.model.updateWithWLML($e, newText); - $edit.remove(); - this.currentOpen = null; + var errors = null; + + errors = this.model.updateInnerWithWLML($e, newText); + + if(errors) + messageCenter.addMessage('error', 'render', errors); + else { + $edit.remove(); + this.currentOpen = null; + } }, closeWithoutSave: function($e) { @@ -266,7 +281,7 @@ var HTMLView = View.extend({ } if(!$e.attr('x-editable')) - throw Exception("Click outside of editable") + return null; console.log("Trigger", $button, " yields editable: ", $e); return $e; @@ -297,6 +312,8 @@ var HTMLView = View.extend({ // start edition on this node var $overlay = $('
'); + + h = Math.max(h, 2*parseInt($box.css('line-height'))); $overlay.css({ position: 'absolute', @@ -307,7 +324,7 @@ var HTMLView = View.extend({ }); try { - $('textarea', $overlay).val( this.model.asWLML($origin[0]) ); + $('textarea', $overlay).val( this.model.innerAsWLML($origin[0]) ); if($origin.is(".annotation-inline-box")) { @@ -339,28 +356,118 @@ var HTMLView = View.extend({ return false; }, + + deleteElement: function($editable) + { + var relatedThemes = $("*[x-node='begin'], *[x-node='end']", $editable); - addTheme: function() + var themeMarks = relatedThemes.map(function() { + return $(".motyw[theme-class='"+$(this).attr('theme-class')+"']"); + }); + + if($editable.is("*.motyw")) + { + console.log($editable); + var selector = "[theme-class='"+$editable.attr('theme-class')+"']"; + relatedThemes = relatedThemes.add("*[x-node='begin']"+selector+", *[x-node='end']"+selector); + } + + console.log(relatedThemes, themeMarks); + + var del = confirm("UsuniÄcie elementu jest nieodwracalne.\n" + +" Czy na pewno chcesz usunÄ Ä ten element, wraz z zawartymi motywami ?\n"); + + if(del) { + relatedThemes.remove(); + themeMarks.remove(); + $editable.remove(); + } + }, + + // + // Special stuff for themes + // + + // Theme related stuff + verifyThemeInsertPoint: function(node) { + + if(node.nodeType == 3) { // Text Node + node = node.parentNode; + } + + if(node.nodeType != 1) return false; + + console.log('Selection point:', node); + + node = $(node); + var xtype = node.attr('x-node'); + + if(!xtype || (xtype.search(':') >= 0) || + xtype == 'motyw' || xtype == 'begin' || xtype == 'end') + return false; + + // this is hopefully redundant + //if(! node.is('*.utwor *') ) + // return false; + + // don't allow themes inside annotations + if( node.is('*[x-annotation-box] *') ) + return false; + + return true; + }, + + + editTheme: function($element) + { + var themeTextSpan = $('.theme-text-list', $element); + this.themeEditor.setFromString( themeTextSpan.text() ); + + function _editThemeFinish(dialog) { + themeTextSpan.text( dialog.userData.themes.join(', ') ); + }; + + this.themeEditor.show(_editThemeFinish); + }, + + + addTheme: function() { var selection = window.getSelection(); var n = selection.rangeCount; console.log("Range count:", n); - - if(n == 0) + if(n == 0) { window.alert("Nie zaznaczono żadnego obszaru"); + return false; + } // for now allow only 1 range - if(n > 1) + if(n > 1) { window.alert("Zaznacz jeden obszar"); + return false; + } + // remember the selected range + var range = selection.getRangeAt(0); + console.log(range.startContainer, range.endContainer); - // 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 = Date.now(); + // verify if the start/end points make even sense - + // they must be inside a x-node (otherwise they will be discarded) + // and the x-node must be a main text + if(! this.verifyThemeInsertPoint(range.startContainer) ) { + window.alert("Motyw nie może siÄ zaczynaÄ w tym miejscu."); + return false; + } + + if(! this.verifyThemeInsertPoint(range.endContainer) ) { + window.alert("Motyw nie może siÄ koÅczyÄ w tym miejscu."); + return false; + } + + function _addThemeFinish(dialog) + { + var date = (new Date()).getTime(); var random = Math.floor(4000000000*Math.random()); var id = (''+date) + '-' + (''+random); @@ -370,35 +477,58 @@ var HTMLView = View.extend({ spoint.setStart(range.startContainer, range.startOffset); epoint.setStart(range.endContainer, range.endOffset); + var mtag, btag, etag, errors; + var themesStr = dialog.userData.themes.join(', '); + // insert theme-ref - - var elem = $('Nowy motyw'); - elem.attr('x-attrib-id', 'm'+id); - spoint.insertNode(elem[0]); + mtag = $(''); + spoint.insertNode(mtag[0]); + errors = this.model.updateWithWLML(mtag, '