diff --git a/static/js/documentsDialog.js b/static/js/documentsDialog.js index 834d43aaa..f88f4094f 100644 --- a/static/js/documentsDialog.js +++ b/static/js/documentsDialog.js @@ -6,230 +6,7 @@ pandora.ui.documentsDialog = function() { var dialogHeight = Math.round((window.innerHeight - 48) * 0.9), dialogWidth = Math.round(window.innerWidth * 0.9), - itemWidth = 272 + Ox.UI.SCROLLBAR_SIZE, - selected = null, - $reloadButton = Ox.Button({ - disabled: true, - title: 'redo', - tooltip: Ox._('Reload'), - type: 'image' - }) - .css({float: 'left', margin: '4px 2px 4px 4px'}) - .bindEvent({ - click: function() { - $reloadButton.options({disabled: true}); - Ox.Request.clearCache('findDocuments'); - $list.reloadList(true); - } - }), - - $userCheckbox = Ox.Checkbox({ - title: Ox._('Only show my documents'), - value: false - }) - .css({float: 'left', margin: '4px 2px'}) - .bindEvent({ - change: function(data) { - data.value - ? $robotsCheckbox.show() - : $robotsCheckbox.hide().options({value: false}); - updateList(); - } - }), - - $findSelect = Ox.Select({ - items: [ - {id: 'all', title: Ox._('Find: All')}, - {id: 'user', title: Ox._('Find: Username')}, - {id: 'file', title: Ox._('Find: Filename')} - ], - overlap: 'right', - type: 'image' - }) - .bindEvent({ - change: function(data) { - $findInput.value() && updateList(); - $findInput.options({placeholder: data.title}); - } - }), - - $findInput = Ox.Input({ - changeOnKeypress: true, - clear: true, - placeholder: Ox._('Find: All'), - width: 192 - }) - .bindEvent({ - change: updateList - }), - - $findElement = Ox.FormElementGroup({ - elements: [ - $findSelect, - $findInput - ] - }) - .css({float: 'right', margin: '4px'}), - - $list = Ox.TableList({ - columns: [ - { - id: 'user', - operator: '+', - title: Ox._('Username'), - visible: true, - width: 128 - }, - { - align: 'right', - id: 'name', - operator: '+', - title: Ox._('Filename'), - visible: true, - width: 256 - }, - { - id: 'extension', - operator: '+', - title: Ox._('Extension'), - visible: true, - width: 64 - }, - { - align: 'right', - format: function(value) { - return Ox.formatValue(value, 'B'); - }, - id: 'size', - operator: '-', - title: Ox._('Size'), - visible: true, - width: 64 - }, - { - align: 'right', - id: 'matches', - operator: '-', - title: Ox._('Matches'), - visible: true, - width: 64 - }, - { - id: 'description', - operator: '+', - title: Ox._('Description'), - visible: true, - width: 256 - }, - { - align: 'right', - format: function(value) { - return Ox.formatDate(value, '%F %T'); - }, - id: 'created', - operator: '-', - title: Ox._('Created'), - visible: true, - width: 144 - }, - { - align: 'right', - format: function(value) { - return Ox.formatDate(value, '%F %T'); - }, - id: 'modified', - operator: '-', - title: Ox._('Modified'), - visible: true, - width: 144 - } - ], - columnsVisible: true, - items: pandora.api.findDocuments, - keys: ['ratio'], - query: {conditions: [], operator: '&'}, - scrollbarVisible: true, - sort: [{key: 'user', operator: '+'}], - unique: 'id' - }) - .bindEvent({ - 'delete': deleteDocuments, - init: function(data) { - $status.html( - Ox.toTitleCase(Ox.formatCount(data.items, 'document')) - ); - }, - load: function() { - $reloadButton.options({disabled: false}); - }, - select: function(data) { - selected = data.ids[0]; - $addButton.options({disabled: data.ids.length == 0}); - selectFile(); - } - }), - - $embedButton = Ox.Button({ - title: 'embed', - tooltip: Ox._('Embed'), - type: 'image' - }) - .css({ - float: 'left', - margin: '4px 2px 4px 4px' - }) - .bindEvent({ - click: function() { - pandora.ui.embedDocumentDialog( - $list.options('selected')[0] - ).open(); - } - }), - - $closeButton = Ox.Button({ - title: 'close', - tooltip: Ox._('Close'), - type: 'image' - }) - .css({ - float: 'left', - margin: '4px 4px 4px 2px' - }) - .bindEvent({ - click: function() { - $list.options({selected: []}); - } - }), - - $item = Ox.Element().css({overflowY: 'scroll'}), - - $preview, - - $form, - - $itemToolbar = Ox.Bar({size: 24}), - - $deleteButton = Ox.Button({ - title: Ox._('Delete Document...'), - width: 128 - }) - .css({float: 'left', margin: '4px'}) - .hide() - .bindEvent({ - click: deleteDocuments - }) - .appendTo($itemToolbar), - - $addButton = Ox.Button({ - disabled: true, - id: 'add', - title: Ox._('Add'), - width: 48 - }).bindEvent({ - click: addDocuments - }), - $doneButton = Ox.Button({ id: 'done', title: Ox._('Done'), @@ -240,80 +17,13 @@ pandora.ui.documentsDialog = function() { } }), - $uploadButton = Ox.FileButton({ - title: Ox._('Upload Documents...'), - width: 128 - }) - .css({float: 'right', margin: '4px'}) - .bindEvent({ - click: uploadDocuments - }) - .appendTo($itemToolbar), - - $content = Ox.SplitPanel({ - elements: [ - { - element: Ox.SplitPanel({ - elements: [ - { - element: Ox.Bar({size: 24}) - .append($reloadButton) - .append($userCheckbox) - .append($findElement), - size: 24 - }, - { - element: $list - } - ], - orientation: 'vertical' - }) - }, - { - element: Ox.SplitPanel({ - elements: [ - { - element: Ox.Bar({size: 24}) - .append($itemLabel), - size: 24 - }, - { - element: $item - }, - { - element: $itemToolbar, - size: 24 - } - ], - orientation: 'vertical' - }) - .bindEvent({ - resize: setWidth - }), - resizable: true, - resize: [ - 272 + Ox.UI.SCROLLBAR_SIZE, - 400 + Ox.UI.SCROLLBAR_SIZE, - 528 + Ox.UI.SCROLLBAR_SIZE - ], - size: 272 + Ox.UI.SCROLLBAR_SIZE - } - ], - orientation: 'horizontal' + // reference in pandora.$ui needed to receive pandora_ events + $content = pandora.$ui.documentsDialogPanel = pandora.ui.documentsPanel({ + isItemView: false }), - $itemLabel = Ox.Label({ - textAlign: 'center', - title: Ox._('No document selected'), - width: getLabelWidth() - }) - .css({ - float: 'left', - margin: '4px' - }), - that = Ox.Dialog({ - buttons: pandora.user.ui.item ? [$addButton, $doneButton] : [$doneButton], + buttons: [$doneButton], closeButton: true, content: $content, height: dialogHeight, @@ -324,31 +34,12 @@ pandora.ui.documentsDialog = function() { removeOnClose: true, title: Ox._('Manage Documents'), width: dialogWidth - }), - - $status = $('
') - .css({ - position: 'absolute', - top: '4px', - left: '128px', - right: '384px', - bottom: '4px', - paddingTop: '2px', - fontSize: '9px', - textAlign: 'center' - }) - .appendTo(that.find('.OxButtonsbar')); - - that.superClose = that.close; - that.close = function() { - Ox.Request.clearCache('findDocuments'); - that.superClose(); - }; + }); function addDocuments() { pandora.api.addDocument({ item: pandora.user.ui.item, - ids: $list.options('selected') + ids: pandora.user.ui.documentsSelection[''] }, function() { Ox.Request.clearCache(); if (pandora.user.ui.itemView == 'documents') { @@ -360,207 +51,11 @@ pandora.ui.documentsDialog = function() { }); } - function deleteDocuments() { - pandora.ui.deleteDocumentDialog($list.options('selected'), function() { - Ox.Request.clearCache(pandora.user.ui.item ? void 0 : 'findDocuments'); - $list.reloadList(); - }).open(); - } - - function getLabelWidth() { - return $content.size(1) - (selected ? 48 : 8); - } - - function getPreviewSize() { - var ratio = $list.value(selected, 'ratio'), - height = ratio < 1 ? 256 : 256 / ratio, - width = ratio >= 1 ? 256 : 256 * ratio, - left = Math.floor((itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - width) / 2); - return { - height: height, - // fixme: CSS gets applied twice, to image and enclosing element - margin: [8, 8, 8, 8 + left].map(function(px) { - return px / 2 + 'px'; - }).join(' '), - width: width - }; - } - - function renderForm() { - var file = $list.value(selected), - editable = file.user == pandora.user.username - || pandora.site.capabilities.canEditMedia[pandora.user.level]; - return Ox.Form({ - items: [ - Ox.Input({ - disabled: true, - id: 'username', - label: Ox._('Username'), - labelWidth: 80, - value: file.user, - width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - }), - Ox.Input({ - disabled: !editable, - id: 'name', - label: Ox._('Filename'), - labelWidth: 80, - value: file.name, - width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - }), - Ox.Input({ - disabled: true, - id: 'extension', - label: Ox._('Extension'), - labelWidth: 80, - value: file.extension, - width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - }), - Ox.Input({ - disabled: true, - id: 'size', - label: Ox._('Size'), - labelWidth: 80, - value: Ox.formatValue(file.size, 'B'), - width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - }), - Ox.Input({ - disabled: true, - id: 'matches', - label: Ox._('Matches'), - labelWidth: 80, - value: file.matches, - width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - }), - Ox.Input({ - disabled: !editable, - height: 256, - id: 'description', - placeholder: Ox._('Description'), - type: 'textarea', - value: file.description, - width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE - }) - ], - width: 240 - }) - .css({margin: '12px 8px 8px 8px'}) - .bindEvent({ - change: function(event) { - var data = Ox.extend({id: file.id}, event.id, event.data.value); - pandora.api.editDocument(data, function(result) { - $list.value(result.data.id, event.id, result.data[event.id]); - if (event.id == 'name') { - $list.value(file.id, 'id', result.data.id); - } - Ox.Request.clearCache('findDocuments'); - $list.reloadList(); - }); - } - }); - } - - function renderPreview() { - var size = getPreviewSize(), - src = '/documents/' + selected + '/256p.jpg'; - return Ox.ImageElement({ - height: size.height, - src: src, - width: size.width - }) - .css({ - margin: size.margin, - borderRadius: '8px' - }) - .on({ - click: function() { - var info = $list.value(selected), - url = '/documents/' + selected + '/' + info.name + '.' + info.extension; - window.open(url, '_blank'); - } - }); - } - - function selectFile() { - var file = $list.value(selected), - editable = file.user == pandora.user.username - || pandora.site.capabilities.canEditMedia[pandora.user.level]; - $embedButton[selected ? 'show' : 'hide'](); - $closeButton[selected ? 'show' : 'hide'](); - setLabel(); - $item.empty(); - if (selected) { - $preview = renderPreview().appendTo($item); - $form = renderForm().appendTo($item); - $deleteButton.options({disabled: !editable}).show(); - } else { - $deleteButton.hide(); - } - } - - function setLabel() { - $itemLabel.options({ - title: selected - ? selected.split(':').slice(1).join(':') - : Ox._('No document selected'), - width: getLabelWidth() - }); - } - - function setWidth() { - var size; - $itemLabel.options({width: getLabelWidth()}); - if (selected) { - size = getPreviewSize(), - $preview.options({ - height: size.height, - width: size.width - }).css({ - margin: size.margin - }); - $form.options('items').forEach(function($item) { - $item.options({width: itemWidth - 16 - Ox.UI.SCROLLBAR_SIZE}); - }); - } - $status.css({right: itemWidth + 128 + 'px'}); - } - - function updateList() { - var user = $userCheckbox.value(), - key = $findSelect.value(), - value = $findInput.value(), - query = { - conditions: value - ? [].concat( - key != 'name' ? [{key: 'user', value: value, operator: '='}] : [], - key != 'user' ? [{key: 'name', value: value, operator: '='}] : [] - ) - : [], - operator: '|' - }; - $list.options({query: user ? { - conditions: [ - {key: 'user', value: pandora.user.username, operator: '='}, - query - ], - operator: '&' - } : query}); - } - - function uploadDocuments(data) { - pandora.ui.uploadDocumentDialog(data.files, function(files) { - if (files) { - Ox.Request.clearCache('findDocuments'); - $list.bindEventOnce({ - load: function() { - $list.options({selected: [files.ids]}); - // selectFile(file.id); - } - }); - $list.reloadList(); - } - }).open(); - } + that.superClose = that.close; + that.close = function() { + Ox.Request.clearCache('findDocuments'); + that.superClose(); + }; return that; diff --git a/static/js/documentsPanel.js b/static/js/documentsPanel.js index d1fe572fb..a03c0586e 100644 --- a/static/js/documentsPanel.js +++ b/static/js/documentsPanel.js @@ -6,7 +6,7 @@ pandora.ui.documentsPanel = function(options) { var ui = pandora.user.ui, hasItemView = false, - isItemView = true, + isItemView = options.isItemView, columns = [ { @@ -105,18 +105,23 @@ pandora.ui.documentsPanel = function(options) { $listBar = Ox.Bar({size: 24}), - $addButton = Ox.Button({ - title: isItemView ? 'add' : 'upload', - tooltip: Ox._(isItemView ? 'Add Documents...' : 'Upload Documents...'), + $addButton = (isItemView ? Ox.Button({ + title: 'add', + tooltip: Ox._('Add Documents...'), + type: 'image' + }) : Ox.FileButton({ + image: 'upload', + tooltip: Ox._('Upload Documents...'), type: 'image' }) + ) .css({float: 'left', margin: '4px 2px 4px 4px'}) .bindEvent({ - click: function() { + click: function(data) { if (isItemView) { editDocuments(); } else { - + uploadDocuments(data); } } }) @@ -266,10 +271,17 @@ pandora.ui.documentsPanel = function(options) { .css({float: 'left', margin: '4px'}) .bindEvent({ click: function(data) { - if (data.id == 'open') { + if (data.id == 'addtoitem') { + addToItem(); + } else if (data.id == 'addtolist') { + addToList(); + } else if (data.id == 'open') { openDocuments(); } else if (data.id == 'edit') { editDocuments(); + } else if (data.id == 'replace') { + console.log('replace', data); + replaceDocument(data.files); } else if (data.id == 'remove') { removeDocuments(); } else if (data.id == 'delete') { @@ -339,11 +351,14 @@ pandora.ui.documentsPanel = function(options) { .bindEvent({ resize: function(data) { ui.documentSize = data.size; + //fixme: resize preview panel }, resizeend: function(data) { // set to 0 so that UI.set registers a change of the value ui.documentSize = 0; pandora.UI.set({documentSize: data.size}); + //fixme: resize preview panel instead + selectDocuments(); }, toggle: function(data) { pandora.UI.set({showDocument: !data.collapsed}); @@ -390,6 +405,36 @@ pandora.ui.documentsPanel = function(options) { pandora.$ui.documentsDialog = pandora.ui.documentsDialog().open(); } + function addToItem() { + pandora.api.addDocument({ + item: ui.item, + ids: ui.documentsSelection[''] + }, function() { + Ox.Request.clearCache(); + if (ui.itemView == 'documents') { + //fixme just upload list here + //self.$documentsList.reloadList(); + pandora.$ui.contentPanel.replaceElement(1, + pandora.$ui.item = pandora.ui.item()); + } + }); + } + + function addToList() { + pandora.api.addDocument({ + list: ui._list, + ids: ui.documentsSelection[''] + }, function() { + Ox.Request.clearCache(); + if (ui.item && ui.itemView == 'documents') { + //fixme just upload list here + //self.$documentsList.reloadList(); + pandora.$ui.contentPanel.replaceElement(1, + pandora.$ui.item = pandora.ui.item()); + } + }); + } + function closeDocuments() { if (pandora.$ui.documentDialog) { pandora.$ui.documentDialog.close(); @@ -457,6 +502,10 @@ pandora.ui.documentsPanel = function(options) { } } + function replaceDocument(file) { + var id = $list.options('selected')[0]; + } + function removeDocuments() { pandora.api.removeDocument({ item: ui.item, diff --git a/static/js/documentsView.js b/static/js/documentsView.js index 1e267b977..11c547a65 100644 --- a/static/js/documentsView.js +++ b/static/js/documentsView.js @@ -4,7 +4,9 @@ pandora.ui.documentsView = function(options, self) { - var that = pandora.ui.documentsPanel(); + var that = pandora.ui.documentsPanel({ + isItemView: true + }); return that; var self = self || {},