Aspect navigation rework started..
ToDo: * Fix failing posts cuke, seems to be timing issue * Populate stream title when no aspects selected * All aspects selected by default?
This commit is contained in:
Dan Hansen & Gonzalo Rodriguez
Gonzalo Rodriguez
parent
97d514dd65
commit
2057c8fcf1
7 changed files with 127 additions and 192 deletions
|
|
@ -62,7 +62,6 @@ javascripts:
|
||||||
- public/javascripts/friend-finder.js
|
- public/javascripts/friend-finder.js
|
||||||
home:
|
home:
|
||||||
- public/javascripts/publisher.js
|
- public/javascripts/publisher.js
|
||||||
- public/javascripts/aspect-filters.js
|
|
||||||
- public/javascripts/aspect-edit-pane.js
|
- public/javascripts/aspect-edit-pane.js
|
||||||
- public/javascripts/fileuploader-custom.js
|
- public/javascripts/fileuploader-custom.js
|
||||||
people:
|
people:
|
||||||
|
|
|
||||||
|
|
@ -1,173 +0,0 @@
|
||||||
/* Copyright (c) 2010, Diaspora Inc. This file is
|
|
||||||
* licensed under the Affero General Public License version 3 or later. See
|
|
||||||
* the COPYRIGHT file.
|
|
||||||
*/
|
|
||||||
|
|
||||||
var AspectFilters = {
|
|
||||||
selectedGUIDS: [],
|
|
||||||
activeRequest: null,
|
|
||||||
initialize: function(){
|
|
||||||
AspectFilters.initializeSelectedGUIDS();
|
|
||||||
AspectFilters.interceptAspectLinks();
|
|
||||||
AspectFilters.interceptAspectNavLinks();
|
|
||||||
},
|
|
||||||
initializeSelectedGUIDS: function(){
|
|
||||||
$("#aspect_nav .aspect_selector").each(function(){
|
|
||||||
var button = $(this),
|
|
||||||
guid = button.attr('data-guid');
|
|
||||||
|
|
||||||
if(guid && location.href.search("a_ids..="+guid+"(#|&|$)") != -1){
|
|
||||||
button.parent().addClass('active');
|
|
||||||
AspectFilters.selectedGUIDS.push(guid);
|
|
||||||
$("#aspect_nav li.all_aspects").removeClass('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
interceptAspectLinks: function(){
|
|
||||||
$("a.hard_aspect_link").live("click", AspectFilters.aspectLinkClicked);
|
|
||||||
},
|
|
||||||
aspectLinkClicked: function(e){
|
|
||||||
var link = $(this);
|
|
||||||
e.preventDefault();
|
|
||||||
if( !link.hasClass('aspect_selector') ){
|
|
||||||
AspectFilters.switchToAspect(link);
|
|
||||||
}
|
|
||||||
|
|
||||||
// remove focus
|
|
||||||
this.blur();
|
|
||||||
|
|
||||||
$('html, body').animate({scrollTop:0}, 'fast');
|
|
||||||
},
|
|
||||||
switchToAspect: function(aspectLi){
|
|
||||||
var guid = aspectLi.attr('data-guid');
|
|
||||||
|
|
||||||
// select correct aspect in filter list & deselect others
|
|
||||||
$("#aspect_nav li.active").removeClass('active');
|
|
||||||
aspectLi.addClass('active');
|
|
||||||
|
|
||||||
AspectFilters.fadeOut();
|
|
||||||
|
|
||||||
AspectFilters.performAjax( aspectLi.attr('href'));
|
|
||||||
},
|
|
||||||
interceptAspectNavLinks: function(){
|
|
||||||
$("#aspect_nav a.aspect_selector").click(function(e){
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// loading animation
|
|
||||||
AspectFilters.fadeOut();
|
|
||||||
|
|
||||||
// filtering //////////////////////
|
|
||||||
var $this = $(this),
|
|
||||||
listElement = $this.parent(),
|
|
||||||
guid = $this.attr('data-guid'),
|
|
||||||
homeListElement = $("#aspect_nav li.all_aspects");
|
|
||||||
|
|
||||||
if( listElement.hasClass('active') ){
|
|
||||||
// remove filter
|
|
||||||
var idx = AspectFilters.selectedGUIDS.indexOf( guid );
|
|
||||||
if( idx != -1 ){
|
|
||||||
AspectFilters.selectedGUIDS.splice(idx,1);
|
|
||||||
}
|
|
||||||
listElement.removeClass('active');
|
|
||||||
|
|
||||||
if(AspectFilters.selectedGUIDS.length === 0){
|
|
||||||
homeListElement.addClass('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// append filter
|
|
||||||
if(AspectFilters.selectedGUIDS.indexOf( guid == 1)){
|
|
||||||
AspectFilters.selectedGUIDS.push( guid );
|
|
||||||
}
|
|
||||||
listElement.addClass('active');
|
|
||||||
|
|
||||||
homeListElement.removeClass('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
AspectFilters.performAjax(AspectFilters.generateURL());
|
|
||||||
});
|
|
||||||
},
|
|
||||||
generateURL: function(){
|
|
||||||
var baseURL = location.href.split("?")[0];
|
|
||||||
|
|
||||||
// generate new url
|
|
||||||
baseURL = baseURL.replace('#','');
|
|
||||||
baseURL += '?';
|
|
||||||
for(i=0; i < AspectFilters.selectedGUIDS.length; i++){
|
|
||||||
baseURL += 'a_ids[]='+ AspectFilters.selectedGUIDS[i] +'&';
|
|
||||||
}
|
|
||||||
|
|
||||||
if(!$("#publisher").hasClass("closed")) {
|
|
||||||
// open publisher
|
|
||||||
baseURL += "op=true";
|
|
||||||
} else {
|
|
||||||
// slice last '&'
|
|
||||||
baseURL = baseURL.slice(0,baseURL.length-1);
|
|
||||||
}
|
|
||||||
return baseURL;
|
|
||||||
},
|
|
||||||
performAjax: function(newURL) {
|
|
||||||
var post = $("#publisher textarea").val(),
|
|
||||||
photos = {};
|
|
||||||
|
|
||||||
//pass photos
|
|
||||||
$('#photodropzone img').each(function(){
|
|
||||||
var img = $(this);
|
|
||||||
var guid = img.attr('data-id');
|
|
||||||
var url = img.attr('src');
|
|
||||||
photos[guid] = url;
|
|
||||||
});
|
|
||||||
|
|
||||||
// set url
|
|
||||||
// some browsers (Firefox for example) don't support pushState
|
|
||||||
if (typeof(history.pushState) == 'function') {
|
|
||||||
history.pushState(null, document.title, newURL);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
AspectFilters.activeRequest.abort();
|
|
||||||
} catch(e) {} finally {
|
|
||||||
AspectFilters.activeRequest = null;
|
|
||||||
}
|
|
||||||
AspectFilters.activeRequest = $.ajax({
|
|
||||||
url : newURL,
|
|
||||||
dataType : 'script',
|
|
||||||
success : function(data){
|
|
||||||
// fill in publisher
|
|
||||||
// (not cached because this element changes)
|
|
||||||
|
|
||||||
var textarea = $("#publisher textarea");
|
|
||||||
var photozone = $('#photodropzone');
|
|
||||||
|
|
||||||
if( post !== "" ) {
|
|
||||||
textarea.val(post);
|
|
||||||
textarea.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
var photos_html = "";
|
|
||||||
for(var key in photos){
|
|
||||||
$("#publisher textarea").addClass("with_attachments");
|
|
||||||
photos_html = photos_html + "<li style='position:relative;'> " + ("<img src='" + photos[key] +"' data-id='" + key + "'>") + "</li>";
|
|
||||||
}
|
|
||||||
|
|
||||||
// reinit listeners on stream
|
|
||||||
photozone.html(photos_html);
|
|
||||||
Diaspora.page.publish("stream/reloaded");
|
|
||||||
|
|
||||||
// fade contents back in
|
|
||||||
AspectFilters.fadeIn();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fadeIn: function(){
|
|
||||||
$("#aspect_stream_container").fadeTo(100, 1);
|
|
||||||
$("#aspect_contact_pictures").fadeTo(100, 1);
|
|
||||||
},
|
|
||||||
fadeOut: function(){
|
|
||||||
$("#aspect_stream_container").fadeTo(100, 0.4);
|
|
||||||
$("#aspect_contact_pictures").fadeTo(100, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$(document).ready(function(){
|
|
||||||
AspectFilters.initialize();
|
|
||||||
});
|
|
||||||
|
|
@ -2,6 +2,7 @@ Diaspora.Pages.AspectsIndex = function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
this.subscribe("page/ready", function(evt, document) {
|
this.subscribe("page/ready", function(evt, document) {
|
||||||
|
self.aspectNavigation = self.instantiate("AspectNavigation", document.find("ul#aspect_nav"));
|
||||||
self.stream = self.instantiate("Stream", document.find("#aspect_stream_container"));
|
self.stream = self.instantiate("Stream", document.find("#aspect_stream_container"));
|
||||||
self.infiniteScroll = self.instantiate("InfiniteScroll");
|
self.infiniteScroll = self.instantiate("InfiniteScroll");
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -376,9 +376,9 @@ var Publisher = {
|
||||||
},
|
},
|
||||||
onSuccess: function(data, json, xhr){
|
onSuccess: function(data, json, xhr){
|
||||||
if (Publisher.bookmarklet == false) {
|
if (Publisher.bookmarklet == false) {
|
||||||
var isPostVisible = AspectFilters.selectedGUIDS.length == 0;
|
var isPostVisible = Diaspora.page.aspectNavigation.selectedAspects().length == 0;
|
||||||
var postedTo = Publisher.selectedAspectIds();
|
var postedTo = Publisher.selectedAspectIds();
|
||||||
$.each(AspectFilters.selectedGUIDS, function(index, value){
|
$.each(Diaspora.page.aspectNavigation.selectedAspects(), function(index, value) {
|
||||||
if (postedTo.indexOf(parseInt(value)) > -1)
|
if (postedTo.indexOf(parseInt(value)) > -1)
|
||||||
isPostVisible = true;
|
isPostVisible = true;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
122
public/javascripts/widgets/aspect-navigation.js
Normal file
122
public/javascripts/widgets/aspect-navigation.js
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
/* Copyright (c) 2010, Diaspora Inc. This file is
|
||||||
|
* licensed under the Affero General Public License version 3 or later. See
|
||||||
|
* the COPYRIGHT file.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
Diaspora.Widgets.AspectNavigation = function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.subscribe("widget/ready", function(evt, aspectNavigation) {
|
||||||
|
$.extend(self, {
|
||||||
|
aspectNavigation: aspectNavigation,
|
||||||
|
aspectSelectors: aspectNavigation.find("a.aspect_selector[data-guid]"),
|
||||||
|
homeSelector: aspectNavigation.find("a.home_selector"),
|
||||||
|
});
|
||||||
|
|
||||||
|
self.aspectSelectors.click(self.toggleSelection);
|
||||||
|
self.aspectSelectors.debounce("click", self.performAjax, 250);
|
||||||
|
self.homeSelector.click(self.selectAll);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.selectedAspects = function() {
|
||||||
|
return self.aspectNavigation.find("li.active[data-aspect_id]").map(function() { return $(this).data('aspect_id') });
|
||||||
|
};
|
||||||
|
|
||||||
|
this.toggleSelection = function(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
|
||||||
|
$(this).parent().toggleClass("active");
|
||||||
|
};
|
||||||
|
|
||||||
|
this.selectAll = function(evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
|
||||||
|
var aspectLis = self.aspectSelectors.parent();
|
||||||
|
|
||||||
|
if (aspectLis.not(".active").length === 0) {
|
||||||
|
aspectLis.removeClass("active");
|
||||||
|
|
||||||
|
} else {
|
||||||
|
aspectLis.addClass("active");
|
||||||
|
self.performAjax();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.generateURL = function() {
|
||||||
|
var baseURL = location.href.split("?")[0];
|
||||||
|
|
||||||
|
// generate new url
|
||||||
|
baseURL = baseURL.replace('#','');
|
||||||
|
baseURL += '?';
|
||||||
|
|
||||||
|
self.aspectSelectors.each(function() {
|
||||||
|
var aspectSelector = $(this);
|
||||||
|
if(aspectSelector.parent().hasClass("active")) {
|
||||||
|
baseURL += "a_ids[]=" + aspectSelector.data("guid") + "&";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(!$("#publisher").hasClass("closed")) {
|
||||||
|
// open publisher
|
||||||
|
baseURL += "op=true";
|
||||||
|
} else {
|
||||||
|
// slice last '&'
|
||||||
|
baseURL = baseURL.slice(0,baseURL.length-1);
|
||||||
|
}
|
||||||
|
return baseURL;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.performAjax = function() {
|
||||||
|
var post = $("#publisher textarea").val(),
|
||||||
|
newURL = self.generateURL(),
|
||||||
|
photos = {};
|
||||||
|
|
||||||
|
//pass photos
|
||||||
|
$('#photodropzone img').each(function() {
|
||||||
|
var img = $(this);
|
||||||
|
photos[img.attr("data-id")] = img.attr("src");
|
||||||
|
});
|
||||||
|
|
||||||
|
if (typeof(history.pushState) == 'function') {
|
||||||
|
history.pushState(null, document.title, newURL);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(self.jXHR) {
|
||||||
|
self.jXHR.abort();
|
||||||
|
self.jXHR = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
self.fadeOut();
|
||||||
|
self.jXHR = $.getScript(newURL, function(data) {
|
||||||
|
var textarea = $("#publisher textarea"),
|
||||||
|
photozone = $("#photodropzone");
|
||||||
|
|
||||||
|
if( post !== "" ) {
|
||||||
|
textarea.val(post).focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
$.each(photos, function(GUID, URL) {
|
||||||
|
photozone.append([
|
||||||
|
'<li style="position: relative;">',
|
||||||
|
'<img src="' + URL + ' data-id="' + GUID + '/>',
|
||||||
|
'</li>'
|
||||||
|
].join(""));
|
||||||
|
});
|
||||||
|
|
||||||
|
self.globalPublish("stream/reloaded");
|
||||||
|
self.fadeIn();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.fadeOut = function() {
|
||||||
|
$("#aspect_stream_container").fadeTo(100, 0.4);
|
||||||
|
$("#selected_aspect_contacts").fadeTo(100, 0.4);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.fadeIn = function() {
|
||||||
|
$("#aspect_stream_container").fadeTo(100, 1);
|
||||||
|
$("#selected_aspect_contacts").fadeTo(100, 1);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
/* Copyright (c) 2010, Diaspora Inc. This file is
|
|
||||||
* licensed under the Affero General Public License version 3 or later. See
|
|
||||||
* the COPYRIGHT file.
|
|
||||||
*/
|
|
||||||
|
|
||||||
describe('AspectFilters', function(){
|
|
||||||
it('initializes selectedGUIDS', function(){
|
|
||||||
expect(AspectFilters.selectedGUIDS).toEqual([]);
|
|
||||||
});
|
|
||||||
it('initializes activeRequest', function(){
|
|
||||||
expect(AspectFilters.activeRequest).toEqual(null);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -40,7 +40,6 @@ src_files:
|
||||||
- public/javascripts/stream.js
|
- public/javascripts/stream.js
|
||||||
- public/javascripts/validation.js
|
- public/javascripts/validation.js
|
||||||
- public/javascripts/rails.js
|
- public/javascripts/rails.js
|
||||||
- public/javascripts/aspect-filters.js
|
|
||||||
- public/javascripts/aspects-dropdown.js
|
- public/javascripts/aspects-dropdown.js
|
||||||
- public/javascripts/content-updater.js
|
- public/javascripts/content-updater.js
|
||||||
- public/javascripts/tag-followings.js
|
- public/javascripts/tag-followings.js
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue