table of contents
JavaScript Utility Functions
dframework provides a set of utility functions to simplify common JavaScript operations:
DOM Manipulation
select(selector, scope)- query selector wrapperselectAll(selector, scope)- query selector all wrapper that returns an arraylisten(target, event, callback, ...options)- event listenerlistenAll(targets, event, callback, ...options)- add event listener to multiple elements
Class Management
addClass(element, className)- add a CSS classremoveClass(element, className)- remove a CSS classtoggleClass(element, className)- toggle a CSS class
Array and String Operations
move(input, from, to)- move item in array or character in stringremove(input, index)- remove item at indexreplace(input, index, newItem)- replace item at indexlimit(input, limit)- limit array length or string lengthuniquify(input)- remove duplicates from array or stringasyncForEach(array, callback)- async version of forEach
Type Checking
isUndefined(value)- check if value is undefinedisNull(value)- check if value is nullisBoolean(value)- check if value is booleanisNumber(value)- check if value is numberisInteger(value)- check if value is integerisString(value)- check if value is stringisEmpty(value)- check if string or array is emptyisFunction(value)- check if value is functionisArray(value)- check if value is arrayisObject(value)- check if value is objecthasValue(value)- check if value exists (not empty, null, or undefined)
Utility Functions
random(min, max)- generate random integer between min and maxstorage.get(key, defaultValue)- get item from localStoragestorage.set(key, value)- set item in localStoragestorage.remove(key)- remove item from localStoragestorage.clear()- clear localStoragesleep(milliseconds)- promise-based delayclipboard(text)- copy text to clipboarduniqueId(length)- generate unique IDdistance(a, b)- calculates the difference between 2 strings, 2 arrays or 2 objectsformatDate(value)- formats any date or date string into a readable formatlocalizeDate(value)- converts any date or date string into the local timezone
Components
dframework provides several custom HTML components. These components offer reusable UI elements with consistent styling and behavior.
dButton
Button component with icon support.
Attributes
text- button texticon- FontAwesome icon classiconPosition- position of the icon ("left"or"right", default:"left")color- button background colortextColor- button text colorhoverColor- button hover background colorhoverTextColor- button hover text colordisabledColor- button disabled background colordisabledTextColor- button disabled text colorhaptics- enable haptic feedback on clickdisabled- set button to disabled state
Methods
setDisabled(toggle)- enable/disable the buttonsetText(text)- change the button textsetIcon(icon)- change the button iconsetColor(color)- change the button background colorsetTextColor(color)- change the button text colorsetHoverColor(color)- change the button hover background colorsetHoverTextColor(color)- change the button hover text color
dCheckbox
Attributes
type- checkbox style (1: toggle switch,2: checkmark box, default:1)text- checkbox textactiveColor- active state colortextColor- label text colorinactiveColor- inactive state color
Methods
setText(text)- change the checkbox textsetActiveColor(color)- change the active state colorsetInactiveColor(color)- change the inactive state colorsetTextColor(color)- change the label text color
Events
change- fired when checkbox state changes
dColorPicker
Attributes
name- color picker labelvalue- initial color value (default:"#000000")colorId- ID for the color input field (default:"color0")opened- whether the color picker is initially openedhaptics- enable haptic feedback on selection
Methods
set(value)- set the color valueget()- get the current color value
Events
colorchange- fired when color value changes
dCombobox
Combobox component with optional input support.
Attributes
options- JSON string of options array with format[{value: "value1", text: "text 1"}, ...]allowInput- allow text input in the dropdownhaptics- enable haptic feedback on selection
Methods
setOptions(options)- update the available optionsset(value)- set the selected valueget()- get the currently selected value
Events
change- fired when selection changes
dContextMenu
Context menu component that appears on right-click.
Methods
openCloseMenu(event)- open or close the context menuopenMenu()- open the context menucloseMenu()- close the context menu
Events
click- fired when a context menu item is clicked
dDrawer
this is the drawer content
Slide-out drawer component for additional content or navigation.
Attributes
direction- direction from which the drawer appears ("top", "right", "bottom", "left", default: "right")opened- whether the drawer is initially opened
Methods
handleOpenClose()- toggle the drawer open/closed state
dDropdown
this is the dropdown content
Collapsible dropdown component for grouping content.
Attributes
header- text for the dropdown headeropened- whether the dropdown is initially openedhaptics- enable haptic feedback on toggle
Methods
handleOpenClose()- toggle the dropdown open/closed state
dIconButton
Attributes
icon- font awesome icon classsize- font size of the iconcolor- icon coloractiveColor- active state colorloader- enable loading state capabilityloading- set initial loading state
Methods
switchState(removeClass, addClass)- switch between icon stateschange(icon)- change the iconsetLoading(state)- set the loading state
dImageInput
Input component for selecting and previewing images.
Attributes
accept- file types to accepticon- icon for the upload button
Methods
reset()- clear the selected image
Events
change- fired when an image is selected
dModal
Modal component for displaying content in a pop-up overlay.
Attributes
opened- whether the modal is initially opened
Methods
open()- open the modalclose()- close the modal
dNotification
Notification component for displaying alerts or messages.
Attributes
opened- whether the notification is initially shown
Methods
show()- display the notificationhide()- hide the notificationdestroy()- remove the notification from the DOM
dScroll
Custom scrolling container with a bouncing effect like on MacOS and iOS.
Attributes
direction- scroll directionscrollbar-color- scrollbar colorscrollbar-hover-color- scrollbar hover colorthumb-width- width of the scrollbar thumbthumb-hover-width- width of the scrollbar thumb on hoverscrollbar-width- width of the scrollbar trackmargin-top- top margin for the scrollable contentmargin-bottom- bottom margin for the scrollable contentmargin-side- side margin for the scrollbar
Methods
updateScrollbar()- update the scrollbar position and sizescrollTo(position)- scroll to a specific positionappend(element)- add an element to the scrollable content
dSlider
Slider component for selecting a value within a range.
Attributes
min- minimum valuemax- maximum valuestep- step incrementvalue- initial valuethumbColor- thumb colorfillColor- fill colortrackColor- track colorsfx- enable sound effects on slide
Methods
getValue()- get the current slider valuesetValue(value)- set the slider value
Events
change- fired when slider value changes
dTextInput
Text input component with optional icon.
Attributes
placeholder- input placeholder texticon- icon to display inside the inputautocomplete- enable browser autocompletehaptics- enable haptic feedback on focuspassword- set input type to password
Methods
getValue()- get the current input valuesetValue(value)- set the input value
Events
change- fired when input value changeskeydown,keyup- keyboard eventsfocus,blur- focus events
dToggle
Toggle button group for selecting from multiple options.
Attributes
color- button coloractiveColor- active button colortextColor- text colortextActiveColor- active text colorbgColor- background colorhaptics- enable haptic feedback on toggle
Methods
set(toggle)- set the active toggle (by index or element)get()- get the currently active toggle element
Events
change- fired when selection changes
dLoader
Simple loading spinner component.
Advanced Features
Routing
dframework includes a built-in routing system for creating single-page applications with client-side navigation.
Features
- history API based routing for clean urls
- automatic page transitions with optional animations
- route parameters and query string parsing
- programmatic navigation API
- no page reloads
Configuration
To enable single-page routing, simply run the command dstrn config and select "yes" when prompted with use the web history router?.
After this, a new router.js file will be created in the root directory of your project.
You can create template HTML files and load them, as well as reload page scripts, when navigating to a new route.
To define a new route, use the following structure:
// router.js
router.on('/xxx', function () {
render("views/xxx.html", ["public/js/xxx.js"]);
});
This code defines the /xxx route, renders the xxx.html template, and reloads the xxx.js script when the route is accessed.
Custom page transition
When working with a single-page web application it is possible to customize the CSS transition that's played when switching pages.
To do so, you can simply create a custom render() function.
// router.js
const router = new dRouter('/');
router.controller = null;
const render = (template, scripts) => {
return new Promise((resolve, reject) => {
if(router.controller) { router.controller.abort(); router.controller = null };
router.controller = new AbortController();
const signal = controller.signal;
// your code to run at the start of the transition
fetch("../"+template, { signal })
.then(response => {
if (!response.ok) {
throw new Error(`failed to fetch ${template}: ${response.status}`);
}
return response.text();
})
.then(html => {
setTimeout(() => { // using fake delay for the animation (optional)
contentContainer.innerHTML = html;
const existingScripts = document.querySelectorAll("script[data-page-script]");
existingScripts.forEach(script => script.remove());
if (scripts && scripts.length > 0) {
let scriptsLoaded = 0;
scripts.forEach((url) => {
const script = document.createElement("script");
script.src = "../" + url + '?cachebuster=' + new Date().getTime();
script.dataset.pageScript = true;
script.onload = () => {
scriptsLoaded++;
if (scriptsLoaded === scripts.length) {
resolve();
}
};
document.body.appendChild(script);
});
} else {
resolve();
}
// your code to end the transition
}, 700);
})
.catch(error => {
reject(error);
});
});
};
// example route
router.on('/', function () {
render("views/index.html", ["public/js/index.js"]);
});
router.resolve();
This code defines the /xxx route, renders the xxx.html template, and reloads the xxx.js script when the route is accessed.
MongoDB API
dframework provides a MongoDB API wrapper for easy integration with MongoDB databases.
Features
- support for multiple environments (development and production)
- connection pooling and automatic reconnection
- comprehensive operations
- simple async/await API
Configuration
To connect to your MongoDB servers simply open the file /functions/lib/MongoAPI.js and change the following files in the constructor:
// MongoAPI.js
this.servers = {
dev: "", // mongo server URL
prod: "", // mongo server URL
};
this.dbName = ""; // your database nameYou can also add more URLs if you own more servers and want to quickly be able to switch between them.
Usage
// import the MongoDB API
const { MongoAPI } = require('../functions/lib/MongoAPI');
// initialize the API
const mongo = new MongoAPI();
// example operations
async function saveUser(user) {
await mongo.connect();
const result = await mongo.insertOne('users', user);
await mongo.destroy();
return result;
}
async function getUsers(query = {}) {
await mongo.connect();
const users = await mongo.find('users', query);
await mongo.destroy();
return users;
}Available methods
connect()- establish connection to MongoDBfind(collection, query, options)- find documents in collectionfindOne(collection, query, options)- find a single documentinsertOne(collection, document)- insert a documentinsertMany(collection, documents)- insert multiple documentsupdateOne(collection, filter, update, options)- update a documentupdateMany(collection, filter, update, options)- update multiple documentsdeleteOne(collection, filter, options)- delete a documentdeleteMany(collection, filter, options)- delete multiple documentsdestroy()- close connection
License
Copyright (c) 2025 dstrn
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/4.0/.