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

FSN#37938 B en D, inklappen menu (en header ook gelijk maar) geanimeert

Browse Source 
svn path=/Website/trunk/; revision=31936
This commit is contained in:
Koen Reefman
2016-12-12 13:56:31 +00:00
parent 09eba2e1a8
commit b2533278f1
2 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
APPL/FAC/Facilitor.asp
View File

@@ -149,26 +149,26 @@ if (device.test(device.isTouch)) { %>
window.location.href="<%=rooturl%>/default.asp?fac_id=<%=customerId%>";
}
function myResize()
function myResize(animated)
{
var menuIsHidden = $('div#menudivider').hasClass('dividerclosed');
var hasNoHeader = $("#menutabs>.ui-tabs-nav").hasClass("noToggle");
var marge = 5.27; // $("#maintabs").innerWidth() - $("#maintabs").width(); and $('#menutabs').height() - $('#menutabs').outerHeight()
var duration = animated ? 300 : 0;
var animParams = { queue: false, duration: duration }
if ($("#menutabs").length)
{
// Bepaal de breedte van de individuele tabjes
var ww = menuIsHidden ? 36 : 252;
var divLeft = ww + 5;
var newWidth = $(window).width() - divLeft - 15;
if ((ww > $("#menutabs").width() || menuIsHidden)) // Nooit versmallen tenzij menu = hidden
$("#menutabs").width(ww);
var divLeft = $("#menutabs").is(":visible")?$("#menutabs").outerWidth():0;
$("#menudivider").css("left", divLeft + "px");
$("#maintabs").css("left", divLeft + $("#menudivider").outerWidth() + "px");
var newWidth = $(window).width() - divLeft - $("#menudivider").outerWidth() - 12;
var marge = $("#maintabs").innerWidth() - $("#maintabs").width();
$("#maintabs").width(newWidth + marge);
$("#maintabs").animate({ left: divLeft + 3 }, animParams);
$("#maintabs").animate({ width: newWidth + marge }, animParams);
$("#menudivider").animate({ left: divLeft }, animParams);
// $("#menutabs").animate({ width: ww }, animParams);
// $("#menutabs").width(ww); // to prevent incorrect context stacking of ui-tabs-submenu // not necessary though?
}
else
{
@@ -177,22 +177,21 @@ if (device.test(device.isTouch)) { %>
}
var divTop = $("#frheader").is(":visible")?$("#frheader").height():0;
$("#topdivider").css("top", divTop + "px");
$("#headtoggler").css("left", $(window).width() - $("#headtoggler").outerWidth() - 3 + "px");
//$("#headtoggler").css("left", 5 + "px");
var newTop = divTop + 3;
var newHeight = $(window).height() - divTop - 3;
var tabsHeaderHeight = (menuIsHidden || hasNoHeader) ? 0 : 33; // $("#menutabs>.ui-tabs-nav").outerHeight();
var contentHeight = newHeight - marge - (menuIsHidden ? 0 : 30) - tabsHeaderHeight;
var newTop = divTop + $("#topdivider").outerHeight();
$("#maintabs,#menutabs,#menudivider").css("top", newTop);
var newHeight = $(window).height() - divTop - $("#topdivider").outerHeight();
$("#menudivider").height(newHeight);
$("#menutoggler").css("top", newHeight - 5 - $("#menutoggler").outerHeight() + "px");
$("#menutabs").height(newHeight - $("#menutabs").outerHeight() + $("#menutabs").height() - (menuIsHidden ? 0 : 30));
$("#maintabs").height(newHeight - $("#menutabs").outerHeight() + $("#menutabs").height());
$("#topdivider").animate({ top: divTop }, animParams);
$("#headtoggler").animate({ left: ($(window).width() - 23) }, animParams);
var tabsHeaderHeight = menuIsHidden ? 0 : $("#menutabs>.ui-tabs-nav").outerHeight();
var contentHeight = $("#menutabs").height() - tabsHeaderHeight;
$("#maintabs,#menutabs,#menudivider").animate({ top: newTop }, animParams);
$("#menutabs").animate({ height: (newHeight - marge) }, animParams);
$("#maintabs").animate({ height: (newHeight - marge) }, animParams);
$("#menutabs .ui-layout-content").animate({ height: contentHeight }, animParams).css("overflow","hidden");
$("#menutabs .ui-layout-content").height(contentHeight).css("overflow","auto");
$("#menutoggler").animate({ top: (newHeight - 25) }, animParams);
$("#menudivider").animate({ height: newHeight }, animParams);
FcltMgr._pageManager._timedResizeActiveTab();
}
@@ -209,7 +208,7 @@ if (device.test(device.isTouch)) { %>
content.prepend("<li class=\"submenuHeader mks\">" + submenuHeader + "</li>");
$("div.ui-tabs-submenu").html(content)
.css('left', $(this).position().left + $(this).width() + "px")
.css('left', $(this).position().left + 36 + "px")
.css('top', $(this).position().top + "px")
.css("z-index", 12)
.fadeIn("fast");
@@ -219,10 +218,10 @@ if (device.test(device.isTouch)) { %>
$("div.ui-tabs-submenu ul li").css("display", "list-item");
if ($(this).position().top + $('div.ui-tabs-submenu').outerHeight() >
$(".ui-layout-content").position().top + $(".ui-layout-content").outerHeight()) // if (div.dropdownmenu valt onder uit beeld)
$("div.ui-tabs-submenu").css('top', ($(".ui-layout-content").position().top + //
$(".ui-layout-content").outerHeight() - // dan 'submenu.bottom = window.bottom'
$('div.ui-tabs-submenu').outerHeight())); //
$(".ui-layout-content").position().top + $(".ui-layout-content").outerHeight()) // if (div.dropdownmenu valt onder uit beeld) //
$("div.ui-tabs-submenu").css('top', ($(".ui-layout-content").position().top + // //
$(".ui-layout-content").outerHeight() - // dan 'submenu.bottom = window.bottom' //
$('div.ui-tabs-submenu').outerHeight())); // //
}
}
@@ -236,23 +235,29 @@ if (device.test(device.isTouch)) { %>
return false;
}
function toggleMenu(elm)
function menuToggles()
{
$(elm).toggleClass('dividerclosed');
var menuIsClosed = $('div#menudivider').hasClass('dividerclosed');
$('#menutabs').find("li.mklogo").toggle();
$('#menutabs').find("li.mi").toggle();
$('#menutabs').children("input").toggle();
$('#menutabs .ui-layout-content').find("span.menukop").toggle();
$("#menufilter").focus();
if (!$("#menutabs>.ui-tabs-nav").hasClass("noToggle"))
$("#menutabs>.ui-tabs-nav").toggle();
}
function toggleMenu(elm, noAnim)
{
$(elm).toggleClass('dividerclosed');
var menuIsClosed = $('div#menudivider').hasClass('dividerclosed');
var handler = function() {
dropDown("hide");
};
if (menuIsClosed)
{
if ($("#menufilter").val())
$("#menufilter").val("").trigger("keyup");
menuToggles();
localStorage.setItem("menuCollapsed", "1");;
if (!$("#menutabs>.ui-tabs-nav").hasClass("noToggle"))
$("#menutabs>.ui-tabs-nav").toggle();
$('.ui-tabs-panel ul li.mk')
.on('mouseenter', dropDown);
@@ -265,12 +270,12 @@ if (device.test(device.isTouch)) { %>
$('.ui-tabs-submenu, .menuDropDown, li.mi')
.on('click.nameSpace', handler);
window.myResize(!!noAnim ? false : true);
}
else
{
localStorage.setItem("menuCollapsed", "0");;
if (!$("#menutabs>.ui-tabs-nav").hasClass("noToggle"))
$("#menutabs>.ui-tabs-nav").toggle();
$('.ui-tabs-panel ul li.mk')
.off('mouseenter', dropDown);
@@ -283,8 +288,11 @@ if (device.test(device.isTouch)) { %>
$('.ui-tabs-submenu, .menuDropDown, li.mi')
.off('click.nameSpace');
window.myResize(true);
setTimeout(menuToggles , 250);
$("#menufilter").focus();
}
window.myResize();
}
jQuery(document).ready(function() {
@@ -328,7 +336,7 @@ if (device.test(device.isTouch)) { %>
hotwnd.onCloseHot();
}
}
$(window).resize(myResize);
$(window).resize(function() { myResize() });
window.setTimeout("myResize()", 10);
<% }
@@ -412,7 +420,7 @@ if (device.test(device.isTouch)) { %>
<% } %>
if (localStorage.getItem("menuCollapsed") == "1")
$('div#menudivider').trigger("click");
toggleMenu($('div#menudivider'), true);
}); // jQuery.ready
@@ -463,7 +471,7 @@ function menu(evt, item, regel, menu_key) // E
<div id="frheader">
<% generateHeader(); %>
</div>
<div id="topdivider" class='ui-layout-resizer' onclick="$('#frheader').toggle();$(this).toggleClass('dividerclosed');window.myResize()">
<div id="topdivider" class='ui-layout-resizer' onclick="$('#frheader').toggle();$(this).toggleClass('dividerclosed');window.myResize(true)">
<div id="headtoggler" class='toggler' title='<%=L("lcl_toggler")%>'></div>
</div>
@@ -530,7 +538,7 @@ if (S("PerformInterval")>0 && user.checkAutorisation("WEB_PERMON", true)) { %>
<% generateMenu(1); %>
<div class="ui-tabs-submenu"><ul class="menuDropDown" style="display: none"></ul></div>
</div>
<div id="menudivider" class='ui-layout-resizer <%= S("menu_start_open")?"":"dividerclosed" %>' onclick="toggleMenu(this);">
<div id="menudivider" class='ui-layout-resizer <%= S("menu_start_open")?"":"dividerclosed" %>' onclick='toggleMenu(this)'>
<div id="menutoggler" class='toggler' title='<%=L("lcl_toggler")%>'></div>
</div><%
}

3
APPL/Localscripts/FcltMgr.js
View File

@@ -478,7 +478,8 @@ var FcltMgr =
_resizeTab: function (ifrm)
{
var tabsHeaderHeight = ($(".ui-tabs-nav", FcltMgr._pageManager._$tabshost).height());
var newHeight = $("#maintabs").height()- tabsHeaderHeight - 3;
var newHeight = $(window).height() - ($("#frheader").is(":visible")?$("#frheader").height():0) - 8.27 - tabsHeaderHeight - 3;
// var newHeight = $("#maintabs").height()- tabsHeaderHeight - 3;
$(ifrm).height(newHeight);
// doet de 100% css wel $(ifrm).width(newWidth);
},