Fixed the print view.

[redakcja.git] / platforma / static / js / views / html.js

diff --git a/platforma/static/js/views/html.js b/platforma/static/js/views/html.js
old mode 100644 (file)
new mode 100755 (executable)
index fa52bd0..211b33b
--- a/platforma/static/js/views/html.js
+++ b/platforma/static/js/views/html.js
@@ -14,13 +14,23 @@ var HTMLView = View.extend({
         .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.model.load();
+
+        this.currentOpen = null;
     },
 
     modelDataChanged: function(property, value) {
         $('.htmlview', this.element).html(value);
         this.updatePrintLink();
+        var self = this;
+        
+        $("*[x-editable]").each(function() {
+            $(this).append( self.$menuTemplate.clone() );
+        });
     },
 
     updatePrintLink: function() {
@@ -35,6 +45,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...');
@@ -69,6 +80,7 @@ var HTMLView = View.extend({
         this.updatePrintLink();
 
         this.element.bind('click', this.itemClicked.bind(this));
+        // this.element.bind('mouseover', this.itemHover.bind(this));
     },
   
     reload: function() {
@@ -84,65 +96,88 @@ var HTMLView = View.extend({
     {
         var self = this;
         
-        console.log('click:', event, event.ctrlKey, event.target);
-        var editableContent = null;
+        console.log('click:', event, event.ctrlKey, event.target);        
         var $e = $(event.target);
 
-        var n = 0;
+        if($e.hasClass('edit-button'))
+            this.openForEdit( this.editableFor($e) );
+
+        if($e.hasClass('accept-button'))
+            this.closeWithSave( this.editableFor($e) );
+
+        if($e.hasClass('reject-button'))
+            this.closeWithoutSave( this.editableFor($e) );
+    },
+
+    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;
+    },
+
+    closeWithoutSave: function($e) {
+        var $edit = $e.data('edit-overlay');
+        $edit.remove();
+        $e.removeAttr('x-open');
+        this.currentOpen = null;
+    },
+
+    renderPart: function($e, html) {
+            $e.html(html);
+            $e.append( this.$menuTemplate.clone() );
+    },
 
-        while( ($e[0] != this.element[0]) && !($e.attr('wl2o: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('wl2o:editable'))
-            return true;
-    
-        // 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: h, left: "5%", top: y, width: "90%"});
-        $e.offsetParent().append($overlay);
-
-        // load the original XML content
-        console.log($e, $e.offsetParent(), $overlay);
-                        
-        $('.html-editarea-cancel-button', $overlay).click(function() {
-            $overlay.remove();
-        });
+        if(!$e.attr('x-editable'))
+            throw Exception("Click outside of editable")
 
-        $('.html-editarea-save-button', $overlay).click(function() {
-            $overlay.remove();
+        return $e;
+    },
 
-            // put the part back to the model
-            self.model.putXMLPart($e, $('textarea', $overlay).val());
-        });
+    openForEdit: function($origin)
+    {       
+        if(this.currentOpen && this.currentOpen != $origin) {
+            this.closeWithSave(this.currentOpen);
+            
+        }
+    
+        // start edition on this node       
+        var $overlay = $('<div class="html-editarea"><textarea></textarea></div>');
 
-        $('textarea', $overlay).focus(function() {
-            $overlay.css('z-index', 3000);
-        }).blur(function() {
-            $overlay.css('z-index', 2000);
-        });
+        var x = $origin[0].offsetLeft;
+        var y = $origin[0].offsetTop;
+        var w = $origin.outerWidth();
+        var h = $origin.innerHeight();
+        
+        $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);
+            });
 
-        this.model.getXMLPart($e, function(path, data) {
-            $('textarea', $overlay).val(data);
-        });
+            this.currentOpen = $origin;
+            $origin.attr('x-open', 'open');
+        
         
         return false;
     }