Welcome to the Ape Design Language demonstration website. The Ape Design Language, or ADL for short, is the UI design used by Ape Apps for multiple projects across platforms. It is made to give a consistent look and feel across the entire Ape Apps ecosystem. Although the ADL is meant for use in Ape Apps products, you may freely use the styles and functions in your own works.
ADL uses the Ionicons icon font for various menus and toolbars. Any project using ADL should also include the latest Ionicons script as well. To use the entire ADL stack in your project, you should include the following tags in the head element of your HTML document.
Current ADL Version:
<link rel="stylesheet" type="text/css" href="https://cdn.apewebapps.com/adl//css/adl.min.css" />
<script src="https://cdn.apewebapps.com/adl//js/adl.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@/dist/ionicons/ionicons.js"></script>
Alternatively, and for a potentially faster initial load of your project, you can load only the ADL script and then in your javascript, you can tell ADL to automatically load either the stylesheet, the latest ionic icons, or both (or neither). This can be a good option that may save a moment of page load times if you are tuning for performance.
<link rel="stylesheet" type="text/css" href="https://cdn.apewebapps.com/adl//css/adl.min.css" />
window.addEventListener("load", function() {
adl.addADLStyle();
adl.addIonicons();
});
And if you really don't want to load ADL until the last possible moment to speed up initial page loading, you can wait to do the whole thing until after you load. With this method, you do not have to add any ADL tags to your HTML document at all. This is the method being used on the page you are reading right now. Note that using this method, you must manually call the adl.initADL() function after the ADL script loads.
window.addEventListener("load" ,function() {
let adlScript = document.createElement("script");
adlScript.onload = function() {
adl.addADLStyle();
adl.addIonicons();
adl.initADL();
// continue loading/initializing your project here
};
adlScript.src = "https://cdn.apewebapps.com/adl//js/adl.min.js";
document.head.appendChild(adlScript);
});
Theme and Style
Theme Color
let theme = "default"; // default, light or dark
let color = "#1565C0";
adl.setTheme(color,theme);
Dialogs
The ADL modal dialog boxes come in a variety of styles and can be customized to fit many scenarios. There are also several helper functions to make creating a dialog a lot easier.
Alert Box (simple)
adl.showAlert("This is an alert box!");
Alert Box With Title (simple)
adl.showAlertWithTitle("This is the message!","This is the Title");
Choice Box (simple)
adl.showChoice("Pick a color!", "Red", "Blue", function() {
adl.showAlert("You picked Red!");
}, function() {
adl.showAlert("You picked Blue!");
});
Dialog Box (basic)
The above functions were all wrappers for the more complete showDialog function.
adl.showDialog({
title: "Dialog Box",
message: "This is the basic usage of the showDialog function. There are a lot of available options, allowing for complete customization of the dialog box. This one is using an ionic icon, but you can also specify an image URL for an icon.",
icon: "cash-outline",
iconColor: "#33691E",
buttons: [
{
text: "Button A"
},
{
text: "Button B",
color: "#4DB6AC"
},
{
text: "Button C",
color: "#f44336",
func: function(){ adl.showAlert("You picked C!"); }
}
],
});
Input Box (simple)
adl.inputBox({
title: "Input Box",
message: "An input box is an easy way to gather user input!",
multiline: false,
password: false,
placeholder: "Type something here!",
func: function(result) { adl.showAlert("You typed: " + result); }
});
Multiline Input Box (simple)
adl.inputBox({
title: "Multiline Input Box",
message: "A multiline input box, for those times when you want to let the user type in a bit more info.",
multiline: true,
password: false,
placeholder: "Type something here!",
func: function(result) { adl.showAlert("You typed: " + result); }
});
Password Box (simple)
adl.inputBox({
title: "Enter Password",
message: "Use the password flag to make an input box work as a password input.",
multiline: false,
password: true,
placeholder: "Enter password",
func: function(result) { adl.showAlert("You typed: " + result); }
});
Custom Input Box
Ultimately, the inputBox function is another wrapper for the showDialog function, which can become an input box using the input related options below.
adl.showDialog({
title: "Custom Input Box",
message: "The showDialog function can also be used to create an input box. One of the buttons must have the inputResult option set in order to recieve the result text from the input.",
icon: "beer-outline",
iconColor: "#FFA000",
input: {
multiline: false,
password: false,
placeholder: "What ales you?"
},
buttons: [
{
text: "NOTHING!!",
color: "#f44336"
},
{
text: "Submit",
color: "#4CAF50",
inputResult: true,
func: function(result){ adl.showAlert("You typed: " + result); }
}
],
});
Slider Dialog
The dialog window can also be configured to provide a horizontal slider for selection of a number between two defined values.
adl.showDialog({
title: "Slider Dialog",
message: "Choose a value based on the slider. The onChange callback gives you the current value and an update function that allows you to change the status display as the user manipulates the slider. Give a button the sliderResult attribute to be passed the result of the slider.",
slider: {
min: 0,
max: 100,
value: 50,
status: "50 out of 100",
onChange: function(value,update) { update(value + " out of 100"); },
},
buttons: [
{
text: "Dismiss",
},
{
text: "Save",
color: "#AB47BC",
sliderResult: true,
func: function(result){ adl.showAlert("You choose: " + result); }
}
],
});
Color Picker (dialog)
adl.pickColor({
callback: function(color) {
adl.showAlert("You picked: " + color);
}
});
Color Picker (embedded)
adl.pickColor({
element: domElement,
callback: function(color) {
adl.showAlert("You picked: " + color);
}
});
Color Picker (with hex input)
adl.pickColor({
withInput: true,
default: "#ff0000",
callback: function(color) {
adl.showAlert("You picked: " + color);
}
});
Color Picker (custom swatches)
You can pass in a 2d array of hex colors to use as custom color swatches. Each array represents a row of swatches, and each must have the same number of colors.
adl.pickColor({
colors: [["#ff0000","#00ff00","#0000ff"]],
callback: function(color) {
adl.showAlert("You picked: " + color);
}
});
Dialog with Custom Element
You can also pass any element you wish into a dialog, making dialog possibilities virtually limitless.
adl.showDialog({
title: "Custom Dialog",
customElement:
myDomElement
});
Progress Dialog
These are more helper functions for the showDialog interface that let you easily display and manipulate a Please Wait type dialog that can be updated and dismissed on your command.
adl.showProgress({ title: "Loading: 0%", indeterminate: false, percent: 0 });
adl.updateProgress({ title: "Loading: 12%", indeterminate: false, percent: 12 });
adl.dismissProgress();
List Dialog
The List Dialog is another showDialog wrapper for easily creating a popup list menu of customizable items.
adl.showList({
title: "Choose Something",
options: [
{
title: "Option 1",
tag: "one"
},
{
title: "Option 2",
description: "The second glorious option.",
icon: "bicycle-outline",
iconColor: "#43A047",
tag: "two"
},
{
title: "Option 3",
description: "This one needs no description!",
status: "Almost Complete",
progress: 85,
tag: "three"
},
{
title: "Option 4",
titleColor: "#ff0000",
icon: "skull-outline",
status: "WARNING!",
statusColor: "#ff0000",
overflow: [
{
pre: "Cost",
icon: "pizza-outline",
post: "Too Much!"
},
{
pre: "Cost",
icon: "beer",
iconColor: "#795548",
post: "Way Too Much!",
color: "#ff0000"
}
],
tag: "four"
}
],
onSelection: function(tag) {
adl.showAlert("you picked: " + tag);
},
cancelText: "Dismiss"
});
Embedded List
Just like the color picker, the list can also be embedded right into the document so that it's always available. Just pass in a dom element in your options. Items can also be added in "compact" mode.
adl.showList({
title: "Choose Something",
options: [
{
title: "Option 1",
tag: "one"
},
{
title: "Option 2",
description: "The second glorious option.",
icon: "bicycle-outline",
iconColor: "#43A047",
tag: "two"
},
{
title: "Option 3",
description: "This one needs no description!",
status: "Almost Complete",
progress: 85,
tag: "three"
},
{
title: "Option 4",
titleColor: "#ff0000",
icon: "skull-outline",
status: "WARNING!",
statusColor: "#ff0000",
overflow: [
{
pre: "Cost",
icon: "pizza-outline",
post: "Too Much!"
},
{
pre: "Cost",
icon: "beer",
iconColor: "#795548",
post: "Way Too Much!",
color: "#ff0000"
}
],
tag: "four"
},
{
title: "Compact Option 5",
icon: "winicon.",
iconColor: "#673AB7",
compactItem: true,
tag: "compactfive"
}
],
onSelection: function(tag) {
adl.showAlert("you picked: " + tag);
},
cancelText: "Dismiss"
element: domElement
});
Dialog Flyout
Using the flyout options, the dialog box can also be positioned as a flyout element. When used as a flyout, clicking/tapping outside of the dialog will dismiss it. The flyout can take all of the same options as the regular dialog window.
adl.showDialog({
title: "Dialog Flyout",
message: "Flyout dialogs can come in handy in many situations. They can be used for settings screens, 'hamburger' type menus, or small informational popups.",
icon: "bulb-outline",
iconColor: "#FBC02D",
flyout: {
position: "bottom"
}
});
Flyout List
Lists can also be used in Flyout mode.
adl.showList({
title: "Choose Something",
options: [
{
title: "Option 1",
tag: "one"
},
{
title: "Option 2",
description: "The second glorious option.",
icon: "bicycle-outline",
iconColor: "#43A047",
tag: "two"
},
{
title: "Option 3",
description: "This one needs no description!",
status: "Almost Complete",
progress: 85,
tag: "three"
},
{
title: "Option 4",
titleColor: "#ff0000",
icon: "skull-outline",
status: "WARNING!",
statusColor: "#ff0000",
overflow: [
{
pre: "Cost",
icon: "pizza-outline",
post: "Too Much!"
},
{
pre: "Cost",
icon: "beer",
iconColor: "#795548",
post: "Way Too Much!",
color: "#ff0000"
}
],
tag: "four"
},
{
title: "Compact Option 5",
icon: "winicon.",
iconColor: "#673AB7",
compactItem: true,
tag: "compactfive"
}
],
onSelection: function(tag) {
adl.showAlert("you picked: " + tag);
},
cancelText: "Dismiss",
flyout: {
position: "left"
}
});