diff --git a/static/js/document.js b/static/js/document.js
index 476a80562..72669aa92 100644
--- a/static/js/document.js
+++ b/static/js/document.js
@@ -7,7 +7,7 @@ pandora.ui.document = function() {
.bindEvent({
doubleclick: function(e) {
if ($(e.target).is('.OxBar')) {
- pandora.$ui.text && pandora.$ui.text.animate({scrollTop:0}, 250);
+ pandora.$ui.textPanel && pandora.$ui.textPanel.scrollTextTop();
}
}
}),
@@ -29,11 +29,7 @@ pandora.ui.document = function() {
that.update();
}
}),
- item,
- $find,
- $nextButton,
- $currentButton,
- $previousButton;
+ item;
pandora.api.getDocument({
id: pandora.user.ui.document
@@ -71,8 +67,7 @@ pandora.ui.document = function() {
zoom: 'fit'
})
: item.extension == 'html'
- ? pandora.$ui.textPanel = textPanel(item).css({
- })
+ ? pandora.$ui.textPanel = pandora.ui.textPanel(item, $toolbar)
: Ox.ImageViewer({
area: pandora.user.ui.documents[item.id]
? pandora.user.ui.documents[item.id].position
@@ -120,149 +115,6 @@ pandora.ui.document = function() {
}
}
- function textPanel(text) {
- var textElement,
- embedURLs = getEmbedURLs(text.text),
- that = Ox.SplitPanel({
- elements: [
- {
- element: pandora.$ui.text = textElement = pandora.ui.textHTML(text)
- },
- {
- element: pandora.$ui.textEmbed = pandora.ui.textEmbed(),
- collapsed: !embedURLs.length,
- size: pandora.user.ui.embedSize,
- resizable: true,
- resize: [192, 256, 320, 384, 448, 512]
- }
- ],
- orientation: 'horizontal'
- }),
- selected = -1,
- selectedURL;
- /*
- $find = Ox.Input({
- clear: true,
- placeholder: Ox._('Find in Texts'),
- value: pandora.user.ui.textFind,
- width: 188
- })
- .css({
- float: 'right',
- })
- .bindEvent({
- submit: function(data) {
- Ox.print('SUBMIT', data);
- }
- })
- .appendTo($toolbar);
- */
- $nextButton = Ox.Button({
- disabled: embedURLs.length < 2,
- title: 'arrowRight',
- tooltip: Ox._('Next Reference'),
- type: 'image'
- })
- .css({
- 'margin-right': (pandora.user.ui.embedSize + Ox.SCROLLBAR_SIZE) + 'px',
- float: 'right',
- })
- .bindEvent({
- click: function() {
- that.selectEmbed(
- selected < embedURLs.length - 1 ? selected + 1 : 0,
- true
- );
- }
- })
- .appendTo($toolbar);
-
- $currentButton = Ox.Button({
- disabled: embedURLs.length < 1,
- title: 'center',
- tooltip: Ox._('Current Reference'),
- type: 'image'
- })
- .css({
- float: 'right',
- })
- .bindEvent({
- click: scrollToSelectedEmbed
- })
- .appendTo($toolbar);
-
- $previousButton = Ox.Button({
- disabled: embedURLs.length < 2,
- title: 'arrowLeft',
- tooltip: Ox._('Previous Reference'),
- type: 'image'
- })
- .css({
- float: 'right',
- })
- .bindEvent({
- click: function() {
- that.selectEmbed(
- selected ? selected - 1 : embedURLs.length - 1,
- true
- );
- }
- })
- .appendTo($toolbar);
-
- function getEmbedURLs(text) {
- var matches = text.match(/]*?href="(.+?)".*?>/gi),
- urls = [];
- if (matches) {
- matches.forEach(function(match) {
- var url = match.match(/"(.+?)"/)[1];
- if (pandora.isEmbedURL(url)) {
- urls.push(url);
- }
- });
- }
- return urls;
- }
-
- function scrollToSelectedEmbed() {
- var scrollTop = Math.max(
- textElement[0].scrollTop + $('#embed' + selected).offset().top - (
- pandora.user.ui.showBrowser
- ? pandora.$ui.documentContentPanel.options().elements[0].size
- : 0
- ) - 48,
- 0),
- position = 100 * scrollTop / Math.max(1, textElement[0].scrollHeight);
- textElement.scrollTo(position);
- window.text = textElement;
- }
-
- that.selectEmbed = function(index, scroll) {
- if (index != selected) {
- selected = index;
- selectedURL = embedURLs[selected]
- $('.OxSpecialLink').removeClass('OxActive');
- selected > -1 && $('#embed' + selected).addClass('OxActive');
- pandora.$ui.textEmbed.update(selectedURL);
- scroll && scrollToSelectedEmbed();
- }
- };
-
- that.update = function(text) {
- var index;
- embedURLs = getEmbedURLs(text);
- index = embedURLs.indexOf(selectedURL);
- if (embedURLs.length && (index == -1 || index >= embedURLs.length)) {
- index = 0;
- }
- selected = -1;
- that.selectEmbed(index);
- };
-
- embedURLs.length && that.selectEmbed(0);
- return that;
- }
-
that.info = function() {
return item;
};
@@ -272,9 +124,7 @@ pandora.ui.document = function() {
height: that.height(),
width: that.width()
});
- $nextButton && $nextButton.css({
- 'margin-right': (pandora.user.ui.embedSize + Ox.SCROLLBAR_SIZE) + 'px',
- });
+ pandora.$ui.textPanel && pandora.$ui.textPanel.update();
};
return that;
diff --git a/static/js/documentDialog.js b/static/js/documentDialog.js
index 2ad033609..e961544ad 100644
--- a/static/js/documentDialog.js
+++ b/static/js/documentDialog.js
@@ -19,7 +19,7 @@ pandora.openDocumentDialog = function(options) {
operator: '|'
},
range: [0, options.ids.length],
- keys: ['description', 'dimensions', 'extension', 'id', 'title', 'modified']
+ keys: ['description', 'dimensions', 'extension', 'id', 'title', 'modified', 'text']
}, function(result) {
var i = 0,
documents = Ox.sort(result.data.items, function(item) {
@@ -202,6 +202,9 @@ pandora.ui.documentDialog = function(options) {
width: dialogWidth,
zoom: 'fit'
})
+ : item.extension == 'html'
+ ? pandora.ui.textPanel(item).css({
+ })
: Ox.ImageViewer({
area: pandora.user.ui.documents[item.id]
? pandora.user.ui.documents[item.id].position
diff --git a/static/js/textPanel.js b/static/js/textPanel.js
index ee702a4ec..fe3379311 100644
--- a/static/js/textPanel.js
+++ b/static/js/textPanel.js
@@ -1,178 +1,104 @@
'use strict';
-pandora.ui.textPanel = function() {
-
- var that = Ox.SplitPanel({
+pandora.ui.textPanel = function(text, $toolbar) {
+ var textElement,
+ textEmbed,
+ embedURLs = getEmbedURLs(text.text),
+ that = Ox.SplitPanel({
elements: [
- {element: Ox.Element(), size: 24},
- {element: Ox.Element()},
- {element: Ox.Element(), size: 16}
+ {
+ element: textElement = pandora.ui.textHTML(text)
+ },
+ {
+ element: textEmbed = pandora.ui.textEmbed(textElement),
+ collapsed: !embedURLs.length,
+ size: pandora.user.ui.embedSize,
+ resizable: true,
+ resize: [192, 256, 320, 384, 448, 512]
+ }
],
- orientation: 'vertical'
+ orientation: 'horizontal'
}),
- embedURLs,
- scrolling = false,
selected = -1,
- selectedURL;
+ selectedURL,
+ $find,
+ $nextButton,
+ $currentButton,
+ $previousButton;
- pandora.api.getText({id: pandora.user.ui.text}, function(result) {
+ textElement.panel = that;
- var text = result.data;
- embedURLs = text.type == 'html'
- ? getEmbedURLs(text.text)
- : [];
+ if ($toolbar) {
+ /*
+ $find = Ox.Input({
+ clear: true,
+ placeholder: Ox._('Find in Texts'),
+ value: pandora.user.ui.textFind,
+ width: 188
+ })
+ .css({
+ float: 'right',
+ })
+ .bindEvent({
+ submit: function(data) {
+ Ox.print('SUBMIT', data);
+ }
+ })
+ .appendTo($toolbar);
+ */
+ $nextButton = Ox.Button({
+ disabled: embedURLs.length < 2,
+ title: 'arrowRight',
+ tooltip: Ox._('Next Reference'),
+ type: 'image'
+ })
+ .css({
+ 'margin-right': (pandora.user.ui.embedSize + Ox.SCROLLBAR_SIZE) + 'px',
+ float: 'right',
+ })
+ .bindEvent({
+ click: function() {
+ that.selectEmbed(
+ selected < embedURLs.length - 1 ? selected + 1 : 0,
+ true
+ );
+ }
+ })
+ .appendTo($toolbar);
- var $toolbar = Ox.Bar({size: 24}),
+ $currentButton = Ox.Button({
+ disabled: embedURLs.length < 1,
+ title: 'center',
+ tooltip: Ox._('Current Reference'),
+ type: 'image'
+ })
+ .css({
+ float: 'right',
+ })
+ .bindEvent({
+ click: scrollToSelectedEmbed
+ })
+ .appendTo($toolbar);
- $editMenu, $uploadButton,
-
- $find = Ox.Input({
- clear: true,
- placeholder: Ox._('Find in Texts'),
- value: pandora.user.ui.textFind,
- width: 188
- })
- .css({
- float: 'right',
- margin: '4px 4px 4px 2px'
- })
- .bindEvent({
- submit: function(data) {
- Ox.print('SUBMIT', data);
- }
- })
- .appendTo($toolbar),
-
- $nextButton = Ox.Button({
- disabled: embedURLs.length < 2,
- title: 'arrowRight',
- tooltip: Ox._('Next Reference'),
- type: 'image'
- })
- .css({
- float: 'right',
- margin: '4px 2px 4px 2px'
- })
- .bindEvent({
- click: function() {
- that.selectEmbed(
- selected < embedURLs.length - 1 ? selected + 1 : 0,
- true
- );
- }
- })
- .appendTo($toolbar),
-
- $currentButton = Ox.Button({
- disabled: embedURLs.length < 1,
- title: 'center',
- tooltip: Ox._('Current Reference'),
- type: 'image'
- })
- .css({
- float: 'right',
- margin: '4px 2px 4px 2px'
- })
- .bindEvent({
- click: scrollToSelectedEmbed
- })
- .appendTo($toolbar),
-
- $previousButton = Ox.Button({
- disabled: embedURLs.length < 2,
- title: 'arrowLeft',
- tooltip: Ox._('Previous Reference'),
- type: 'image'
- })
- .css({
- float: 'right',
- margin: '4px 2px 4px 2px'
- })
- .bindEvent({
- click: function() {
- that.selectEmbed(
- selected ? selected - 1 : embedURLs.length - 1,
- true
- );
- }
- })
- .appendTo($toolbar),
-
- $statusbar = Ox.Bar({size: 16}),
-
- $panel = Ox.SplitPanel({
- elements: [
- {
- element: pandora.$ui.text = text.type == 'html'
- ? pandora.ui.textHTML(text)
- : pandora.ui.textPDF(text)
- },
- {
- element: pandora.$ui.textEmbed = pandora.ui.textEmbed(),
- // fixme: at some point pdf will also have a sidebar
- size: text.type == 'html' ? pandora.user.ui.embedSize : 0,
- resizable: text.type == 'html',
- resize: [192, 256, 320, 384, 448, 512]
- }
- ],
- orientation: 'horizontal'
- });
-
- if (text.editable) {
- if (text.type == 'html') {
- $editMenu = Ox.MenuButton({
- items: [
- {id: 'insertHTML', title: Ox._('Insert HTML...')},
- {id: 'insertEmbed', title: Ox._('Insert Embed...')}
- ],
- title: 'edit',
- tooltip: Ox._('Editing Options'),
- type: 'image'
- })
- .css({
- float: 'left',
- margin: '4px 2px 4px 4px'
- })
- .bindEvent({
- click: function(data) {
- if (data.id == 'insertEmbed') {
- pandora.$ui.insertEmbedDialog = pandora.ui.insertEmbedDialog(function() {
- // ...
- }).open();
- }
- }
- })
- .appendTo($toolbar);
- } else {
- $uploadButton = Ox.FileButton({
- image: 'upload',
- tooltip: Ox._('Upload PDF'),
- type: 'image'
- })
- .css({
- float: 'left',
- margin: '4px 2px 4px 4px'
- })
- .bindEvent({
- click: function(data) {
- if (data.files.length) {
- pandora.$ui.uploadPDFDialog = pandora.ui.uploadPDFDialog({
- file: data.files[0],
- id: pandora.user.ui.text
- }).open();
- }
- }
- })
- .appendTo($toolbar);
- }
- }
-
- that.replaceElement(0, $toolbar);
- that.replaceElement(1, $panel);
- that.replaceElement(2, $statusbar);
-
- embedURLs.length && that.selectEmbed(0);
- });
+ $previousButton = Ox.Button({
+ disabled: embedURLs.length < 2,
+ title: 'arrowLeft',
+ tooltip: Ox._('Previous Reference'),
+ type: 'image'
+ })
+ .css({
+ float: 'right',
+ })
+ .bindEvent({
+ click: function() {
+ that.selectEmbed(
+ selected ? selected - 1 : embedURLs.length - 1,
+ true
+ );
+ }
+ })
+ .appendTo($toolbar);
+ }
function getEmbedURLs(text) {
var matches = text.match(/]*?href="(.+?)".*?>/gi),
@@ -189,10 +115,16 @@ pandora.ui.textPanel = function() {
}
function scrollToSelectedEmbed() {
- var scrollTop = Math.max(pandora.$ui.text[0].scrollTop + $('#embed' + selected).offset().top - 48, 0),
- position = 100 * scrollTop / Math.max(1,
- pandora.$ui.text[0].scrollHeight);
- pandora.$ui.text.scrollTo(position);
+ var scrollTop = Math.max(
+ textElement[0].scrollTop + $('#embed' + selected).offset().top - (
+ pandora.user.ui.showBrowser
+ ? pandora.$ui.documentContentPanel.options().elements[0].size
+ : 0
+ ) - 48,
+ 0),
+ position = 100 * scrollTop / Math.max(1, textElement[0].scrollHeight);
+ textElement.scrollTo(position);
+ window.text = textElement;
}
that.selectEmbed = function(index, scroll) {
@@ -201,11 +133,16 @@ pandora.ui.textPanel = function() {
selectedURL = embedURLs[selected]
$('.OxSpecialLink').removeClass('OxActive');
selected > -1 && $('#embed' + selected).addClass('OxActive');
- pandora.$ui.textEmbed.update(selectedURL);
+ textEmbed.update(selectedURL);
scroll && scrollToSelectedEmbed();
}
};
+ that.scrollTextTop = function() {
+ textElement && textElement.animate({scrollTop:0}, 250);
+ return that;
+ };
+
that.update = function(text) {
var index;
embedURLs = getEmbedURLs(text);
@@ -215,14 +152,16 @@ pandora.ui.textPanel = function() {
}
selected = -1;
that.selectEmbed(index);
+ $nextButton && $nextButton.css({
+ 'margin-right': (pandora.user.ui.embedSize + Ox.SCROLLBAR_SIZE) + 'px',
+ });
};
+ embedURLs.length && that.selectEmbed(0);
return that;
-
-};
+}
pandora.ui.textHTML = function(text) {
-
var height = getHeight(),
width = getWidth(),
@@ -234,23 +173,19 @@ pandora.ui.textHTML = function(text) {
scroll: function(event) {
var position = Math.round(100 * that[0]. scrollTop / Math.max(1,
that[0].scrollHeight - that.height())),
- settings;
- if (pandora.user.ui.section == 'texts') {
- settings = pandora.user.ui.texts[pandora.user.ui.text];
+ settings, key;
+ if (pandora.user.ui.part.document) {
+ settings = pandora.user.ui.documents[pandora.user.ui.part.document] || {};
+ key = 'documents.' + pandora.user.ui.part.document;
} else {
settings = pandora.user.ui.documents[pandora.user.ui.document] || {};
+ key = 'documents.' + pandora.user.ui.document;
}
position = position - position % 10;
if (!scrolling && settings && (settings.name || (position != settings.position))) {
- if (pandora.user.ui.section == 'documents') {
- pandora.UI.set('documents.' + pandora.user.ui.document, {
- position: position ? position : 0
- });
- } else {
- pandora.UI.set('texts.' + pandora.UI.encode(pandora.user.ui.text), {
- position: position ? position : 0
- });
- }
+ pandora.UI.set(key, {
+ position: position ? position : 0
+ });
}
scrolling = false;
},
@@ -320,7 +255,7 @@ pandora.ui.textHTML = function(text) {
.appendTo($content),
$text = Ox.EditableContent({
- clickLink: pandora.clickLink,
+ clickLink: clickLink,
collapseToEnd: false,
editable: text.editable,
format: function(text) {
@@ -417,7 +352,7 @@ pandora.ui.textHTML = function(text) {
id: pandora.user.ui.text,
text: data.value
});
- pandora.$ui.textPanel.update(data.value);
+ that.panel.update(data.value);
}
}
})
@@ -425,6 +360,9 @@ pandora.ui.textHTML = function(text) {
setTimeout(scrollToPosition);
+ function clickLink(e) {
+ pandora.clickLink(e, that.panel.selectEmbed);
+ }
function getHeight() {
// 24 menu + 24 toolbar + 16 statusbar + 32 title + 32 margins
// + 1px to get rid of scrollbar
@@ -444,9 +382,11 @@ pandora.ui.textHTML = function(text) {
}
function scrollToPosition() {
- var settings = (pandora.user.ui.section == 'documents'
+ var settings = (pandora.user.ui.part.document
+ ? pandora.user.ui.documents[pandora.user.ui.part.document]
+ : pandora.user.ui.section == 'documents'
? pandora.user.ui.documents[pandora.user.ui.document]
- : pandora.user.ui.texts[pandora.user.ui.text]) || {},
+ : {}),
position = settings.position || 0,
element,
scrollTop;
@@ -482,62 +422,7 @@ pandora.ui.textHTML = function(text) {
};
-pandora.ui.textPDF = function(text) {
-
- var that = Ox.Element(),
- $iframe,
- page = pandora.user.ui.texts[pandora.user.ui.text].position || 1,
- url = '/texts/' + pandora.user.ui.text + '/text.pdf.html#page=' + page;
- if (text.uploaded) {
- $iframe = Ox.Element('