X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/60f59d5903e5f4289d7a4b224c3f05e161395815..da2ddd3f782202bed965830379672079547846ff:/project/static/js/views/html.js?ds=sidebyside diff --git a/project/static/js/views/html.js b/project/static/js/views/html.js index a8eb4d01..ebdf90af 100644 --- a/project/static/js/views/html.js +++ b/project/static/js/views/html.js @@ -1,59 +1,130 @@ /*global View render_template panels */ var HTMLView = View.extend({ - _className: 'HTMLView', - element: null, - model: null, - template: 'html-view-template', + _className: 'HTMLView', + element: null, + model: null, + template: 'html-view-template', - init: function(element, model, parent, template) { - this._super(element, model, template); - this.parent = parent; + init: function(element, model, parent, template) { + this._super(element, model, template); + this.parent = parent; - this.model - .addObserver(this, 'data', this.modelDataChanged.bind(this)) - .addObserver(this, 'state', this.modelStateChanged.bind(this)); + 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.modelStateChanged('state', this.model.get('state')); - this.model.load(); - }, - - modelDataChanged: function(property, value) { - $('.htmlview', this.element).html(value); + $('.htmlview', this.element).html(this.model.get('data')); + this.modelStateChanged('state', this.model.get('state')); + this.model.load(); + }, + + modelDataChanged: function(property, value) { + $('.htmlview', this.element).html(value); - var base = this.$printLink.attr('ui:baseref'); - this.$printLink.attr('href', base + "?revision=" + this.model.get('revision')); - }, + var base = this.$printLink.attr('ui:baseref'); + this.$printLink.attr('href', base + "?revision=" + this.model.get('revision')); + }, - modelStateChanged: function(property, value) { - if (value == 'synced' || value == 'dirty') { - this.unfreeze(); - } else if (value == 'unsynced') { - this.freeze('Niezsynchronizowany...'); - } else if (value == 'loading') { - this.freeze('Ładowanie...'); - } else if (value == 'saving') { - this.freeze('Zapisywanie...'); - } else if (value == 'error') { - this.freeze(this.model.get('error')); - } - }, + modelStateChanged: function(property, value) { + if (value == 'synced' || value == 'dirty') { + this.unfreeze(); + } else if (value == 'unsynced') { + this.freeze('Niezsynchronizowany...'); + } else if (value == 'loading') { + this.freeze('Ładowanie...'); + } else if (value == 'saving') { + this.freeze('Zapisywanie...'); + } else if (value == 'error') { + this.freeze(this.model.get('error')); + } + }, + render: function() { + this.element.unbind('click'); - render: function() { - if(this.$printLink) this.$printLink.unbind(); - this._super(); - this.$printLink = $('.html-print-link', this.element); - }, + if(this.$printLink) this.$printLink.unbind(); + this._super(); + this.$printLink = $('.html-print-link', this.element); + + this.element.bind('click', this.itemClicked.bind(this)); + }, + + reload: function() { + this.model.load(true); + }, - reload: function() { - this.model.load(true); - }, + dispose: function() { + this.model.removeObserver(this); + this._super(); + }, + + itemClicked: function(event) + { + var self = this; + + console.log('click:', event, event.ctrlKey, event.target); + var editableContent = null; + var $e = $(event.target); + + var n = 0; + + while( ($e[0] != this.element[0]) && !($e.attr('wl2o: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 = $( + '
\n\ +

\n\ + \n\ + \n\ +

\n\ + \n\ +
'); + + 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(); + }); + + $('.html-editarea-save-button', $overlay).click(function() { + $overlay.remove(); + + // put the part back to the model + self.model.putXMLPart($e, $('textarea', $overlay).val()); + }); + + $('textarea', $overlay).focus(function() { + $overlay.css('z-index', 3000); + }).blur(function() { + $overlay.css('z-index', 2000); + }); + + this.model.getXMLPart($e, function(path, data) { + $('textarea', $overlay).val(data); + }); + + return false; + } - dispose: function() { - this.model.removeObserver(this); - this._super(); - } }); // Register view