diff --git a/static/js/home.bakma.js b/static/js/home.bakma.js index 16dc5b8..e5faf6e 100644 --- a/static/js/home.bakma.js +++ b/static/js/home.bakma.js @@ -132,10 +132,6 @@ pandora.ui.home = function() { var folder = pandora.getListData().folder, value = $findInput.value(); folder && pandora.$ui.folderList[folder].options({selected: []}); - if (pandora.user.ui.section == 'items') { - pandora.$ui.findSelect.value('*'); - pandora.$ui.findInput.value(value); - } that.fadeOutScreen(); pandora.UI.set({ page: '', @@ -147,6 +143,8 @@ pandora.ui.home = function() { }, section: 'items' }); + pandora.$ui.findSelect && pandora.$ui.findSelect.value('*'); + pandora.$ui.findInput && pandora.$ui.findInput.value(value); } }) .appendTo($box), @@ -175,18 +173,17 @@ pandora.ui.home = function() { }) .appendTo($box), + $footer = Ox.Element().css({ + clear: 'both', + height: '64px', + paddingTop: '12px' + }), + $signupButton = Ox.Button({ title: Ox._('Sign Up'), width: 122 }) .css({ - position: 'absolute', - left: 0, - top: '144px', - right: '390px', - bottom: 0, - margin: '0 auto 0 auto', - opacity: 0 }) .bindEvent({ click: function() { @@ -200,13 +197,7 @@ pandora.ui.home = function() { width: 122 }) .css({ - position: 'absolute', - left: 0, - top: '144px', - right: '130px', - bottom: 0, - margin: '0 auto 0 auto', - opacity: 0 + marginLeft: '8px', }) .bindEvent({ click: function() { @@ -220,13 +211,6 @@ pandora.ui.home = function() { width: 252 }) .css({ - position: 'absolute', - left: 0, - top: '144px', - right: '260px', - bottom: 0, - margin: '0 auto 0 auto', - opacity: 0 }) .bindEvent({ click: function() { @@ -240,452 +224,66 @@ pandora.ui.home = function() { width: 252 }) .css({ - position: 'absolute', - left: '260px', - top: '144px', - right: 0, - bottom: 0, - margin: '0 auto 0 auto', - opacity: 0 + marginLeft: '8px' }) .bindEvent({ click: function() { pandora.UI.set({page: 'about'}); that.fadeOutScreen(); } - }) - .appendTo($box), + }), $features = $('
') .attr({id: 'lists'}) .css({ position: 'absolute', left: 0, - top: '184px', + top: '152px', right: 0, bottom: 0, - width: '560px', + width: '512px', margin: '0 auto 0 auto', opacity: 0 }) .appendTo($box), $support = $('
').css({ - position: 'absolute', - left: 0, - top: '428px', - right: 0, - bottom: '16px', - width: '530px', - margin: '0 auto 0 auto', - opacity: 0, - display: 'none' + clear: 'both', }).append( $('').attr({src: '/static/png/sd.logo.png'}).css({width: '64px', height: '64px', float: 'left'}) ).append( - //$('
').html('“Bu websitesi Sivil Düşün AB Programı Aktivist Desteği kapsamında Avrupa Birliği desteği ile hazırlanmıştır.” “Bu websitesi içeriğinin sorumluluğu tamamıyla bak.ma kolektifi sorumlularına aittir ve AB\'nin görüşlerini yansıtmamaktadır.”') $('
').html('“Bu websitesi Sivil Düşün AB Programı Aktivist Desteği kapsamında Avrupa Birliği desteği ile hazırlanmıştır.” “Bu websitesi içeriğinin sorumluluğu tamamıyla Koza Görsel Kültür ve Sanat Derneği\'ne aittir ve AB\'nin görüşlerini yansıtmamaktadır.”') - ).appendTo($box); - + ); if (pandora.user.level == 'guest') { - $signupButton.appendTo($box); - $signinButton.appendTo($box); + $signupButton.appendTo($footer); + $signinButton.appendTo($footer); } else { - $preferencesButton.appendTo($box); + $preferencesButton.appendTo($footer); } + $aboutButton.appendTo($footer); function showFeatures() { - var $space, - featured = {}, - find = { - query: { - conditions: [{key: 'status', value: 'featured', operator: '=='}], - operator: '&' - }, - keys: ['description', 'modified', 'name', 'user'], - 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(); - }); - }); - }); - 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, - $featuresBox, $featuresContainer, $featuresContent, - $featureBox = [], $featureIcon = [], - $previousButton, $nextButton; + pandora.api.getHomeItems({active: true}, function(result) { + var items = result.data.items.filter(pandora.isCompleteHomeItem), + $texts; + $features.empty(); 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', - 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 = $('
') - .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' - }) - .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); - } - }); - } - 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); - $features.animate({opacity: 1}, 250); - $support.css({ - opacity: 0, - display: 'block' - }).animate({ - opacity: 1 - }, 250); + $texts = Ox.Element().appendTo($features); + items.forEach(function(item) { + var $item = pandora.renderHomeItem({ + data: item + }).appendTo($texts); + }); + } else { + $features.css({ + top: '132px' + }); } - - 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; - } - - function getTooltip(item) { - return Ox._('View {0}', [Ox._(Ox.toTitleCase(item.type))]) - } - - function openItem(i) { - 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 - })); - } - - function scrollToPosition(i, animate) { - if (i >= 0 && i <= items.length - max && i != position) { - position = i; - $featuresContent.stop().animate({ - left: (position * -65) + 'px' - }, animate ? 250 : 0, function() { - if (position == 0) { - $previousButton.removeClass('visible').stop().animate({ - opacity: 0 - }, 250, function() { - $previousButton.hide(); - }); - } else { - $previousButton.addClass('visible'); - } - if (position == items.length - max) { - $nextButton.removeClass('visible').stop().animate({ - opacity: 0 - }, 250, function() { - $nextButton.hide(); - }); - } else { - $nextButton.addClass('visible'); - } - if (mouse) { - $featuresBox.trigger('mouseenter'); - } - }); - } - } - - 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]) - ); - } - } - - } + $features.append($footer); + $features.append($support); + $features.animate({opacity: 1}, 250); + }); } that.fadeInScreen = function() {