From dc5fd74d9faf91e0c0da164a4d5106ecc694f18e Mon Sep 17 00:00:00 2001 From: j Date: Thu, 9 Feb 2017 03:50:27 +0000 Subject: [PATCH] call home --- pandora/home/models.py | 2 +- static/js/home.indiancinema.js | 12 +- static/js/home.padma.js | 408 ++++++++------------------------- static/js/homeDialog.js | 65 ++++-- 4 files changed, 141 insertions(+), 346 deletions(-) diff --git a/pandora/home/models.py b/pandora/home/models.py index 4031ab9a..2ed266c9 100644 --- a/pandora/home/models.py +++ b/pandora/home/models.py @@ -81,7 +81,7 @@ class Item(models.Model): 'index': self.index, } j.update(self.data) - if 'contentid' in j and (not keys or 'content' in keys): + if 'contentid' in j: content_keys = [ 'description', 'modified', diff --git a/static/js/home.indiancinema.js b/static/js/home.indiancinema.js index 9f495c10..dcf81b8f 100644 --- a/static/js/home.indiancinema.js +++ b/static/js/home.indiancinema.js @@ -394,17 +394,7 @@ pandora.ui.home = function() { } function getHTML(item) { - if (item.type == 'custom') { - return '' + item.title + '

' + item.text; - } - return '' - + ( - (lists && edits) || (lists && texts) || (edits && texts) - ? Ox._(Ox.toTitleCase(item.type)) + ': ' - : '' - ) - + Ox.encodeHTMLEntities(item.title) + '

' - + item.text; + return '' + Ox.encodeHTMLEntities(item.title) + '

' + item.text; } function getTooltip(item) { diff --git a/static/js/home.padma.js b/static/js/home.padma.js index 6d275f09..15882b56 100644 --- a/static/js/home.padma.js +++ b/static/js/home.padma.js @@ -289,321 +289,122 @@ pandora.ui.home = function() { sort: [{key: 'position', operator: '+'}] }, items, lists, edits, texts; - pandora.api.findLists(find, function(result) { - lists = result.data.items.length; - items = result.data.items.map(function(item) { - return Ox.extend(item, {type: 'list'}); - }); - pandora.api.findEdits(find, function(result) { - edits = result.data.items.length; - items = items.concat(result.data.items.map(function(item) { - return Ox.extend(item, {type: 'edit'}); - })); - pandora.api.findTexts(find, function(result) { - texts = result.data.items.length; - items = items.concat(result.data.items.map(function(item) { - return Ox.extend(item, {type: 'text'}); - })); - $features.empty(); - show(); - }); - }); + pandora.api.getHomeItems({active: true}, function(result) { + items = result.data.items; + lists = 1; + edits = 1; + texts = 1; + show(); }); function show() { var counter = 0, max = 8, mouse = false, position = 0, selected = 0, color = Ox.Theme() == 'oxlight' ? 'rgb(0, 0, 0)' : Ox.Theme() == 'oxmedium' ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)', - $label, $icon, $text, + $label, $texts, $featuresBox, $featuresContainer, $featuresContent, $featureBox = [], $featureIcon = [], $previousButton, $nextButton; if (items.length) { - $label = Ox.Label({ - textAlign: 'center', - title: '' + Ox._('Featured ' + ( - lists == 1 && edits == 0 && texts == 0 ? 'List' - : lists == 0 && edits == 1 && texts == 0 ? 'Edit' - : lists == 0 && edits == 0 && texts == 1 ? 'Text' - : edits == 0 && texts == 0 ? 'Lists' - : lists == 0 && texts == 0 ? 'Edits' - : lists == 0 && edits == 0 ? 'Texts' - : texts == 0 ? 'Lists and Edits' - : edits == 0 ? 'Lists and Texts' - : lists == 0 ? 'Edits and Texts' - : 'Lists, Edits and Texts' - )) + '', - width: 512 - }) - .css({ - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - margin: '0 auto 0 auto' - }) - .appendTo($features); - $text = Ox.Label({ - width: 386 - }) - .addClass('OxSelectable') - .css({ - position: 'absolute', - left: '24px', - top: '24px', - right: 0, - height: '104px', - borderTopLeftRadius: '32px', - borderBottomLeftRadius: '32px', - padding: '8px 8px 8px 130px', - overflowY: 'auto', - lineHeight: '14px', - textOverflow: 'ellipsis', - whiteSpace: 'normal' - }) - .html( - getHTML(items[selected]) - ) - .appendTo($features); - pandora.createLinks($text); - $icon = Ox.Element({ - element: '', - tooltip: getTooltip(items[selected]) - }) - .attr({ - src: getImageURL(items[selected]) - }) - .css({ - position: 'absolute', - left: 0, - top: '24px', - right: '390px', - width: '122px', - height: '122px', - borderRadius: '32px', - margin: '0 auto 0 auto', - cursor: 'pointer' - }) - .bindEvent({ - anyclick: function() { - openItem(selected); - } - }) - .appendTo($features); - if (items.length > 1) { - $featuresBox = $('
') + $features.empty(); + $texts = Ox.Element().appendTo($features); + var top = 24; + items.forEach(function(item) { + var $text, $icon; + $icon = Ox.Element({ + element: '', + tooltip: getTooltip(item) + }) + .attr({ + src: item.image + }) .css({ - position: 'absolute', left: 0, - top: '150px', - right: 0, - height: '65px', // 4+57+4 - width: '560px', // 16+8+512+8+16 - margin: '0 auto 0 auto' + right: '390px', + width: '122px', + height: '122px', + borderRadius: '32px', + marginRight: '8px', + cursor: 'pointer', + float: 'left' }) - .appendTo($features); - $featuresContainer = $('
') - .css({ - position: 'absolute', - left: '20px', - right: '20px', - height: '65px', - width: '520px', - overflow: 'hidden' - }) - .appendTo($featuresBox); - $featuresContent = $('
') - .css({ - position: 'absolute', - width: items.length * 65 + 'px', - height: '65px', - marginLeft: items.length < max - ? (max - items.length) * 65 / 2 + 'px' - : 0 - }) - .appendTo($featuresContainer); - if (items.length > max) { - $previousButton = Ox.Button({ - title: 'left', - type: 'image' - }) - .addClass(position > 0 ? 'visible' : '') - .css({ - position: 'absolute', - left: 0, - top: '25px', - opacity: 0 - }) - .hide() - .bindEvent({ - mousedown: function() { - counter = 0; - scrollToPosition(position - 1, true); - }, - mouserepeat: function() { - // fixme: arbitrary - if (counter++ % 5 == 0) { - scrollToPosition(position - 1, false); - } - } - }) - .appendTo($featuresBox); - $nextButton = Ox.Button({ - title: 'right', - type: 'image' - }) - .addClass(position < items.length - 1 ? 'visible' : '') - .css({ - position: 'absolute', - right: 0, - top: '25px', - opacity: 0 - }) - .hide() - .bindEvent({ - mousedown: function() { - counter = 0; - scrollToPosition(position + 1, true); - }, - mouserepeat: function() { - // fixme: arbitrary - if (counter++ % 5 == 0) { - scrollToPosition(position + 1, false); - } - } - }) - .appendTo($featuresBox); - $featuresBox.on({ - mouseenter: function() { - mouse = true; - $('.visible').show().stop().animate({ - opacity: 1 - }, 250); - }, - mouseleave: function() { - mouse = false; - $('.visible').stop().animate({ - opacity: 0 - }, 250, function() { - $(this).hide(); - }); - }, - mousewheel: function(e, delta, deltaX, deltaY) { - // fixme: arbitrary - scrollToPosition(position + Math.round(deltaX * 2), true); + .bindEvent({ + anyclick: function() { + openItem(item); } }); - } - items.forEach(function(item, i) { - $featureBox[i] = $('
') - .css({ - float: 'left', - width: '57px', - height: '57px', - padding: '2px', - margin: '2px', - borderRadius: '16px', - boxShadow: '0 0 2px ' + (i == selected ? color : 'transparent') - }) - .appendTo($featuresContent); - $featureIcon[i] = Ox.Element({ - element: '', - tooltip: ( - (lists && edits) || (lists && texts) || (edits && texts) - ? Ox._(Ox.toTitleCase(item.type)) + ': ' - : '' - ) - + Ox.encodeHTMLEntities(item.name) - }) - .attr({ - src: getImageURL(item) - }) - .css({ - width: '57px', - height: '57px', - borderRadius: '16px', - cursor: 'pointer' - }) - .bindEvent({ - doubleclick: function() { - openItem(i); - }, - singleclick: function() { - selectItem(i); - } - }) - .appendTo($featureBox[i]); - }); - self.keydown = function(e) { - var key = Ox.KEYS[e.keyCode]; - if (!Ox.Focus.focusedElementIsInput()) { - if (key == 'left' && selected > 0) { - selectItem(selected - 1); - } else if (key == 'up' && selected > 0) { - selectItem(0); - } else if (key == 'right' && selected < items.length - 1) { - selectItem(selected + 1); - } else if (key == 'down' && selected < items.length - 1) { - selectItem(items.length - 1); - } - } - }; - Ox.$document.on({keydown: self.keydown}); - } - $space = $('
') - .css({ - position: 'absolute', - top: items.length == 0 ? '0px' - : items.length == 1 ? '150px' - : '215px', - width: '560px', - height: '80px' - }) - .appendTo($features); + $text = Ox.Label({ + //width: 386 + 122 + }) + .addClass('OxSelectable') + .css({ + //position: 'absolute', + left: '24px', + //top: top + 'px', + right: 0, + height: 'auto', + padding: '8px 8px 8px 8px', + borderRadius: '32px', + marginBottom: '16px', + overflowY: 'auto', + lineHeight: '14px', + textOverflow: 'ellipsis', + whiteSpace: 'normal' + }) + .append($icon) + .append( + Ox.Element().css({ + //padding: '8px', + }).html(getHTML(item)) + + ) + .appendTo($texts); + pandora.createLinks($text); + top += 130; + }); $features.animate({opacity: 1}, 250); } function getHTML(item) { - return '' - + ( - (lists && edits) || (lists && texts) || (edits && texts) - ? Ox._(Ox.toTitleCase(item.type)) + ': ' - : '' - ) - + Ox.encodeHTMLEntities(item.name) + '

' - + item.description; - } - - function getImageURL(item) { - return '/' + item.type + '/' + item.user - + ':' + encodeURIComponent(item.name) + '/icon256.jpg?' + item.modified; + return '' + Ox.encodeHTMLEntities(item.title) + '

' + item.text; } function getTooltip(item) { - return Ox._('View {0}', [Ox._(Ox.toTitleCase(item.type))]) + return Ox._('View {0}', [Ox._(Ox.toTitleCase(item.title))]) } - function openItem(i) { + function openItem(item) { that.fadeOutScreen(); - pandora.UI.set(Ox.extend({ - section: items[i].type == 'list' ? 'items' : items[i].type + 's', - page: '' - }, items[i].type == 'list' ? { - find: { - conditions: [{ - key: 'list', - value: items[i].user + ':' - + items[i].name, - operator: '==' - }], - operator: '&' - } - } : items[i].type == 'edit' ? { - edit: items[i].user + ':' + items[i].name - } : { - text: items[i].user + ':' + items[i].name - })); + if (item.type == 'custom') { + pandora.URL.push(item.link); + } else { + pandora.UI.set(Ox.extend({ + + section: item.type == 'list' ? 'items' : item.type + 's', + page: '' + }, item.type == 'list' ? { + find: { + conditions: [{ + key: 'list', + value: item.contentid, + operator: '==' + }], + operator: '&' + } + } : item.type == 'collection' ? { + findDocuments: { + conditions: [{ + key: 'collection', + value: item.contentid, + operator: '==' + }], + operator: '&' + } + } : item.type == 'edit' ? { + edit: item.contentid + } : { + })); + } } function scrollToPosition(i, animate) { @@ -637,32 +438,7 @@ pandora.ui.home = function() { } } - function selectItem(i) { - if (i >= 0 && i <= items.length - 1 && i != selected) { - $featureBox[selected].css({ - boxShadow: 'none' - }); - selected = i; - $featureBox[selected].css({ - boxShadow: '0 0 2px ' + color - }); - if (selected < position) { - scrollToPosition(selected, true); - } else if (selected > position + max - 1) { - scrollToPosition(selected - max + 1, true); - } - $icon.attr({ - src: getImageURL(items[selected]) - }).options({ - tooltip: getTooltip(items[selected]) - }); - $text.html( - getHTML(items[selected]) - ); - } - } - - } + } } that.fadeInScreen = function() { diff --git a/static/js/homeDialog.js b/static/js/homeDialog.js index 0265116b..ade17dc4 100644 --- a/static/js/homeDialog.js +++ b/static/js/homeDialog.js @@ -53,7 +53,7 @@ pandora.ui.homeDialog = function() { renderForm(item); } }); - }); + }); function editItem(id, key, value) { var title = $title.value(); @@ -64,16 +64,37 @@ pandora.ui.homeDialog = function() { var link = $linkInput.value(); } else { var name = $nameInput.value(); + title = true; + text = true; + key = 'contentid'; } if ( !title || !text || (type == 'custom' && (!image || !link)) - || (type != 'custom' && !name) + || (type != 'custom' && !name) ) { return; } - pandora.api.editHomeItem(Ox.extend({id: id}, key, value), function(result) { - // ... + Ox.print('id', id, 'k', key, 'v', value); + var data = {id: id}; + data[key] = value; + if (key == 'contentid') { + data.type = type; + } + pandora.api.editHomeItem(data, function(result) { + Ox.Request.clearCache(); // FIXME: too much? + items.some(function(item) { + if (item.id == id) { + item[key] = value; + if (key == 'contentid') { + item.image = result.data.image; + item.text = result.data.text; + item.title = result.data.title; + renderItem(item); + } + return true; + }; + }); }); } @@ -174,8 +195,8 @@ pandora.ui.homeDialog = function() { }).css({ margin: '8px' }).bindEvent({ - change: function(data) { - var item = {type: data.value}; + change: function(data_) { + var item = {id: data.id, type: data_.value}; renderItem(item); renderForm(item, true); } @@ -189,8 +210,8 @@ pandora.ui.homeDialog = function() { }).css({ margin: '8px' }).bindEvent({ - change: function(data) { - editItem(data.id, 'image', data.value); + change: function(data_) { + editItem(data.id, 'image', data_.value); } }).appendTo($form); $linkInput = Ox.Input({ @@ -201,8 +222,8 @@ pandora.ui.homeDialog = function() { }).css({ margin: '8px' }).bindEvent({ - change: function(data) { - editItem(data.id, 'link', data.value); + change: function(data_) { + editItem(data.id, 'link', data_.value); } }).appendTo($form); } else { @@ -217,8 +238,8 @@ pandora.ui.homeDialog = function() { }).css({ margin: '8px' }).bindEvent({ - change: function(data) { - editItem(data.id, 'name', data.value); + change: function(data_) { + editItem(data.id, 'name', data_.value); } }).appendTo($form); } @@ -265,8 +286,9 @@ pandora.ui.homeDialog = function() { fontSize: '13px', fontWeight: 'bold' }).bindEvent({ - submit: function(data) { - editItem(data.id, 'title', data.value); + submit: function(data_) { + editItem(data.id, 'title', data_.value); + //fixme: update list } }).appendTo($container); $text = Ox.EditableContent({ @@ -277,8 +299,8 @@ pandora.ui.homeDialog = function() { }).css({ margin: '0 12px 0 0' }).bindEvent({ - submit: function(data) { - editItem(data.id, 'text', data.value); + submit: function(data_) { + editItem(data.id, 'text', data_.value); } }).appendTo($item); } @@ -299,7 +321,7 @@ pandora.ui.homeDialog = function() { }) }, visible: true, - width: 16, + width: 16, }, { id: 'title', @@ -341,6 +363,13 @@ pandora.ui.homeDialog = function() { }, selectbefore: function() { // ... + }, + move: function(data) { + pandora.api.sortHomeItems({ + ids: data.ids + }, function() { + Ox.Request.clearCache('HomeItems'); + }); } }) .css({ @@ -351,4 +380,4 @@ pandora.ui.homeDialog = function() { return that; -}; \ No newline at end of file +};