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

more generic menu building

Browse Source
This commit is contained in:
Hannes Mannerheim 2015-11-19 15:39:19 +01:00
parent 527b4ec86d
commit f3161ec32f
3 changed files with 124 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/qvitter.css
View File

@ -491,10 +491,7 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
}
.action-ellipsis-container .dropdown-menu {
display: block;
float: right;
left: 17px;
right: auto;
top: 28px;
}
.action-ellipsis-container .dropdown-menu,
.action-ellipsis-container .dropdown-menu li:not(.dropdown-caret),
@ -1872,6 +1869,7 @@ background-repeat: no-repeat;
.stream-item.expanded.collapsing > .queet {
background-color:#fff;
z-index:102;
-webkit-transition: margin-top 5s linear;
-moz-transition: margin-top 5s linear;
-o-transition: margin-top 5s linear;
@ -1947,6 +1945,7 @@ body.rtl .queet.rtl .expanded-content {
border-bottom:1px solid #ddd;
box-sizing: border-box;
}
.stream-item:not(.expanded).profile-blocked-by-me .queet {
width:20px;
position:absolute;
@ -2506,6 +2505,7 @@ ul.queet-actions li .icon {
line-height: 25px;
text-align: center;
margin-right:7px;
position: relative;
}
ul.queet-actions li:not(:first-child) .icon {
margin-left:26px;

54
js/dom-functions.js
View File

@ -39,27 +39,24 @@
/* ·
·
· Build a menu for a stream, if there is any to build
· Build a menu
·
· Stream menus currently support three row types: divider, functions and profile-prefs-toggles
· They are defined in stream-router.js. Function rows run the function in
· the function attribute when clicked. Profile-prefs-toggle rows toggles the
· preference in the attribute when clicked.
· Menus currently support four row types: divider, functions, links and profile-prefs-toggles
· Function rows run the function in the function attribute when clicked.
· Profile-prefs-toggle rows toggles the preference in the attribute when clicked.
·
· @param streamObject: stream object returned by pathToStreamRouter()
·
· · · · · · · · · */
function streamObjectGetMenu(streamObject) {
if(typeof streamObject == 'undefined') {
return false;
}
if(streamObject.menu === false) {
function getMenu(menuArray) {
if(typeof getMenu == 'undefined' || getMenu === false) {
return false;
}
var menuHTML = buildMenuTop();
$.each(streamObject.menu,function(){
$.each(menuArray,function(){
if(this.type == 'divider') {
menuHTML = menuHTML + buildMenuDivider();
}
@ -67,7 +64,14 @@ function streamObjectGetMenu(streamObject) {
menuHTML = menuHTML + buildMenuRowFullwidth(this.label, {
class: 'row-type-' + this.type,
'data-menu-row-type': this.type,
'data-function-name': this.functionName
'data-function-name': this.functionName,
'data-function-arguments': JSON.stringify(this.functionArguments)
});
}
else if(this.type == 'link') {
menuHTML = menuHTML + buildMenuRowFullwidth(this.label, {
class: 'row-type-' + this.type,
'href': this.href
});
}
else if(this.type == 'profile-prefs-toggle') {
@ -102,6 +106,22 @@ function streamObjectGetMenu(streamObject) {
return menuHTML + buildMenuBottom();
}
/* ·
·
· Menu from streamObject
·
· · · · · · · · · */
function streamObjectGetMenu(streamObject) {
if(typeof streamObject == 'undefined') {
return false;
}
if(streamObject.menu === false) {
return false;
}
return getMenu(streamObject.menu);
}
/* ·
·
· Menu components
@ -124,15 +144,19 @@ function buildMenuDivider() {
function buildMenuRowFullwidth(label, attributes) {
var attributesHTML = '';
$.each(attributes,function(k,v){
attributesHTML = attributesHTML + ' ' + k + '="' + v + '"';
attributesHTML = attributesHTML + ' ' + k + '=\'' + v + '\'';
});
return '<li class="fullwidth"><a' + attributesHTML + '>' + replaceHtmlSpecialChars(label) + '</a></li>';
}
function alignMenuToParent(menu, parent) {
var menuLeft = parent.width()/2 - menu.width() + 15;
function alignMenuToParent(menu, parent, offsetLeft) {
if(typeof offsetLeft == 'undefined') {
var offsetLeft = 0;
}
var menuLeft = parent.innerWidth()/2 - menu.width() + 15 + offsetLeft;
var menuTop = parent.height()+5;
menu.css('left', menuLeft + 'px');
menu.css('top', menuTop + 'px');
menu.css('display','block'); // show menu
}

136
js/qvitter.js
View File

@ -1053,10 +1053,14 @@ $('body').on('click','#stream-menu-cog',function(e){
if(!$(e.target).is('#stream-menu-cog') && $(e.target).closest('#stream-menu-cog').length>0) {
// don't show/hide when clicking inside the menu
}
// hide
else if($(this).hasClass('dropped')) {
$(this).removeClass('dropped');
$(this).children('.dropdown-menu').remove();
}
// show
else {
$(this).addClass('dropped');
var menu = $(streamObjectGetMenu(window.currentStreamObject)).appendTo(this);
@ -1073,6 +1077,72 @@ $('body').on('click',function(e){
});
/* ·
·
· Open a queet menu when clicking ellipsis button
·
· · · · · · · · · · · · · */
$('body').on('click','.sm-ellipsis',function(e){
if(!$(e.target).is('.sm-ellipsis') && $(e.target).closest('.sm-ellipsis').length>0) {
// don't show/hide when clicking inside the menu
}
// hide
else if($(this).hasClass('dropped')) {
$(this).removeClass('dropped');
$(this).children('.dropdown-menu').remove();
}
// show
else {
$(this).addClass('dropped');
var streamItemUsername = $(this).closest('.queet').find('.stream-item-header').find('.screen-name').text();
var streamItemUserID = $(this).closest('.queet').find('.stream-item-header').find('.name').attr('data-user-id');
var streamItemID = $(this).closest('.queet').parent('.stream-item').attr('data-quitter-id');
// my notice
if(streamItemUserID == window.loggedIn.id) {
var menuArray = [
{
type: 'function',
functionName: 'deleteQueet',
functionArguments: {
streamItemID: streamItemID
},
label: window.sL.deleteVerb
},
];
}
// other users' notices
else {
var menuArray = [
{
type: 'link',
href: window.siteInstanceURL + 'main/block?profileid=' + streamItemUserID,
label: window.sL.blockUser.replace('{username}',streamItemUsername)
},
];
}
// add menu to DOM and align it
var menu = $(getMenu(menuArray)).appendTo(this);
alignMenuToParent(menu,$(this));
}
});
// remove the ellipsis menu when clicking outside it
$('body').on('click',function(e){
if(!$(e.target).is('.sm-ellipsis') && $('.sm-ellipsis.dropped').length>0 && !$(e.target).closest('.sm-ellipsis').length>0) {
$('.sm-ellipsis').children('.dropdown-menu').remove();
$('.sm-ellipsis').removeClass('dropped');
}
});
/* ·
·
· When clicking a function row in a stream menu – invoke the function
@ -1080,7 +1150,14 @@ $('body').on('click',function(e){
· · · · · · · · · · · · · */
$('body').on('click','.row-type-function',function(e){
window[$(this).attr('data-function-name')]();
var functionName = $(this).attr('data-function-name');
if($(this).attr('data-function-arguments') == 'undefined') {
var functionArguments = false;
}
else {
var functionArguments = JSON.parse($(this).attr('data-function-arguments'));
}
window[functionName](functionArguments);
});
@ -1457,55 +1534,6 @@ $('body').on('click','a', function(e) {
});
/* ·
·
· Open a queet menu when clicking ellipsis button
·
· · · · · · · · · · · · · */
$('body').on('click','.sm-ellipsis',function(){
// hide
if($(this).closest('.action-ellipsis-container').children('.dropdown-menu').length > 0) {
$(this).closest('.action-ellipsis-container').removeClass('dropped');
$(this).closest('.action-ellipsis-container').children('.dropdown-menu').remove();
}
// show
else {
$(this).closest('.action-ellipsis-container').addClass('dropped');
$('.action-ellipsis-container').children('.dropdown-menu').remove(); // remove menu from other queets
var streamItemUsername = $(this).closest('.queet').find('.stream-item-header').find('.screen-name').text();
var streamItemUserID = $(this).closest('.queet').find('.stream-item-header').find('.name').attr('data-user-id');
var streamItemID = $(this).closest('.queet').parent('.stream-item').attr('data-quitter-id');
var blockHtml = '';
var deleteHtml = '';
if(streamItemUserID != window.loggedIn.id) {
blockHtml = '<li><a class="block-user" href="' + window.siteInstanceURL + 'main/block?profileid=' + streamItemUserID + '">' + window.sL.blockUser.replace('{username}',streamItemUsername) + '</a></li>';
}
else {
deleteHtml = '<li><a class="delete-queet" href="' + window.siteInstanceURL + 'notice/delete/' + streamItemID + '">' + window.sL.deleteVerb + '</a></li>';
}
$(this).closest('.action-ellipsis-container').append('\
<ul class="dropdown-menu">\
<li class="dropdown-caret left"><span class="caret-outer"></span><span class="caret-inner"></span></li>\
' + blockHtml + '\
' + deleteHtml + '\
</ul>\
');
}
});
// remove the ellipsis menu when clicking outside it
$('body').on('click',function(e){
if(!$(e.target).is('.action-ellipsis-container') && $('.action-ellipsis-container.dropped').length>0 && !$(e.target).closest('.action-ellipsis-container').length>0) {
$('.action-ellipsis-container').children('.dropdown-menu').remove();
$('.action-ellipsis-container').removeClass('dropped');
}
});
/* ·
·
@ -2019,9 +2047,9 @@ $(document).keyup(function(e){
·
· · · · · · · · · · · · · */
$('body').on('click','.action-ellipsis-container .delete-queet',function(e){
e.preventDefault();
var this_stream_item = $(this).closest('.stream-item');
function deleteQueet(arg) {
var this_stream_item = $('.stream-item[data-quitter-id="' + arg.streamItemID + '"]');
// don't do anything if this is a queet being posted
if(this_stream_item.hasClass('temp-post')) {
@ -2054,7 +2082,7 @@ $('body').on('click','.action-ellipsis-container .delete-queet',function(e){
});
});
});
}
/* ·