admin/Facilitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make dropdown menu's hidden by clicking away & cursor pointer for rstables

Browse Source 
svn path=/Website/trunk/; revision=31453
This commit is contained in:
Koen Reefman
2016-11-14 12:45:27 +00:00
parent 510406f1cf
commit 16f2bf765e
3 changed files with 85 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
APPL/Localscripts/resultset_table_v2.js
View File

@@ -16,7 +16,8 @@
// Formulier als tekststring samenstellen en m.b.v. $(document).ready(function(){}) binnen de body zetten
var timerID=null;
var showingInlineDetails = false;
var touch = null;
var hasHamburger = null;
// var useHamb = S("inline_actions_hamburger");
var currentRowKey = null;
function delayed(delay, fn)
@@ -150,31 +151,45 @@ function loadInlineDetails(url)
}
// forTouch doen we geen mouseover's. Die maken dat je veel te veel moet klikken
function initActions(tableID, isTouch)
function initActions(tableID, useHamb)
{
$(function () {
$("#" + tableID)
.on('click', 'tr', defaultAction)
.on('click', '.multiselect', FcltMgr.stopPropagation );
if (!isTouch)
.on('click', '.multiselect', FcltMgr.stopPropagation);
if (useHamb)
{
$(document).add(parent.document).add(parent.parent.document).click(defaultHamburgerAction);
$("#" + tableID)
.on('click', 'tr', defaultHamburgerAction)
.on('click', '.hamburger', showHamburgerActions)
.on('click', '.hamburger', FcltMgr.stopPropagation)
.on('mouseover', 'tr', hambSetCursor);
hasHamburger = true;
}
else
{
$("#" + tableID)
.on('click', 'tr', defaultAction)
.on('mouseover', 'tr', showActions)
.on('mouseout', 'tr', hideActions);
$("#allactions_" + tableID +".allactions")
.on('mouseover', function (evt) { evt.stopPropagation() } )
.on('mouseout', function (evt) { evt.stopPropagation() } );
touch = false;
}
else
{
$("#" + tableID)
.on('click', ".hamburger", showHamburgerActions)
.on('click', '.hamburger', FcltMgr.stopPropagation );
touch = true;
hasHamburger = false;
}
});
}
function defaultHamburgerAction(event)
{
var thisTR = $(this).closest('tr')[0];
if (!$('li.byHamburger').hasClass('hidden'))
$('li.byHamburger').toggleClass('hidden');
else if (showingInlineDetails)
hideActions.apply(thisTR, [event]);
else if (!!$(event.currentTarget).attr("ROWKEY"))
defaultAction.apply(thisTR, [event]);
}
function $currentActionsDiv()
@@ -201,20 +216,45 @@ function defaultAction(event)
$actiondiv.find("span.ia2").each(function (i)
{
if (bits.substr(i,1) == 1 && this.getAttribute("isdefault") == 1)
{
$(this).trigger('click');
}
});
}
function hideActions(event)
{
if ((!touch && window.activerow != this) || (touch && showingInlineDetails)) // voorkom hide als je muis boven de buttons beweegt
if ((!hasHamburger && window.activerow != this) || (hasHamburger && showingInlineDetails)) // voorkom hide als je muis boven de buttons beweegt
{
$currentActionsDiv().hide();
if (touch) showingInlineDetails = false;
if (hasHamburger) showingInlineDetails = false;
}
event.stopPropagation();
}
function inlineHambOff()
{
if (showingInlineDetails)
{
$currentActionsDiv().hide();
if (hasHamburger) showingInlineDetails = false;
}
}
function hambSetCursor(event)
{
window.activerow = this;
var $actiondiv = $currentActionsDiv();
event.stopPropagation();
var bits = String(this.getAttribute('ACTIONBITS'));
$actiondiv.find("span.ia2").each(function (i)
{
if (bits.substr(i,1) == 1 && this.getAttribute("isdefault") == 1)
$(window.activerow).css("cursor", "pointer");
});
}
function showHamburgerActions(event)
{
var thisTR = $(this).closest('tr')[0];
@@ -225,16 +265,18 @@ window.activerow = null;
function showActions(event) // event op de mouseover van resultsettable
{
var key = this.getAttribute("ROWKEY");
if (!key || (touch && currentRowKey == key && showingInlineDetails))
if (!key || (hasHamburger && currentRowKey == key && showingInlineDetails))
{
hideActions(event)
return;
}
else if (touch)
else if (hasHamburger)
{
currentRowKey = key;
showingInlineDetails = true;
}
if (!$('li.byHamburger').hasClass('hidden'))
$('li.byHamburger').toggleClass('hidden');
var mustHide = ( window.activerow != this );
window.activerow = this;
var $actiondiv = $currentActionsDiv();
@@ -259,37 +301,40 @@ function showActions(event) // event op de mouseover van resultsettable
anyShow = true;
}
});
if (touch)
$actiondiv.css('top', $(this).offset().top);
else
$actiondiv.css('top', $(this).offset().top + $(this).outerHeight() - $actiondiv.outerHeight() - 5 + "px");
if (!anyShow)
{
$actiondiv.hide();
return;
}
var hasActionsCol = $actiondiv.attr("hasActionsCol");
var tdhasact = $(this).find("td")[hasActionsCol];
if (hasHamburger)
{
$actiondiv.css('top', $(this).offset().top);
var hambImg = $(this).find("div.hamburger").children()[0];
if (touch)
{
if (hambImg)
{
$actiondiv.css('left', $(hambImg).position().left + $(hambImg).width() + "px");
}
else
{
// afvangen? div.hamburger niet gevonden of heeft geen children()
}
}
else if (tdhasact)
else
{
$actiondiv.css('top', $(this).offset().top + $(this).outerHeight() - $actiondiv.outerHeight() - 5 + "px");
var hasActionsCol = $actiondiv.attr("hasActionsCol");
var tdhasact = $(this).find("td")[hasActionsCol];
if (tdhasact)
$actiondiv.css('left', $(tdhasact).position().left + "px");
else // dan maar rechts uitlijnen?
{ // TODO: Forceren dat het niet buiten beeld valt als er een scrollbar is?
$actiondiv.css('left', $(this).position().left + $(this).width() - window.ww - 10 + "px");
}
}
FcltMgr.resized();
}

4
APPL/Shared/iface.inc
View File

@@ -94,7 +94,7 @@ function CreateButtons(buttons, params)
if (hamburger && !params.isDialog)
{
var btn = { icon: "fa-bars", tooltip: L("lcl_more"), action: "$('li.byHamburger').toggleClass('hidden');FcltMgr.resized();" }
var btn = { icon: "fa-bars", tooltip: L("lcl_more"), action: "inlineHambOff();$('li.byHamburger').toggleClass('hidden');FcltMgr.resized();" }
CreateButton(null, btn.action, btn, params );
}
%>
@@ -197,7 +197,7 @@ function IFRAMER_HEADER(titel, buttons, params)
for (x in hambuttons) {
btn = buttons[hambuttons[x]];
btn.xclass = 'hidden byHamburger';
CreateButton(btn.title, btn.action, btn, { showIcons: true, vertical: true });
CreateButton(btn.title, "$('li.byHamburger').toggleClass('hidden');" + btn.action, btn, { showIcons: true, vertical: true });
}
Response.write("</ul></div>");
}

13
APPL/Shared/resultset_table_v2.inc
View File

@@ -16,7 +16,7 @@ FCLTHeader.Requires({ plugins: ["jQuery"],
js: ["resultset_table_v2.js", "sorttable.js"]
});
var APIname = getQParam("API","");
var touch = getQParam("touch","") == 1;
var useHamburger = getQParam("touch","") == 1 || S("inline_actions_hamburger") || device.test(device.isTouch);
var hasInlineActions = false;
var book_id = null;
if (APIname == "REPORT")
@@ -715,7 +715,7 @@ function __rsProcessResultset(processParams) // processParams wordt blind aan al
var def = (this.actions[i].isDefault? " isdefault='1'" : "")
+ (this.actions[i].onlyMulti? " onlymulti='1'" : "")
+ (this.actions[i].isDefault || this.actions[i].onlyMulti? " style='display:none'" : "");
var disp = device.test(device.isTouch) ? " style='display: block;'" : "";
var disp = useHamburger ? " style='display: block;'" : "";
if (this.actions[i].multiOnce)
val = "\n<span class='ia2' " + def + " onclick='doAm(event, this, \"" + this.actions[i].action + "\")'" + disp + ">";
else
@@ -723,10 +723,9 @@ function __rsProcessResultset(processParams) // processParams wordt blind aan al
actionsDiv += val + this.actions[i].caption + "</span>";
}
hasInlineActions = aantalInline > 0;
if (device.test(device.isTouch) && hasInlineActions) hasActionsCol++;
html += "\n<div id='allactions_" + ID + "' class='allactions' style='display:none' hasActionsCol='"+hasActionsCol+"' >" + actionsDiv + "</div>";
html += "\n<script type='text/javascript'>"
html += "\n initActions('" + this.ID + "', "+(device.test(device.isTouch)?1:0)+")"
html += "\n initActions('" + this.ID + "', "+useHamburger+")"
html += "</script>"
}
html += startTable();
@@ -1061,7 +1060,7 @@ function __rsMakeTableHeader(oRs, oRsFlexData, anyMultiActions)
{
html += "<th class='sorttable_nosort'><input type=checkbox class='master' onclick='checkAll(\"" + ID + "\", this)'></th>";
}
if (device.test(device.isTouch) && hasInlineActions)
if (useHamburger && hasInlineActions)
{
html += "<th class='sorttable_nosort'></th>";
}
@@ -1160,7 +1159,7 @@ function __rsMakeTableRow(oRs, oRsFlexData, cnt, anyMultiActions, noFlexResult)
// HIER START EEN NIEUWE REGEL
var appender = ("\n<tr");
var OddRowClass = (cnt & 1)? "O " : "E ";
var OddRowClass = ""; // was:(cnt & 1)? "O " : "E "; maar dat kan inmiddels met css clientside beter
if (suppressKeyRepeat)
if (lastRowKey!=thisKey)
@@ -1227,7 +1226,7 @@ function __rsMakeTableRow(oRs, oRsFlexData, cnt, anyMultiActions, noFlexResult)
appender += "<td><input type=checkbox class='multiselect'" + (isChecked?' checked=1':'') + "></td>";
}
if (device.test(device.isTouch) && hasInlineActions)
if (useHamburger && hasInlineActions)
{
// TODO: If clause nog verbeteren
if (actionbits.substr(1) == noActionBit.substr(1))