@xuda.io/xuda-framework-plugin-ionic
Version:
Xuda Ionic UI Framework plugin
455 lines (412 loc) • 10.7 kB
JavaScript
export const resources = [
{
type: "module",
url: "https://cdn.jsdelivr.net/npm/@ionic/core@6.2.9/dist/ionic/ionic.esm.js",
callback: function (params) {
import(
"https://cdn.jsdelivr.net/npm/@ionic/core@6.2.9/dist/ionic/index.esm.js"
).then((module) => {
window.loadingController = module.loadingController;
window.modalController = module.modalController;
window.pickerController = module.pickerController;
window.toastController = module.toastController;
window.alertController = module.alertController;
window.menuController = module.menuController;
window.popoverController = module.popoverController;
window.actionSheetController = module.actionSheetController;
});
},
},
{
type: "js",
url: "https://cdn.jsdelivr.net/npm/@ionic/core@6.2.9/dist/ionic/ionic.js",
},
{
type: "css",
url: "https://cdn.jsdelivr.net/npm/@ionic/core@6.2.9/css/ionic.bundle.css",
},
];
export const attribute_binder = {
"ion-tabs": { "xu-script": function () {}, class: "abc", "xu-cdn": "" },
};
export const properties = {
component: {
modalTilt: {
label: "Modal Tilt",
type: "bool",
render: "checkbox",
},
modalSize: {
label: "Modal Size",
type: "string",
render: "select",
options: [
{ label: "Full", value: "full" },
{ label: "Half", value: "half" },
],
},
allowBackdropDismiss: {
label: "Allow Backdrop Dismiss",
type: "bool",
render: "checkbox",
},
allowCloseOnSwipe: {
label: "Allow Close On Swipe",
type: "bool",
render: "checkbox",
},
},
};
export const core = class {
init(setup) {
if (!setup?.theme?.init) {
return console.warn("UI framework theme setup not found");
}
var id = Date.now();
const style = document.createElement("style");
style.setAttribute("id", id);
style.innerHTML = setup.theme.init;
document.head.append(style);
return id;
}
discard(id) {
const element = document.getElementById(id);
element.remove();
}
refresh(container, _ds) {
var event = new Event("ionRefresh");
if (container) {
var $refresher = $($(container).children("ion-content")).children(
"ion-refresher"
);
if ($refresher.length) {
// refresh on same container
$refresher[0].dispatchEvent(event);
return;
// func.events.delete_job(SESSION_ID, jobNoP);
}
// refresh above find first container
$div = $(container).find("ion-content").first();
if (!$div.length) {
$div = $("#" + _ds.containerId);
}
if (!$div.length) {
$div = $("#" + _ds.panel_div_id);
}
return $div;
} else {
// refresh on load
$div = $("#" + _ds.containerId)
.find("ion-content")
.first();
return $div;
}
}
rootTagName() {
return "ion-app";
}
};
export const loader = class {
async create() {
const loader = await loadingController.create({
message: text ? text : "Please wait..",
translucent: true,
duration: 99000,
});
loader.present();
return loader;
}
init(text) {}
close(loader) {
loader.dismiss();
}
};
export const toast = class {
async create(type, message, title, icon) {
var color = undefined;
switch (type) {
case "error":
color = "danger";
console.error(message);
break;
case "success":
color = "success";
break;
case "info":
color = "primary";
break;
case "warning":
color = "warning";
console.info(message);
break;
default:
color = "dark";
}
var opt = {
color,
icon,
message: (title && title + " ") + message,
showCloseButton: true,
closeButtonText: "x",
};
// if (!auto_close_offP) {
opt.duration = 2000;
// }
const toast = await toastController.create(opt);
toast.present();
return toast;
}
init(text) {}
close(loader) {
loader.dismiss();
}
};
export const popup = class {
async create(header, subheader, message, buttons) {
// buttons = [
// {
// label: "Dismiss",
// role: "cancel",
// cssClass: "secondary",
// handler: () => {
// callback();
// },
// },
// ];
const alert = await alertController.create({
header: header,
subheader: subheader,
message: message,
buttons: buttons,
translucent: true,
});
await alert.present();
return alert;
}
async update(text) {}
async close(loader) {
loader.dismiss();
}
};
export const bind = class {
setter(elm, value) {
switch ($(elm).prop("tagName")) {
case "ION-RADIO-GROUP":
$(elm).attr("value", value);
break;
case "ION-CHECKBOX":
$(elm).attr("checked", value);
break;
default:
$(elm).val(value);
}
}
getter(elm) {
switch ($(elm).prop("tagName")) {
case "ION-RADIO-GROUP":
return $(elm).attr("value");
break;
case "ION-CHECKBOX":
return $(elm).attr("checked");
break;
default:
return $(elm).val();
}
}
listener(elm, callback) {
var change_type = "change";
if ($(elm).prop("tagName").substr(0, 4) === "ION-") {
change_type = "ionChange";
}
$(elm).on(change_type, (e) => {
callback(e);
});
}
};
////////////////////////////
export const modal = class {
async create(e) {
var canDismiss = true;
var opt = {
component: e.modal_id,
backdropDismiss: e.properties?.allowBackdropDismiss,
canDismiss: canDismiss,
};
this.modal = await modalController.create(opt);
if (e?.properties?.modalSize === "half") {
$("ion-modal").addClass("half_modal");
} else {
$("ion-modal").removeClass("half_modal");
}
if (!e?.properties?.modalTilt) {
modal.presentingElement = $(
$(SESSION_OBJ[e.SESSION_ID].root_element)
).find("xu-nav")[0];
}
await this.modal.present();
return this.modal;
}
async init(e) {
const xu_modal_controller = document.querySelector("xu-modal-controller");
var $modal = $(e.modal_id);
var params = $(xu_modal_controller).data().xuControllerParams[e.modal_id];
const dismiss = async () => {
await this.modal.dismiss();
// if (params.$container) {
// await func.UI.screen.validate_exit_events(
// e.SESSION_ID,
// params.$container.data().xuData.paramsP,
// null
// );
// func.datasource.clean_all(e.SESSION_ID, params.dsSession);
// }
};
if (params.$container) {
$modal.attr("id", params.$container.attr("id"));
$.each(params.$container.data(), function (key, val) {
$modal.data(key, val);
});
}
var $header = $("<ion-header>");
var $toolbar = $("<ion-toolbar>").appendTo($header);
var $title = $("<ion-title>").text(params.menuTitle).appendTo($toolbar);
if (
!params?.$container?.data()?.xuData?.paramsP?.screenInfo?.properties
?.disableModalClose
) {
var $buttons = $('<ion-buttons slot="end">').appendTo($toolbar);
$('<ion-button><ion-icon name="close"></ion-icon>')
.click(dismiss)
.appendTo($buttons);
}
if (
// !params.$container ||
!params?.properties?.hideHeader
) {
$header.appendTo($modal);
}
$modal.append(params.$dialogDiv);
if (params.$modal_footer) {
params.$modal_footer.appendTo($modal);
}
}
async present(modal) {
await modal.present();
}
async close() {
await this.modal.dismiss();
if (this.close_callback) this.close_callback(this.modal_id);
}
async properties() {
return {
modalTilt: {
label: "Modal Tilt",
type: "bool",
render: "checkbox",
},
modalSize: {
label: "Modal Size",
type: "string",
render: "select",
options: [
{ label: "Full", value: "full" },
{ label: "Half", value: "half" },
],
},
allowBackdropDismiss: {
label: "Allow Backdrop Dismiss",
type: "bool",
render: "checkbox",
},
allowCloseOnSwipe: {
label: "Allow Close On Swipe",
type: "bool",
render: "checkbox",
},
allowBackdropDismiss: {
label: "Allow Backdrop Dismiss",
type: "bool",
render: "checkbox",
},
allowModalClose: {
label: "Allow Modal Close",
type: "bool",
render: "checkbox",
},
hideHeader: {
label: "Hide Header",
render: "checkbox",
type: "bool",
},
};
}
};
export const page = class {
async create(e) {
this.$page = $("<div>");
var $header = $("<ion-header>");
var $toolbar = $("<ion-toolbar>").appendTo($header);
$("<ion-title>").text(e.properties.name).appendTo($toolbar);
var $buttons = $('<ion-buttons slot="start">').appendTo($toolbar);
if (!e?.properties?.disablePageBack) {
this.$button = $("<ion-back-button>")
.off("click")
.on("click", async () => {
this.page_back_callback();
})
.appendTo($buttons);
}
if (!e?.properties?.hideHeader) {
if (!e?.properties?.disablePageBack) {
$header.appendTo(this.$page);
}
}
}
async init(e) {
e.callback = (e, page_back_callback) => {
if (!e?.properties?.disablePageBack) {
$(e).addClass("can-go-back");
}
$(e).append(this.$page.children());
$(e).append(e.div);
this.page_back_callback = page_back_callback;
};
}
async properties() {
return {
allowPageBack: {
label: "Allow Page Back",
render: "checkbox",
type: "bool",
},
hideHeader: {
label: "Hide Header",
render: "checkbox",
type: "bool",
},
};
}
};
export const popover = class {
async open(e) {
return new Promise(function (resolve, reject) {
popoverController
.create({
component: "xu-popover-content-" + e.SESSION_ID,
event: e.ELEMENT_CLICK_EVENT,
translucent: true,
})
.then((popover) => {
modal.present().then(() => {
resolve(popover);
});
});
});
}
async set(e) {
var $popover = $("xu-popover-content-" + e.SESSION_ID);
}
async close(popover) {
popover.dismiss();
}
};