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

FCLT#64017 Savepoint widgets, zie ticket voor details

Browse Source 
svn path=/Website/trunk/; revision=53332
This commit is contained in:
Koen Reefman
2021-10-11 14:37:50 +00:00
parent 71e85325dc
commit e72c2f0211
11 changed files with 290 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
APPL/FAC/fac_edit_widget_page.asp
View File

@@ -3,12 +3,12 @@
/* $Revision$
$Id$
File: fac_widget_page.asp
File: fac_edit_widget_page.asp
Description: Dynamische widget pagina
Parameters: wgt_page_key, if omitted the personal widgetpage is used.
wellicht iets met edit=1, anders automatisch obv autorisatie
Context:
Note: TODO: Al wat minder
Note: Edit-mode voor een widget-pagina
*/
%>
@@ -20,6 +20,7 @@ var wgt_page_key = getQParamInt("wgt_page_key", -1);
var this_wgt_page = wgt.func_enabled_wgt_page(wgt_page_key);
user.auth_required_or_abort(this_wgt_page.canWrite);
var mode = getQParamSafe("mode", "show");
var verynew = false;
if (wgt_page_key == -1)
{
@@ -35,15 +36,19 @@ if (wgt_page_key == -1)
if (wgt_page_key == -1) // nog steeds, dan is er dus ook geen persoonlijke pagina -> maak er 1 aan
{
wgt_page_key = wgt.newWidgetPage();
verynew = true;
}
var transitParam = buildTransitParam(["wgt_page_key", "mode"], { "wgt_page_key": wgt_page_key });
FCLTHeader.Requires({ plugins: ["suggest", "jQuery"],
js: ["jQuery-ui.js", "./fac_edit_widget_page.js"]
js: ["jQuery-ui.js", "./fac_edit_widget_page.js", "./fac_widget_page.js"]
});
var widgets = wgt.get_widgets_onpage(wgt_page_key);
if (widgets.length === 0)
verynew = true;
__Log(widgets.length + " widgets on this page");
%>
@@ -61,7 +66,7 @@ __Log(widgets.length + " widgets on this page");
var data = { "wgt_page_key": <%=wgt_page_key%> };
data.widgets = [];
$(".widget-container > .widget-col-wrapper").each(function(i)
$(".widget-container > .widget-col-wrapper:not(.widget-new-wrapper)").each(function(i)
{
widget = {};
widget.key = parseInt($(this).attr("data-key"), 10);
@@ -74,6 +79,15 @@ __Log(widgets.length + " widgets on this page");
data.widgets.push(widget);
});
<% if (wgt_page_key == -1 || widgets.length == 0) // New or empty page
{ %>
if (data.widgets.length === 0)
{
FcltMgr.closeDetail(window, { cancel: true, verynew: 1 } );
return false;
}
<% } %>
protectRequest.dataToken(data);
// Hier wordt $.ajax gebruikt ipv $.post omdat we contentType: json willen verzenden, dat kan niet met $.post
@@ -100,7 +114,7 @@ __Log(widgets.length + " widgets on this page");
if (wgt_page_key == -1 || widgets.length == 0)
{
%>
FcltMgr.closeDetail(window, { cancel: true } );
FcltMgr.closeDetail(window, { cancel: true, verynew: <%=verynew ? 1 : 0%> } );
<%
}
else

148
APPL/FAC/fac_edit_widget_page.js
View File

@@ -1,8 +1,17 @@
/*
$Revision$
$Id$
File: fac_edit_widget_page.js
Description: clientside functions for fac_edit_widget_page.asp
*/
/* Config */
var MAX_COLS_PER_ROW = 3; // Dit is (nog) niet aanpasbaar
var MAX_COLS_PER_ROW = 4; // IN [1, 2, 3, 4, 6, 12]
var LOGGING = 1;
function a(s) {
function a(s)
{
if (LOGGING)
console.log(s);
}
@@ -36,13 +45,15 @@ var resizeRowOptions = {
start: resizeStartRow
}
function clean_markers() {
function clean_markers()
{
var $markers = $(".wgt-marker");
$markers.removeClass("wgt-marker");
$markers.not(".widget-col-wrapper").remove();
}
function delete_widget() {
function delete_widget()
{
var $widgets_in_this_row = $(this).siblings(".widget-col-wrapper");
var deleted_width = parseInt($(this).attr("data-width"), 10);
@@ -71,7 +82,8 @@ function delete_widget() {
startEditMode();
}
function onDrop(e, ui) {
function onDrop(e, ui)
{
if (!ui.draggable.length)
return;
@@ -91,8 +103,8 @@ function onDrop(e, ui) {
$(".widget-col-wrapper").attr("style", ""); // jQuery draggable zet er een z-index op, maar die wil ik niet
}
function resizeColSize($elem, i) {
function resizeColSize($elem, i)
{
var changed = 0;
$elem.removeClass(function (j, cls)
{
@@ -118,7 +130,8 @@ function resizeColSize($elem, i) {
}
function resizeCreateColumn(e, ui) {
function resizeCreateColumn(e, ui)
{
$("> div.ui-resizable-e", e.target).each(function () {
// Create and style resize-icons (East)
$(this).append(I("fa-ellipsis-v fa-lg", { fastyle: "far" }));
@@ -127,36 +140,25 @@ function resizeCreateColumn(e, ui) {
var lastColWidth;
var stepSize;
function resizeStartColumn(e, ui) {
function resizeStartColumn(e, ui)
{
lastColWidth = ui.originalSize.width;
// Recalc grid to 'snap' to
var widgetContainerWidth = $(".widget-container").width();
var $container = $(this).closest(".widget-container");
var widgetContainerWidth = $container.width();
stepSize = (widgetContainerWidth - 100) / 12;
$resizable_cols.resizable("option", "grid", [stepSize]);
// Recalc min & max width
var extraColumnWidthInSteps = 0;
if ($(this).nextAll(".widget-col-wrapper").length == 2) // 3 cols, linker resizer
{
extraColumnWidthInSteps = Math.round(parseFloat($(this).next(".widget-col-wrapper").next(".widget-col-wrapper").css("width")) / stepSize); // 3rd column
}
else if ($(this).prev(".widget-col-wrapper").length) // 3 cols, rechter resizer
{
extraColumnWidthInSteps = Math.round(parseFloat($(this).prev(".widget-col-wrapper").css("width")) / stepSize); // 1st column
}
else // 2 cols
{
}
/* Zet styling in resize-mode */
$(this).next(".widget-col-wrapper").addBack().addClass("resizing-col-wrapper");
// Recalc min & max width
var minWidthInSteps = 1;
var maxWidthInSteps = 11 - extraColumnWidthInSteps;
var maxWidthInSteps = parseInt($(this).attr("data-width"), 10) // Eigen breedte
+ parseInt($(this).next(".widget-col-wrapper").attr("data-width"), 10) // Breedte van volgende wgt
- minWidthInSteps; // Min-breedte van volgende wgt (altijd 1)
var widgetMinWidth = Math.floor(minWidthInSteps * stepSize - 1);
var widgetMaxWidth = Math.ceil(maxWidthInSteps * stepSize + 1);
@@ -165,8 +167,8 @@ function resizeStartColumn(e, ui) {
$(this).resizable("option", "maxWidth", widgetMaxWidth);
}
function resizeColumn(e, ui) {
function resizeColumn(e, ui)
{
var storeLastColWidth = 1;
if (parseFloat($(this).css("width")) <= 0)
{
@@ -174,8 +176,6 @@ function resizeColumn(e, ui) {
storeLastColWidth = 0;
}
e.preventDefault(); // ?
var widgetContainerWidth = $(e.target).closest(".widget-container").width();
stepSize = (widgetContainerWidth - 100) / 12;
@@ -208,19 +208,23 @@ function resizeStopColumn(e, ui)
})
}
function resizeCreateRow(e, ui) {
function resizeCreateRow(e, ui)
{
$("> div.ui-resizable-s", e.target).each(function () {
var $fix_h = $('<input type="checkbox" class="fix">');
if ($(this).closest(".widget-container").find(".widget-col-wrapper").filter("[data-height]").length)
$fix_h.prop("checked", true); // Minimaal 1 hoogte gedefinieerd
$(this).append('Hoogte vastzetten ') // TODO LCL
$(this).append(L("fac_widget_fix_height"))
.append($fix_h)
.append(I("fa-ellipsis-h fa-lg", { fastyle: "far" }));
});
}
function resizeStartRow(e, ui) {
/* Todo, minheight goed zetten, afh van widget-titel of niet */
function resizeStartRow(e, ui)
{
var hasAnyTitle = $(this).find(".widget-title").length;
var minH = hasAnyTitle > 0 ? 41 : 17;
$(this).resizable("option", "minHeight", minH);
}
function checkRowClearance(container)
@@ -254,14 +258,21 @@ function checkRowClearance(container)
function resizeRow(e, ui)
{
var widgets = $(e.target).find("[class*=widget-type-]").length;
var titles = $(e.target).find(".widget-title").length;
var excess_h = widgets === titles ? 0 : (titles > 0 ? 41 : 17);
var wgt_h = parseInt(ui.size.height - excess_h, 10);
$(".widget-size-value").text(wgt_h);
resizeRowContents.apply(e.target, [true, false, ui.size.height]);
}
function resizeRowContents(fixed_height, auto, height) {
function resizeRowContents(fixed_height, auto, height)
{
fixed_height = fixed_height || false;
var $container = $(this);
var new_h = height || 0;
if (new_h == 0)
if (typeof height === "undefined")
$container.find("[class^=widget-type-]").each(function () {
new_h = Math.max(new_h, parseInt($(this).height(), 10));
});
@@ -281,7 +292,7 @@ function resizeRowContents(fixed_height, auto, height) {
$container.find("[class^=widget-type-]").each(function () {
var $widget = $(this);
var new_height = height ? new_h - ($widget.prev(".widget-title").length ? 24 : 0) : new_h;
switch ($(this).closest(".widget-col-wrapper").attr("data-type"))
switch ($(this).closest(".widget-col-wrapper").attr("data-widget-type"))
{
case "U": // Facilitor URL
case "R": // Rapportage
@@ -322,50 +333,33 @@ function resizeRowContents(fixed_height, auto, height) {
$widget.find("img").css("max-height", (fixed_height ? new_height : ""));
break;
default:
console.error("Unknown widget-type (" + $(this).closest(".widget-col-wrapper").attr("data-type") + ")");
console.error("Unknown widget-type (" + $(this).closest(".widget-col-wrapper").attr("data-widget-type") + ")");
break;
}
checkRowClearance($container);
})
}
function resize_h(frm) {
var doc = frm.contentDocument;
var old_h = frm.height;
frm.height = 0;
var new_h = 0;
if (doc.body)
new_h = Math.max(new_h, doc.body.scrollHeight, doc.body.offsetHeight);
if (doc.html)
new_h = Math.max(new_h, doc.html.clientHeight, doc.html.scrollHeight, doc.html.offsetHeight);
frm.height = new_h;
if (old_h)
frm.height = old_h;
else
frm.height = "";
frm.style.maxHeight = new_h + "px";
}
function resize_m(some_wrapping_div) {
function resize_m(some_wrapping_div)
{
return $(some_wrapping_div).find(".widget-type-m > table").height();
}
function resizeStopRow(e, ui) {
var fixed_h = $(e.target).find(".fix").prop("checked", true);
resizeRowContents.apply($(e.target), [fixed_h, true]);
function resizeStopRow(e, ui)
{
$(e.target).find(".fix").prop("checked", true);
resizeRowContents.apply($(e.target), [true, true, ui.size.height]);
}
function updateColWidth($col_wrapper, new_width) {
function updateColWidth($col_wrapper, new_width)
{
$col_wrapper.removeClass(function (i, cls) { return cls.match(/item-width-\d{1,2}/) })
.addClass("item-width-" + new_width)
.attr("data-width", new_width);
}
function upsert_widget_onpage_callback(params) {
a("upsert_widget_onpage_callback");
function upsert_widget_onpage_callback(params)
{
if (params.delete) // Verwijderen
{
delete_widget.apply($(".wgt-marker"));
@@ -395,7 +389,6 @@ function upsert_widget_onpage_callback(params) {
{
$marker.replaceWith($widget);
checkRowClearance($container);
// MAX_COLS_PER_ROW?
if ($container.children(".widget-col-wrapper").length >= MAX_COLS_PER_ROW)
$container.removeClass("editable");
// resize cols met de nieuwe erbij
@@ -438,7 +431,6 @@ var $draggables = $();
var $droppables = $();
function startEditMode()
{
a("starting edit mode");
function init_resizable_cols() {
$resizable_cols = $();
$(".widget-container").each(function() {
@@ -495,8 +487,6 @@ function startEditMode()
function destroyEditMode()
{
a("destroying edit mode");
$(".widget-icon").off();
$(".empty-col-wrapper").off();
@@ -530,28 +520,22 @@ $(function ()
}
});
// Deze hoeft maar 1x
$(".widget-new-wrapper").on("click", function () {
$(this).siblings(".empty-col-wrapper").eq(0).trigger("click");
});
$(".widget-container").each(function()
{
if ($(this).children(".widget-col-wrapper").length < MAX_COLS_PER_ROW)
{
$(this).addClass("editable");
}
})
});
startEditMode();
$(".widget-type-m").each(function () {
checkRowClearance(this);
});
// IE11 support;
var supports_srcdoc = !!("srcdoc" in document.createElement("iframe"));
if (!supports_srcdoc) {
$(".widget-type-h > iframe").each(function () {
var doc = this.contentDocument;
doc.open();
doc.write($(this).attr("srcdoc"));
doc.close();
});
}
})

35
APPL/FAC/fac_show_widget_page.asp
View File

@@ -3,12 +3,12 @@
/* $Revision$
$Id$
File: fac_widget_page.asp
File: fac_show_widget_page.asp
Description: Dynamische widget pagina
Parameters: wgt_page_key, if omitted the personal widgetpage is used.
wellicht iets met edit=1, anders automatisch obv autorisatie
Context:
Note: TODO: Al wat minder
Note: Show-mode voor een widget-pagina
*/
%>
@@ -24,7 +24,7 @@ var mode = getQParamSafe("mode", "show");
var transitParam = buildTransitParam(["wgt_page_key", "mode"]);
FCLTHeader.Requires({ plugins: ["jQuery"] });
FCLTHeader.Requires({ plugins: ["jQuery"], js: ["./fac_widget_page.js"] });
var widgets = wgt.get_widgets_onpage(wgt_page_key);
@@ -41,24 +41,6 @@ if (!widgets.length)
<script>
FcltMgr.setTitle("<%=(this_wgt_page.title ? safe.jsstring(this_wgt_page.title) : (this_wgt_page.public ? L("fac_widget_page") : L("lcl_menu_my_wgt_page")))%>");
function resize_h(frm) {
var doc = frm.contentDocument;
var old_h = frm.height;
frm.height = 0;
var new_h = 0;
if (doc.body)
new_h = Math.max(new_h, doc.body.scrollHeight, doc.body.offsetHeight);
if (doc.html)
new_h = Math.max(new_h, doc.html.clientHeight, doc.html.scrollHeight, doc.html.offsetHeight);
frm.height = new_h;
if (old_h)
frm.height = old_h;
else
frm.height = new_h > 150 ? new_h + "px" : "";
frm.style.maxHeight = new_h + "px";
}
<% if (!this_wgt_page.public || mode == "wrap")
{
if (this_wgt_page.canWrite)
@@ -109,17 +91,6 @@ if (!widgets.length)
$(this).siblings("ul").find("li").trigger("click");
});
});
// IE11 support;
var supports_srcdoc = !!("srcdoc" in document.createElement("iframe"));
if (!supports_srcdoc) {
$(".widget-type-h > iframe").each(function () {
var doc = this.contentDocument;
doc.open();
doc.write($(this).attr("srcdoc"));
doc.close();
});
}
});
</script>

33
APPL/FAC/fac_widget.asp Normal file
View File

@@ -0,0 +1,33 @@
<%@language = "javascript" %>
<%
/* $Revision$
$Id$
File: fac_widget.asp
Description: Dynamische widget pagina
Parameters: wgt_key, if omitted, an empty marker is returned
Context: Widgets
Note: Returned de volledige HTML van een individuele widget zodat de rendering op 1 plek (serverside) gebeurd
*/
DOCTYPE_Disable = true; // Ik heb de <!DOCTYPE html> niet nodig want ik verwerk de Response zelf
%>
<!-- #include file="../Shared/common.inc" -->
<!-- #include file="../Shared/iface.inc" -->
<!-- #include file="fac_widget.inc" -->
<%
var wgt_key = getQParamInt("wgt_key");
var mode = getQParamSafe("mode", "show");
if (wgt_key > -1)
{
var widget = wgt.get_widget(wgt_key);
wgt.renderWidget(widget, mode);
}
else if (wgt_key == -1)
{
Response.Write("<div class='wgt-marker'></div>");
wgt.empty_col();
}
Response.End;
%>

114
APPL/FAC/fac_widget.inc
View File

@@ -45,7 +45,7 @@ wgt = {
while (!oRs.EoF)
{
widget = {
"id": oRs("fac_widget_id").Value,
"id": oRs("fac_widget_id").Value + String(wgt.uuid()),
"uid": oRs("fac_widget_onpage_key").Value,
"wgt_key": oRs("fac_widget_key").Value,
"height": oRs("fac_widget_onpage_height").Value,
@@ -107,17 +107,62 @@ wgt = {
return widget;
},
uuid:
function () {
return 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
},
renderWidget:
function (widget, mode)
{
// Hier komt de type-afhankelijke specifieke rendering van de verschillende content
// Dit is even een conceptuele opzet, als POC, maar volgens mij moet het inderdaad zo
// Verder uitwerken, herstructuren, gaat ook uit van nieuwe menu-werking (waarbij alturl de url is)
mode = mode || "show";
widget.qs = "";
// QueryString in orde boxen, asWidget toevoegen, originele QS behouden (minus 1=1/mode/wgt_page_key), widget_height bij rap, en custom parameters qs0 - qs9
if (inArray(widget.type, ["U", "X", "R", "G"]))
{
widget.qs = (inArray(widget.type, ["U", "X"]) && widget.url.indexOf("?") === -1) ? "?" : "&"; // Types R en G hebben sowieso al een ? in de url
widget.qs += "asWidget=1";
if (widget.type == "U" && typeof widget.height === "number")
widget.qs += "&widget_height=" + widget.height;
var qs = String(Request.ServerVariables("QUERY_STRING"));
qs = qs.replace(/mode=(?:.*&|.*$)/, "");
qs = qs.replace(/1=1(?:&|$)/, "");
qs = qs.replace(/wgt_page_key=(?:\d*&|\d*$)/, "");
if (qs != "")
widget.qs += "&" + qs;
if (widget.qs != "" && widget.url && widget.url.indexOf("#") > 0)
{
var temp = widget.url.split("#")[0];
widget.url = temp[0];
widget.qs += "#" + temp[1];
}
}
var custom_qs = [];
if (widget.url || widget.qs)
for (var i = 0; i < 10; i++)
{
custom_qs[i] = getQParamSafe("qs" + i, "");
if (custom_qs[i] === "")
continue;
var regex = new RegExp('\\{'+i+'\\}', 'gi');
if (widget.url)
widget.url = widget.url.replace(regex, custom_qs[i]);
if (widget.qs)
widget.qs = widget.qs.replace(regex, custom_qs[i]);
}
%>
<div class="<%=(mode == "edit" ? 'widget-col-wrapper ' : '')%>item-width-<%=widget.width%><%=(widget.height && widget.height < 123 ? (widget.height < 63 ? ' clearance-too-low' : ' low-clearance') : '')%>"
<%=(mode == "edit" ? ' data-key="' + widget.wgt_key + '"'+ ' data-type="' + widget.type + '"' + ' data-width="' + widget.width + '"' : '')%>
<div class="<%=(mode == "edit" ? 'widget-col-wrapper ' : '')%>item-width-<%=widget.width%>
<%=(widget.height && widget.height < 123 ? (widget.height < 63 ? ' clearance-too-low' : ' low-clearance') : '')%>"
data-widget-type="<%=widget.type%>"
<%=(mode == "edit" ? ' data-key="' + widget.wgt_key + '"' + '"' + ' data-width="' + widget.width + '"' : '')%>
<%=(mode == "edit" && widget.height ? ' data-height="' + widget.height + '"' : '')%>
<%=(mode == "edit" && widget.uid ? ' data-uid="' + widget.uid + '"' : '')%>>
@@ -128,11 +173,9 @@ wgt = {
switch (widget.type)
{
case "U": // Interne/Facilitor url
var url = widget.url + (typeof widget.height === "number" ? (widget.url.indexOf("?") > 0 ? "&" : "?") + "widget_height=" + widget.height : "");
url = url + (widget.url.indexOf("?") > 0 ? "&" : "?") + "aswidget=1";
%>
<div class="widget-type-x">
<iframe src="../fac/<%=url%>" id="frame_<%=widget.id%>" name="frame_<%=widget.id%>"
<div class="widget-type-u">
<iframe src="../fac/<%=widget.url%><%=widget.qs%>" id="frame_<%=widget.id%>" name="frame_<%=widget.id%>"
refresher="<%=widget.refreshtime%>" <%=(widget.height ? 'style="max-height: ' + widget.height + 'px"' : '')%>
marginwidth="0" marginheight="0" frameborder="0"
onload="FcltMgr.iframeLoaded(this);<%=(mode == "edit" ? ' checkRowClearance(this);' : '')%>">
@@ -143,7 +186,7 @@ wgt = {
case "X": // Externe url
%>
<div class="widget-type-x">
<iframe src="<%=widget.url%>" id="frame_<%=widget.id%>" name="frame_<%=widget.id%>"
<iframe src="<%=widget.url%><%=widget.qs%>" id="frame_<%=widget.id%>" name="frame_<%=widget.id%>"
refresher="<%=widget.refreshtime%>" <%=(widget.height ? 'height="' + widget.height + 'px"' : '')%>
marginwidth="0" marginheight="0" frameborder="0"
<%=(mode == "edit" ? ' onload="checkRowClearance(this);"' : '')%>>
@@ -223,7 +266,7 @@ wgt = {
case "R": // Rapport
%>
<div class="widget-type-r">
<iframe src="../fac/fac_report.asp?usrrap_key=<%=widget.typerefkey%>&mode=list&more=1&noheader=1&aswidget=1" id="<%=widget.id%>frame" name="<%=widget.id%>frame"
<iframe src="../fac/fac_report.asp?mode=list&usrrap_key=<%=widget.typerefkey%><%=widget.qs%>" id="<%=widget.id%>frame" name="<%=widget.id%>frame"
refresher="<%=widget.refreshtime%>" <%=(widget.height ? 'style="max-height: ' + widget.height + 'px"' : '')%>
marginwidth="0" marginheight="0" frameborder="0"
onload="FcltMgr.iframeLoaded(this);<%=(mode == "edit" ? ' checkRowClearance(this);' : '')%>">
@@ -234,7 +277,7 @@ wgt = {
case "G": // Graphics plattegrond (experimental) IMG of IFRAME?
%>
<div class="widget-type-g">
<iframe src="../cad/mySlnk2IMG.asp?<%=widget.url%>&aswidget=1" id="<%=widget.id%>frame" name="<%=widget.id%>frame"
<iframe src="../cad/mySlnk2IMG.asp?<%=widget.url%><%=widget.qs%>" id="<%=widget.id%>frame" name="<%=widget.id%>frame"
refresher="<%=widget.refreshtime%>" <%=(widget.height ? 'style="max-height: ' + widget.height + 'px"' : '')%>
marginwidth="0" marginheight="0" frameborder="0"
onload="FcltMgr.iframeLoaded(this);<%=(mode == "edit" ? ' checkRowClearance(this);' : '')%>">
@@ -273,32 +316,41 @@ wgt = {
{
if (wgt_page_key > 0)
{
// Eerst leegmaken
wgt.emptyWidgetPage(wgt_page_key);
// Deze MAX(key) opzoeken zodat we de oude widgets kunnen verwijderen nadat(!) de nieuwe zijn toegevoegd
var sql = "SELECT COALESCE(MAX(fac_widget_onpage_key), -1)"
+ " FROM fac_widget_onpage"
+ " WHERE fac_widget_page_key = " + wgt_page_key;
var oRs = Oracle.Execute(sql);
var max_onpage_key = oRs(0).Value;
oRs.Close();
// Blijkbaar niets op te slaan
if (!widgets.length)
return;
// En nu weer vullen met de nieuwe waardes
sql = "INSERT ALL";
var widget;
for (i in widgets)
if (widgets.length)
{
widget = widgets[i];
sql += " INTO fac_widget_onpage (fac_widget_page_key, fac_widget_key, fac_widget_onpage_order, fac_widget_onpage_height, fac_widget_onpage_width)"
+ " VALUES (" + wgt_page_key + ", " + widget.key + ", " + widget.order + ", " + widget.height + ", " + widget.width + ")";
// Nieuwe widgets toevoegen
sql = "INSERT ALL";
var widget;
for (i in widgets)
{
widget = widgets[i];
sql += " INTO fac_widget_onpage (fac_widget_page_key, fac_widget_key, fac_widget_onpage_order, fac_widget_onpage_height, fac_widget_onpage_width)"
+ " VALUES (" + wgt_page_key + ", " + widget.key + ", " + widget.order + ", " + widget.height + ", " + widget.width + ")";
}
sql += " SELECT 1 FROM DUAL" // <- nodig voor een multi-row INSERT
Oracle.Execute(sql);
}
sql += " SELECT 1 FROM DUAL" // <- nodig voor een multi-row INSERT
Oracle.Execute(sql);
// Nu pas de oude widgets weghalen
wgt.emptyWidgetPage(wgt_page_key, max_onpage_key);
}
},
emptyWidgetPage:
function (wgt_page_key)
function (wgt_page_key, up_to_key)
{
var sql = "DELETE FROM fac_widget_onpage"
+ " WHERE fac_widget_page_key = " + wgt_page_key;
if (up_to_key)
sql += " AND fac_widget_onpage_key <= " + up_to_key
Oracle.Execute(sql);
},
@@ -393,7 +445,7 @@ wgt = {
{
Response.Write('<div class="widget-col-wrapper item-width-12 widget-new-wrapper">'
+ ' <div class="widget-col big-tooltip">'
+ ' Voeg direct uw eerste widget toe' /* TODO (LCL) */
+ L("fac_widget_add_new")
+ I("fa-hand-point-right fa-1-5x", { fastyle: "fal" })
+ ' </div>'
+ '</div>');
@@ -406,7 +458,7 @@ wgt = {
+ '<div class="empty-col-wrapper item-width-0">'
+ ' <div class="empty-col">'
+ I("fa-plus-circle fa-4x", { fastyle: "fal" })
+ ' <div class="tooltip">Voeg een nieuwe widget toe aan de pagina</div>' /* TODO (LCL) */
+ ' <div class="tooltip">' + L("fac_widget_add_here") + '</div>'
+ ' </div>'
+ '</div>');
},
@@ -420,6 +472,10 @@ wgt = {
+ ' <div class="delete-widget widget-icon">'
+ I("fa-trash-alt fa-lg", { fastyle: "far" })
+ ' </div>'
+ ' <div class="widget-size">'
+ ' <span class="widget-size-value"></span>'
+ I("fa-arrows-v", { fastyle: "fal" })
+ ' </div>'
+ '</div>');
}
}

6
APPL/FAC/fac_widget_page.asp
View File

@@ -8,7 +8,7 @@
Parameters: wgt_page_key, if omitted the personal widgetpage is used.
wellicht iets met edit=1, anders automatisch obv autorisatie
Context:
Note: TODO: Alles
Note: Aanroep pagina van show/edit-mode van een widget-pagina
*/
%>
@@ -65,6 +65,10 @@ var transitParam = buildTransitParam(["wgt_page_key", "mode"], { "wgt_page_key":
else
{ // Bestaande widget_page bewerkt, switch naar show-mode
%>
if (params.cancel && params.verynew)
{
FcltMgr.closeDetail(window, params);
}
if (!params.keepForm)
{
if (params.cancel)

243
APPL/FAC/fac_widget_page.js
View File

@@ -1,209 +1,58 @@
function onDrop(e, ui) {
if (!ui.draggable.length)
return;
/*
$Revision$
$Id$
var contentCls = ".widget-col, .empty-col";
File: fac_widget_page.js
Description: Shared clientside functions for fac_show_widget_page.asp & fac_edit_widget_page.asp
*/
var orgWidget = $(contentCls, ui.draggable)[0].outerHTML;
var newWidget = $(contentCls, e.currentTarget)[0].outerHTML;
function resize_h(frm)
{
var doc = frm.contentDocument;
var old_h = frm.height;
frm.height = 0;
var new_h = 0;
if (doc.body)
new_h = Math.max(new_h, doc.body.scrollHeight, doc.body.offsetHeight);
if (doc.html)
new_h = Math.max(new_h, doc.html.clientHeight, doc.html.scrollHeight, doc.html.offsetHeight);
frm.height = new_h;
if (old_h)
frm.height = old_h;
else
frm.height = new_h > 150 ? new_h + "px" : "";
$(contentCls, e.currentTarget).replaceWith(orgWidget);
$(contentCls, ui.draggable).replaceWith(newWidget);
frm.style.maxHeight = new_h + "px";
}
function resizeColSize($elem, i) {
if (!$elem.attr("class"))
{
console.error("No $elem found");
return;
}
// console.log($elem.attr("class") + "(" + i + ")");
var changed = 0;
$elem.removeClass(function () {
var currentClass = $elem.attr("class").match(/item-width-\d+/)[0];
var currentSize = parseInt(currentClass.substr(11), 10);
var minSize = 1;
var maxSize = 12 - $elem.nextAll(".widget-col-wrapper").length;
changed = i > 0 ? Math.min(maxSize - currentSize, i) : Math.max(minSize - currentSize, i);
var newSize = currentSize + changed;
if (changed != i)
console.error("zou niet meer voor moeten komen.");
if (changed != 0) {
$elem.addClass("item-width-" + newSize);
return currentClass; // delete old class
function resizeOnActivate()
{
$("[data-widget-type]").each(function () {
var $widget_col = $(this).find("[class*=widget-type-]");
switch ($(this).attr("data-widget-type")) {
case "H":
resize_h($widget_col.find("iframe")[0]);
break;
default:
var $frm = $widget_col.find("iframe");
if ($frm.length && FcltMgr._frmaccessible($frm[0].contentWindow) && $frm[0].contentWindow.FcltMgr)
$frm[0].contentWindow.FcltMgr.resized();
}
})
return Math.abs(changed);
}
function resizeCreateColumn(e, ui) {
$("> div.ui-resizable-handle", e.target).each(function () {
// Create and style resize-icons (East & West)
var widgetColHeight = $(this).height();
$(this).append('<i class="far fa-fw fa-lg fa-ellipsis-v"></i>');
});
}
var lastColWidth;
var stepSize;
function resizeStartColumn(e, ui) {
lastColWidth = ui.originalSize.width;
// Recalc grid to 'snap' to
var widgetContainerWidth = $(".widget-container").width();
stepSize = widgetContainerWidth / 12;
$resizeColumnObject.resizable("option", "grid", [stepSize]);
// Recalc min & max width
var extraColumnWidthInSteps = 0;
if ($(this).nextAll(".widget-col-wrapper").length == 2) // 3 cols, linker resizer
{
extraColumnWidthInSteps = Math.round(parseFloat($(this).next(".widget-col-wrapper").next(".widget-col-wrapper").css("width")) / stepSize); // 3rd column
}
else if ($(this).prev(".widget-col-wrapper").length) // 3 cols, rechter resizer
{
extraColumnWidthInSteps = Math.round(parseFloat($(this).prev(".widget-col-wrapper").css("width")) / stepSize); // 1st column
}
else // 2 cols
{
}
var minWidthInSteps = 1;
var maxWidthInSteps = 11 - extraColumnWidthInSteps;
var widgetMaxWidth = Math.ceil(maxWidthInSteps * stepSize);
var widgetMinWidth = Math.floor(minWidthInSteps * stepSize);
$(this).resizable("option", "maxWidth", widgetMaxWidth);
$(this).resizable("option", "minWidth", widgetMinWidth);
}
function resizeColumn(e, ui) {
var storeLastColWidth = 1;
if (parseFloat($(this).css("width")) <= 0)
{
$(this).css("width", lastColWidth);
storeLastColWidth = 0;
}
e.preventDefault(); // ?
var moveXcols = Math.round(Math.abs(ui.size.width - lastColWidth) / $resizeColumnObject.resizable("option", "grid"));
var xColsDone = 0;
var xColsTodo = 0;
var widgetsInRow = $(".widget-col-wrapper", $(this).parent()).length;
if (ui.size.width > lastColWidth) // Moved right
{
resizeColSize($(this).next(), -moveXcols);
resizeColSize($(this), moveXcols);
}
else if (ui.size.width < lastColWidth) // Moved left
{
resizeColSize($(this), -moveXcols);
resizeColSize($(this).next(), moveXcols);
}
if (storeLastColWidth)
lastColWidth = ui.size.width;
}
function resizeStopColumn(e, ui) {
// Reload widget on resize
$(".widget-col-wrapper", $(this).parent()).attr("style", "");
var $widget_iframes = $(".widget-col > iframe", $(this).add($(this).next()));
$widget_iframes.each(function () {
$(this).attr("src", $(this).attr("src"));
})
}
function resizeStartRow(e, ui) {
}
function resizeCreateRow(e, ui) {
}
var $resizeColumnObject;
function startEditMode() {
var dragOptions = {
addClasses: false,
containment: ".widget-body",
opacity: 0.75,
revert: true,
revertDuration: 0,
stack: ".widget-col-wrapper"
}
var drOptions = {
addClasses: false,
tolerance: "pointer"
}
var resizeColumnOptions = {
// autoHide: true,
containment: ".widget-body",
create: resizeCreateColumn,
// ghost: false,
// grid: [1],
handles: "e",
start: resizeStartColumn
}
var resizeRowOptions = {
// autoHide: true,
containment: ".widget-body",
create: resizeCreateRow,
ghost: false,
grid: [1],
handles: "n, s",
start: resizeStartRow
}
// Put out the trashcans
$(".widget-col-wrapper").each(function () {
$(this).append('<div class="trash-wrapper"><i class="widget far fa-lg fa-trash-alt"></i></div>');
});
// Make columns drag- & droppable
$(".widget-col-wrapper").draggable(dragOptions);
$(".widget-col-wrapper").droppable(drOptions)
.on("drop", onDrop);
// Make columns resizable
var $resizables = $(); // = $(".widget-col-wrapper:not(:last-child)");
$(".widget-container").each(function() {
$resizables = $resizables.add($(this).children(".widget-col-wrapper").not(":last"));
});
$resizeColumnObject = $resizables.resizable(resizeColumnOptions);
$resizables.on("resizeStart", resizeStartColumn)
.on("resizecreate", resizeCreateColumn)
.on("resize", resizeColumn)
.on("resizestop", resizeStopColumn);
// Voegt (+) toe in edit mode
$(".widget-container").each(function () { checkRowClearance($(this)); });
}
$(function () {
// resizeRowObject = $(".widget.row").resizable(resizeRowOptions);
// test
// resizeColSize($(".widget-col-wrapper").eq(0), 1);
// IE11 support;
var supports_srcdoc = !!("srcdoc" in document.createElement("iframe"));
if (!supports_srcdoc) {
$(".widget-type-h > iframe").each(function () {
var doc = this.contentDocument;
doc.open();
doc.write($(this).attr("srcdoc"));
doc.close();
});
}
})

3
APPL/Localscripts/FcltMgr.js
View File

@@ -376,6 +376,9 @@ var FcltMgr = {
$("iframe", frm.document).each(function() {
if ($(this).height() == 0)
FcltMgr.iframeLoaded(this);
var infrm = frm.frames[this.id];
if ($(this)[0].id === "widget_page_frame" && FcltMgr._frmaccessible(infrm) && typeof infrm.resizeOnActivate == "function")
infrm.resizeOnActivate();
// Dialogen hadden de neiging te verdwijnen.
// Zo (b)lijken ze terug te halen
if ($(this).hasClass("fcltmodal")) {

13
APPL/Localscripts/iface.js
View File

@@ -308,10 +308,14 @@ var iface =
activate: function(event, ui) {
var new_div = ui.newPanel;
if (new_div.length) {
var new_frm = $(new_div).find("iframe").get(0).contentWindow;
if (FcltMgr._frmaccessible(new_frm))
$(new_frm).scrollTop(new_frm.wasScroll);
var $new_frm = $(new_div).find("iframe");
var new_wnd = $new_frm.get(0).contentWindow;
if (FcltMgr._frmaccessible(new_wnd))
{
$(new_wnd).scrollTop(new_wnd.wasScroll);
if ($new_frm[0].id === "widget_page_frame" && typeof new_wnd.resizeOnActivate == "function")
new_wnd.resizeOnActivate();
}
$("iframe", new_div).each(function () {
FcltMgr.iframeLoaded(this);
});
@@ -596,7 +600,6 @@ function validateForm(fName, params)
$(".flddate").filter(jqcheckonly).not(jqchecknot).filter(':visible').each(function (i)
{
elem = $(this).closest("td")
var val = elem.find("#enddate").val();
if(val == undefined){

1
APPL/MGT/fac_widget_page.asp
View File

@@ -44,6 +44,7 @@ scaffolding(this_model,
"wrap": {
"frames": [
{
id: "widget_page_frame",
url: "../fac/fac_show_widget_page.asp?mode=wrap&wgt_page_key={0}",
title: L("fac_widget_page_layout"),
icon: "fa-th-large"

26
APPL/Shared/default.csx
View File

@@ -7363,6 +7363,8 @@ textarea#note:focus {
.widget-title {
height: 24px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.widget-container > div[class*=-col-wrapper] {
@@ -7426,10 +7428,6 @@ textarea#note:focus {
visibility: hidden;
}
.widget-new-wrapper {
z-index: -1;
}
.widget-new-wrapper > .widget-col {
min-height: 5em;
border-style: dashed;
@@ -7451,6 +7449,7 @@ textarea#note:focus {
min-height: 150px;
}
.widget-new-wrapper,
.empty-col-wrapper > .empty-col {
cursor: pointer;
}
@@ -7553,12 +7552,29 @@ textarea#note:focus {
border-color: ==textcolor==;
}
.widget-col-wrapper:not(.resizing-col-wrapper, .ui-draggable-dragging):hover .widget-icon {
.widget-container:not(.ui-resizable-resizing) .widget-col-wrapper:not(.resizing-col-wrapper, .ui-draggable-dragging):hover .widget-icon {
display: inline-flex;
justify-content: center;
align-items: center;
}
.widget-container.ui-resizable-resizing .widget-size {
display: block;
}
.widget-size {
display: none;
background-color: #fff;
padding: 0 0.2em 0 0.5em;
margin: 0.2em;
opacity: 0.8;
border-radius: 0.2em;
color: #343F4D; /* Aareon Urban Grey */
}
.widget-size-value::after {
content: "px";
}
.empty-col {
color: ==textcolor==;
}