wamo/Qvitter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

url shortener, design etc

Browse Source
This commit is contained in:
Hannes Mannerheim 2014-09-20 02:53:10 +02:00
parent e974cb9ae2
commit 45b794591e
8 changed files with 2594 additions and 1437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
QvitterPlugin.php
View File

@ -56,6 +56,10 @@ class QvitterPlugin extends Plugin {
// TIME BETWEEN POLLING // TIME BETWEEN POLLING
$settings['timebetweenpolling'] = 5000; // ms $settings['timebetweenpolling'] = 5000; // ms
// URL SHORTENER
$settings['urlshortenerapiurl'] = 'http://qttr.at/yourls-api.php';
$settings['urlshortenersignature'] = 'b6afeec983';
/* · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · /* · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·

15
actions/qvitter.php
View File

@ -102,7 +102,7 @@ class QvitterAction extends ApiAction
<title><?php print $sitetitle; ?></title> <title><?php print $sitetitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/qvitter.css?v=17" /> <link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/qvitter.css?v=18" />
<link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/jquery.minicolors.css" /> <link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/jquery.minicolors.css" />
<link rel="shortcut icon" type="image/x-icon" href="<?php print $qvitterpath; ?>favicon.ico?v=2"> <link rel="shortcut icon" type="image/x-icon" href="<?php print $qvitterpath; ?>favicon.ico?v=2">
<?php <?php
@ -164,6 +164,8 @@ class QvitterAction extends ApiAction
window.siteInstanceURL = '<?php print $instanceurl; ?>'; window.siteInstanceURL = '<?php print $instanceurl; ?>';
window.defaultLinkColor = '<?php print QvitterPlugin::settings("defaultlinkcolor"); ?>'; window.defaultLinkColor = '<?php print QvitterPlugin::settings("defaultlinkcolor"); ?>';
window.defaultBackgroundColor = '<?php print QvitterPlugin::settings("defaultbackgroundcolor"); ?>'; window.defaultBackgroundColor = '<?php print QvitterPlugin::settings("defaultbackgroundcolor"); ?>';
window.urlShortenerAPIURL = '<?php print QvitterPlugin::settings("urlshortenerapiurl"); ?>';
window.urlShortenerSignature = '<?php print QvitterPlugin::settings("urlshortenersignature"); ?>';
</script> </script>
<style> <style>
a, a:visited, a:active, a, a:visited, a:active,
@ -330,7 +332,9 @@ class QvitterAction extends ApiAction
<div class="syntax-two" contenteditable="true"></div> <div class="syntax-two" contenteditable="true"></div>
<div class="mentions-suggestions"></div> <div class="mentions-suggestions"></div>
<div class="queet-toolbar"> <div class="queet-toolbar">
<div class="queet-box-extras"></div> <div class="queet-box-extras">
<button class="shorten disabled"><i></i></button>
</div>
<div class="queet-button"> <div class="queet-button">
<span class="queet-counter"></span> <span class="queet-counter"></span>
<button></button> <button></button>
@ -351,6 +355,7 @@ class QvitterAction extends ApiAction
<div id="feed-header"> <div id="feed-header">
<div id="feed-header-inner"> <div id="feed-header-inner">
<h2></h2> <h2></h2>
<div class="reload-stream"></div>
</div> </div>
</div> </div>
<div id="new-queets-bar-container" class="hidden"><div id="new-queets-bar"></div></div> <div id="new-queets-bar-container" class="hidden"><div id="new-queets-bar"></div></div>
@ -365,11 +370,11 @@ class QvitterAction extends ApiAction
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/jquery.minicolors.min.js"></script> <script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/jquery.minicolors.min.js"></script>
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/jquery.jWindowCrop.js"></script> <script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/jquery.jWindowCrop.js"></script>
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/load-image.min.js"></script> <script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/load-image.min.js"></script>
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/dom-functions.js?v=21"></script> <script type="text/javascript" src="<?php print $qvitterpath; ?>js/dom-functions.js?v=22"></script>
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/misc-functions.js?v=16"></script> <script type="text/javascript" src="<?php print $qvitterpath; ?>js/misc-functions.js?v=17"></script>
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/ajax-functions.js?v=9"></script> <script type="text/javascript" src="<?php print $qvitterpath; ?>js/ajax-functions.js?v=9"></script>
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lan.js?v=23"></script> <script type="text/javascript" src="<?php print $qvitterpath; ?>js/lan.js?v=23"></script>
<script type="text/javascript" src="<?php print $qvitterpath; ?>js/qvitter.js?v=17"></script> <script type="text/javascript" src="<?php print $qvitterpath; ?>js/qvitter.js?v=18"></script>
</body> </body>
</html> </html>

67
css/qvitter.css
View File

@ -39,6 +39,12 @@ html.fixed {
position:fixed; position:fixed;
width:100%; width:100%;
} }
.androidFix {
overflow:hidden !important;
overflow-y:hidden !important;
overflow-x:hidden !important;
}
a:active { a:active {
outline: none; outline: none;
@ -80,8 +86,10 @@ button.icon.nav-search,
#birds-top, #birds-top,
#logo, #logo,
.topbar .global-nav, .topbar .global-nav,
.upload-cover-photo { .upload-cover-photo,
background-image: url("../img/sprite.png?v=2"); button.shorten i,
.reload-stream {
background-image: url("../img/sprite.png?v=4");
background-size: 500px 1329px; background-size: 500px 1329px;
} }
@ -98,7 +106,7 @@ button.icon.nav-search,
cursor:pointer; cursor:pointer;
} }
#logo:hover { #logo:hover {
background-position: 0 -24px; background-position: 0 -30px;
} }
#top-compose { #top-compose {
@ -1081,6 +1089,7 @@ button#submit-login:hover {
border-image-width: 1 1 1 1: border-image-width: 1 1 1 1:
} }
#feed-header-inner { #feed-header-inner {
position:relative;
font-family: "Helvetica Neue",​Arial,​sans-serif; font-family: "Helvetica Neue",​Arial,​sans-serif;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
@ -2108,7 +2117,10 @@ span.inline-reply-caret .caret-inner {
z-index:101; z-index:101;
position:relative; position:relative;
} }
.inline-reply-queetbox .queet-box-syntax,
.inline-reply-queetbox .syntax-two {
cursor:text;
}
.inline-reply-queetbox .queet-box-syntax, .inline-reply-queetbox .queet-box-syntax,
.inline-reply-queetbox .queet-box-syntax[contenteditable="true"], .inline-reply-queetbox .queet-box-syntax[contenteditable="true"],
.inline-reply-queetbox .syntax-middle, .inline-reply-queetbox .syntax-middle,
@ -2804,7 +2816,8 @@ div.clearfix {
.follow-button, .follow-button,
.edit-profile-button, .edit-profile-button,
.save-profile-button, .save-profile-button,
.abort-edit-profile-button { .abort-edit-profile-button,
button.shorten {
font-family: "Helvetica Neue",Arial,sans-serif; font-family: "Helvetica Neue",Arial,sans-serif;
margin: 0; margin: 0;
position: relative; position: relative;
@ -2828,6 +2841,15 @@ div.clearfix {
background-repeat: repeat-x; background-repeat: repeat-x;
padding: 0; padding: 0;
} }
button.shorten i {
background-position: 2px -557px;
height:26px;
width:36px;
display:block;
}
button.shorten.disabled i {
opacity:0.2;
}
.external-member-button.disabled, .external-member-button.disabled,
.member-button.disabled, .member-button.disabled,
.external-follow-button.disabled, .external-follow-button.disabled,
@ -2841,13 +2863,14 @@ div.clearfix {
.external-follow-button.disabled i, .external-follow-button.disabled i,
.follow-button.disabled i { .follow-button.disabled i {
opacity:0.2; opacity:0.2;
} }
.external-member-button:not(.disabled):not(.member):hover, .external-member-button:not(.disabled):not(.member):hover,
.member-button:not(.disabled):not(.member):hover, .member-button:not(.disabled):not(.member):hover,
.external-follow-button:not(.disabled):not(.following):hover, .external-follow-button:not(.disabled):not(.following):hover,
.follow-button:not(.disabled):not(.following):hover, .follow-button:not(.disabled):not(.following):hover,
.edit-profile-button:hover, .edit-profile-button:hover,
.abort-edit-profile-button:hover { .abort-edit-profile-button:hover,
button.shorten:not(.disabled):hover {
background-color: #D8D8D8; background-color: #D8D8D8;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(216,216,216,1) 100%); background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(216,216,216,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(216,216,216,1))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(216,216,216,1)));
@ -2861,7 +2884,8 @@ div.clearfix {
.external-member-button:not(.disabled):not(.member):active, .external-member-button:not(.disabled):not(.member):active,
.member-button:not(.disabled):not(.member):active, .member-button:not(.disabled):not(.member):active,
.external-follow-button:not(.disabled):not(.following):active, .external-follow-button:not(.disabled):not(.following):active,
.follow-button:not(.disabled):not(.following):active { .follow-button:not(.disabled):not(.following):active,
button.shorten:not(.disabled):active {
background: none; background: none;
background-color: #D8D8D8; background-color: #D8D8D8;
border-color: #BBBBBB; border-color: #BBBBBB;
@ -2967,6 +2991,33 @@ div.clearfix {
/* SPINNER */ /* SPINNER */
.loader {
display: block;
position: fixed;
left:50%;
margin-left:-20px;
top: 0;
z-index:10000;
}
.reload-stream {
display: block;
position: absolute;
right: 5px;
background-position: 0 -600px;
width:35px;
height:35px;
top:5px;
opacity:0.5;
cursor:pointer;
}
.reload-stream:hover {
opacity:1;
}
svg path,
svg rect{
fill: #ccc;
}
.spinner-wrap { .spinner-wrap {
position: fixed; position: fixed;
top: 29px; top: 29px;

BIN
img/sprite.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 56 KiB

3828
img/sprite.png.ai
View File

File diff suppressed because one or more lines are too long

26
js/dom-functions.js
View File

@ -292,16 +292,6 @@ function groupProfileCard(groupAlias) {
function setNewCurrentStream(stream,actionOnSuccess,setLocation) { function setNewCurrentStream(stream,actionOnSuccess,setLocation) {
// don't do anything if this stream is already the current
if(window.currentStream == stream) {
// scroll to top if we are downscrolled
// refresh if we are at top
return;
}
// remember state of old stream (including profile card) // remember state of old stream (including profile card)
window.oldStreams[window.currentStream] = $('#feed').siblings('.profile-card').outerHTML() + $('#feed').outerHTML(); window.oldStreams[window.currentStream] = $('#feed').siblings('.profile-card').outerHTML() + $('#feed').outerHTML();
@ -314,7 +304,11 @@ function setNewCurrentStream(stream,actionOnSuccess,setLocation) {
window.clearInterval(checkForNewQueetsInterval); window.clearInterval(checkForNewQueetsInterval);
display_spinner(); display_spinner();
$(window).scrollTop(0);
// scroll to top
$(window).scrollTop(0);
$('body').addClass('androidFix').scrollTop(0).removeClass('androidFix');
$('#feed-body').removeAttr('data-search-page-number'); // null any searches $('#feed-body').removeAttr('data-search-page-number'); // null any searches
// remember the most recent stream selection in global var // remember the most recent stream selection in global var
@ -406,8 +400,10 @@ function setNewCurrentStream(stream,actionOnSuccess,setLocation) {
$('#user-container').after(window.oldStreams[window.currentStream]); $('#user-container').after(window.oldStreams[window.currentStream]);
$('.profile-card').css('display','none'); $('.profile-card').css('display','none');
$('#feed').css('display','none'); $('#feed').css('display','none');
$('.profile-card').fadeIn(300); $('.profile-card').show();
$('#feed').fadeIn(300); $('#feed').show();
$('#feed-header-inner h2').css('opacity','0.2');
$('#feed-header-inner h2').animate({opacity:'1'},1000);
} }
// otherwise we fade out and wait for stream to load // otherwise we fade out and wait for stream to load
@ -961,7 +957,7 @@ function expand_queet(q,doScrolling) {
function queetBoxHtml() { function queetBoxHtml() {
var startText = encodeURIComponent(window.sL.compose); var startText = encodeURIComponent(window.sL.compose);
return '<div class="inline-reply-queetbox"><div class="queet-box queet-box-syntax" data-start-text="' + startText + '">' + decodeURIComponent(startText) + '</div><div class="syntax-middle"></div><div class="syntax-two" contenteditable="true"></div><div class="mentions-suggestions"></div><div class="queet-toolbar toolbar-reply"><div class="queet-box-extras"></div><div class="queet-button"><span class="queet-counter"></span><button>' + window.sL.queetVerb + '</button></div></div></div>'; return '<div class="inline-reply-queetbox"><div class="queet-box queet-box-syntax" data-start-text="' + startText + '">' + decodeURIComponent(startText) + '</div><div class="syntax-middle"></div><div class="syntax-two" contenteditable="true"></div><div class="mentions-suggestions"></div><div class="queet-toolbar toolbar-reply"><div class="queet-box-extras"><button class="shorten disabled"><i></i></button></div><div class="queet-button"><span class="queet-counter"></span><button>' + window.sL.queetVerb + '</button></div></div></div>';
} }
@ -1003,7 +999,7 @@ function replyFormHtml(q,qid) {
var startText = encodeURIComponent(window.sL.replyTo + ' ' + user_screen_name_html + reply_to_screen_name_html + more_reply_tos + '&nbsp;<br>'); var startText = encodeURIComponent(window.sL.replyTo + ' ' + user_screen_name_html + reply_to_screen_name_html + more_reply_tos + '&nbsp;<br>');
var repliesText = encodeURIComponent(user_screen_name_text + reply_to_screen_name_text + more_reply_tos_text + '&nbsp;&nbsp;'); var repliesText = encodeURIComponent(user_screen_name_text + reply_to_screen_name_text + more_reply_tos_text + '&nbsp;&nbsp;');
return '<div class="inline-reply-queetbox"><span class="inline-reply-caret"><span class="caret-inner"></span></span><img class="reply-avatar" src="' + $('#user-avatar').attr('src') + '" /><div class="queet-box queet-box-syntax" id="queet-box-' + qid + '" data-start-text="' + startText + '" data-replies-text="' + repliesText + '">' + decodeURIComponent(startText) + '</div><div class="syntax-middle"></div><div class="syntax-two" contenteditable="true"></div><div class="mentions-suggestions"></div><div class="queet-toolbar toolbar-reply"><div class="queet-box-extras"></div><div class="queet-button"><span class="queet-counter"></span><button>' + window.sL.queetVerb + '</button></div></div></div>'; return '<div class="inline-reply-queetbox"><span class="inline-reply-caret"><span class="caret-inner"></span></span><img class="reply-avatar" src="' + $('#user-avatar').attr('src') + '" /><div class="queet-box queet-box-syntax" id="queet-box-' + qid + '" data-start-text="' + startText + '" data-replies-text="' + repliesText + '">' + decodeURIComponent(startText) + '</div><div class="syntax-middle"></div><div class="syntax-two" contenteditable="true"></div><div class="mentions-suggestions"></div><div class="queet-toolbar toolbar-reply"><div class="queet-box-extras"><button class="shorten disabled"><i></i></button></div><div class="queet-button"><span class="queet-counter"></span><button>' + window.sL.queetVerb + '</button></div></div></div>';
} }

66
js/misc-functions.js
View File

@ -458,14 +458,30 @@ function findUrls(text) {
· · · · · · · · · · · · */ · · · · · · · · · · · · */
function display_spinner() { function display_spinner() {
if($('.spinner-wrap').length==0) { $('body').prepend('\
$('body').prepend('<div class="spinner-wrap"><div class="spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>'); <div class="loader">\
} <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">\
<path opacity="0.2" enable-background="new " d="M20.201,8.503c-6.413,0-11.612,5.199-11.612,11.612s5.199,11.611,11.612,11.611\
c6.412,0,11.611-5.198,11.611-11.611S26.613,8.503,20.201,8.503z M20.201,29.153c-4.992,0-9.039-4.046-9.039-9.038\
s4.047-9.039,9.039-9.039c4.991,0,9.038,4.047,9.038,9.039S25.192,29.153,20.201,29.153z"/>\
<path d="M24.717,12.293l1.285-2.227c-1.708-0.988-3.686-1.563-5.801-1.563l0,0v2.573l0,0C21.848,11.076,23.386,11.524,24.717,12.293 z">\
<animateTransform attributeType="xml"\
attributeName="transform"\
type="rotate"\
from="0 20 20"\
to="360 20 20"\
dur="1s"\
repeatCount="indefinite"/>\
</path>\
</svg>\
</div>\
');
} }
function remove_spinner() { function remove_spinner() {
$('.spinner-wrap').remove(); $('.loader').remove();
} }
/* · /* ·
@ -570,6 +586,16 @@ function countCharsInQueetBox(src,trgt,btn) {
var $src_txt = $('<div/>').append($.trim(src.html()).replace(/&nbsp;/gi,' ').replace(/<br>/i,'').replace(/<br>/gi,"x")); var $src_txt = $('<div/>').append($.trim(src.html()).replace(/&nbsp;/gi,' ').replace(/<br>/i,'').replace(/<br>/gi,"x"));
var numchars = ($.trim($src_txt.text())).length; var numchars = ($.trim($src_txt.text())).length;
// check for long urls and disable/enable url shorten button if present
var longurls = 0;
$.each(src.siblings('.syntax-middle').find('span.url'),function(key,obj){
if($.trim($(obj).html().replace(/&nbsp;/gi,'').replace(/<br>/gi,'')).length > 20) {
longurls++;
}
});
if(longurls>0) src.siblings('.queet-toolbar').find('button.shorten').removeClass('disabled');
else src.siblings('.queet-toolbar').find('button.shorten').addClass('disabled');
// limited // limited
if(window.textLimit > 0) { if(window.textLimit > 0) {
trgt.html(window.textLimit - numchars); trgt.html(window.textLimit - numchars);
@ -821,4 +847,32 @@ function createRangeFromCharacterIndices(containerEl, start, end) {
function deleteBetweenCharacterIndices(el, from, to) { function deleteBetweenCharacterIndices(el, from, to) {
var range = createRangeFromCharacterIndices(el, from, to); var range = createRangeFromCharacterIndices(el, from, to);
range.deleteContents(); range.deleteContents();
} }
/* ·
·
· Shorten urls in a queet-box
·
· · · · · · · · · · · · · */
function shortenUrlsInBox(shortenButton) {
shortenButton.addClass('disabled');
$.each(shortenButton.parent().parent().siblings('.syntax-middle').find('span.url'),function(key,obj){
var url = $.trim($(obj).html().replace(/&amp;/gi,'&').replace(/&nbsp;/gi,'').replace(/<br>/gi,''));
display_spinner();
$.ajax({ url: window.urlShortenerAPIURL + '?format=jsonp&action=shorturl&signature=' + window.urlShortenerSignature + '&url=' + encodeURIComponent(url), type: "GET", dataType: "jsonp", success: function(data) {
if(typeof data.shorturl != 'undefined') {
shortenButton.parent().parent().siblings('.queet-box-syntax').html(shortenButton.parent().parent().siblings('.queet-box-syntax').html().replace(data.url.url, data.shorturl));
shortenButton.parent().parent().siblings('.queet-box-syntax').trigger('keyup');
shortenButton.addClass('disabled'); // make sure the button is disabled right after
}
remove_spinner();
}});
});
}

25
js/qvitter.js
View File

@ -1425,6 +1425,29 @@ $('body').on('keyup input paste','.queet-box-syntax',function () {
countCharsInQueetBox($(this),$(this).siblings('.queet-toolbar').find('.queet-counter'),$(this).siblings('.queet-toolbar').find('.queet-button button')); countCharsInQueetBox($(this),$(this).siblings('.queet-toolbar').find('.queet-counter'),$(this).siblings('.queet-toolbar').find('.queet-button button'));
}); });
/* ·
·
· Shorten URL's
·
· · · · · · · · · · · · · */
$('body').on('click','button.shorten',function () {
shortenUrlsInBox($(this));
});
/* ·
·
· Reload current stream
·
· · · · · · · · · · · · · */
$('body').on('click','.reload-stream',function () {
$('.reload-stream').hide();
setNewCurrentStream(window.currentStream,function(){
$('.reload-stream').show();
},false);
});
/* · /* ·
@ -1950,6 +1973,8 @@ function renderFileInput2(e) {
} }
}, },
{ maxWidth: 1040, { maxWidth: 1040,
minWidth:1040,
canvas: true,
orientation: orientation } // Options orientation: orientation } // Options
); );
}); });