Frameworks can be demanding and difficult to learn and maintain. Rather than insisting a developer do things our way, Gooey Tool Box aims to provide access to some of the best features you might find in a framework while remaining as minimally invasive on your development style as possible.
Getting Started
Gooey Tool Box (GTB) provides classes for each feature that can be instantiated individually or done all at once with a convenient auto init function. The auto init function is recommended but if not all features are needed, then feel free to instantiate the ones you need.
<!--Easily Initialize with a single function-->
<script>
GTB.autoInit();
//access each instance:
const dataBinder = gtbDB;
const fancyAlert = gtbA;
const fancyConfirm = gtbC;
const scrollAnimations = gtbSA;
const scrollAnimator = gtbS;
//or use directly:
gtbA('Hello, World!');
</script>
Features
Data Binding
Simply register a variable with an instance the GTBDataBinder class object and apply a data-gtb-db attribute with the variable name as the value to any element. All elements with the attribute will be automatically updated when the registered variable changes. Additionally, if the element is an input or text area, the variable will be automatically updated to the value of the most recently changed input field.
<!--The span will contain the value of the "test" variable and automatically update when it changes-->
<p>
<span data-gtb-db = "test"></span> World.
</p>
<script>
//Register the variable here
gtbDB.registerVariable('test',"Hello");
//When a variable is registered, it becomes a property of the GTBDataBinder class object and can be used like any other variable.
gtbDB.test = "Hey"; //Would automatically update all elements with the data-gtb-db = "test" attribute.
</script>
Try it out
Stylin' Alert
GTB provides a convenient alert function that works very similarly to the native alert in Javascript. The first argument of the function is the content of the alert, which can accept a string literal containing HTML elements or plain text. The second accepts a string that will be the header of the alert dialog box.
<style>
.alert-text{
color: red;
font-style: italic;
font-weight: bold;
}
.alert-blue{
color: blue;
font-weight: bolder;
}
.alert-green{
color: green;
font-weight: bolder;
}
</style>
<script>
gtbA('This alert can be <span class = alert-text>styled</span> with regular <span class = alert-blue>HTML</span> and <span class = alert-green>CSS</span><br>Click the x or the background to close.');
</script>