twister HTML + Javascript User Interface
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

475 lines
14 KiB

// interface_common.js
// 2013 Lucas Leal, Miguel Freitas
//
// Common interface functions to all pages, modal manipulation, button manipulation etc
// Profile, mentions and hashtag modal
// Post actions: submit, count characters
//dispara o modal genérico
//o modalClass me permite fazer tratamentos específicos de CSS para cada modal
function openModal( modalClass )
{
var $oldModal = $("body").children(".modal-blackout");
var $template = $( "#templates" );
var $templateModal = $template.find( ".modal-blackout" ).clone(true);
$templateModal.addClass( modalClass );
if( $oldModal.length ) {
$templateModal.show();
$oldModal.replaceWith($templateModal);
} else {
$templateModal.prependTo( "body" ).fadeIn( "fast" );
}
//escondo o overflow da tela
var $body = $( "body" );
$body.css({
"overflow": "hidden",
})
}
//fecha o modal removendo o conteúdo por detach
function closeModal($this)
{
var $body = $( "body" );
var $modalWindows = $( "body" ).children( ".modal-blackout" );
$modalWindows.fadeOut( "fast", function()
{
$modalWindows.detach();
});
$body.css({
"overflow": "auto",
"margin-right": "0"
});
}
function checkNetworkStatusAndAskRedirect(cbFunc, cbArg) {
networkUpdate(function(args) {
if( !twisterdConnectedAndUptodate ) {
var redirect =
window.confirm("Local daemon is not connected to the network or\n" +
"block chain is outdated. If you stay in this page\n" +
"your actions may not work.\n" +
"Do you want to check Network Status page instead?");
if( redirect )
$.MAL.goNetwork();
} else {
if( args.cbFunc )
args.cbFunc(args.cbArg);
}
}, {cbFunc:cbFunc,cbArg:cbArg});
}
function timeGmtToText(t) {
var d = new Date(0);
d.setUTCSeconds(t);
return d.toString().replace(/GMT.*/g,"");
}
function timeSincePost(t) {
var d = new Date(0);
d.setUTCSeconds(t);
var now = new Date();
var t_delta = Math.ceil((now - d) / 1000);
var expression = "";
if(t_delta < 2) {
expression = "1 second"
}
else if(t_delta < 60) {
expression = t_delta + " seconds"
}
else if(t_delta < 120) {
expression = "1 second"
}
else if(t_delta < 60 * 60) {
expression = Math.floor(t_delta/60) + " minutes"
}
else if(t_delta < 2 * 60 * 60) {
expression = "1 hour"
}
else if(t_delta < 24 * 60 * 60) {
expression = Math.floor(t_delta/60/60) + " hours"
}
else if(t_delta < 2 * 24 * 60 * 60) {
expression = "1 day"
}
else {
expression = Math.floor(t_delta/24/60/60) + " days"
}
return expression + " ago";
}
//
// Profile, mentions, hashtag, and following modal
// -----------------------------------
function newProfileModal(username) {
var profileModalContent = $( "#profile-modal-template" ).children().clone(true);
updateProfileData(profileModalContent, username);
return profileModalContent;
}
function openProfileModal(e)
{
e.stopPropagation();
e.preventDefault();
var $this = $( this );
var username = $.MAL.urlToUser( $this.attr("href") );
var profileModalClass = "profile-modal";
openModal( profileModalClass );
var profileModalContent = newProfileModal( username );
profileModalContent.appendTo("." +profileModalClass + " .modal-content");
//título do modal
$( "."+profileModalClass + " h3" ).text( username + "'s Profile" );
}
function newHashtagModal(hashtag) {
var hashtagModalContent = $( "#hashtag-modal-template" ).children().clone(true);
hashtagModalContent.find( ".postboard-news").click(function (){
$(this).hide();
displayHashtagPending($(".hashtag-modal .postboard-posts"));
});
clearHashtagProcessed();
updateHashtagModal( hashtagModalContent.find(".postboard-posts"), hashtag );
return hashtagModalContent;
}
function openHashtagModal(e)
{
e.stopPropagation();
e.preventDefault();
var $this = $( this );
var hashtag = $this.text().substring(1);
var hashtagModalClass = "hashtag-modal";
openModal( hashtagModalClass );
$( "."+hashtagModalClass ).attr("data-resource","hashtag");
var hashtagModalContent = newHashtagModal( hashtag );
hashtagModalContent.appendTo("." +hashtagModalClass + " .modal-content");
//título do modal
$( "."+hashtagModalClass + " h3" ).text( "#" + hashtag );
}
function updateHashtagModal(postboard,hashtag) {
var $hashtagModalClass = $(".hashtag-modal");
if( !$hashtagModalClass.length || $hashtagModalClass.css("display") == 'none' )
return;
var resource = $hashtagModalClass.attr("data-resource");
requestHashtag(postboard,hashtag,resource);
setTimeout( function() {updateHashtagModal(postboard,hashtag);}, 5000);
}
function openMentionsModal(e)
{
e.stopPropagation();
e.preventDefault();
// reuse the same hashtag modal to show mentions
var hashtagModalClass = "hashtag-modal";
openModal( hashtagModalClass );
$( "."+hashtagModalClass ).attr("data-resource","mention");
var username;
var $userInfo = $(this).closest("[data-screen-name]");
if( $userInfo.length )
username = $userInfo.attr("data-screen-name");
else
username = defaultScreenName;
var hashtagModalContent = newHashtagModal( username );
hashtagModalContent.appendTo("." +hashtagModalClass + " .modal-content");
//título do modal
$( "."+hashtagModalClass + " h3" ).text( "Mentions of @" + username );
resetMentionsCount();
}
function newFollowingModal(username) {
var followingModalContent = $( "#following-modal-template" ).children().clone(true);
updateFollowingData(followingModalContent, username);
return followingModalContent;
}
function openFollowingModal(e)
{
e.stopPropagation();
e.preventDefault();
var $this = $( this );
var username = $.MAL.followingUrlToUser( $this.attr("href") );
var followingModalClass = "following-modal";
openModal( followingModalClass );
var followingModalContent = newFollowingModal( username );
followingModalContent.appendTo("." +followingModalClass + " .modal-content");
//título do modal
$( "."+followingModalClass + " h3" ).text( "Followed by " + username );
}
//
// Post actions, submit, count characters
// --------------------------------------
//dispara o modal de retweet
var reTwistPopup = function( e )
{
var reTwistClass = "reTwist";
openModal( reTwistClass );
//título do modal
$( ".reTwist h3" ).text( "Retransmit this post to your followers?" );
var postdata = $(this).parents(".post-data").attr("data-userpost");
var postElem = postToElem($.evalJSON(postdata),"");
postElem.appendTo( ".reTwist .modal-content" );
e.stopPropagation();
}
//Expande Área do Novo post
var replyInitPopup = function(e, post)
{
var replyClass = "reply";
openModal( replyClass );
//título do modal
var fullname = post.find(".post-info-name").text();
$( ".reply h3" ).text( "Reply to " + fullname);
//para poder exibir a thread selecionada...
var replyModalContent = $(".reply .modal-content").hide();
var retweetContent = $( "#reply-modal-template" ).children().clone(true);
retweetContent.appendTo(replyModalContent);
var postdata = post.find(".post-data").attr("data-userpost");
var postElem = postToElem($.evalJSON(postdata),"");
postElem.appendTo(replyModalContent);
var replyArea = $(".reply .post-area .post-area-new");
replyArea.addClass("open");
var replyText = replyArea.find("textarea");
var postInlineReplyText = $(".reply .post .post-area-new textarea");
var attrToCopy = ["placeholder", "data-reply-to"];
$.each(attrToCopy, function( i, attribute ) {
replyText.attr( attribute, postInlineReplyText.attr(attribute) );
});
composeNewPost(e, replyArea);
replyModalContent.fadeIn( "fast" );
}
//abre o menu dropdown de configurações
var dropDownMenu = function( e )
{
var $configMenu = $( ".config-menu" );
$configMenu.slideToggle( "fast" );
e.stopPropagation();
}
//fecha o config menu ao clicar em qualquer lugar da tela
var closeThis = function()
{
$( this ).slideUp( "fast" );
};
var postExpandFunction = function( e, postLi )
{
if( !postLi.hasClass( "original" ) ) {
return;
}
var originalPost = postLi.find(".post-data.original");
var $postInteractionText = originalPost.find( ".post-expand" );
var $postExpandedContent = originalPost.find( ".expanded-content" );
var $postsRelated = postLi.find(".related");
var openClass = "open";
if( !postLi.hasClass( openClass ) ) {
originalPost.detach();
postLi.empty();
postLi.addClass( openClass );
$postInteractionText.text( "Collapse" );
var itemOl = $("<ol/>", {class:"expanded-post"}).appendTo(postLi);
var originalLi = $("<li/>", {class: "module post original"}).appendTo(itemOl);
originalLi.append(originalPost);
$postExpandedContent.slideDown( "fast" );
// insert "reply_to" before
requestRepliedBefore(originalLi);
// insert replies to this post after
requestRepliesAfter(originalLi);
// RTs faces and counter
requestRTs(originalLi);
}
else
{
postLi.removeClass( openClass );
$postInteractionText.text( "Expand" );
if( $postsRelated ) $postsRelated.slideUp( "fast" );
$postExpandedContent.slideUp( "fast", function()
{
originalPost.detach();
postLi.empty();
postLi.append(originalPost);
});
}
e.stopPropagation();
}
var postReplyClick = function( e )
{
var post = $(this).closest(".post");
if( !post.hasClass( "original" ) ) {
replyInitPopup(e, post);
} else {
var postLiOpen = post.parents(".post.open");
if( !postLiOpen.length ) {
postExpandFunction(e, post);
}
var postAreaNew = post.find(".post-area-new")
composeNewPost(e, postAreaNew);
}
e.stopPropagation();
}
//Expande Área do Novo post
var composeNewPost = function( e, postAreaNew )
{
e.stopPropagation();
if( !postAreaNew.hasClass("open") ) {
postAreaNew.addClass( "open" );
//se o usuário clicar fora é pra fechar
postAreaNew.clickoutside( unfocusThis )
}
var textArea = postAreaNew.find("textarea");
textArea.focus();
if( textArea.attr("data-reply-to") && !textArea.val().length ) {
textArea.val(textArea.attr("data-reply-to"));
}
}
//Reduz Área do Novo post
var unfocusThis = function()
{
var $this = $( this );
$this.removeClass( "open" );
}
function replyTextKeypress(e) {
e = e || event;
var $this = $( this );
var tweetForm = $this.parents("form");
if( tweetForm != undefined ) {
var c = 140 - $this.val().length;
var remainingCount = tweetForm.find(".post-area-remaining");
remainingCount.text(c);
if( c < 0 ) remainingCount.addClass("warn");
else remainingCount.removeClass("warn");
var tweetAction = tweetForm.find(".post-submit");
if( !tweetAction.length ) tweetAction = tweetForm.find(".dm-submit");
if( c >= 0 && c < 140 &&
$this.val() != $this.attr("data-reply-to") ) {
$.MAL.enableButton(tweetAction);
} else {
$.MAL.disableButton(tweetAction);
}
if (e.keyCode === 13) {
if (!e.ctrlKey) {
$this.val($this.val().trim());
if( !tweetAction.hasClass("disabled") ) {
tweetAction.click();
}
} else {
$this.val($this.val() + "\r");
}
}
}
}
var postSubmit = function(e)
{
e.stopPropagation();
e.preventDefault();
var $this = $( this );
var $replyText = $this.closest(".post-area-new").find("textarea");
var $postOrig = $this.closest(".post-data");
if (!$postOrig.length) {
$postOrig = $this.closest(".modal-content").find(".post-data");
}
newPostMsg($replyText.val(), $postOrig);
$replyText.val("");
var tweetForm = $this.parents("form");
var remainingCount = tweetForm.find(".post-area-remaining");
remainingCount.text(140);
$replyText.attr("placeholder", "Your message was sent!");
closeModal($this);
}
var retweetSubmit = function(e)
{
e.stopPropagation();
e.preventDefault();
var $this = $( this );
var $postOrig = $this.closest(".modal-wrapper").find(".post-data");
newRtMsg($postOrig);
closeModal($this);
}
function initInterfaceCommon() {
$( "body" ).on( "click", ".cancel" , function() { closeModal($(this)); } );
$( ".post-reply" ).bind( "click", postReplyClick );
$( ".post-propagate" ).bind( "click", reTwistPopup );
$( ".userMenu-config-dropdown" ).bind( "click", dropDownMenu );
$( ".config-menu" ).clickoutside( closeThis );
$( ".module.post" ).bind( "click", function(e) {
postExpandFunction(e,$(this)); });
$( ".post-area-new" ).bind( "click", function(e) {
composeNewPost(e,$(this));} );
$( ".post-area-new" ).clickoutside( unfocusThis );
$( ".post-submit").click( postSubmit );
$( ".modal-propagate").click( retweetSubmit );
var $replyText = $( ".post-area-new textarea" );
$replyText.keyup( replyTextKeypress );
$( ".open-profile-modal").bind( "click", openProfileModal );
$( ".open-hashtag-modal").bind( "click", openHashtagModal );
$( ".open-following-modal").bind( "click", openFollowingModal );
$( ".userMenu-connections a").bind( "click", openMentionsModal );
}