Commit f8f05371 authored by Steffen van Bergerem's avatar Steffen van Bergerem

Merge pull request #6394 from AugierLe42e/mobile-js-refactor

Mobile JS refactor
parents a416e270 28c509ba
...@@ -83,6 +83,7 @@ Contributions are very welcome, the hard work is done! ...@@ -83,6 +83,7 @@ Contributions are very welcome, the hard work is done!
* Unifiy max-widths and page layouts [#6675](https://github.com/diaspora/diaspora/pull/6675) * Unifiy max-widths and page layouts [#6675](https://github.com/diaspora/diaspora/pull/6675)
* Enable autosizing for all textareas [#6674](https://github.com/diaspora/diaspora/pull/6674) * Enable autosizing for all textareas [#6674](https://github.com/diaspora/diaspora/pull/6674)
* Stream faces are gone [#6686](https://github.com/diaspora/diaspora/pull/6686) * Stream faces are gone [#6686](https://github.com/diaspora/diaspora/pull/6686)
* Refactor mobile javascript and add tests [#6394](https://github.com/diaspora/diaspora/pull/6394)
## Bug fixes ## Bug fixes
* Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852) * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)
......
...@@ -15,119 +15,12 @@ ...@@ -15,119 +15,12 @@
//= require diaspora //= require diaspora
//= require helpers/i18n //= require helpers/i18n
//= require widgets/timeago //= require widgets/timeago
//= require mobile/mobile_application
//= require mobile/mobile_file_uploader //= require mobile/mobile_file_uploader
//= require mobile/profile_aspects //= require mobile/profile_aspects
//= require mobile/tag_following //= require mobile/tag_following
//= require mobile/publisher //= require mobile/publisher
//= require mobile/mobile_comments //= require mobile/mobile_comments
//= require mobile/mobile_post_actions
$(document).ready(function(){ //= require mobile/mobile_drawer
$('.shield a').click(function(){
$(this).parents(".stream_element").removeClass("shield-active");
return false;
});
var showLoader = function(link){
link.addClass('loading');
};
var removeLoader = function(link){
link.removeClass('loading')
.toggleClass('active')
.toggleClass('inactive');
};
// init autosize plugin
autosize($("textarea"));
/* Drawer menu */
$("#menu-badge").bind("tap click", function(evt){
evt.preventDefault();
$("#app").toggleClass("draw");
});
/* Show / hide aspects in the drawer */
$("#all_aspects").bind("tap click", function(evt){
evt.preventDefault();
$("#all_aspects + li").toggleClass("hide");
});
/* Show / hide followed tags in the drawer */
$("#followed_tags > a").bind("tap click", function(evt){
evt.preventDefault();
$("#followed_tags + li").toggleClass("hide");
});
/* Heart toggle */
$(".like-action", ".stream").bind("tap click", function(evt){
evt.preventDefault();
var link = $(this),
likeCounter = $(this).closest(".stream_element").find(".like-count"),
url = link.data("url");
if(!link.hasClass("loading")){
if(link.hasClass('inactive')) {
$.ajax({
url: url,
dataType: 'json',
type: 'POST',
beforeSend: showLoader(link),
success: function(data){
removeLoader(link);
link.data("url", url + "/" + data.id);
if(likeCounter){
likeCounter.text(parseInt(likeCounter.text(), 10) + 1);
}
}
});
}
else if(link.hasClass("active")){
$.ajax({
url: url,
dataType: 'json',
type: 'DELETE',
beforeSend: showLoader(link),
complete: function(){
removeLoader(link);
link.data("url", url.replace(/\/\d+$/, ""));
if(likeCounter){
likeCounter.text(parseInt(likeCounter.text(), 10) - 1);
}
}
});
}
}
});
/* Reshare */
$(".reshare-action:not(.disabled)", ".stream").bind("tap click", function(evt){
evt.preventDefault();
var link = $(this),
href = link.attr("href"),
confirmText = link.attr('title');
if(!link.hasClass("loading")) {
if(link.hasClass('inactive')) {
if(confirm(confirmText)) {
$.ajax({
url: href + "&provider_display_name=mobile",
dataType: 'json',
type: 'POST',
beforeSend: showLoader(link),
success: function(){
removeLoader(link);
},
error: function(){
removeLoader(link);
alert(Diaspora.I18n.t('failed_to_reshare'));
}
});
}
}
}
});
});
// @license-end // @license-end
(function(){
Diaspora.Mobile = {
initialize: function(){
$(".shield a").click(function(){
$(this).parents(".stream_element").removeClass("shield-active");
return false;
});
// init autosize plugin
autosize($("textarea"));
}
};
})();
$(document).ready(function(){
Diaspora.Mobile.initialize();
});
...@@ -5,19 +5,11 @@ ...@@ -5,19 +5,11 @@
*/ */
(function() { (function() {
Diaspora.Mobile = {};
Diaspora.Mobile.Comments = { Diaspora.Mobile.Comments = {
stream: function(){ return $(".stream"); }, stream: function(){ return $(".stream"); },
initialize: function() { initialize: function() {
var self = this; var self = this;
$(".stream").on("tap click", "a.back_to_stream_element_top", function() {
var bottomBar = $(this).closest(".bottom_bar").first();
var streamElement = bottomBar.parent();
$("html, body").animate({
scrollTop: streamElement.offset().top - 54
}, 1000);
});
this.stream().on("tap click", "a.show-comments", function(evt){ this.stream().on("tap click", "a.show-comments", function(evt){
evt.preventDefault(); evt.preventDefault();
......
(function(){
Diaspora.Mobile.Drawer = {
initialize: function(){
$("#all_aspects").bind("tap click", function(evt){
evt.preventDefault();
$(this).find("+ li").toggleClass("hide");
});
$("#menu-badge").bind("tap click", function(evt){
evt.preventDefault();
$("#app").toggleClass("draw");
});
$("#followed_tags").bind("tap click", function(evt){
evt.preventDefault();
$(this).find("+ li").toggleClass("hide");
});
}
};
})();
$(function(){
Diaspora.Mobile.Drawer.initialize();
});
(function(){
Diaspora.Mobile.PostActions = {
initialize: function() {
$(".like-action", ".stream").bind("tap click", this.onLike);
$(".reshare-action", ".stream").bind("tap click", this.onReshare);
},
showLoader: function(link) {
link.addClass("loading");
},
hideLoader: function(link) {
link.removeClass("loading");
},
toggleActive: function(link) {
link.toggleClass("active").toggleClass("inactive");
},
like: function(likeCounter, link){
var url = link.data("url");
var onSuccess = function(data){
Diaspora.Mobile.PostActions.toggleActive(link);
link.data("url", url + "/" + data.id);
if(likeCounter){
likeCounter.text(parseInt(likeCounter.text(), 10) + 1);
}
};
$.ajax({
url: url,
dataType: "json",
type: "POST",
beforeSend: function() {
Diaspora.Mobile.PostActions.showLoader(link);
},
success: onSuccess,
complete: function() {
Diaspora.Mobile.PostActions.hideLoader(link);
}
});
},
unlike: function(likeCounter, link){
var url = link.data("url");
var onSuccess = function(){
Diaspora.Mobile.PostActions.toggleActive(link);
link.data("url", url.replace(/\/\d+$/, ""));
if(likeCounter){
var newValue = parseInt(likeCounter.text(), 10) - 1;
likeCounter.text(Math.max(newValue, 0));
}
};
$.ajax({
url: url,
dataType: "json",
type: "DELETE",
beforeSend: function() {
Diaspora.Mobile.PostActions.showLoader(link);
},
success: onSuccess,
complete: function() {
Diaspora.Mobile.PostActions.hideLoader(link);
}
});
},
onLike: function(evt){
evt.preventDefault();
var link = $(evt.target),
likeCounter = $(evt.target).closest(".stream_element").find(".like-count");
if(!link.hasClass("loading") && link.hasClass("inactive")) {
Diaspora.Mobile.PostActions.like(likeCounter, link);
}
else if(!link.hasClass("loading") && link.hasClass("active")) {
Diaspora.Mobile.PostActions.unlike(likeCounter, link);
}
},
onReshare: function(evt) {
evt.preventDefault();
var link = $(this),
href = link.attr("href"),
confirmText = link.attr("title");
if(!link.hasClass("loading") && link.hasClass("inactive") && confirm(confirmText)) {
$.ajax({
url: href + "&provider_display_name=mobile",
dataType: "json",
type: "POST",
beforeSend: function() {
Diaspora.Mobile.PostActions.showLoader(link);
},
success: function() {
Diaspora.Mobile.PostActions.toggleActive(link);
},
error: function() {
alert(Diaspora.I18n.t("failed_to_reshare"));
},
complete: function() {
Diaspora.Mobile.PostActions.hideLoader(link);
}
});
}
}
};
})();
$(function(){
Diaspora.Mobile.PostActions.initialize();
});
...@@ -65,6 +65,20 @@ describe StreamsController, :type => :controller do ...@@ -65,6 +65,20 @@ describe StreamsController, :type => :controller do
save_fixture(html_for("body"), "aspects_index_mobile_post_with_comments") save_fixture(html_for("body"), "aspects_index_mobile_post_with_comments")
end end
it "generates a mobile jasmine fixture with a public post", fixture: true do
message = bob.post(:status_message, text: "HALO WHIRLED", public: true)
5.times { bob.comment!(message, "what") }
get :aspects, format: :mobile
save_fixture(html_for("body"), "aspects_index_mobile_public_post")
end
it "generates a mobile jasmine fixture with an NSFW post", fixture: true do
message = bob.post(:status_message, text: "#NSFW", to: @bob.aspects.where(name: "generic").first.id)
5.times { bob.comment!(message, "what") }
get :aspects, format: :mobile
save_fixture(html_for("body"), "aspects_index_mobile_nsfw_post")
end
it 'generates a jasmine fixture with a followed tag', :fixture => true do it 'generates a jasmine fixture with a followed tag', :fixture => true do
@tag = ActsAsTaggableOn::Tag.create!(:name => "partytimeexcellent") @tag = ActsAsTaggableOn::Tag.create!(:name => "partytimeexcellent")
TagFollowing.create!(:tag => @tag, :user => alice) TagFollowing.create!(:tag => @tag, :user => alice)
......
describe("Diaspora.Mobile", function(){
describe("initialize", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_nsfw_post");
spyOn(window, "autosize");
});
it("calls autosize for textareas", function(){
Diaspora.Mobile.initialize();
expect(window.autosize).toHaveBeenCalled();
expect(window.autosize.calls.mostRecent().args[0].selector).toBe("textarea");
});
it("deactivates shield", function(){
Diaspora.Mobile.initialize();
var $shield = $(".stream_element").first();
expect($shield).toHaveClass("shield-active");
$shield.find(".shield a").click();
expect($shield).not.toHaveClass("shield-active");
});
});
});
describe("Diaspora.Mobile.Drawer", function(){
describe("initialize", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_post_with_comments");
Diaspora.Mobile.Drawer.initialize();
this.menuBadge = $("#menu-badge");
this.followedTags = $("#followed_tags");
this.allAspects = $("#all_aspects");
});
it("correctly binds events", function(){
expect($._data(this.allAspects[0], "events").tap.length).not.toBe(0);
expect($._data(this.allAspects[0], "events").click.length).not.toBe(0);
expect($._data(this.followedTags[0], "events").tap.length).not.toBe(0);
expect($._data(this.followedTags[0], "events").click.length).not.toBe(0);
expect($._data(this.menuBadge[0], "events").tap.length).not.toBe(0);
expect($._data(this.menuBadge[0], "events").click.length).not.toBe(0);
});
it("opens and closes the drawer", function(){
var $app = $("#app");
expect($app).not.toHaveClass("draw");
this.menuBadge.click();
expect($app).toHaveClass("draw");
this.menuBadge.click();
expect($app).not.toHaveClass("draw");
});
it("shows and hides the aspects", function(){
var $aspectList = this.allAspects.find("+ li");
expect($aspectList).toHaveClass("hide");
this.allAspects.click();
expect($aspectList).not.toHaveClass("hide");
this.allAspects.click();
expect($aspectList).toHaveClass("hide");
});
it("shows and hides the followed tags", function(){
var $tagList = this.followedTags.find("+ li");
expect($tagList).toHaveClass("hide");
this.followedTags.click();
expect($tagList).not.toHaveClass("hide");
this.followedTags.click();
expect($tagList).toHaveClass("hide");
});
});
});
describe("Diaspora.Mobile.PostActions", function(){
describe("initialize", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_public_post");
spyOn(Diaspora.Mobile.PostActions, "onLike");
spyOn(Diaspora.Mobile.PostActions, "onReshare");
Diaspora.Mobile.PostActions.initialize();
});
it("binds the events", function(){
$(".stream .like-action").trigger("tap");
expect(Diaspora.Mobile.PostActions.onLike).toHaveBeenCalled();
$(".stream .like-action").click();
expect(Diaspora.Mobile.PostActions.onLike).toHaveBeenCalled();
$(".stream .reshare-action").trigger("tap");
expect(Diaspora.Mobile.PostActions.onReshare).toHaveBeenCalled();
$(".stream .reshare-action").click();
expect(Diaspora.Mobile.PostActions.onReshare).toHaveBeenCalled();
});
});
describe("toggleActive", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_public_post");
Diaspora.Mobile.PostActions.initialize();
this.link = $(".stream .like-action").first();
});
it("toggles active and inactive classes", function(){
expect(this.link).toHaveClass("inactive");
expect(this.link).not.toHaveClass("active");
Diaspora.Mobile.PostActions.toggleActive(this.link);
expect(this.link).not.toHaveClass("inactive");
expect(this.link).toHaveClass("active");
Diaspora.Mobile.PostActions.toggleActive(this.link);
expect(this.link).toHaveClass("inactive");
expect(this.link).not.toHaveClass("active");
});
});
describe("showLoader and hideLoader", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_public_post");
Diaspora.Mobile.PostActions.initialize();
this.link = $(".stream .like-action").first();
});
it("adds and removes loading class", function(){
expect(this.link).not.toHaveClass("loading");
Diaspora.Mobile.PostActions.showLoader(this.link);
expect(this.link).toHaveClass("loading");
Diaspora.Mobile.PostActions.hideLoader(this.link);
expect(this.link).not.toHaveClass("loading");
});
});
describe("onLike", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_public_post");
spyOn(Diaspora.Mobile.PostActions, "like");
spyOn(Diaspora.Mobile.PostActions, "unlike");
Diaspora.Mobile.PostActions.initialize();
this.link = $(".stream .like-action").first();
});
it("doesn't activate the link if loading", function(){
this.link.addClass("loading");
this.link.click();
expect(Diaspora.Mobile.PostActions.like).not.toHaveBeenCalled();
expect(Diaspora.Mobile.PostActions.unlike).not.toHaveBeenCalled();
});
it("calls like if like button is inactive", function(){
this.link.removeClass("active").addClass("inactive");
this.link.click();
expect(Diaspora.Mobile.PostActions.like).toHaveBeenCalled();
});
it("calls unlike if like button is active", function(){
this.link.removeClass("inactive").addClass("active");
this.link.click();
expect(Diaspora.Mobile.PostActions.unlike).toHaveBeenCalled();
});
});
describe("like", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_public_post");
Diaspora.Mobile.PostActions.initialize();
this.link = $(".stream .like-action").first();
this.likeCounter = this.link.closest(".stream_element").find(".like-count");
});
it("always calls showLoader before sending request", function(){
spyOn(Diaspora.Mobile.PostActions, "showLoader");
Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
expect(Diaspora.Mobile.PostActions.showLoader).toHaveBeenCalled();
});
it("always calls hideLoader after receiving response", function(){
spyOn(Diaspora.Mobile.PostActions, "hideLoader");
Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{\"id\": \"18\"}"});
expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
});
it("doesn't activate the link on error", function(){
spyOn(Diaspora.Mobile.PostActions, "toggleActive");
Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
expect(Diaspora.Mobile.PostActions.toggleActive).not.toHaveBeenCalled();
expect(this.likeCounter.text()).toBe("0");
});
it("activates link on success", function(){
spyOn(Diaspora.Mobile.PostActions, "toggleActive");
var data = this.link.data("url");
Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{\"id\": \"18\"}"});
expect(Diaspora.Mobile.PostActions.toggleActive).toHaveBeenCalled();
expect(this.likeCounter.text()).toBe("1");
expect(this.link.data("url")).toBe(data + "/18");
});
});
describe("unlike", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_public_post");
Diaspora.Mobile.PostActions.initialize();
this.link = $(".stream .like-action").first();
this.likeCounter = this.link.closest(".stream_element").find(".like-count");
Diaspora.Mobile.PostActions.like(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{\"id\": \"18\"}"});
});
it("always calls showLoader before sending request", function(){
spyOn(Diaspora.Mobile.PostActions, "showLoader");
Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
expect(Diaspora.Mobile.PostActions.showLoader).toHaveBeenCalled();
});
it("always calls hideLoader after receiving response", function(){
spyOn(Diaspora.Mobile.PostActions, "hideLoader");
Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
});
it("doesn't unlike on error", function(){
spyOn(Diaspora.Mobile.PostActions, "toggleActive");
Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
expect(Diaspora.Mobile.PostActions.toggleActive).not.toHaveBeenCalled();
expect(this.likeCounter.text()).toBe("1");
});
it("deactivates link on success", function(){
spyOn(Diaspora.Mobile.PostActions, "toggleActive");
var data = this.link.data("url");
expect(this.likeCounter.text()).toBe("1");
Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
expect(Diaspora.Mobile.PostActions.toggleActive).toHaveBeenCalled();
expect(this.likeCounter.text()).toBe("0");
expect(this.link.data("url")).toBe(data.replace(/\/\d+$/, ""));
});
it("doesn't produce negative like count", function(){
expect(this.likeCounter.text()).toBe("1");
Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
expect(this.likeCounter.text()).toBe("0");
Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
expect(this.likeCounter.text()).toBe("0");
Diaspora.Mobile.PostActions.unlike(this.likeCounter, this.link);
jasmine.Ajax.requests.mostRecent().respondWith({status: 204});
expect(this.likeCounter.text()).toBe("0");
});
});
describe("onReshare", function(){
beforeEach(function(){
spec.loadFixture("aspects_index_mobile_public_post");
Diaspora.Mobile.PostActions.initialize();
this.reshareLink = $(".stream .reshare-action");
spyOn(window, "confirm").and.returnValue(true);
spyOn(window, "alert");
});
it("always calls showLoader before sending request and hideLoader after receiving response", function(){
spyOn(Diaspora.Mobile.PostActions, "hideLoader");
spyOn(Diaspora.Mobile.PostActions, "showLoader");
this.reshareLink.click();
expect(Diaspora.Mobile.PostActions.showLoader).toHaveBeenCalled();
jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
this.reshareLink.click();
expect(Diaspora.Mobile.PostActions.showLoader).toHaveBeenCalled();
jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{}"});
expect(Diaspora.Mobile.PostActions.hideLoader).toHaveBeenCalled();
});
it("calls toggleActive on success", function(){
spyOn(Diaspora.Mobile.PostActions, "toggleActive");
this.reshareLink.click();
jasmine.Ajax.requests.mostRecent().respondWith({status: 201, responseText: "{}"});
expect(Diaspora.Mobile.PostActions.toggleActive).toHaveBeenCalledWith(this.reshareLink);
});
it("pops an alert on error", function(){
this.reshareLink.click();
jasmine.Ajax.requests.mostRecent().respondWith({status: 400});
expect(window.alert).toHaveBeenCalledWith(Diaspora.I18n.t("failed_to_reshare"));
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment