add news.js

This commit is contained in:
rolux 2012-02-18 13:58:49 +00:00
parent 34edcba8c3
commit 747b9c70f9
2 changed files with 207 additions and 18 deletions

183
static/js/pandora/news.js Normal file
View file

@ -0,0 +1,183 @@
'use strict';
pandora.ui.news = function(width) {
var that = Ox.Element(),
$left = $('<div>')
.css({position: 'absolute', width: width - 512})
.appendTo(that),
$right = $('<div>')
.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);
$('<div>').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);
$('<div>').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) {
$('<div>')
.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(
'<span style="font-size: 14px; font-weight: bold">' + item.title + '</span>'
+ '<br><span style="font-size: 9px">'
+ Ox.formatDate(item.date, '%B %e, %Y')
+ '</span>'
)
.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;
};

View file

@ -4,7 +4,9 @@
pandora.ui.siteDialog = function(section) { pandora.ui.siteDialog = function(section) {
var tabs = Ox.merge( 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), Ox.clone(pandora.site.sitePages, true),
[{id: 'software', title: 'Software'}] [{id: 'software', title: 'Software'}]
); );
@ -12,7 +14,11 @@ pandora.ui.siteDialog = function(section) {
var $tabPanel = Ox.TabPanel({ var $tabPanel = Ox.TabPanel({
content: function(id) { content: function(id) {
var $content = Ox.Element().css({padding: '16px', overflowY: 'auto'}); 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() Ox.Element()
.html( .html(
'<h1><b>Pan.do/ra</b></h1>' '<h1><b>Pan.do/ra</b></h1>'
@ -23,18 +29,15 @@ pandora.ui.siteDialog = function(section) {
+ '<p><b>Pan.do/ra</b> and <b>OxJS</b> will be released in 2012. More soon...</p>' + '<p><b>Pan.do/ra</b> and <b>OxJS</b> will be released in 2012. More soon...</p>'
) )
.appendTo($content); .appendTo($content);
} else if (id == 'contact') {
pandora.$ui.contactForm = pandora.ui.contactForm().appendTo($content);
} else { } else {
pandora.api.getPage({name: id}, function(result) { pandora.api.getPage({name: id}, function(result) {
var $column, risk; var $right, risk;
Ox.Editable({ Ox.Editable({
clickLink: pandora.clickLink, clickLink: pandora.clickLink,
editable: pandora.site.capabilities.canEditSitePages[pandora.user.level], editable: isEditable,
tooltip: pandora.site.capabilities.canEditSitePages[pandora.user.level] tooltip: isEditable ? 'Doubleclick to edit' : '',
? 'Doubleclick to edit' : '',
type: 'textarea', type: 'textarea',
value: result.data.body value: result.data.text
}) })
.css(id == 'rights' ? { .css(id == 'rights' ? {
// this will get applied twice, // this will get applied twice,
@ -48,19 +51,19 @@ pandora.ui.siteDialog = function(section) {
Ox.Request.clearCache('getPage'); Ox.Request.clearCache('getPage');
pandora.api.editPage({ pandora.api.editPage({
name: id, name: id,
body: data.value text: data.value
}); });
} }
}) })
.appendTo($content); .appendTo($content);
if (id == 'rights') { if (id == 'rights') {
$column = $('<div>') $right = $('<div>')
.css({position: 'absolute', top: '16px', right: '16px', width: '128px'}) .css({position: 'absolute', top: '16px', right: '16px', width: '128px'})
.appendTo($content); .appendTo($content);
$('<img>') $('<img>')
.attr({src: '/static/png/rights.png'}) .attr({src: '/static/png/rights.png'})
.css({width: '128px', height: '128px', marginBottom: '8px'}) .css({width: '128px', height: '128px', marginBottom: '8px'})
.appendTo($column); .appendTo($right);
risk = ['Unknown', 'Severe', 'High', 'Significant', 'General', 'Low']; risk = ['Unknown', 'Severe', 'High', 'Significant', 'General', 'Low'];
Ox.merge( Ox.merge(
['Unknown'], ['Unknown'],
@ -79,7 +82,7 @@ pandora.ui.siteDialog = function(section) {
+ (risk[i].length > 6 ? '<br/> of ' : ' of<br/>') + (risk[i].length > 6 ? '<br/> of ' : ' of<br/>')
+ 'Legal Action</div>' + 'Legal Action</div>'
) )
.appendTo($column); .appendTo($right);
}); });
} }
}); });
@ -135,15 +138,18 @@ pandora.ui.siteDialog = function(section) {
minWidth: 688, // 16 + 256 + 16 + 384 + 16 minWidth: 688, // 16 + 256 + 16 + 384 + 16
removeOnClose: true, removeOnClose: true,
title: Ox.getObjectById(tabs, section).title, title: Ox.getObjectById(tabs, section).title,
width: Math.round(window.innerWidth * 0.75), width: dialogWidth
}) })
.bindEvent({ .bindEvent({
close: function(data) { close: function(data) {
pandora.UI.set({page: ''}); pandora.UI.set({page: ''});
}, },
resize: function(data) { resize: function(data) {
if ($tabPanel.selected() == 'contact') { var selected = $tabPanel.selected();
if (selected == 'contact') {
pandora.$ui.contactForm.resize(); pandora.$ui.contactForm.resize();
} else if (selected == 'news') {
} }
} }
}); });