X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/eb61c7e9637a2744b4ffa748317f2b72bd16a27d..36387dac2e103ca656be9dc65fabb936f80191d1:/project/static/js/views/html.js diff --git a/project/static/js/views/html.js b/project/static/js/views/html.js index 4dc3d544..a3db1d28 100644 --- a/project/static/js/views/html.js +++ b/project/static/js/views/html.js @@ -1,68 +1,151 @@ /*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(); - }, + $('.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')); + }, - modelDataChanged: function(property, value) { - $('.htmlview', this.element).html(value); - }, + modelStateChanged: function(property, value) + { + var self = $(this); + + 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')); + $('.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]); + + $(document).trigger('xml-scroll-request', {line:line, column:column}); + } catch(e) { + console.log(e); + } + + return false; + }); + } + }, + + render: function() { + this.element.unbind('click'); + + if(this.$printLink) this.$printLink.unbind(); + this._super(); + this.$printLink = $('.html-print-link', this.element); + + var base = this.$printLink.attr('ui:baseref'); + this.$printLink.attr('href', base + "?revision=" + this.model.get('revision')); + + this.element.bind('click', this.itemClicked.bind(this)); + }, - 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')); - } - }, + 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); - render: function() { - $('.html-print-link', this.element).unbind(); + var n = 0; - this._super(); + 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 + - $('.html-print-link', this.element).mouseover( - this.printView.bind(this) - ); - }, + 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); - printView: function(event) { - var base = $(event.target).attr('ui:baseref'); - $(event.target).attr('href', base + "?revision=" + this.model.get('revision') ); + // load the original XML content + console.log($e, $e.offsetParent(), $overlay); + + $('.html-editarea-cancel-button', $overlay).click(function() { + $overlay.remove(); + }); - return true; - }, - - reload: function() { - this.model.load(true); - }, + $('.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