gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
1,178 lines (1,167 loc) • 63.6 kB
HTML
<html>
<head>
<!--script src="dist/gd-bs.js"></script-->
<script src="dist/gd-bs-icons.js"></script>
<!-- script src="../sprest-bs/dist/gd-sprest-bs.js"></script-->
<style>
.carousel {
max-width: 400px;
}
</style>
</head>
<body>
<h1>Library</h1>
<form>
<div id="dev">
<input id="dev2" />
</div>
<div id="icon-link"></div>
<div id="alert"></div>
<div id="btn-loading"></div>
<div id="spinner"></div>
<div id="myForm"></div>
<div id="panel"></div>
<div id="badge"></div>
<div id="card"></div>
<div id="card-group"></div>
<div id="tooltip"></div>
<div id="popover2"></div>
<div id="toolbar"></div>
<div id="ddl"></div>
<div id="button"></div>
<div id="buttonGroup"></div>
<div id="cbGroup"></div>
<div id="listbox"></div>
<div id="modal"></div>
<div id="offcanvas"></div>
<div id="textbox"></div>
<div id="multi-textbox"></div>
<div id="list-group"></div>
<div id="tabs"></div>
<div id="breadcrumb"></div>
<div id="navTabs"></div>
<div id="popover"></div>
<div id="popover1"></div>
<div id="carousel"></div>
<div id="btnCollapse"></div>
<div id="collapse"></div>
<div id="accordion"></div>
<div id="paging"></div>
<div id="progress"></div>
<div id="progressGroup"></div>
<div id="navbar"></div>
<div id="navbar-collapse"></div>
<div id="table"></div>
<div id="toast"></div>
</form>
<script type="text/javascript" showFl="false">
window.addEventListener("load", function () {
// Dev
let items = [];
for (var i = 0; i < 10; i++) {
items.push({
data: i,
content: "Item " + i,
badge: {
data: i,
content: i,
onClick: (el, item) => {
console.log("Item " + item.data + " clicked...");
}
}
});
}
window["dev"] = GD.Components.Tooltip({
target: document.getElementById("dev2"),
content: "This is a tooltip.",
placement: GD.Components.TooltipPlacements.BottomEnd,
type: GD.Components.TooltipTypes.LightBorder
});
window["tooltip"] = GD.Components.Tooltip({
el: document.getElementById("tooltip1"),
content: el,
placement: 15,
type: GD.Components.TooltipTypes.Primary,
btnProps: {
text: "Test Tooltip",
type: GD.Components.ButtonTypes.OutlineDanger
}
});
// Components
GD.Components.IconLink({
el: document.getElementById("icon-link"),
content: "<p>Icon Link</p>",
iconType: GD.Icons(GD.IconTypes.Badge3d),
type: GD.Components.IconLinkTypes.AfterText
})
GD.Components.ListBox({
el: document.getElementById("listbox"),
label: "List Box Example:",
items: [{
text: "Value 1"
}, {
text: "Value 2"
}, {
text: "Value 3"
}, {
text: "Value 4"
}, {
text: "Value 5"
}]
});
GD.Components.Alert({
el: document.getElementById("alert"),
isDismissible: true,
header: "Alert Header",
content: "This is an alert.",
type: GD.Components.AlertTypes.Danger,
onClose: function (props) {
console.log("The alert was closed.", props.header);
}
});
var btnLoading = GD.Components.Button({
className: "btn-loading",
el: document.getElementById("btn-loading"),
text: "Loading...",
iconType: GD.Icons(GD.IconTypes.Badge3d),
onClick: function () {
alert("The loading button was clicked...");
},
spinnerProps: {
className: "me-2",
isSmall: true,
type: GD.Components.SpinnerTypes.Light
}
});
setTimeout(function () {
// Update the text
btnLoading.setText("Click Me");
}, 5000);
var ddlMenu = GD.Components.Dropdown({
menuOnly: true,
items: [
{ text: "Item 1", value: 1 },
{ text: "Item 2", value: 2 },
{ text: "Item 3", value: 3 },
{ text: "Item 4", value: 4 },
{ text: "Item 5", value: 5 }
],
onChange: (item) => {
alert("Item Selected: " + (item ? item.value : "None"));
tooltip.hide();
}
});
ddlMenu.el.querySelectorAll(".dropdown-item").forEach(item => {
item.addEventListener("click", ev => {
console.log(ev.srcElement.innerHTML);
})
});
var btn = GD.Components.Button({
text: "Popover",
})
window["popover"] = GD.Components.Popover({
el: document.getElementById("popover2"),
btnProps: {
id: "popover-demo2",
text: "Popover Demo",
type: 3
},
placement: 4,
options: {
content: ddlMenu.el,
trigger: "click"
}
});
var el = document.createElement("div");
el.innerHTML = '<h6 class="dropdown-header">Search Results for "testing"</h6>';
el.innerHTML += '<div class="dropdown-divider"></div>';
[
{ text: "Item 1", value: 1 },
{ text: "Item 2", value: 2 },
{ text: "Item 3", value: 3 },
{ text: "Item 4", value: 4 },
{ text: "Item 5", value: 5 }
].forEach(item => {
var elItem = document.createElement("a");
elItem.classList.add("dropdown-item");
elItem.innerHTML = item.text;
elItem.setAttribute("data-user", item.value);
elItem.addEventListener("click", ev => {
console.log(ev.srcElement.innerHTML);
});
el.appendChild(elItem);
})
window["tooltip"] = GD.Components.Tooltip({
el: document.getElementById("tooltip"),
content: el,
placement: 15,
type: GD.Components.TooltipTypes.Primary,
btnProps: {
text: "Test Tooltip",
type: GD.Components.ButtonTypes.OutlineDanger
}
});
window["card"] = GD.Components.Card({
el: document.getElementById("card"),
onRender: (el) => { console.log("Card Render: ", el); },
body: [{
title: "Card Title",
text: "This is the card contents.",
onRender: (el) => { console.log("Card Body Render: ", el); },
actions: [{
text: "Card Action",
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
onClick: function (action, card) {
alert(card.title + " was clicked.");
}
}]
}]
});
window["cardGroup"] = GD.Components.CardGroup({
el: document.getElementById("card-group"),
className: "g-4",
col: 4,
onRender: (el) => { console.log("Card Group Render: ", el); },
cards: [
{
body: [{
title: "Card Title 1",
text: "This is the card contents.",
onRender: (el) => { console.log("Card Group Body Render: ", el); },
actions: [{
text: "Card Action",
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
onClick: function (action, card) {
alert(card.title + " was clicked.");
}
}]
}]
},
{
body: [{
title: "Card Title 2",
text: "This is the card contents.",
actions: [{
text: "Card Action",
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
onClick: function (action, card) {
alert(card.title + " was clicked.");
}
}]
}]
},
{
body: [{
title: "Card Title 3",
text: "This is the card contents.",
actions: [{
text: "Card Action",
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
onClick: function (action, card) {
alert(card.title + " was clicked.");
}
}]
}]
},
{
body: [{
title: "Card Title 4",
text: "This is the card contents.",
actions: [{
text: "Card Action",
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
onClick: function (action, card) {
alert(card.title + " was clicked.");
}
}]
}]
},
{
body: [{
title: "Card Title 5",
text: "This is the card contents.",
actions: [{
text: "Card Action",
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
onClick: function (action, card) {
alert(card.title + " was clicked.");
}
}]
}]
},
{
body: [{
title: "Card Title 6",
text: "This is the card contents.",
actions: [{
text: "Card Action",
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
onClick: function (action, card) {
alert(card.title + " was clicked.");
}
}]
}]
}
]
});
window["cbg"] = GD.Components.CheckboxGroup({
el: document.getElementById("cbGroup"),
label: "Label",
isInline: true,
type: GD.Components.CheckboxGroupTypes.Switch,
items: [{
name: "cb1",
label: "Checkbox 1"
}, {
name: "cb2",
label: "Checkbox 2",
isSelected: true
}, {
name: "cb3",
label: "Checkbox 3"
}, {
name: "cb4",
label: "Checkbox 4"
}]
});
window["toast"] = GD.Components.Toast({
el: document.getElementById("toast"),
headerText: "Header Text",
body: "This is the body of the toast.",
mutedText: "2 seconds ago",
options: {
autohide: false
}
});
GD.Components.Spinner({
el: document.getElementById("spinner"),
text: "Loading...",
type: GD.Components.SpinnerTypes.Danger
});
var btnPopover = GD.Components.Button({
el: document.getElementById("popover"),
text: "Popover Demo",
id: "popover-demo"
});
window["popover1"] = GD.Components.Popover({
target: btnPopover.el,
title: "My Popover",
placement: 10,
options: {
content: "This is the content.",
trigger: "focus"
}
});
window["popover2"] = GD.Components.Popover({
el: document.querySelector("#popover1"),
btnProps: {
id: "popover-demo2",
text: "Popover Demo",
type: 3
},
isDismissible: true,
placement: 4,
options: {
content: GD.Components.Button({
text: "Action",
onClick: function () {
alert("Take Action");
}
}).el,
trigger: "click"
}
});
window["myForm"] = GD.Components.Form({
el: document.getElementById("myForm"),
value: {
ReasonNotTestedExplanation: "0",
ReasonNotTestedExplanationRadio: "Primary",
ReasonNotTestedExplanationCheckbox: "Primary",
CBExample: true,
CBInlineExample: true,
FName: "Datta",
LName: "Base",
TestDelay: null
},
onControlRendering: function (ctrlProps) {
console.log("The control property '" + ctrlProps.name + "' is rendering...");
},
onControlRendered: function (ctrl) {
console.log("The control '" + ctrl.props.name + "' has been rendered...");
},
onRendered: function () {
console.log("The form has been rendered...");
},
rowClassName: "class1 class2",
rows: [{
columns: [{
control: {
className: "col-header",
controlClassName: "d-none",
id: "dropdown-ro",
label: "Shouldn't See Me",
title: "This is a dropdown",
type: GD.Components.FormControlTypes.Dropdown,
description: "This is a test for a dropdown that shouldn't be displayed."
}
}, {
control: {
className: "custom-control",
id: "custom-control-exp",
onControlRendered: function (control) {
// Render a header
control.el.innerHTML = "<h3>Form Header</h3>";
}
}
}, {
control: {
label: "Dropdown Example",
id: "DDLExample",
name: "DDLExample",
title: "This is a dropdown",
type: GD.Components.FormControlTypes.MultiDropdownCheckbox,
description: "This is a single dropdown option.",
placeholder: "Select an item...",
items: [{
text: "Test 1",
title: "This is the first item.",
value: 1
}, {
text: "Test 2",
title: "This is the second item.",
value: 2
}, {
text: "Test 3",
title: "This is the third item.",
value: 3
}, {
text: "Test 4",
title: "This is the fourth item.",
value: 4
}, {
text: "Test 5",
title: "This is the fifth item.",
value: 5,
isDisabled: true
}],
onChange: function (item) {
//item ? alert(item.text + " was selected.") : null;
}
}
}, {
control: {
name: "FileExample",
id: "FileExample",
title: "Select a file",
type: GD.Components.FormControlTypes.File,
description: "This is a file selector",
onChange: function (value) {
console.log("File selected", value);
}
}
}, {
control: {
name: "CBExample",
title: "This is a checkbox",
items: [{
label: "Checkbox Example w/ no label",
isSelected: true
}],
type: GD.Components.FormControlTypes.Checkbox,
description: "This is a read-only checkbox",
isReadonly: true
}
}, {
control: {
name: "CBColor",
label: "Pick a Color",
type: GD.Components.FormControlTypes.ColorPicker,
description: "This is a color picker"
}
}, {
control: {
label: "This is a label",
isInline: true,
items: [{
label: "Inline Checkbox Example"
}],
name: "CBInlineExample",
title: "This is a checkbox",
type: GD.Components.FormControlTypes.Checkbox
}
}, {
control: {
label: "Switch Example",
name: "SwitchExample",
title: "This is a checkbox",
type: GD.Components.FormControlTypes.Switch,
items: [{
name: "Label1",
label: "Do you like this framework?",
isSelected: true
}, {
name: "Label2",
label: "Is it easy to use?"
}]
}
}],
size: 4
}, {
columns: [{
control: {
label: "Post:",
name: "PostName",
title: "This is a dropdown",
type: GD.Components.FormControlTypes.Dropdown,
items: [{
text: "Item 1"
}, {
text: "Item 2"
}],
onControlRendered: function (control) {
control.dropdown.setItems([{
isHeader: true,
text: "Header 1"
}, {
text: "Item 1 & 2",
value: 1
}, {
isHeader: true,
text: "Header 2"
}, {
text: "Item 2 < 3",
value: 2,
isSelected: true
}, {
text: "Item 3 > 2",
value: 3
},]);
},
onValidate: function (props, result) {
return {
invalidMessage: "This is invalid.",
isValid: result.value ? true : false,
validMessage: "This is valid"
};
}
}
}, {
control: {
name: "ListBox",
label: "List Box Example:",
type: GD.Components.FormControlTypes.ListBox,
isReadonly: false,
multi: true,
items: [{
text: "Value 1"
}, {
text: "Value 2"
}, {
text: "Value 3",
isSelected: true
}, {
text: "Value 4"
}, {
text: "Value 5"
}]
}
}],
size: 4
}, {
columns: [{
control: {
label: "Reason Not Tested Explanation:",
name: "ReasonNotTestedExplanation",
title: "This is a textfield",
type: GD.Components.FormControlTypes.TextField,
placeholder: "Explain the reason not tested",
onValidate: function (ctrl, result) {
if (result.value && result.value.length > 0)
return true;
else
return false;
},
errorMessage: "Provide a reason for not testing"
}
}, {
control: {
label: "Reason Not Tested Explanation Radio:",
name: "ReasonNotTestedExplanationRadio",
title: "This is a radio button",
type: GD.Components.FormControlTypes.Radio,
items: [{
label: "Primary",
name: "primary"
}, {
label: "Secondary",
name: "secondary"
}],
onValidate: function (ctrl, value) {
if (value)
return true;
else
return false;
},
errorMessage: "Select an option"
}
}, {
control: {
label: "Reason Not Tested Explanation Checkbox:",
name: "ReasonNotTestedExplanationCheckbox",
title: "This is a checkbox",
type: GD.Components.FormControlTypes.Checkbox,
items: [{
label: "Primary",
name: "primary"
}, {
label: "Secondary",
name: "secondary"
}],
onValidate: function (ctrl, value) {
if (value)
return true;
else
return {
isValid: false,
invalidMessage: "Select an option"
};
}
}
}],
size: 4
}, {
columns: [{
size: 5,
control: {
errorMessage: "The first name is required.",
label: "First Name",
name: "FName",
required: true,
title: "This is a textfield",
type: GD.Components.FormControlTypes.TextField
}
}, {
size: 5,
control: {
errorMessage: "The last name is required.",
label: "Last Name",
name: "LName",
required: true,
title: "This is a textfield",
type: GD.Components.FormControlTypes.TextField
}
}],
size: 4
}, {
size: 5,
control: {
label: "Delayed Textbox",
name: "TestDelay",
title: "This is a textfield",
type: GD.Components.FormControlTypes.TextField,
loadingMessage: "Loading...",
onControlRendering: function (props) {
return {
then: function (resolve) {
setTimeout(function () {
console.log("Delayed textbox has been rendered...");
resolve(props);
}, 5000);
}
}
}
}
}, {
size: 5,
control: {
label: "Radio Buttons",
loadingMessage: "Loading...",
errorMessage: "Please select a choice.",
name: "RadioTest",
required: true,
title: "This is a radio",
type: GD.Components.FormControlTypes.Radio,
items: [{
label: "Choice 1"
}, {
label: "Choice 2"
}, {
label: "Choice 3"
}]
}
}, {
size: 2,
control: {
onControlRendered: function (control) {
GD.Components.Button({
el: control.el,
text: "Save",
onClick: function () {
window.myForm = {
values: myForm.getValues(),
isValid: myForm.isValid()
};
console.log(window.myForm);
}
});
}
}
},]
});
window["panel"] = GD.Components.Modal({
el: document.getElementById("panel"),
id: "my-panel",
title: "Panel Example",
hideCloseButton: true,
type: 8,
options: {
keyboard: false
},
onRenderBody: function (el) {
// Render a jumbotron
GD.Components.Jumbotron({
el: el,
title: "My Panel",
lead: "this is a lead",
size: 2,
type: 3
//content: "This is the content of the jumbotron."
});
}
});
GD.Components.Button({
el: document.getElementById("panel"),
text: "Show Panel",
toggleObj: window["panel"]
});
GD.Components.Badge({
el: document.getElementById("badge"),
content: "My Badge",
isPill: true,
data: {
title: "My Custom Data"
},
onClick: function (badge) {
alert(badge.data.title);
}
});
GD.Components.Toolbar({
el: document.getElementById("toolbar"),
spacing: 3,
items: [{
buttons: [{
text: "Button 1"
}]
}, {
buttons: [{
text: "Button 2"
}]
}, {
buttons: [{
text: "Button 3"
}]
}, {
buttons: [{
text: "Button 4"
}]
}, {
buttons: [{
text: "Button 5"
}]
}, {
buttons: [{
text: "Button 6"
}]
}, {
buttons: [{
text: "Button 7"
}]
}, {
buttons: [{
text: "Button 8"
}]
}, {
buttons: [{
text: "Button 9"
}]
}, {
buttons: [{
text: "Button 10"
}]
}, {
buttons: [{
text: "Button 11"
}]
}, {
buttons: [{
text: "Button 12"
}]
}, {
buttons: [{
text: "Button 13"
}]
}, {
buttons: [{
text: "Button 14"
}]
}, {
buttons: [{
text: "Button 15"
}]
}, {
buttons: [{
text: "Button 16"
}]
}, {
buttons: [{
text: "Button 17"
}]
}, {
buttons: [{
text: "Button 18"
}]
}, {
buttons: [{
text: "Button 19"
}]
}, {
buttons: [{
text: "Button 20"
}]
}, {
buttons: [{
text: "Button 21"
}]
}, {
buttons: [{
text: "Button 22"
}]
}, {
buttons: [{
text: "Button 23"
}]
}, {
buttons: [{
text: "Button 24"
}]
}, {
buttons: [{
text: "Button 25"
}]
}]
});
window["ddl"] = GD.Components.Dropdown({
autoSelect: true,
el: document.querySelector("#ddl"),
isSplit: false,
label: "My Dropdown",
onChange: function (item, ev) {
alert("Selected Item: " + (item ? item.text : "None"));
},
setLabelToValue: true,
type: GD.Components.DropdownTypes.Secondary,
items: [{
isHeader: true,
text: "Header 1"
}, {
isDivider: true
}, {
text: "Item 1",
onClick: function (item) {
alert("Item Clicked: " + item.text);
}
}, {
text: "Item 2"
}, {
text: "Item 3"
}, {
text: "Item 4"
}, {
text: "Item 5",
isDisabled: true
}, {
isHeader: true,
text: "Header 2"
}, {
isDivider: true
}, {
text: "Item 6"
}, {
text: "Item 7"
}, {
text: "Item 8"
}, {
text: "Item 9"
}, {
text: "Item 10"
}]
});
GD.Components.ButtonGroup({
el: document.querySelector("#buttonGroup"),
isVertical: true,
buttons: [{
text: "File 1.docx",
url: "#",
onClick: function () {
alert("File 1 clicked");
}
}, {
text: "File 2.docx",
url: "#",
onClick: function () {
alert("File 2 clicked");
}
}, {
text: "File 3.docx",
url: "#",
onClick: function () {
alert("File 3 clicked");
}
}, {
text: "File 4.docx",
url: "#",
onClick: function () {
alert("File 4 clicked");
}
}, {
text: "File 5.docx",
url: "#",
onClick: function () {
alert("File 5 clicked");
}
},]
});
window["modal"] = GD.Components.Modal({
el: document.querySelector("#modal"),
id: "my-modal",
title: "My Modal",
type: 9,
options: {
keyboard: true,
autoClose: false
},
onClose: function (modal) {
console.log("The modal was closed.", modal);
},
onRenderFooter: function (el) {
// Render a button
GD.Components.Button({
el: el,
text: "Submit",
onClick: function () {
// Validate the form
console.log(window["modalForm"].isValid());
}
});
},
onRenderBody: function (el) {
// Render a form
window["modalForm"] = GD.Components.Form({
el: el,
className: "customClassName",
rowClassName: "rowClassName",
rows: [{
columns: [{
size: 6,
control: {
className: "fixed-issue-1",
controlClassName: "fixed-issue-2",
errorMessage: "This is a required field.",
required: true,
label: "First Name",
name: "FName",
type: GD.Components.FormControlTypes.TextField,
onChange: function (value) {
console.log("New First Name: " + value);
}
}
}, {
size: 6,
control: {
errorMessage: "This is a required field.",
required: true,
label: "Last Name",
name: "LName",
type: GD.Components.FormControlTypes.TextField,
onChange: function (value) {
console.log("New Last Name: " + value);
}
}
}]
}, {
colSize: 3,
columns: [{
control: {
errorMessage: "This is a required field.",
label: "Comments",
name: "Comments",
type: GD.Components.FormControlTypes.TextArea,
onValidate: function (ctrl, value) {
return {
invalidMessage: "A comment is required.",
validMessage: "Thank you for adding a comment",
isValid: value ? true : false
}
}
}
}, {
control: {
type: GD.Components.FormControlTypes.Readonly,
name: "Read-Only",
label: "Read Only",
value: "This is a readonly value. This shouldn't be editable."
}
}]
}, {
colSize: 3,
columns: [{
control: {
errorMessage: "This is a required field.",
required: true,
label: "EMail",
name: "Email",
type: GD.Components.FormControlTypes.Email,
}
}]
}, {
columns: [{
control: {
errorMessage: "This is a required field.",
required: true,
label: "Password",
name: "Password",
type: GD.Components.FormControlTypes.Password,
}
}]
}, {
columns: [{
control: {
label: "Select an Option",
name: "option",
type: GD.Components.FormControlTypes.Switch,
items: [{
label: "Switch 1"
}, {
label: "Switch 2"
}, {
label: "Switch 3"
}]
}
}]
}, {
columns: [{
control: {
errorMessage: "This is a required field.",
required: true,
label: "Range",
name: "Range",
type: GD.Components.FormControlTypes.Range,
step: 5
}
}]
}, {
columns: [{
control: {
errorMessage: "This is a required field.",
required: true,
label: "Boolean",
name: "Boolean",
type: GD.Components.FormControlTypes.Checkbox,
onChange: function (item) {
alert((item ? item.label : "No item") + " selected.");
},
items: [{
label: "Checkbox 1"
}, {
label: "Checkbox 2"
}, {
label: "Checkbox 3"
}]
}
}]
}, {
columns: [{
control: {
errorMessage: "This is a required field.",
required: true,
label: "Jobs",
name: "Jobs",
type: GD.Components.FormControlTypes.Dropdown,
items: [{
text: "Select...",
isDisabled: true,
isSelected: true
}, {
text: "Job 1"
}, {
text: "Job 2"
}, {
text: "Job 3"
}, {
text: "Job 4"
}, {
text: "Job 5"
}, {
text: "Job 6"
}, {
text: "Job 7"
}, {
text: "Job 8"
}, {
text: "Job 9"
}],
onChange: function (item) {
console.log("Selected Item: " + (item ? item.text : ""));
}
}
}]
}, {
columns: [{
control: {
errorMessage: "This is a required field.",
required: true,
label: "Multi Jobs",
name: "MultiJobs",
type: GD.Components.FormControlTypes.MultiDropdown,
items: [{
text: "Job 1"
}, {
text: "Job 2"
}, {
text: "Job 3"
}, {
text: "Job 4"
}, {
text: "Job 5"
}, {
text: "Job 6"
}, {
text: "Job 7"
}, {
text: "Job 8"
}, {
text: "Job 9"
}],
onChange: function (items) {
console.log("Selected Items: ", items);
}
}
}]
}],
value: {
FName: "Gunjan",
LName: "Datta",
Email: "gunjan@datta.com",
Password: "Password123456",
Range: 75
}
})
}
});
GD.Components.Button({
el: document.querySelector("#modal"),
text: "Modal",
toggleObj: window["modal"]
});
window["OffcanvasDemo"] = GD.Components.Offcanvas({
el: document.qu