X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/0f069f101a3e978c0f785dffe06ba873422c1137..061f517181630ee982c33aee63965b18965fd5aa:/platforma/static/js/views/html.js?ds=inline
diff --git a/platforma/static/js/views/html.js b/platforma/static/js/views/html.js
index e1c7b15e..0b1234ce 100755
--- a/platforma/static/js/views/html.js
+++ b/platforma/static/js/views/html.js
@@ -6,14 +6,14 @@ var HTMLView = View.extend({
template: 'html-view-template',
init: function(element, model, parent, template) {
- this._super(element, model, template);
- this.parent = parent;
+ var submodel = model.contentModels['html'];
+ this._super(element, submodel, template);
+ this.parent = parent;
this.model
- .addObserver(this, 'data', this.modelDataChanged.bind(this))
+ .addObserver(this, 'data', this.modelDataChanged.bind(this))
.addObserver(this, 'state', this.modelStateChanged.bind(this));
-
- this.$menuTemplate = $(render_template('html-view-frag-menu-template', this));
+
this.modelStateChanged('state', this.model.get('state'));
this.modelDataChanged('data', this.model.get('data'));
@@ -24,18 +24,19 @@ var HTMLView = View.extend({
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();
- var self = this;
-
- /* upgrade editable elements */
- $("*[x-editable]", this.$docbase).each(function() {
- $(this).append( self.$menuTemplate.clone() );
- });
- /* mark themes */
- /* $(".theme-ref", this.$docbase).each(function() {
+ /* mark themes */
+ /* $(".theme-ref", this.$docbase).each(function() {
var id = $(this).attr('x-theme-class');
var end = $("span.theme-end[x-theme-class = " + id+"]");
@@ -69,20 +70,23 @@ 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;
+ });
}
},
@@ -102,9 +106,17 @@ var HTMLView = View.extend({
this.$docbase = $('.htmlview', this.element);
this.$addThemeButton = $('.htmlview-toolbar .html-add-motive', 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.$debugButton.click( this.serialized.bind(this) );
+ },
+
+ serialized: function() {
+ this.model.set('state', 'dirty');
+ console.log( this.model.serializer.serializeToString(this.model.get('data')) );
},
renderPart: function($e, html) {
@@ -119,7 +131,9 @@ var HTMLView = View.extend({
if(this.currentFocused && $p[0] == this.currentFocused[0])
{
this.currentFocused = $p;
- $box.css({'display': 'block'});
+ $box.css({
+ 'display': 'block'
+ });
}
return;
@@ -176,17 +190,24 @@ var HTMLView = View.extend({
{
console.log($e);
this.selectTheme($e.attr('x-theme-class'));
+ return false;
}
/* other buttons */
- if($e.hasClass('edit-button'))
- this.openForEdit( this.editableFor($e) );
+ try {
+ if($e.hasClass('edit-button'))
+ this.openForEdit( this.editableFor($e) );
- if($e.hasClass('accept-button'))
- this.closeWithSave( this.editableFor($e) );
+ if($e.hasClass('accept-button'))
+ this.closeWithSave( this.editableFor($e) );
- if($e.hasClass('reject-button'))
- this.closeWithoutSave( this.editableFor($e) );
+ if($e.hasClass('reject-button'))
+ this.closeWithoutSave( this.editableFor($e) );
+ } catch(e) {
+ messageCenter.addMessage('error', "wlsave", 'BÅÄ
d:' + e.text);
+ }
+
+ return false;
},
unfocusAnnotation: function()
@@ -198,15 +219,17 @@ var HTMLView = View.extend({
}
if(this.currentOpen
- && this.currentOpen.is("*[x-annotation-box]")
- && this.currentOpen.parent()[0] == this.currentFocused[0])
- {
+ && 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'});
+ $box.css({
+ 'display': 'none'
+ });
// this.currentFocused.removeAttr('x-focused');
// this.currentFocused.hide();
this.currentFocused = null;
@@ -215,21 +238,20 @@ var HTMLView = View.extend({
focusAnnotation: function($e) {
this.currentFocused = $e;
var $box = $("*[x-annotation-box]", $e);
- $box.css({'display': 'block'});
+ $box.css({
+ 'display': 'block'
+ });
- // $e.attr('x-focused', 'focused');
+ // $e.attr('x-focused', 'focused');
},
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;
+ this.model.updateWithWLML($e, newText);
+ $edit.remove();
+ this.currentOpen = null;
},
closeWithoutSave: function($e) {
@@ -264,54 +286,74 @@ var HTMLView = View.extend({
this.closeWithSave(this.currentOpen);
}
- var x = $origin[0].offsetLeft;
- var y = $origin[0].offsetTop;
- var w = $origin.outerWidth();
- var h = $origin.innerHeight();
+ var $box = null
- console.log("Editable:", $origin, " offsetParent:", $origin[0].offsetParent);
+ // 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 = $('');
- $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);
- }
+ $overlay.css({
+ position: 'absolute',
+ height: h,
+ left: x,
+ top: y,
+ width: '95%'
+ });
+
+ try {
+ $('textarea', $overlay).val( this.model.asWLML($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 { // nothing was focused
- this.focusAnnotation($b);
+ else { // this item is not focusable
+ if(this.currentFocused) this.unfocusAnnotation();
}
+
+ $($box[0].offsetParent).append($overlay);
+ $origin.data('edit-overlay', $overlay);
+
+ this.currentOpen = $origin;
+ $origin.attr('x-open', 'open');
}
- else { // this item is not focusable
- if(this.currentFocused) this.unfocusAnnotation();
+ catch(e) {
+ console.log("Can't open", e);
}
-
- this.currentOpen = $origin;
- $origin.attr('x-open', 'open');
return false;
},
addTheme: function()
{
- var selection = document.getSelection();
+ var selection = window.getSelection();
var n = selection.rangeCount;
+
+ console.log("Range count:", n);
if(n == 0)
window.alert("Nie zaznaczono żadnego obszaru");
@@ -320,36 +362,42 @@ var HTMLView = View.extend({
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++) {
+ for(var i=0; i < n; i++)
+ {
var range = selection.getRangeAt(i);
console.log(i, range.startContainer, range.endContainer);
- var date = Date.now();
+ var date = (new Date()).getTime();
var random = Math.floor(4000000000*Math.random());
var id = (''+date) + '-' + (''+random);
- var ipoint = document.createRange();
-
-
+ var spoint = document.createRange();
+ var epoint = document.createRange();
- // Firefox alters the later node when inserting, so
- // insert from end
- ipoint.setStart(range.endContainer, range.endOffset);
- elem = $('')[0];
- ipoint.insertNode(elem);
+ spoint.setStart(range.startContainer, range.startOffset);
+ epoint.setStart(range.endContainer, range.endOffset);
// insert theme-ref
- ipoint.setStart(range.startContainer, range.startOffset);
- var elem = $('Nowy motyw')[0];
- ipoint.insertNode(elem);
- ipoint.setStartBefore(elem);
+
+ var elem = $('Nowy motyw');
+ elem.attr('x-attr-qname-'+id, 'id');
+ elem.attr('x-attr-value-'+id, 'm'+id);
+ spoint.insertNode(elem[0]);
// insert theme-begin
- elem = $('')[0];
- ipoint.insertNode(elem);
+ elem = $('');
+ elem.attr('x-attr-qname-'+id, 'id');
+ elem.attr('x-attr-value-'+id, 'b'+id);
+ spoint.insertNode(elem[0]);
+
+ elem = $('');
+ elem.attr('x-attr-qname-'+id, 'id');
+ elem.attr('x-attr-value-'+id, 'e'+id);
+ epoint.insertNode(elem[0]);
}
- selection.removeAllRanges();
+ //selection.removeAllRanges();
},
selectTheme: function(themeId)