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
|
||||
home:
|
||||
- public/javascripts/publisher.js
|
||||
- public/javascripts/aspect-filters.js
|
||||
- public/javascripts/aspect-edit-pane.js
|
||||
- public/javascripts/fileuploader-custom.js
|
||||
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;
|
||||
|
||||
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.infiniteScroll = self.instantiate("InfiniteScroll");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -375,11 +375,11 @@ var Publisher = {
|
|||
}
|
||||
},
|
||||
onSuccess: function(data, json, xhr){
|
||||
if(Publisher.bookmarklet == false){
|
||||
var isPostVisible = AspectFilters.selectedGUIDS.length == 0;
|
||||
if (Publisher.bookmarklet == false) {
|
||||
var isPostVisible = Diaspora.page.aspectNavigation.selectedAspects().length == 0;
|
||||
var postedTo = Publisher.selectedAspectIds();
|
||||
$.each(AspectFilters.selectedGUIDS, function(index, value){
|
||||
if(postedTo.indexOf(parseInt(value))>-1)
|
||||
$.each(Diaspora.page.aspectNavigation.selectedAspects(), function(index, value) {
|
||||
if (postedTo.indexOf(parseInt(value)) > -1)
|
||||
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/validation.js
|
||||
- public/javascripts/rails.js
|
||||
- public/javascripts/aspect-filters.js
|
||||
- public/javascripts/aspects-dropdown.js
|
||||
- public/javascripts/content-updater.js
|
||||
- public/javascripts/tag-followings.js
|
||||
|
|
|
|||
Loading…
Reference in a new issue