X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/7a12b550f4a8366c8ace2f9c55706aba7c4b17f7..198be737937aec7259e81ba791bf7f4e401795eb:/platforma/static/js/views/html.js

diff --git a/platforma/static/js/views/html.js b/platforma/static/js/views/html.js
index 3696bdc8..2dba1c12 100755
--- a/platforma/static/js/views/html.js
+++ b/platforma/static/js/views/html.js
@@ -6,26 +6,49 @@ var HTMLView = View.extend({
     template: 'html-view-template',
   
     init: function(element, model, parent, template) {
-        this._super(element, model, template);
+        var submodel = model.contentModels['html'];
+        this._super(element, submodel, template);
         this.parent = parent;
+
+        this.themeEditor = new ThemeEditDialog( $('#theme-edit-dialog') );
     
         this.model
-        .addObserver(this, 'data', this.modelDataChanged.bind(this))        
+        .addObserver(this, 'data', this.modelDataChanged.bind(this))
         .addObserver(this, 'state', this.modelStateChanged.bind(this));
-      
-        $('.htmlview', this.element).html(this.model.get('data'));
+        
         this.modelStateChanged('state', this.model.get('state'));
-        this.model.load();       
+        this.modelDataChanged('data', this.model.get('data'));
+                
+        this.model.load();
+
+        this.currentOpen = null;
+        this.currentFocused = null;
+        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();
+        
+    /* mark themes */
+    /* $(".theme-ref", this.$docbase).each(function() {
+            var id = $(this).attr('x-theme-class');
 
-        $("*[x-editable]").each(function() {
-            var e = $('<span class="context-menu"><span class="edit-button">Edytuj</span><span>Przypisy</span></span>');
-            e.appendTo(this);
-        });
+            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() {
@@ -40,6 +63,7 @@ var HTMLView = View.extend({
         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...');
@@ -48,35 +72,59 @@ 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.$addAnnotation)
+            this.$addAnnotation.unbind();
 
-        if(this.$printLink) this.$printLink.unbind();
         this._super();
-        this.$printLink = $('.html-print-link', this.element);
-        this.updatePrintLink();
 
-        this.element.bind('click', this.itemClicked.bind(this));
-        // this.element.bind('mouseover', this.itemHover.bind(this));
+        this.$printLink = $('.htmlview-toolbar .html-print-link', this.element);
+        this.$docbase = $('.htmlview', 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) );
     },
-  
+
+    /* serialized: function() {
+        this.model.set('state', 'dirty');
+        console.log( this.model.serializer.serializeToString(this.model.get('data')) );        
+    }, */
+
     reload: function() {
         this.model.load(true);
     },
@@ -86,85 +134,527 @@ var HTMLView = View.extend({
         this._super();
     },
 
-    itemHover: function(event)
+    itemClicked: function(event) 
     {
+        var self = this;
+        
+        console.log('click:', event, event.ctrlKey, event.target);        
         var $e = $(event.target);
-        if( $e.attr('x-editable') == 'editable' ) {
-            console.log('over:', $e[0]);
-            $e.css({'background-color': 'grey'});
+
+        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
+         */
+
+        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'))
+            {
+                if( editable.hasClass('motyw') )
+                    this.editTheme(editable);
+                else
+                    this.openForEdit(editable);
+            }
+
+            if($e.hasClass('accept-button'))
+                this.closeWithSave(editable);
+
+            if($e.hasClass('reject-button'))
+                this.closeWithoutSave(editable);
+            
+        } catch(e) {
+            messageCenter.addMessage('error', "wlsave", 'Błąd:' + e.toString());
+        }
+        
+        return false;
     },
 
-    itemClicked: function(event) 
+    unfocusAnnotation: function()
     {
-        var self = this;
+        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'
+        });
         
-        console.log('click:', event, event.ctrlKey, event.target);
-        var editableContent = null;
-        var $e = $(event.target);
+    // $e.attr('x-focused', 'focused');
+    },
 
-        if($e.hasClass('edit-button'))
-            this.openForEdit($e);
+    closeWithSave: function($e) {
+        var $edit = $e.data('edit-overlay');
+        var newText = $('textarea', $edit).val();
+        var errors = null;
+        
+        errors = this.model.updateInnerWithWLML($e, newText);
+        
+        if(errors)
+            messageCenter.addMessage('error', 'render', errors);
+        else {
+            $edit.remove();
+            this.currentOpen = null;
+        }
     },
 
-    openForEdit: function($e)
-    {
-        var n = 0;        
+    closeWithoutSave: function($e) {
+        var $edit = $e.data('edit-overlay');
+        $edit.remove();
+        $e.removeAttr('x-open');
+        this.currentOpen = null;
+    },
 
-        while( ($e[0] != this.element[0]) && !($e.attr('x-editable'))
-            && n < 50)
+    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('x-editable'))
-            return true;
+            return null;
 
-        var $origin = $e;
-        console.log("editable: ", $e);
-    
-        // 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: 1.2*h, left: x, top: y, width: w});
-        // $e.offsetParent().append($overlay);
-
-        
-                        
-        /* $('.html-editarea-cancel-button', $overlay).click(function() {
-            $overlay.remove();
-        });
+        console.log("Trigger", $button, " yields editable: ", $e);
+        return $e;
+    },
 
-        $('.html-editarea-save-button', $overlay).click(function() {
-            $overlay.remove();
+    openForEdit: function($origin)
+    {       
+        if(this.currentOpen && this.currentOpen != $origin) {
+            this.closeWithSave(this.currentOpen);    
+        }
+        
+        var $box = null
 
-            // put the part back to the model
-            self.model.putXMLPart($e, $('textarea', $overlay).val());
-        }); */
+        // 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 = $('<div class="html-editarea"><textarea></textarea></div>');
 
-        this.model.getXMLPart($e, function(path, data) {
-            $('textarea', $overlay).val(data);
+        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 { // this item is not focusable
+                if(this.currentFocused) this.unfocusAnnotation();
+            }
 
-        $origin.attr('x-open', 'open');
+            $($box[0].offsetParent).append($overlay);
+            $origin.data('edit-overlay', $overlay);
+        
+            this.currentOpen = $origin;
+            $origin.attr('x-open', 'open');
+        }
+        catch(e) {
+            console.log("Can't open", e);
+        }
+                
         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();
+        }
+    },
+
+    //
+    // 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) {
+            window.alert("Nie zaznaczono żadnego obszaru");
+            return false;
+        }
+
+        // for now allow only 1 range
+        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);
+
+        // 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);
+
+            var spoint = document.createRange();
+            var epoint = document.createRange();
+
+            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
+            mtag = $('<span></span>');
+            spoint.insertNode(mtag[0]);
+            errors = this.model.updateWithWLML(mtag, '<motyw id="m'+id+'">'+themesStr+'</motyw>');
+
+            if(errors) {
+                messageCenter.addMessage('error', null, 'Błąd przy dodawaniu motywu :' + errors);
+                return false;
+            }
+
+            // insert theme-begin
+            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();
+            return true;
+        };
+
+        // show the modal
+        this.themeEditor.setFromString('');
+        this.themeEditor.show(_addThemeFinish.bind(this));
+    },
+    
+    selectTheme: function(themeId)
+    {
+        var selection = window.getSelection();
+        
+        // remove current selection
+        selection.removeAllRanges();
+
+        var range = document.createRange();
+        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) {
+            range.setStartAfter(s);
+            range.setEndBefore(e);
+            selection.addRange(range);
+        }
+    },
+
+    addAnnotation: function()
+    {
+        var selection = window.getSelection();
+        var n = selection.rangeCount;
+
+        console.log("Range count:", n);
+        if(n == 0) {
+            window.alert("Nie zaznaczono żadnego obszaru");
+            return false;
+        }
+
+        // for now allow only 1 range
+        if(n > 1) {
+            window.alert("Zaznacz jeden obszar");
+            return false;
+        }
+
+        // remember the selected range
+        var range = selection.getRangeAt(0);
+
+        if(! this.verifyThemeInsertPoint(range.endContainer) ) {
+            window.alert("Nie można wstawić w to miejsce przypisu.");
+            return false;
+        }
+
+        var text = range.toString();        
+        var tag = $('<span></span>');
+        range.collapse(false);
+        range.insertNode(tag[0]);
+        var errors = this.model.updateWithWLML(tag, '<pr><slowo_obce>'+text+"</slowo_obce> </pr>");
+
+        if(errors) {
+                tag.remove();
+                messageCenter.addMessage('error', null, 'Błąd przy dodawaniu przypisu:' + errors);
+                return false;
+        }
+
+        return true;
     }
-  
 });
 
+var ThemeEditDialog = AbstractDialog.extend({
+
+     validate: function()
+     {
+         var active = $('input.theme-list-item:checked', this.$window);
+
+         if(active.length < 1) {
+             this.errors.push("You must select at least one theme.");
+             return false;
+         }
+
+         console.log("Active:", active);
+         this.userData.themes = $.makeArray(active.map(function() { return this.value; }) );
+         console.log('After validate:', this.userData);
+         return this._super();
+     },
+
+     setFromString: function(string)
+     {
+         var $unmatchedList = $('tbody.unknown-themes', this.$window);
+
+         $("tr:not(.header)", $unmatchedList).remove();
+         $unmatchedList.hide();
+
+         $('input.theme-list-item', this.$window).removeAttr('checked');
+
+         var unmatched = [];
+
+         $.each(string.split(','), function() {             
+             var name = $.trim(this);
+             if(!name) return;
+             
+             console.log('Selecting:', name);
+             var checkbox = $("input.theme-list-item[value='"+name+"']", this.$window);
+
+             if(checkbox.length > 0)
+                 checkbox.attr('checked', 'checked');
+             else
+                 unmatched.push(name);
+         });         
+         
+         if(unmatched.length > 0) 
+         {
+             $.each(unmatched, function() {
+                 $('<tr><td colspan="5"><label><input type="checkbox"'+
+                     ' checked="checked" class="theme-list-item" value="'
+                     + this+ '" />"'+this+'"</label></td></tr>').
+                 appendTo($unmatchedList);
+             });
+
+             $unmatchedList.show();
+         }
+     },
+
+     displayErrors: function() {
+        var errorP = $('.error-messages-inline-box', this.$window);
+        if(errorP.length > 0) {
+            var html = '';
+            $.each(this.errors, function() {
+                html += '<span>' + this + '</span>';
+            });
+            errorP.html(html);
+            errorP.show();
+            console.log('Validation errors:', html);
+        }
+        else
+            this._super();
+    },
+
+    reset: function()
+    {
+        this._super();
+        $('.error-messages-inline-box', this.$window).html('').hide();
+    }
+
+ });
+
 // Register view
 panels['html'] = HTMLView;
\ No newline at end of file