X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/0f069f101a3e978c0f785dffe06ba873422c1137..e459e4567cc578abd5d7e02e70a01ec9464f474d:/platforma/static/js/views/html.js

diff --git a/platforma/static/js/views/html.js b/platforma/static/js/views/html.js
index e1c7b15e..cc42be24 100755
--- a/platforma/static/js/views/html.js
+++ b/platforma/static/js/views/html.js
@@ -6,14 +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'));
                 
@@ -24,18 +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]", this.$docbase).each(function() {
-            $(this).append( self.$menuTemplate.clone() );
-        });
         
-        /* mark themes */
-        /* $(".theme-ref", this.$docbase).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+"]");
@@ -69,20 +70,23 @@ 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;
+                });
         }
     },
 
@@ -101,12 +105,19 @@ var HTMLView = View.extend({
         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) );
     },
 
+    /* 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')) {
@@ -119,7 +130,9 @@ var HTMLView = View.extend({
             if(this.currentFocused && $p[0] == this.currentFocused[0])
             {
                 this.currentFocused = $p;
-                $box.css({'display': 'block'});
+                $box.css({
+                    'display': 'block'
+                });
             }
 
             return;
@@ -172,21 +185,31 @@ var HTMLView = View.extend({
          *  - this greatly simplifies the whole click check
          */
 
-        if( $e.hasClass('theme-ref') )
+        if( $e.hasClass('motyw') )
         {
             console.log($e);
-            this.selectTheme($e.attr('x-theme-class'));
+            this.selectTheme($e.attr('theme-class'));
+            return false;
         }
 
         /* other buttons */
-        if($e.hasClass('edit-button'))
-            this.openForEdit( this.editableFor($e) );
+        try {
+            if($e.hasClass('delete-button'))
+                this.deleteElement( this.editableFor($e) );
 
-        if($e.hasClass('accept-button'))
-            this.closeWithSave( this.editableFor($e) );
+            if($e.hasClass('edit-button'))
+                this.openForEdit( this.editableFor($e) );
 
-        if($e.hasClass('reject-button'))
-            this.closeWithoutSave( this.editableFor($e) );        
+            if($e.hasClass('accept-button'))
+                this.closeWithSave( this.editableFor($e) );
+
+            if($e.hasClass('reject-button'))
+                this.closeWithoutSave( this.editableFor($e) );
+        } catch(e) {
+            messageCenter.addMessage('error', "wlsave", 'Błąd:' + e.toString());
+        }
+        
+        return false;
     },
 
     unfocusAnnotation: function()
@@ -198,15 +221,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;
@@ -215,21 +240,26 @@ 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);
+        var errors = null;
+        
+        errors = this.model.updateInnerWithWLML($e, newText);
+        
+        if(errors)
+            messageCenter.addMessage('error', 'render', errors);
+        else {
             $edit.remove();
-            $e.removeAttr('x-open');            
-        }.bind(this) );
-        this.currentOpen = null;
+            this.currentOpen = null;
+        }
     },
 
     closeWithoutSave: function($e) {
@@ -264,89 +294,205 @@ 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
+
+        // 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("Editable:", $origin, " offsetParent:", $origin[0].offsetParent);
+        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 = $('<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);
-                }
+        h = Math.max(h, 2*parseInt($box.css('line-height')));
+        
+        $overlay.css({
+            position: 'absolute',
+            height: h,
+            left: x,
+            top: y,
+            width: '95%'
+        });
+        
+        try {
+            $('textarea', $overlay).val( this.model.innerAsWLML($origin[0]) );
+
+            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;
     },
+    
+    deleteElement: function($editable)
+    {
+        var relatedThemes = $("*[x-node='begin'], *[x-node='end']", $editable);
+
+        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();
+        }
+    },
+
+    // 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;
+    },
 
     addTheme: function() 
     {
-        var selection = document.getSelection();
+        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;
+        }
 
         // from this point, we will assume that the ranges are disjoint
-        for(var i=0; i < n; i++) {
+        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;
+            }
+
+            
+            var date = (new Date()).getTime();
             var random = Math.floor(4000000000*Math.random());
             var id = (''+date) + '-' + (''+random);
 
-            var ipoint = document.createRange();
-            
-            
+            var spoint = document.createRange();
+            var epoint = document.createRange();
+
+            spoint.setStart(range.startContainer, range.startOffset);
+            epoint.setStart(range.endContainer, range.endOffset);
 
-            // Firefox alters the later node when inserting, so
-            // insert from end
-            ipoint.setStart(range.endContainer, range.endOffset);
-            elem = $('<span class="theme-end" x-theme-class="'+id+'" id="e'+id+'"></span>')[0];
-            ipoint.insertNode(elem);
+            var mtag, btag, etag, errors;
 
-            // insert theme-ref
-            ipoint.setStart(range.startContainer, range.startOffset);
-            var elem = $('<span class="theme-ref" x-theme-class="'+id+'" id="m'+id+'">Nowy motyw</span>')[0];
-            ipoint.insertNode(elem);
-            ipoint.setStartBefore(elem);
+            // insert theme-ref            
+            mtag = $('<span></span>');
+            spoint.insertNode(mtag[0]);
+            errors = this.model.updateWithWLML(mtag, '<motyw id="m'+id+'">Nowy Motyw</motyw>');
+            if(errors) {
+                messageCenter.addMessage('error', null, 'Błąd przy dodawaniu motywu :' + errors);
+                return false;
+            }
 
             // insert theme-begin
-            elem = $('<span class="theme-begin" x-theme-class="'+id+'" id="b'+id+'"></span>')[0];
-            ipoint.insertNode(elem);            
+            btag = $('<span></span>');
+            spoint.insertNode(btag[0]);
+            errors = this.model.updateWithWLML(btag, '<begin id="b'+id+'" />');
+            if(errors) {
+                mtag.remove();
+                messageCenter.addMessage('error', null, 'Błąd przy dodawaniu motywu :' + errors);
+                return false;
+            }
+
+            
+            etag = $('<span></span>');
+            epoint.insertNode(etag[0]);
+            result = this.model.updateWithWLML(etag, '<end id="e'+id+'" />');
+            if(errors) {
+                btag.remove();
+                mtag.remove();
+                messageCenter.addMessage('error', null, 'Błąd przy dodawaniu motywu :' + errors);
+                return false;
+            }
         }
 
         selection.removeAllRanges();
@@ -354,14 +500,14 @@ var HTMLView = View.extend({
 
     selectTheme: function(themeId)
     {
-        var selection = document.getSelection();
+        var selection = window.getSelection();
         
         // remove current selection
         selection.removeAllRanges();
 
         var range = document.createRange();
-        var s = $('#m'+themeId)[0];
-        var e = $('#e'+themeId)[0];
+        var s = $(".motyw[theme-class='"+themeId+"']")[0];
+        var e = $(".end[theme-class='"+themeId+"']")[0];
         console.log('Selecting range:', themeId, range, s, e);
 
         if(s && e) {