add news.js
This commit is contained in:
rolux
parent
34edcba8c3
commit
747b9c70f9
2 changed files with 207 additions and 18 deletions
183
static/js/pandora/news.js
Normal file
183
static/js/pandora/news.js
Normal 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;
|
||||
|
||||
};
|
||||
|
|
@ -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(
|
||||
'<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>'
|
||||
)
|
||||
.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 = $('<div>')
|
||||
$right = $('<div>')
|
||||
.css({position: 'absolute', top: '16px', right: '16px', width: '128px'})
|
||||
.appendTo($content);
|
||||
$('<img>')
|
||||
.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 ? '<br/> of ' : ' of<br/>')
|
||||
+ 'Legal Action</div>'
|
||||
)
|
||||
.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') {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue