add news.js

static/js/pandora/news.js

@@ -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;
+
+};

static/js/pandora/siteDialog.js

@@ -4,15 +4,21 @@
 
 pandora.ui.siteDialog = function(section) {
 
-    var tabs = Ox.merge(
+    var dialogWidth = Math.round(window.innerWidth * 0.75),
-        Ox.clone(pandora.site.sitePages, true),
+        isEditable = pandora.site.capabilities.canEditSitePages[pandora.user.level],
-        [{id: 'software', title: 'Software'}]
+        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],
+                                editable: isEditable,
-                                tooltip: pandora.site.capabilities.canEditSitePages[pandora.user.level]
+                                tooltip: isEditable ? 'Doubleclick to edit' : '',
-                                    ? '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') {
+                    
                 }
             }
         });