diff --git a/static/js/pandora/news.js b/static/js/pandora/news.js new file mode 100644 index 000000000..fd39c0ca0 --- /dev/null +++ b/static/js/pandora/news.js @@ -0,0 +1,183 @@ +'use strict'; + +pandora.ui.news = function(width) { + + var that = Ox.Element(), + $left = $('
') + .css({position: 'absolute', width: width - 512}) + .appendTo(that), + $right = $('
') + .css({position: 'absolute', top: '16px', right: '16px', width: '192px'}) + .appendTo(that), + color = Ox.Theme() == 'classic' + ? 'rgb(32, 32, 32)' : 'rgb(224, 224, 224)', + isEditable = pandora.site.capabilities.canEditSitePages[pandora.user.level], + items = [], + selected; + + pandora.api.getNews({}, function(result) { + items = result.data.items; + selected = items[0].id; + renderItem(); + renderList(); + }); + + function addItem() { + pandora.api.addNews({ + title: 'Untitled', + date: Ox.formatDate(new Date(), '%Y-%m-%d'), + text: 'Text' + }, function(result) { + items.splice(0, 0, result.data); + selected = result.data.id; + renderItem(); + renderList(); + }); + } + + function editItem(key, value) { + var data = {id: selected}, + index = Ox.getIndexById(items, selected); + data[key] = value; + pandora.api.editNews(data, function(result) { + Ox.print('DATA:::', result.data); + items[index] = result.data; + Ox.print('ITEMS:::', items); + ['title', 'date'].indexOf(key) > -1 && renderList(); + }); + } + + function removeItem() { + var index = Ox.getIndexById(items, selected); + items.splice(index, 1); + selected = items[0].id; + renderItem(); + renderList(); + pandora.api.removeNews({id: selected}, function(result) { + // ... + }); + } + + function renderItem() { + $left.empty(); + var $title, $date, $text, + index = Ox.getIndexById(items, selected); + $title = Ox.Editable({ + editable: isEditable, + tooltip: isEditable ? 'Doubleclick to edit' : '', + value: items[index].title + }) + .css({ + display: 'inline-block', + fontWeight: 'bold', + fontSize: '16px', + MozUserSelect: 'text', + WebkitUserSelect: 'text' + }) + .bindEvent({ + submit: function(data) { + editItem('title', data.value); + } + }) + .appendTo($left); + $('
').css({height: '2px'}).appendTo($left); + $date = Ox.Editable({ + editable: isEditable, + format: function(value) { + return Ox.formatDate(value, '%B %e, %Y'); + }, + tooltip: isEditable ? 'Doubleclick to edit' : '', + value: items[index].date + }) + .css({ + display: 'inline-block', + fontSize: '9px' + }) + .bindEvent({ + submit: function(data) { + editItem('date', data.value); + } + }) + .appendTo($left); + $('
').css({height: '8px'}).appendTo($left); + $text = Ox.Editable({ + clickLink: pandora.clickLink, + editable: isEditable, + tooltip: isEditable ? 'Doubleclick to edit' : '', + type: 'textarea', + value: items[index].text, + width: width - 512 + }) + .bindEvent({ + submit: function(data) { + editItem('text', data.value); + } + }) + .appendTo($left); + } + + function renderList() { + $right.empty(); + if (isEditable) { + $('
') + .css({height: '16px', marginBottom: '8px'}) + .append( + Ox.Button({ + title: 'Add', + width: 92 + }) + .css({float: 'left', margin: '0 4px 0 0'}) + .bindEvent({ + click: addItem + }) + ) + .append( + Ox.Button({ + title: 'Remove', + width: 92 + }) + .css({float: 'left', margin: '0 0 0 4px'}) + .bindEvent({ + click: removeItem + }) + ) + .appendTo($right); + } + items.sort(function(a, b) { + return a.date < b.date ? 1 : a.date > b.date ? -1 : 0; + }).forEach(function(item, i) { + Ox.Element() + .addClass('item') + .css({ + width: '176px', + padding: '4px 8px 5px 8px', + borderRadius: '8px', + marginBottom: '2px', + boxShadow: item.id == selected ? '0 0 2px ' + color : '', + cursor: 'pointer' + }) + .html( + '' + item.title + '' + + '
' + + Ox.formatDate(item.date, '%B %e, %Y') + + '' + ) + .bindEvent({ + anyclick: function() { + selected = item.id; + $('.item').css({boxShadow: 'none'}); + this.css({boxShadow: '0 0 2px ' + color}); + renderItem(); + } + }) + .appendTo($right); + }); + } + + that.resize = function() { + + }; + + return that; + +}; \ No newline at end of file diff --git a/static/js/pandora/siteDialog.js b/static/js/pandora/siteDialog.js index e0d36ada2..3c2ee2851 100644 --- a/static/js/pandora/siteDialog.js +++ b/static/js/pandora/siteDialog.js @@ -4,15 +4,21 @@ pandora.ui.siteDialog = function(section) { - var tabs = Ox.merge( - Ox.clone(pandora.site.sitePages, true), - [{id: 'software', title: 'Software'}] - ); + var dialogWidth = Math.round(window.innerWidth * 0.75), + isEditable = pandora.site.capabilities.canEditSitePages[pandora.user.level], + tabs = Ox.merge( + Ox.clone(pandora.site.sitePages, true), + [{id: 'software', title: 'Software'}] + ); Ox.getObjectById(tabs, section).selected = true; var $tabPanel = Ox.TabPanel({ content: function(id) { var $content = Ox.Element().css({padding: '16px', overflowY: 'auto'}); - if (id == 'software') { + if (id == 'contact') { + pandora.$ui.contactForm = pandora.ui.contactForm().appendTo($content); + } else if (id == 'news') { + pandora.$ui.news = pandora.ui.news(dialogWidth).appendTo($content); + } else if (id == 'software') { Ox.Element() .html( '

Pan.do/ra

' @@ -23,18 +29,15 @@ pandora.ui.siteDialog = function(section) { + '

Pan.do/ra and OxJS will be released in 2012. More soon...

' ) .appendTo($content); - } else if (id == 'contact') { - pandora.$ui.contactForm = pandora.ui.contactForm().appendTo($content); } else { pandora.api.getPage({name: id}, function(result) { - var $column, risk; + var $right, risk; Ox.Editable({ clickLink: pandora.clickLink, - editable: pandora.site.capabilities.canEditSitePages[pandora.user.level], - tooltip: pandora.site.capabilities.canEditSitePages[pandora.user.level] - ? 'Doubleclick to edit' : '', + editable: isEditable, + tooltip: isEditable ? 'Doubleclick to edit' : '', type: 'textarea', - value: result.data.body + value: result.data.text }) .css(id == 'rights' ? { // this will get applied twice, @@ -48,19 +51,19 @@ pandora.ui.siteDialog = function(section) { Ox.Request.clearCache('getPage'); pandora.api.editPage({ name: id, - body: data.value + text: data.value }); } }) .appendTo($content); if (id == 'rights') { - $column = $('
') + $right = $('
') .css({position: 'absolute', top: '16px', right: '16px', width: '128px'}) .appendTo($content); $('') .attr({src: '/static/png/rights.png'}) .css({width: '128px', height: '128px', marginBottom: '8px'}) - .appendTo($column); + .appendTo($right); risk = ['Unknown', 'Severe', 'High', 'Significant', 'General', 'Low']; Ox.merge( ['Unknown'], @@ -79,7 +82,7 @@ pandora.ui.siteDialog = function(section) { + (risk[i].length > 6 ? '
of ' : ' of
') + 'Legal Action
' ) - .appendTo($column); + .appendTo($right); }); } }); @@ -135,15 +138,18 @@ pandora.ui.siteDialog = function(section) { minWidth: 688, // 16 + 256 + 16 + 384 + 16 removeOnClose: true, title: Ox.getObjectById(tabs, section).title, - width: Math.round(window.innerWidth * 0.75), + width: dialogWidth }) .bindEvent({ close: function(data) { pandora.UI.set({page: ''}); }, resize: function(data) { - if ($tabPanel.selected() == 'contact') { + var selected = $tabPanel.selected(); + if (selected == 'contact') { pandora.$ui.contactForm.resize(); + } else if (selected == 'news') { + } } });