X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/5dade46d5e6a2f767f33009ffd616fdae94f3c0a..8705c980a8a35af6c4fc6e309f389bc1aae0b6d7:/platforma/static/js/views/html.js?ds=sidebyside

diff --git a/platforma/static/js/views/html.js b/platforma/static/js/views/html.js
index 18ab0295..cefd0d2b 100755
--- a/platforma/static/js/views/html.js
+++ b/platforma/static/js/views/html.js
@@ -12,15 +12,15 @@ 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 = [];
     },
 
@@ -30,16 +30,12 @@ var HTMLView = View.extend({
         var self = this;
 
         /* upgrade editable elements */
-        $("*[x-editable]").each(function() {
+        $("*[x-editable]", this.$docbase).each(function() {
             $(this).append( self.$menuTemplate.clone() );
         });
-
-        var n = 5001;
-
-        var doc_base = $('.htmlview .utwor', this.element);
-
+        
         /* mark themes */
-        $(".theme-ref").each(function() {
+        /* $(".theme-ref", this.$docbase).each(function() {
             var id = $(this).attr('x-theme-class');
 
             var end = $("span.theme-end[x-theme-class = " + id+"]");
@@ -49,7 +45,7 @@ var HTMLView = View.extend({
 
             h = Math.max(h, end.offset().top - begin.offset().top);
             $(this).css('height', h);
-        }); 
+        }); */
     },
 
     updatePrintLink: function() {
@@ -91,15 +87,46 @@ var HTMLView = View.extend({
     },
 
     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.updatePrintLink();
+        this.$docbase.bind('click', this.itemClicked.bind(this));
+        this.$addThemeButton.click( this.addTheme.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'});
+            }
+
+            return;
+        }
 
-        this.element.bind('click', this.itemClicked.bind(this));
-        // this.element.bind('mouseover', this.itemHover.bind(this));
+        $e.html(html);
+        $e.append( this.$menuTemplate.clone() );
     },
   
     reload: function() {
@@ -118,6 +145,40 @@ 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
+         */
+
+        if( $e.hasClass('theme-ref') )
+        {
+            console.log($e);
+            this.selectTheme($e.attr('x-theme-class'));
+        }
+
+        /* other buttons */
         if($e.hasClass('edit-button'))
             this.openForEdit( this.editableFor($e) );
 
@@ -125,7 +186,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) {
@@ -147,11 +239,6 @@ var HTMLView = View.extend({
         this.currentOpen = null;
     },
 
-    renderPart: function($e, html) {
-            $e.html(html);
-            $e.append( this.$menuTemplate.clone() );
-    },
-
     editableFor: function($button) 
     {
         var $e = $button;
@@ -167,40 +254,120 @@ 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 = $('<div class="html-editarea"><textarea></textarea></div>');
-
+        
         var x = $origin[0].offsetLeft;
         var y = $origin[0].offsetTop;
         var w = $origin.outerWidth();
         var h = $origin.innerHeight();
+
+        console.log("Editable:", $origin, " offsetParent:", $origin[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.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%'});        
+        $($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');
+        this.currentOpen = $origin;
+        $origin.attr('x-open', 'open');
+                
+        return false;
+    },
+
+    addTheme: function() 
+    {
+        var selection = document.getSelection();
+        var n = selection.rangeCount;
         
+        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 = Date.now();
+            var random = Math.floor(4000000000*Math.random());
+            var id = (''+date) + '-' + (''+random);
+
+            var ipoint = document.createRange();            
+            
+            // 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);
+
+            // 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-begin
+            elem = $('<span class="theme-begin" x-theme-class="'+id+'" id="b'+id+'"></span>')[0];
+            ipoint.insertNode(elem);            
+        }
+
+        selection.removeAllRanges();
+    },
+
+    selectTheme: function(themeId)
+    {
+        var selection = document.getSelection();
         
-        return false;
+        // 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