javascript – Page 2 – My Programming Notes

Tag Archives: javascript

JavaScript/CSS/HTML || Notice.js – Simple Notification Message With Success, Warning & Error Icons Using Vanilla JavaScript

October 31, 2020 admin No comments

The following is a module with functions that demonstrates how to display a simple notification message with success, warning & error icons.

Using vanilla JavaScript, the message fades in and is displayed to the page, and fades out after a delay (in milliseconds). It’s look and feel can also be adjusted via CSS.

Notice.js & CSS Source

Contents

1. Basic Usage 2. Notice HTML 3. Notice.js & CSS Source 4. More Examples

Syntax is very straightforward. The following demonstrates the JavaScript used to show the notification message. The message fades away after a specified amount of time (in milliseconds).





		
		
			1. Basic Usage
			
XHTML
			
			<!-- Display Message. -->

<div class="notice hide"></div>

<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
    // Display Message
    Notice.display(document.querySelector('.notice'), 'Success', Notice.type.success, 3000);
});
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						<!-- Display Message. -->
 
<div class="notice hide"></div>
 
<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
    // Display Message
    Notice.display(document.querySelector('.notice'), 'Success', Notice.type.success, 3000);
});
</script>

Sample:

2. Notice HTML

If you wish to show the messages without using JavaScript, the following is an example of the HTML used to display the notices.





		
		
			2. Notice HTML - Success
			
XHTML
			
			<!-- // HTML - Success -->

<div class="notice"> Success </div>
			
				
					
				
					1
2
3
				
						<!-- // HTML - Success -->
 
<div class="notice"> Success </div>

Sample:





		
		
			2. Notice HTML - Warning
			
XHTML
			
			<!-- // HTML - Warning -->

<div class="notice warning"> Warning </div>
			
				
					
				
					1
2
3
				
						<!-- // HTML - Warning -->
 
<div class="notice warning"> Warning </div>

Sample:





		
		
			2. Notice HTML - Error
			
XHTML
			
			<!-- // HTML - Error -->

<div class="notice error"> Error </div>
			
				
					
				
					1
2
3
				
						<!-- // HTML - Error -->
 
<div class="notice error"> Error </div>

Sample:

3. Notice.js & CSS Source

The following is the Notice.js Namespace & CSS Source. Include this in your project to start using!





		
		
			Notice.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 31, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Notice.js
//    Description: Javascript that displays a Notice to the screen
// ============================================================================
/**
* NAMESPACE: Notice
* USE: Displays a Notice to the screen.
*/
var Notice = Notice || {};
(function(namespace) {
    'use strict';

// -- Public data --
    // Property to hold public variables and functions
    let exposed = namespace;

    // Set class names and other shared data
    const settings = {
        classNameNotice: '.notice',
        classNameSuccess: '',
        classNameWarning: '.warning',
        classNameError: '.error',
        classNameShow: '.show',
        classNameHide: '.hide',
        cleanClassName: function(str) {
            return str ? str.trim().replace('.', '') : '';
        },
    };
    exposed.settings = settings;

    // Notice type enum
    const NoticeType = Object.freeze({success:1, warning:2, error:3});
    exposed.type = NoticeType;

    /**
    * FUNCTION: display
    * USE: Displays a message to the page with the given text.
    * @param text: Text to be displayed to the page.
    * @param type: The message type. The type determines the style of the notice.
    * @param duration: The length the notice is displayed to the page (in milliseconds).
    *   Set value to null to display the notice indefinitely.
    * @return: N/A.
    */
    exposed.display = (element, text, type = Notice.type.success, duration = 3000) => {
        // Make sure the notice element exists
        if (!element) {
            throw new Error('Notice element does not exist');
        }

        let id = getId(element);
        // Remove any previously existing notice duration delay
        if (noticeClearTimeout[id]) {
            clearTimeout(noticeClearTimeout[id]);
        }

        // Style the notice depending on the notice type
        applyStyleType(element, type);

        // Set the notice text
        element.innerHTML = text;

        // Fade in the notice to make it visible
        fadeIn(element);

        // Set the notice display duration
        if (duration) {
            noticeClearTimeout[id] = setTimeout(() => {
                // Fade out the notice to make it invisible
                fadeOut(element);
                delete noticeClearTimeout[id];
            }, duration);
        }
    }
// -- Private data --
    // Holds the notice duration timeout delay
    let noticeClearTimeout = {};

    let applyStyleType = (element, type) => {
        // Define the css classes for the different notice types
        let styles = getStyles();

        // Remove previous styles for the notice and set the new one
        for (const style of styles) {
            if (style.class.length < 1) {
                continue;
            }
            // Check if the class is applied
            let classExists =  hasClass(element, style.class);

            // Add the selected class
            if (type && type === style.type) {
                if (!classExists) {
                    addClass(element, style.class);
                }
            } else if (classExists) {
                // Remove class if exists
                removeClass(element, style.class);
            }
        }
    }

    let getId = (element) => {
        if (!element.id || element.id.trim().length < 1) {
            element.id = `notice_${randomFromTo(1271991, 7281987)}`;
        }
        return element.id;
    }

    let randomFromTo = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    let getStyles = () => {
        let styles = [
            {type: NoticeType.success, class: settings.classNameSuccess},
            {type: NoticeType.warning, class: settings.classNameWarning},
            {type: NoticeType.error, class: settings.classNameError}
        ];
        return styles;
    }

    let fadeIn = (element) => {
        removeClass(element, settings.classNameHide);
        addClass(element, settings.classNameShow);
    }

    let fadeOut = (element) => {
        removeClass(element, settings.classNameShow);
        addClass(element, settings.classNameHide);
    }

    let addClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);

        let modified = false;
        if (cssClass.length > 0 && !hasClass(element, cssClass)) {
            element.classList.add(cssClass)
            modified = true;
        }
        return modified;
    }

    let removeClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);

        let modified = false;
        if (cssClass.length > 0 && hasClass(element, cssClass)) {
            element.classList.remove(cssClass);
            modified = true;
        }
        return modified;
    }

    let hasClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
        return element.classList.contains(cssClass);
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; }));
}(Notice)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 31, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Notice.js
//    Description: Javascript that displays a Notice to the screen
// ============================================================================
/**
* NAMESPACE: Notice
* USE: Displays a Notice to the screen.
*/
var Notice = Notice || {};
(function(namespace) {
    'use strict';
 
// -- Public data --
    // Property to hold public variables and functions
    let exposed = namespace;
 
    // Set class names and other shared data
    const settings = {
        classNameNotice: '.notice',
        classNameSuccess: '',
        classNameWarning: '.warning',
        classNameError: '.error',
        classNameShow: '.show',
        classNameHide: '.hide',
        cleanClassName: function(str) {
            return str ? str.trim().replace('.', '') : '';
        },
    };
    exposed.settings = settings;
 
    // Notice type enum
    const NoticeType = Object.freeze({success:1, warning:2, error:3});
    exposed.type = NoticeType;
 
    /**
    * FUNCTION: display
    * USE: Displays a message to the page with the given text.
    * @param text: Text to be displayed to the page.
    * @param type: The message type. The type determines the style of the notice.
    * @param duration: The length the notice is displayed to the page (in milliseconds).
    *   Set value to null to display the notice indefinitely.
    * @return: N/A.
    */
    exposed.display = (element, text, type = Notice.type.success, duration = 3000) => {
        // Make sure the notice element exists
        if (!element) {
            throw new Error('Notice element does not exist');
        }
 
        let id = getId(element);
        // Remove any previously existing notice duration delay
        if (noticeClearTimeout[id]) {
            clearTimeout(noticeClearTimeout[id]);
        }
 
        // Style the notice depending on the notice type
        applyStyleType(element, type);
 
        // Set the notice text
        element.innerHTML = text;
 
        // Fade in the notice to make it visible
        fadeIn(element);
 
        // Set the notice display duration
        if (duration) {
            noticeClearTimeout[id] = setTimeout(() => {
                // Fade out the notice to make it invisible
                fadeOut(element);
                delete noticeClearTimeout[id];
            }, duration);
        }
    }
// -- Private data --
    // Holds the notice duration timeout delay
    let noticeClearTimeout = {};
 
    let applyStyleType = (element, type) => {
        // Define the css classes for the different notice types
        let styles = getStyles();
 
        // Remove previous styles for the notice and set the new one
        for (const style of styles) {
            if (style.class.length < 1) {
                continue;
            }
            // Check if the class is applied
            let classExists =  hasClass(element, style.class);
 
            // Add the selected class
            if (type && type === style.type) {
                if (!classExists) {
                    addClass(element, style.class);
                }
            } else if (classExists) {
                // Remove class if exists
                removeClass(element, style.class);
            }
        }
    }
 
    let getId = (element) => {
        if (!element.id || element.id.trim().length < 1) {
            element.id = `notice_${randomFromTo(1271991, 7281987)}`;
        }
        return element.id;
    }
 
    let randomFromTo = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }
 
    let getStyles = () => {
        let styles = [
            {type: NoticeType.success, class: settings.classNameSuccess},
            {type: NoticeType.warning, class: settings.classNameWarning},
            {type: NoticeType.error, class: settings.classNameError}
        ];
        return styles;
    }
 
    let fadeIn = (element) => {
        removeClass(element, settings.classNameHide);
        addClass(element, settings.classNameShow);
    }
 
    let fadeOut = (element) => {
        removeClass(element, settings.classNameShow);
        addClass(element, settings.classNameHide);
    }
 
    let addClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
 
        let modified = false;
        if (cssClass.length > 0 && !hasClass(element, cssClass)) {
            element.classList.add(cssClass)
            modified = true;
        }
        return modified;
    }
 
    let removeClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
 
        let modified = false;
        if (cssClass.length > 0 && hasClass(element, cssClass)) {
            element.classList.remove(cssClass);
            modified = true;
        }
        return modified;
    }
 
    let hasClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
        return element.classList.contains(cssClass);
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; }));
}(Notice)); // http://programmingnotes.org/

The following is Notice.css.





		
		
			Notice.css
			
CSS
			
			/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 31, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Notice.css
//    Description: CSS for the notifiaction display
// ============================================================================
*/

.notice {
    border: 1px solid #d6dadb;
    border-left: 4.5px solid #32b032;
    background-color: #f1f5f6;
    text-align:left;
    padding: 8px;
    font-family: helvetica,arial,sans-serif;
    transition: opacity 400ms ease-in-out;
}

/* Background url source: http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png */
.notice:before {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url('data:image/png;base64,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');
    background-size: 100%;
    background-repeat: no-repeat;
    transform: translateY(-10%);
}

.notice.error {
    border-left-color: red;
}

/* Background url source: http://icons.iconarchive.com/icons/papirus-team/papirus-status/256/dialog-error-icon.png */
.notice.error:before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR42u3deXxcZb0/8M/3OefMTJJJMlmbttnaUsAWQWS7KFzvFVDZCpXSRaEtoCI/FeTelwoFlB8iiL/rCgpcxbYUKl1YWkEuKCAueLFoBUqBbkmzL5PJZPY5y/P8/khSkpiWtJ0sZ+b7fr3mBZm2k5ln+Zzneeac5wCMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4yxCUVcBNmlaeXSIpCqVUqVE1GZAkqIqJSkE5BAPgnyKEVeAvIU4AEAKGWCKEmk0koqk4AESAsrqBABvUqpHgBBCL2p7pfrI1zKHABsEjVetTBAyvMhCJoPqHqSOAZENSDUgKhiXOtVoQ9KNgFokcrZTUJ/F1LtVGT+o371k2GuHQ4AlkH7r1oSIOAsAk5XwEkAToIQNQDElHqjCkpBdZJSbxLRdqXUNlL0h5o1j3VxLXIAsLEe3VcsrRVCnQcpz4TQ/kURPkBEwpUfRkFBqX1QeAWE30vp/K5+7aYmrmUOAHZgOL/EQ8BHAXwKwKdIiA9mcb0oSLVbQT0LhecI6sXaNRvT3Ao4AHJrWH/1Yh8UXaCglgoS54PIP249TkrAcaAcB1AKUBJQAJSEUqq/ERABJPpbAwmACKRpgKaBxDgOPpSKSSl/QwpPKWBL/dqNCW4dHABZqWHlYoOILibCIgJdBKLCo+4/jgNlmlCWBWVZgG1BWSaUZUNJBxjs9EfVQmggCDSQoYMMD2AYIN0AGQbI4+kPi6POApWEYz8Doa0XUj5ds3aTxa2GA8D9R/urlhwPYDkRrQTR9CPsHVCmCZlKQZlpKDMNmU4D1hTpI5oG4fWBvF6Q1wfh84E8nv7wOLLPG1RKrRHSWVOzdvNb3Io4ANw1r1+x1CChlhDwOQjxr4dbzspxoFIpyGTiwH8hpbsKQYj+UMjPh8jLB/l8hz9SUFBQ8q8KuE9J2lC/9jEeFXAATOmjfRGU+gKR+CoEzTycI7xMpyDjcahEHDKRnVNh8uVBFPghCvIhfHmHN0JQqktK/JhIPVi3ekMPtzYOgCmjeeXSWZLU9SC6hsY4t1dSQcVjcGJRyHisf76eSzQNosAPzV8IKvCDBI01COJKqtUktO/X/nJ9I7c+DoBJPOIvrQawioiuAQ2cVjvWTh+Lum9YP26tkCD8hdAKi8YeBkpZgHhYycSddWue4iDgAJjQoX4VgJtI0LUA+d7v78t0GjIchhMJc6cfy9pBYRG0QKB/mvD+0sqRvwRwd92aDc1cgBwA46bxqsUFBKwiIW4E6JCtUzkOZDQCJxyGSqe48I6kcXp9/UFQVAQS2vuNCJJKyh9Cqbvr1m6KcelxAGTuiH/1UiLHvgKafheIqg/ZDi0LTjgEJ8xH+0yOCrSiYmglpf1fLx46CDqk49xKQvyybvUGxYXHAXCUw/3FZxLoRxDi9EMO85MJOL0hyGiUC208s8Dvh1ZaBpGXf+gckPJvkOrLdWs3/i+XGgfAYWu+akmhAu6EEF8CoB2y4weDkIk4F9pENty8fOjl5RD5BYfMZSXlfyuob9Sv3sj7GHAAjLXzL7tQkfoZiGq547sgCCoqDj0iUKoFir5Uu/pXW7nEOAAOPtxfubiUBN0LEssOVjYqnYbd3QkZ544/paYGBX7oFZUgr/fgswLL3AyhfbF+zcYQlxgHwDCNK5Z8XGi0BkQ1o7Yex4ET7IYT7uXCmsK04gC08gqQrh9sNNAupbyifs3GF7m0OADQuHKxRxB9GyT+EzTKXF8pOL0h2D1BXtV3zXBAQC8rh1ZSOurpxgpKwpE/hlI3163dlOYAyN3OP0uQeAKCPjT6PD8Ju6MdyuQ9K1zZuD1e6FXTIfIOcsqGlNuVUkvq1mzczQGQe0P+i4VG60BUzMP9LJ8WBEr6pwWjXY2oVFha1or6dY9v5QDIiaP+QkEwvkWaditG2VhTxmOw2tsBx+aek010Hca06RB+/ygZoCQceTcIt9Wt2ag4ALK18y9fHNAE1itNO/+fGoGUcLq7+Kif7csDxQHoldNG3epM2fZzCrSkfu3GPg6ALLN/5eJaIvoNhJg/+ly/Dco0uYfkQqM3PNCnzxh1bUBJ+TakvLhu7aa9HABZomHFZacKzfg1EVUNr23ADvXACfLW9Tm5NlBeAb20/J97gVSdylEL6h7e8FcOAPcf+ReQEOtBNOycUeU4sNvb+jfjYLk7JfD7oVfN+OcFQqUSUHJZ7eqNWzkA3Nr5ly9eTob2EIBhZ4XIVAp2WyuUxUN+BpBhQJ9RDeHzjcgA2Mqyv1C/btNqDgC3df4Vi6+DLu4jDL+rjhPpg93RfvTbZbMs6wkEvWo6tKIR3worSOnYN9Sv3XQfB4B7hv1fI6HdAxry+RRg93TD6QlyY2cHXxcoLYNeXjm8Zygo5di31K3ddDcHwNTv/N8kTbt96GdTUsLuaIeM8hWhbAzrAoVF0Kumj/yqUCnbvqNu7abbOQCmbOdf8jXSxD3DOr9jw2ppgUoluWWzsXcMXx6M6mqQpg8PActeVffwpu9yAEwxTSsuvw6a/tOhw35lW7Cam/lcfnZkncPjgVFdCzKMYdMB6djXZ8uaQFYEwP7ll6+Erj009DbayjRhtTT13zOPsSOl6/DU1A3bi1BBSbLsz9U+vHk1B8Aka1m5eIEU2hNDL+WVqTSslv25d7MNNj40DUZ1HYTPO3QkYJNjLapZu3kLB8AkaVi+8BShe/9ARPnDOn/zfkBy52cZJASMmvqRIRB3rNS/zVr35GscABM+7F9UD13/y9DTe1U6DbOZj/yeY47tP8U1g+xQEOaeXTwSqKmDGLrtmFKdyrLOqFv3+H4OgInq/FcuKiZD/zOI5g+d85tNjTzsB1B1x/fg//fzMvqasZd+i45vfp1HApoGT20dyPNeCCgp31KWc1b9I5vDrlvicNsbbly+iGBovwJGdH4+8rOJ4Dgwm5uGLQySEPOFgfWNV152Yf26xxUHwHgOWYS4gyAOXM+vHBtWazNg8wYebILYNqyWZhh1dQfOE1BCnE9C3AHgNg6AcdKw4vKLoIlVQ4Ze/Sf58HX8bIIpy4TV0gKjpva9MwY1bVXjisu31a/dtJUDINPz/uWXzSVNW4fBi3uUgt3eymf4sckLgVQSdlsrjJnVABGISJCmPdx45WWn1q97fA8HQKbm/Vde5oGmbwRR4MAorKsTMsbX8o/GksoVr5kNZDwGu6sT+rSBL6OIioVubGj87MIz6x990uQAyMS8XxN3kRAHtu52wmHeu49NGU64F+TzQSseOD4J+jDp+p0Avs4BcLRH/+WLPk6afuOBxE0mYXd1cKtjU4rd2QHyeA/sM0ia/h+NV172P/XrHn+RA+BI5/1XfrqENP1hDGzfrSwLVmsLb+bBpuCCgILV1gJP3az+25IRNGEYaxuvWPih+kee7OEAOKKhv34/BM08UMDtrbxfP5vCwwC7PwRq6vpvSUZULTyeewF8hgPgcIf+Ky65EJq2+EDZBruhkrziz6b4QCCZhN0ThF5eMXAUE0ubVix5tHbthmc4AMao6crLCqHpD2DgVGUZj8MJ9XDrYq7g9AQh8vIhCgoAgKDR/Y2fXTi//tEnoxwAY0lRIb5LJKoBQNk2rPY2blXMVayOtiHrAVRDun4XgK9wALyPhhWLziRdv/bA0L+D79PH3LkeYHe0w6iu6Z8JaNp1DVcsfHTWI0/+LwfAweb9n11IJLSfAP2bezh9fXzjDuZaMh6D09cHrbgYINI0w/OTxs9cckb9+i2KA2A0mlhBQpw6OPTn7/uZ6wcCXR0QBQX9UwEhToPmWQ5gLQfAyKH/FZ/2C92460DBdbYDUnILYi4fBshhUwGha3c1Lrvk8fpfbYlxAAwhNLEKRNOB/rv38Hn+LJumAjISgSgqAgTNIMO4CcCtHACDR//PXDqTdP2rwMBNPLr4br0su1jdnfD4C0BCA+n6jY3LLvlp/a+2tHMAABC6cRNAeQDgBLt51Z9l4WKADSfYA72yEiDKh2HcDOD6nA+Axs9cWku6/nmgf1NPpzfEjYVlJSccghYo7r9oyNA/37h0wffqH9vaktMBQIZxCwheoP8af8ayllKwOzth1NQCIB95PLcAuC5nA2D/8sWzSNNWAoCMxSATcW4kLKvJRBwyFoPw+0G6fnXT4gX31G7c2pibIwCSXwVpHigFO8gLfyxHlgOCXfAU+AEij/IaNwK4IecCoHHZghLS9KsBwIlGoNJ8A0+WIzOBdBpOtA9aUTFgGFc1LF7wrVkbt4ZzKgDI8FwLIj+U6l/5ZyyHOMFuaIVFIKJC4TGuBXBPzgTAvmULDNL1rwCA0xfmO/iy3BsFWFb/dQKBAMhjXN+weMEPZm3cauVEAAihLQHRDCgFm6/zZ7k6CggFBy8UmkGaWALgkZwIADI81w7O/cFHf5bLo4BoFFpREYTP8/mcCIDGZZceT5r4KBR4lx/Go4BQEFphESC0sxuXLjiu/rGt72Z1AJChXQOAZDzGK/+MRwHpNGQ8BuH3E+n61QC+kbUBsG/xJQZ0YwUA2L189GdssC94/H7AY6xsXHT+rfWbn7WyMgBIx8VEVKHSaahEgmueMQAqkYBKp0Feb6XSjQsBPJWVASB83suB/lt7McaGrAX0haFXToPm812elQHQsORiH0FcpKSEE+EAYGxkAGjlFVBCXNyw6IK8WZt/k8yqAIAQF4PIL/v6eKsvxkaSEjISgRYIFELXLgDweFYFgPAODP/7+OjP2KijgMjAmYF5eZdnVQA0XH6BhzTtfGWaUCm+vRdjo1HJBJRlQRjGhQ0LP+mZ9eRzZnaMADT93wH4nWiEa5mx9xkF6GXlfhjGxwD8NisCgHT9XACQkT6uYcYOtRQQ6QPKykEez3lZEwDC47lIplJQpsk1zNihpgGmCZlKQXg8FwD4uusDYN+Si2oBOk7Goly7jI1lFBCLQpRVzNu36Pya2ZufbXZ1AAjQeSAQBwBjYw2AGFBeQSTEuQBWuzsAfL6PKMviC38YG+s0IJ3q/zYgr+Ajrg8AJbSzZV8v1ypjhzkK0IqLz3b1GsD+RReVk6A5fJ8/xg4zAOJRaCUlc/ctOq909ubfhlwZAJJwlqaUkEm+8o+xw+o7iQSglCAYZwHY6s4pgNc4TaaSgFJco4wd1txZQaZSIJ/nNNcGgGZ4Pmzzvf4YO8JRQBxaoPQU164BKKITeOMPxo6w/yQSoNKyE1wZAPsuPzdAwEye/zN2hCOA/r5T3bDgnOJZW1/oc1UAQHpOluk08fyfsaNYBzDTpAzjQwBedlUAkMA8lUpxJTJ2NBmQSoGI5rkuALTCwGy7q41rkLGjDABRVDzbdWsAkM4xkkcAjB1dN0qloJVXznFdAChS9Xz+P2NH2Y/SKYAwy30jAMuu4QVAxo42ARRgWbWuCoDGT19QJC0zwLXHWAYywLJKGi75ROGsLc9HXREACrJWmTZx1TGWgXUAyyQIVQvgLXcEgFIVvP0XYxnqT6YJYRjlrpkCEKFUcgAwlqEASEMZRplrAgCgUtgW1xxjmWDZIKJSFwWAKlG2zRXHWCZ6U//BtMQ9AaB5SvgrQMYylQAKpOsB9wSAruVxrTGWyYPq+PSpcQkA4dherjHGMjgIcKTPNQHg2BwAjGU2AByvawIAUnIAMJbZo6qbAsDhAGAsg0gq9wSAkg7XGGMu6FPjcyagZSe5yhjLYABYVtI1AWAnEym+EoixzPYp1wRA1DStIl3nWmMsQyLm+JxbPy69tMN0HA4AxjLZp9KOawJgXyJtHpvPXwQwlil7EmnTNQGwMxYPfaq8iGuNsQzZFU/2uCYAHKggVxljmWMr5Z4AMKXiO4IylkFpR4ZcEwCLqkrDXGWMZc6SqrLww+1BdwRAr+lEkM+VxlimhCw74poRwK5EsuuMgF8RwOcDMXaUlFJqVyLd7ZoAaEymo5aUIY8QZVx9jB0dSyHYlEpFXRMAUik76chmDgDGjl7Skc1SwXZNADiA02XZHcUGnw3I2NHqNK0OqZSLAkAp+81oomtuvo9rj7GjtD0a73LgohHA8QV51p5kaj9XHWNHrzGZ3j+vIM89AfDtfa32omml73DVMXb0eiz7nV+0drknAADgtUj8XQVIAgRXIWNHRgHyb32xXeP1+uMWAI3JdF/Kkc15mqjjamTsyCQdp6kpbUZcFwDHF/jMDtPcMyvPxwHA2BFqT1u75xXkpXfGk+4KgGPzfek/90b3zcrzncPVyNiR+WM42nBcgc99AWArJPckU3/nKmTsyDUkU393FFLj9frjFgBz8rzJZ3vCO3khkLEjo6DkX8KxnZdVliZdFwD3NndaAPpijr2rUNOP5+pk7PBEbeedhmQ68l/72y3XBcCA5OuRxI6zSoo4ABg7TNujiR0AxvUeG+MaALPzvMk/hqPbzyopWsTVOXFijXsht7+W0ddMNO7lgp1gr/RGt8/N9yV3J1LuDID6PG98eyS+TQG8N8AE2v3AvYjYmd1FukjXUOvjnZ4nbv4P9Vo0/tqcPG/ctQFgSRXfHk2Eorazs0jX5nO1MjY2EdvZ8UY00fuR6sqYa6cAfwxH0wCsF0PhVy+tLOMAYGyMftcT/isA64GWLtO1ATA4Jd3WF//TpZVlV3O1MjY2r0XifwIQG+/fM+4BcFagMP5sMLzz9jk1UUNQIVctY4dmShl5Lhh++5zSotgLoYi7A8BUMhp1pL0jnnj55MKCi7h6x1+N1wOV4fU6XsGdODtiyZejjrQtqaLj/bvGPQD+2hdPALCe7go/zwEwMYiIO6yLPd3d+xwA6w/haHLc28pEfKBqr6c+IZ1pfz79hOd1Ir5pIGMHYSvV95FXd3yySNc69qfMcd9Va0J27azyGn2vRcyyf8Tivz+10L+Aq5mx0W2PxF/qtR17nj8vsj9lIisCoNTQIwDU1s7e5zkAGDu4rd29zwNQVR4jMhG/byKniscWaCLw6hknbPUKMY2rmrHhUlJ2nPnqjktijgwD2DURv3PCNu4/qTC/9/VoovC5YPjXCypLP8fVzdhw/xMMb4050jmjuKD31b44sioAArrWC6Dm8c7QUxdXll7NewQw9h4FyCc6Q1sAqHLD6J2o3zthAfByb9QGEHulL9bRmjJfrfZ5zuRqZ6xfSzL9l7/0xToBRJ8Jhu2sCwAAmFeQ17sznix8uK3ryVWzqzkAGBvwcHvPFgA4uTC/d3s0gawMgEJd9AKo3tQZevnGuukteZpWzVXPcl3CcVoe7+x5GYAsMfTeifzdExoAr/bF7XJDDwctu3RTZ+hXy2dUfI2rn+W6zZ2966OO41R5jPCLoYiTtQEAAMW6Fgxadumatu6tn5lefi2fGchyma1U35q2rl8DQKmhBztMC1kdAHuT6SiAdHPKxPM9fU9cUB5Yyc2A5arnusNPNKfMJIDUzngyOtG/X5+MDx3QtWDYdmY+1Nr12KfKipcJIt5riuUcR6nUL9q7NgBAuaH3BC0bOREANT5PMBxLTn8jmgi+1BvZfE5p8We5ObBc8/tQdPOOaDIIQM7J8wYnIwAm7arRgK7Vhm2n4gR/funjJ83dIojyuElkRsXXbkXBRz+W0deM//lldP+/O7lwM3f0T3769d0X74wlwmWG3t1j2U2T8T70ySqAmV5PV9hOlu+IJUK/DUU2frKseAU3i8zQCougl5Vn/DVZ5jwfDG/YGUuEAajZed7Onkk4+k9qALwVT6YA9AEI3Lu/bd05pUWLdKICbhos29lKxe9r6lw38GPftkg8PVnvRZ/MgpjhNTrb0lbg3UQ6vKWrd/Vl00q/zM2DZbstXaHVu5KpPgCo93k7G1OT1v8nNwDa0lYMQBRA4Q8b29dfWB5Y6NPETG4iLFslHdnyw/0d6wd+jDam0rHJfD/6ZBdIlcdo6zCt4zoty7y/peMnN9bNuIebydFxlHLFa+ai+1s6f9xpWiYA1Po8rU0TsOvPlA6ADtOKAYgAKHqgpfuFJVXlf5vh9ZzCTeXISeWO18w1rSnzbw+2dL00OPdvSpnxyX5P+lQomEqP3tZl2kVSKdyxr/X79x9fv46ING4yLFsopez/u6/5v+TASGqm12hrTVvgAADQZdpxvybCMUcGXujp2/VCT9+6c/kUYZZFftvT98hLoehuACjWtd7WtJWYCu9LnyoFVGboLTHHLAIg7mho/fmZJYXnFGhaDTcd5nYxx2m6c1/rzwdnU1Ueo7XPdsABMMT+lJnO10RXwpFV7WkrfXdj213fnlPzM76tOHP10B9Q9zS0391uWmkAKNRE17uJSfzeb6oGAAAEdK094cgyAMaG9p5tF5UFtv5LoPASbkbMrV4NR7c81hHcNvCjVeEx2qPJKdP/p1YAtKUtWW7obUHLrgOAW/Y0f//XJx9/Sr4meOcg5joJRzbfsqf5h4M/V3mM1n3JtJxK71GfaoUWtOwggFIAhU0pM3HrnuZbv39s7UP8rQBz2dDfuW1P8zeHfNUX7TCtnqn2PvWpWHjTPUZTu2l9AID4dXfvjo+XFv38ooqSL3KzYm7xTHfvf2/t7n1z4EdZ7/Psb5zkk35cEwDtppXyCepISTUDAL65t2X1KYUFH5nu85zITYtNde1p8/Vv7mlZM/hzvhDtjSkzPRXfqz5VC7HcMDpa0mYJgLyo7Thffqfh5sdOPHadIaiUmxibqiypQl96u+HmqOMMfs+XnOk1Oncnp2T/n7oB0JI2VaVHb+wy7eMAiDdiyc7vNLSu+tac6p8SwOsBbErO+7/T0LLqzViya/CpGq+ncXcyPWVPpNancoF2mXbCK6gtLVU1ADzaHnztpML8+xZWlt7AzY1NNVu6Qvc+2t7z2uDPeUK0NqfNxFR+z/pUL9S0VJ0AigYeuHl38yPH5PlO+GBh/jnc5NhU8WYs8cLNu5sfHfJUNCll51R/37obCrdE1xp7bWceAN1RSn3lncZvbT5p7vRyjzGPmx6bbEHTevv6dxput9WBa6btaR6jodO0pvx7d81ptn5NBGKOnD34nucX5JU9duLcNT5NTOcmOFz8gydDVmW2WERHOwre3M6FO0LSkW1L39i9cmc8GRqc9wd0bW/Ydvrc8P5ddZ69h2imqVTV4M9nFRfO/vkJsx/SiQq5Kb6nKZVGJMMXmxTpGmp9fPuGoWylYp/f2fC5P/VG9gw+5xPUnpKqzS2fwY0X2swdXA8AgCuml59x2+yZPxJEBjdJDoCJopSy7tjbesMjHcG/Dnk6AmC3mz6H7raCL9REQ9SRHwDgAYBH2oOvVnj0W66rqbqbvx5kE9L5AeeBls5bRnT+dJmuN/TYNjgAxlHUkXaRJvZGHHksBjr8D/d3vFigabcvn1FxB18+zMa586tH2oLf/sH+jheHPO2UGfreHstlvd+NAQAAEUcm8oVoSEg5Z3Aac+e+1me9QuQvqSq7KddDIF+IjNdsvhDc+QG1saPnnjv2tTw99OlCTTT0WHbSjZ/J1R1FJ1TYCrVDn/vu3Jpll00r+w/wSIBluP8/0Rn68Td2Nz0y9EkPUZOpVLdbP5TrO4lOVG0rNW3oc3cdU/PpRVVlN/N0gGXqyP9kZ+h739jdtGlE5+80lWpx82fLig6iE2bZCsMuErp19szzl08vv533EWBH2fmdh9u777hzb+szIzp/yFSqwe2fL2uOkDphtq1QMvS5G+qqPv5/qqd9h78iZEdCKmU92NJ12w/2t/9uROcP+zWxL2Q7igNgiigQgtJKHmMrDLuN7ZUzyk+/ZdbMezQ+WYgdBkep6J37Wr/+SPuB/fwAAAZRxK+JPb1Z0PmzKgAAwEsk0kodA2BYZz+rpGj2/cfX/8iniRnctNn7STmy/bq3G274Uzi6b8QfRQuE2BOXUmbLZ826RTIPkTCVmgMMHwl8oCCv7JfzZ/+o3GN8gJs4O5hu09r5ubf2fXXIuf0HOn++EHsSWdT5szIAAMAniCypZjtAYOjzM31G3k+Oq//miYUF53FTZyPtiCV+9+W3G29vTZupoc/rRH15gvZGney7Q2LWfk3mISJbqVkSwxcGBRG+N7d22YLKkq/yqcMMABSUfLo7fN/XdjU9PPIuyDqh10uiIS6z8/aoWf89uQBqJVAx8vll08pPvXXOzO94BJVxF8hdllShO/e1rFrf8d5OPoM0Qrej0JTNnz8nTpQRQJUEZoz8vPML8ioemD/7u1Ue4yTuCrmn3TRf/8rOhltfjyXbRw4KNKDNATqyvQxy5kw5AkoUUN+fB+8p0IT4zjE1Ky6oKPkiTwlyZcgP57lg+Berdjc/FHWckYt6UgCNEujNkX6RO3SC31aYDeCfTgy6oKJk3l3H1NxZoIla7iLZK+E47bftaVk15KYdw2YEXqK9aaXiOXRgzC0aYDjAbAD+kX9W4/PkfXduzY2nFxcuBF9HkHUH/m3h2Jab9jb9oCk56k69cYNon6WUmUuFkpONXANIAjVqlMVBAFhSVXbKTbNm3OTXtFncb9wv6cjmexpb73q0vWfbaH8ugKDef1WfyrWyyfWjXBmA2pHrAgBQ5TG8t8yeec0ny4qXE5HO3ciFh3ylnN+FIo9+e2/Lg+2mNdqteSQBTQroydUyyvlhrgB8sn9KkDfan59TWjz39jkz/7PK6zmVu5R7dKbNv39rb8v3Xgi9t2HnyOUAHWi0gWQulxPPc/tDgCQwE0DlaGUiAHyhuvLfrqupuiFfEzVcYlNXypGtD7Z0/uRnLV0vyNFH9IqAbg1osQGV6+XFATBcEfq/Khz18uFKj+H5z7qqpZdUll6jERVwcU0djlKxrd29a3/Q2L6+Y/ThPgBYBDSq/t17GQfAqDT0jwbKD1Y+c/O9/utrqq78RHlgmSDK5yKbPFKp1AuhyIZ7mzrXvR1PhA+2HED98/wWBThcahwAY+EHUAfAd7C/cFy+r+j6uukrzy0tuil0yRcAAAPUSURBVFwQ5XGRTWjHT78cjjzx4/2dq9+KJUKHmhUMLPRFudQ4AI6kfKYDmIZRvikYdFJhftk1MyqWfKI8sFAjKuFiG9ehfvSFUOSJB1s6178RTRxq9V4C6CSgXfFcnwPgKHkAVGPElYUjVXs9vhUzKy5aMq30ijxNq+Ziy5yUI1s3d4Y2rG7rerIpZb7fyn0YQAuANJccB0CmpwU1AA457/drQrt8Wum/rpxZuWC61/NROsTogR2cAmRX2tq2uq1704aO4B9izvtuxpEY6Pg83OcAGFdlAKoOtT4w6PSigrKFlaWXXlRZssAnxEwuuvdnStn1XLBv6+NdPU/9ORwbyxV5aQDtyOETejgAJqfsBoPgfe+aWaAJsbCy9NQLygPnnFxUcK5OVMxFOHxu/0Y08cKW7tDzT3X1vhZ3xrT1ljmk4/M8nwNgUoNg2lhGBABQamj6heUlpy6oLPnk/IL8jxmCinKx4GylIjtiiZef7u79/TPB8CtB07bG+E/TADoBBLnjcwBMJYGBIPCP9R8Uapq4oDxw3ImF+Wd/orz4jGJd/2C2rhkoQMVt+e5LofBftkXirzwbDL8Ztp3DuaFmHP2bdIS5qXEATGUFA0EQONwy/lBhfuC0Iv9ppxUVfPDUYv8Jfl2b79aNShQgE46z541o4vU/9Eb//loktu0f0UT48F8G4YEjfpybFgeAm+gD04PysU4PRqr1eX1nlxTOm53n/fDZJUV10z3GcV6N6gkkplhnV2lHtgct651XwrF9uxKp7a/2xd56J56MHeFLpgaG+CEAFjclDgC38w8EQQBHeUSv8Xl9ZxT568o82rF1ed7aE/35pZUeo8qviVpDiKrxrFdLqd6E4zR1m3br27Fk8N1EsqHHdHa9Gonub04N3077CDjo34qrB0CMmwwHQLaWeRH6Tyo66jAYqdrn8c4ryCsp1vXifE0EvIICBlFpiaEHygzN8Gu6lq8Jo0AXhgFhAIAFacVtaSUcacUc2+mxHKvXssOWUqG0VOGEI8N9tt23M57sbUmZmT65xhkY4vei/yIdXtTjAMi5MBh8+HLkc6cHOnsfd3oOAPYeD4DigTDwD6whZAN7YEgfHejwKa5qDgD2/rwDQTD48LqgztTAET6G/lX7OHJ81x0OAJbJ+vKhf/uy/IH/egdGDjQJHd0c6OzJgaN6cuAhuao4ANjETx88A4FgDEwfhj409J9gRAMPMaT+1UCnVUP+3xkYug99WAMd3hx4MMYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjLEM+//RL8CJNgcJZQAAAABJRU5ErkJggg==');
}

.notice.warning {
    border-left-color: #ff8000;
}

/* Background url source: http://icons.iconarchive.com/icons/papirus-team/papirus-status/256/dialog-warning-icon.png */
.notice.warning:before {
    background-image: url('data:image/png;base64,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');
}

.notice.show {
    opacity: 1;
}

.notice.hide {
    opacity: 0;
} /* http://programmingnotes.org/ */
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
				
						/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 31, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Notice.css
//    Description: CSS for the notifiaction display
// ============================================================================
*/
 
.notice {
    border: 1px solid #d6dadb;
    border-left: 4.5px solid #32b032;
    background-color: #f1f5f6;
    text-align:left;
    padding: 8px;
    font-family: helvetica,arial,sans-serif;
    transition: opacity 400ms ease-in-out;
}
 
/* Background url source: http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/256/Accept-icon.png */
.notice:before {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAArZ0lEQVR42u2dCXgUVbbHTyWdhSQsQtgkQBLCKmERdFDxCQMIyBJEHVxQQHHcQFFQUFBRUUFBQcBlFEVHBxEUUFAYccABlfcQ2SEgkABBUBZZAmTppN45t6pDp+l0er9V1ef3fZXq7urlVqf//7rLuecqwDBMxKLILgDjP7N2N7DhLgW3VNwa41YPt2R9o8fj9T3ox+K9fOsC3I7ot/P0+7Q/pm90bD9uufT4iGaH7LK/C8Y/2ABMAAqdBN0WtxZOWwZowjcCubjtwS3baduMxnBMdsEYz7ABGIxZu1NI7Nfg1hG3drh1Au2KbkbIANbhtgm3n3H7YUSzPDYFA8EGIBkUPF3Ju4Em9C5gnKt6qMjFbTVoxvAdGsIe2QWKZNgAwszM3Sk1cNcTv/heEBmCr4xc3FarAMtxv2Jks7yTsgsUSbABhIGZ2lU+C7/sAaBd6W2yy2RQqDNxHZrBYtwvGcm1g5DDBhAidNEPwi/4ZtDa8ozvbEIzWIj7+WwGoYENIIjM3JVCQ22D8FsdCiz6YLMJVJiL+09GNueOxGDBBhAgKHqqzvfEb3I47vsCV+9DDTUTlqIZvAfUZ9A8j2MQAoANwE/0q/19uvBTAn0/xi/ydCN4B43gSMDvFoGwAfgICr8DfmtjQGvb89XeGFAtYCGawVQ0gg2yC2Mm2AC8BIWfhTsSfmfZZWE8shY3MoIlsgtiBtgAPKC37+8ATfitZZeH8YltuE0FrdOQ+wkqgA3ADU7CnwBazD1jXmj4cBKwEbiFDcAFvao/GbQJN4x1oAlK47hpUB42AJ03dqVcp2jC7yS7LExIoUjDcQ83z/tedkGMQMQbAAo/A7+El0Hr1Wcih4VoBE+iEUR0hGHEGgAKPwl3YxWtg8/bRBmMtShQtY7CKWgE+bILI4OINAAUP03MmQUcwMNo5KERjHg4AvsHIsoAUPgk+LdAC9llGFeW4vYAGkGe7IKEi4gxABT/Q6B18iXJLgtjaKgpQJ2Es2UXJBxY3gDeyE5JxbP8ALTkGwzjLatBhWEPt8jLlV2QUGJpA0Dx34NnOB34qs/4Rz6awCg0gTmyCxIqLGkAKPxkPLN3QcvAwzCBshiN4F40AsvlIbCcAaD4r8Oz+hi4h58JLjT1eDCagKUCiCxjACh8it8fj6dE8fs8TZcJBXYAleYVvIhGYIl5BZYwgBlY5VdA+SdomXYZJtQsV0G98xELNAlMbwAzshu2VbQssqmyy8JEFLkqwIBHWhzcLLsggWBqA0Dx34En8DZwLz8jh3w0gfvRBD6RXRB/Ma0BoPhfULT5+gwjFTSBSWgCT8suhz+YzgBQ+HS1p8Aenr3HGAlav2AYGoGpJhWZygBQ/JSJdwFwXj7GmFA+wlvQBEyTodg0BoDiT8XdN8CZehhjQ5mHeqMJ5MouiDeYwgBQ/M1BW1G2nuyyMIwXUA2gC5rALtkFqQzDGwCK/xrQpmnWkF0WhvEBWuW4L5rAD7IL4glDG8CMnSh+RSwbzcN8jBmhyUS9HmlpXBMwrAGw+BmLYGgTMKQBsPgZi2FYEzCcAUxH8WOhWPyM1aCowV6jDGYChjIAFj9jcQxnAoYxABR/cyzMOuDefsbanEQT6IQmYIghQkMYAIo/FQvyE/A4PxMZHEETuApNIFd2QaQbAIqfRL8KOMKPiSwoYrArmoDUsGGpBoDip7Y+hfdybD8TidDcgd5oAtImEMk2AJrYw7P6mEhmIRrALbI+XJoBoPhfAJ7PzzDEJDQBKfkEpBgAiv8O3H0s47MZxqAMRhMIe2ahsBsAir8taG0fHutnmAtQP0BnNIGw5hgMqwFM39EwGRRlPXACT4ZxRy6o6hWjWh0MW7bhsBnA6zsa2hRF+Qo4dTfDeGK5qqr9Hm11MCzrDoTTAJ5FA5gYrs9jGLOCBjARDeC5cHxWWAwAxX8din8l8Io9DOMNdjSB7mgCIV+GLOQG8PqORsn4IRuB1+pjGF/IUwHaP9rqQEj7A8JhAIuAV+llGH9YjAZwYyg/IKQGgOK/B3fvhfIzGMbiDEcTmBOqNw+ZAaD4U3G3FXi8n2ECgeIDMtEEckPx5qE0AJrh1yVU788wEcRqNICuoXjjkBgAiv8h3M0K6VfCMJHFCDSB2cF+06AbwGvbG6UoCuwErvozTDDJV1Vo+dhlB/KC+aZBNwC8+lO0X9+wfS0MEzksxVpAv2C+YVANAK/+WXj1Xxze74RhIgesBQzAWsCSYL1f0AwAxZ+kV/054IdhQkee3hQIShahYBoAJ/hgmPAwCQ0gKAlEgmIAKP4M0Mb842V+KwwTIRTglokmsCfQNwqSATTm3H4ME14WPnbZ/oBzCQZsANO2NaKZfqtlfxsME2moqtpldOsDAc0YDNgA8OpPC3p0kv1lMEwEsg5rAVcF8gYBGcC0bY2zgIf9GEYeKgwY3Xq/38OCfhsAit+Gr6aOP17Rh2HkkY0mkIkm4FcKsUAMYAju5so+e4ZhYCgawIf+vNAvA5iKV398IQX9ZMg+c4ZhYI8K0HKMH7UAfw1giMJXf4YxDGgAQ8f4UQvwywCw+k9t/9ayT5phmDK2YTMg09cX+WwAU7dSz7/CPf8MYzRUdcCYTN9GBHw3gG2pa4CX82YMSlxUNWhZYwA0TOwEVaIvgcKS0/Db+Y2w/eTncM5+VHbxQs3aMa1zr/XlBT4ZwKtbG3dQFOVn2WfJMO7IqNoDejaYCvHR1S46Zi8thO9/fwk2nfhIdjFDiqqqHR/P3L/B2+f7ZABTt6bOw92tsk+SYVxpV/Mu6Fr/aYhSPK898+Mf0+GnP2bILm4o+XRMZu5t3j7ZawN4dWtqPXzyQeDVfRiDcXmtYSj+Z7x+/qrDz8Mvxz+QXexQYVcBGj6emXvEmyf7YgDP4m6i7LNjGGc6+Ch+B2QCG6xrAhPRALxaW9ArA3h1SyqF/eYAZ/thDMS1dZ+Av9R+wO/XW9gE8kCFtMfb5FYaGOSVAbyyJbWPosBS2WfFMA6ovd+h1t0Bv49VTUBVoe8TbXKXVfY872oAW1N5fT/GMARL/A6WHXwUdp6yXGjLYmwGVLquYKUGgFd/Wt33MHDnHyMZRbFBn4avQYvqQc2MDaWqHZYefBh2n/pG9ikGE+oMrI+1AI+rC3tjAI8ooEyXfTZMZKNANPRt9AY0r947JO8vTODAI7D7tHVMQAV1FBqAxzFPLwwgbSPu2sk+GSZyIfH3C6H4HZAJfGUtE9j0RJuc9p6e4NEAXtmcmoH1rl9lnwUTucREJcDAxu9Bo6TwZJ2znAmoatMn2uZWmD3YowFM2Zw2XlFgkuxzYCITEv/NqXMhJbFjWD+XwoY/y7kTDp0zf9S7qsKEsW1zXqzouOcaAFf/GUnIEr+DotKzsDBnmBVMwGMzoEIDwKt/Bl79ufrPhJ1EWzL8Le2fkBzfXGo5rGICWAtoirUAt80ATwYwGndTZReeiSxI/Lc2mQe14prILopAmMC+YZBnbhMYgwYwzd0BTwbA8/6ZsCLEn47ijzeG+B0UlZyFBeauCaxFA3CbJ8CtAUzenFYDD1D2BA7+YcJCTbziD0r/CKrG1JddFLecLT4K8/bdDicK98ouij9QUFDtcW1zTroecG8Am9IGKYryqexSM5FBzbh0uC39X5AYU1t2UTxy5NxW+GiPOSPiVVW9dVy7nPmuj7s1gCmb02l2xFDZhWasj1nE7+DznOGw98wq2cXwh7lj2+4b5vpgBU2A9Bw8kCq7xIy1aZDQEW5Ke9dtCi+j8tPhf8Cao1NkF8NnsAmQO67tvjTXxy8ygMmb0mmxDx7+Y0JKg8SO8Le09yE2OlF2UbymtLQU1h38CNacfEF2Ufyl6bh2+8oNB7ozgPtw97bskjLWxYziJ06fPg3b/vwcDcC0wbH3owG84/yAOwPg9j8TMppX7wX9G8+oNHmn0Thz5gycP38efjwxDXYVLpRdHH+ZiwZQrh/AnQFQ6q9U2SVlrIfZxU9zBOYduAnsccdlF8lf9qABNHV+oJwBvLwxPVlRwPKrJzDhx+ziJ9YemQ7bz86H2ATZpfIfVYXaT7bfV5YkxNUAsvARy+VGYuTSMXkodG/wtOxi+ISKSqE2f2Fhobi/+fh8WPv7DIhJUMEWJ7t0gZwYDEADKFs+zNUAXgBFmSC7jIx10MRvrp+Uq/h/+H0WbDo+T6glvrqKEpFdwoBObhIaQJkbuxhAk69w11d2GRlr0LG2+cW/5sgM2HL8M3E7NkmF6BjZJQyYpU+231uWVNHVAKj9nyy7hIz56YbCvwINwEyQ+E+ePAnFxcXi/prDKP4TuvgTUfyxsksYFI6hAZSFXZYZwEvUAQgKdwAyAWN28ZeqJfDdoRdh96kV4piFxK+dK6i1n9I7Ai8YwC9NuuG9lbILx5ib7hYQ/4q8Z2Dv6dVCHFTtjzJ/td/lhKH7U5fv/Y5uOhvAQ3hvluyyMeYkCqIhK3UGtKjRS3ZRfILCe0n8dru9nPiJ2Kp45TfXqKV3qDACDWA23XRqAjSZibsRssvGmA8zi//PP/+EkpISKC49B98cnAAH8v9XHLOs+DVmPdV+70i64WwA3+Kuu+ySGYVacenQtHoPqBWfLmarnSk6Ajn5P8DeU6ugFEpkF88wWEX8X+4fDYfPbRGKiKNqv3XFT6xEA+hBN5ybABwCDFo22utTnoU2tW5ye/zPwv2wdP8TkHd2g+yiSoe+q0FN3oeGSXIy9/oLVfdPnTp1Qfy5TuLHK39UtOwShpxcbAKIqcHCAF78pYkNbxTLLpVsvP1B0+IRK/NehA3H/im7yNIws/ipzU81gHP247Bs/5Pw+/ntkSR+gYr/wvGX77U7DCAVv4Ec2YWSCVVlb0p/C6v9Xb1+zZbjX8Dyg0+DXS2SXfywEh9dFW5J/4epxX8Wxb8oZyTW6A5AVJQKsUmogAgRv4aahgaQqxnAhiZdQFFMmecoWPRtNAWr/QN9ft3v53bAwpwH4VTRIdmnEBYoc+/gph8bLnNvZdAQH1X7XcWvoPjjqqL4o2SXMMyoatfxHfauFgYwaUOTIYqizJVdJll0uXQMXF33Pr9ff87+JyzOHQW5Z36UfSohxczipyu/CPMtOiw6/CJa/CBiH4ZO6LD3Q90AMsYqCkyWXSgZXFF7CPRICTxenfoFVv02Ff73jzmyTykkVI2pB7dnzDW1+KkD9wu88p+zn8DqPoo/KTLFT+DXMW5Chz1THAbwKt4YI7tQ4aZFjZ4wMD24sU/bTiyBbw48I3qXrQINhd6BV/4kk2TudVBUVCSq/a7ij4rW2/xmntUXICrAVDSAxx0GEHFpwBonXQm3N/0wJAkqqF/gc72NaXYoHmJwM/OJv6CgQMzqI44X7INF2EQj8Ufr4ocIFr/OXDSAYQ4DiKggoLpVWsJdzeaFNCllQclpWJQzCvadXiP7dP2mdnxTYZJmFv9vZ7fAEmzzF5eehygbij8xsq/8TqxEA+jhMICIWQfwkrhGKP5Pw/Kjpn6B/x6eCT8ceVP2aftMw8QOcGvGHNNl7q1I/NExKsQksPidWIsGcK3DACIiCjDRVhurs7TsdHg7snb+uRy+2j/WNP0CZhX/uXPnID8/X9wuL34QqbxY/OXIRQNI0w2gqeUNgCLX7kTx10/IlPL5f5zfDQv3PWj4foFGSVfCoCbvmFr8v55aBcsPPgcqlPCVv2LQAH4tMwBKexovu0ShgqL86IqWVu1qqeWgZaYX5TwKe/TppkaDRkVuTHvddJl7KxR/HLb5q8gunWEpQAOoIgzghZ+bqrJLE0roR31ZzT6yi1EG9Qv897eZsotRjhaX9ISBJhQ/CZ8MgCDxf0PiV1n83vB0x18VyxvA9SlPwZV1h8ouxkX8enIVfIG1ASP0C7Su2R/6p042nfidc/ZvPv45fI+myld+7ykzgOfXN1Wt2Ea6ss4QuL7heNnFqJBjBftgwd4HxTi1LIz+HVWEs/g3HvtM1KqImHgVbJZtzAYPFS/5z1zhMID/QwOwWEgkXdUGpE2VXYxKoX6BL3PHQfbJFWH/bDOKn6L6SPw03EeUE38Vky/aEUbUUjSAKy1qAE2qXQuDMt4xVZV27eE3Rb9AuLINXV3v7/DXBuaK/nbN2f/jkXdh/dGPxG0Wv2+UM4DnLGQANWIbwH2tlppuGIvYe+q/ol+goORMSD+H+kX+YsB+EU+4iv/7396AjccXiNtiuS4Lpe0OB2QAzzoMYOK6pqpVcqANNFiPv6+cKNgPn+19EI4W/BqS9zer+GlSD03uIZzFH5tgrZz94aLUjrrv5DCAn5pZxgBGZ66HhLhqsosRENQvsHT/BNh+4uugvSfFQlzf6Cm4os5g2afnExcv2DEVv5dl4hiL33+EAVy1WzOAZ39splpgzTOoaqsPd6d/CdWqmdsAHPx0ZA78J29awP0CJP6B6a9By5rmytzrKv6vD0yEPae+F8fEaj0W+M3KoqQYm/5X6wbwzA/NVCu0oeKjqsOQlKVQo0YNiI21wAkh+07/CF/sewzO2//06/VmFT+l7qJqv1vxJ1k6Z39YsGNr6vlrHAawttl5W5z5Q4FpbPP2+gugelx9qFq1KsTHm/6UBCcLD8Fnex6E389n+/Q6mv+QlfqyKcXvyNlfVHIeVhx8AfaeXiuOsfiDg70QCp7vvFsLBZ6wpllOTLz5JwNRz2bL2Fugy6UPi/tVqlSBpKQkUCwQ5UT9Asv2T4StJ7706vmxKP7bm70HjZI6yC66T7iKf1HOGPjt3FaRwENU+1n8QaG4AHInXbtbmww0/vtmObEJFjAArAEUnrLBLU1mQIPENuIxm80G1atXh+hoa+R8Xv/Hx7DiwEse+wWq2C6BQRmzTSd+Ej21+d2JX6zWY41/oSEoOge5L16nG8BTq5qtiUu0RkKQgjMoejUBejWaABnVrxWPUQ2ATMAq/QK/nd0Gqw5Nh5zTP4r2sYPY6AS4rOYNcN2lI6FabD3ZxfQJ55z9hSX5sDhnLJ7nVurE0MRvkTgVo1B4Fta+1HW3lhDkye+afxtfVbVESjDq3Cg+p1X52yffAv9z6YMQpa/4kJCQAImJiZZoEhAF9tNw5Hw22EsLxWId9RJagi3KfOFw5RbsKD4OC/Y+oqft1qr9fOUPPgVnlJUvd9ulpQQb923zD6pUV4fKLlSwwOoNlBRpIq+X0Ar6Nn4eqsbWEfdjYmJEbSCKLymGoGLxR3ba7lBz/pQyd3KPXcMcNYBX8cseY6VMqfYC6ujQTqhKdHXo3Wg8pFb7i7hP4qdYAas0CcyKc87+s8UnhPhPOC/VxeIPDdRXlg9TsQbwuN4H0HysLR4mW62qRcEORdQcUKkfKRo61b0T/lL3rrImATUHaGPCj7P4tfBnLW03X/lDT2mJGAYc91KXXVMcBjAkOhbmWjGyioYGqUlQqq2DKnrGezeaAIkxNcV9qgVQbYCbBOGjIvHzgh3hgS6MuA1FA/jQYQBd8Oq/yqqJFGh4kJoE9kLtl0Upwfs0fqZsqJDET/0C1D/AhBbntN0sfjmQFrAW0PWlrru0xUGf+k/zVKwjUyyApXFtElxT/x64su4dZccpaIhGCpjQ4Cz+Q/lbYPG+J6GwNJ/FH2aKtCx0aWgAuXogUHNbabFSHFfVsqkBy6AmQeFZ3Jdov7Ym1TtDr0ZPQlx0krgfFxcnmgRWGSo0Cq7i/2LfE7xghyQKzygQFaPGvHjdLnvZ1z723y1y4qurqbILFxbQ54rPXxgqpKCZ/mmToE6VpuI+RQ1Sk4CiCJnAcU7b7U78Vhp9MgMFp5TcKddnp9HtCwawosW3cdXU7pHU+1riFDQUrcRClwYjoG1ylrhPNQBqEtB8AsZ/nMW/++RqWHFgMotfIqIGfFpZOaVndg+672wAM2MS1RFWHAnwBA2JFFOToFT7Klpe0gO6pYyG2GhN+DSjkGYWcpPAd1zFvyz3eS1tdyyKn75e/krDDvWDFZ9VZqEBjKT7Zf+CJ//T/KGoaGWWVUcCPCFGCc5rNQKiVnyaGCVIrpIu7lttQlE4cF6wo5z440ATPyMFbQRAHfHyX3fNpvsXDOC75t3w7srYCI6LEU0CSjWv0lz6KtCj0ePQ4pJu4hjVAKyUYyCUOOfs33p8Kaw8+Jq+Wg+LXzZFZ+mv2v3lbru+o1tlBjDuu+bJql05GldddhHlcqFJoN1vU6s/dE0ZCbYoLWzYSjkGQoGz+Df8sQBWH5olblPNMhJrl0aj8BSK3qbWntxt1zG6X+5X/MTyFkfjqkFyJHUEuoOaBMUUPVis3a+b0Bz6pT0P1fUpttwkuBjXBTvKiR+v+pyzXz5aByAce6VXdm3HY64G8FVMAvTlTKsaInpQ+z2LOIFejcZBRg1r5hgIBNec/euOfAQ/HJ4jbrP4jYM26gVL0QD6OR4rZwBj/93ihSgbTIjhYLgyKH2yaBLoMVJX1r0drqk/vNyEIooejNQmgav4V+XNhF+OLhS3WfzGQtRq7TBpyvXZTzseK/erHbeyRRb+PxfHVZVdVGNBVSf9yxNcmpgJ/bFJ4JhQFKk5BjyJny4iXJM0FoVnRMTlgMnds5c4HitfA/i2RTL+yEVHYIRe0Dzi3CQg8d/QeDw0rtZR3I+0HAOuOftJ/BuPLhLHYhKBc/YbDC1fJv5OY6D2lO7ZxxyPXyTzx79pkYPuncru7Z7SYn0yhT6h6Kr6d8HV9YeWHY+EHAOu4l+a8xzsPqnl7OcrvzHR2/97Xu2d3dT5cTcG0PID/AcO5X6AihFNgrPakCGRWu1K6JM6HqrYtDFUmlBEMQNWbBK4LtixNOf5MvHTjD6rLDFnNYpFmjyY+2rvncOcH7/IALAZcF9pifJ2fITHA1SKKnKrQ4nW/BU5BvqnPweXJrYS962YY8A5Zz+L31wUUPU/Wr1/So/sd5wfv8gAnvh3iww0gF9jqwJnY/UCEVvt1CTomvIAdKhzc9lxqglYYUKR64IdC/c8AYfOOhbsYPEbGaqpFp2h/5Ha9JUe2Xucj7nt6hvzdcscWzykcuSWd1BqfuoXcKTob1bjOuidOq5sQpHZcwxcJP5fncSfxBcKo6N3XudOvWFnmuuxigzgA/ynDo3l4UCvcZ1QVCOuAWRhk6BOQoa4b9YcA85pu1n85oSu/lgLmIsGMMz1mFsDeHxFy0H4gk/jqnF2Vl8hA7CfEy0CsCmx0KPRY5CZrC3OabYJReVz9p+A+btHw7GCHDFELFJ4sfgNjx7+S020W1+9fud81+PuDeDbljVKi+GorQpesDiSy2dcJxS1rtULujd8pKxJYIYJRa7in7d7FJwo0Ffr4bTdpsFeKGqm9ugYqP1Kj50nXY9X+AscvazVGqzedeZmgH+IJsE5rZOQqFOlCWQ1eQ4uiW8g7ht5QpHrgh3zdpH4D7L4TYhe/V87rc+Oa90dr9gAvm45GlRlKjcDAoOGCYu12bEix0Cv1DHQsuZfxX2qAVDnIHUSGgVn8R/HK/6C3WPhdNERFr8JcVT/lSh1zNTeO6e5e06FBjBmeUsxHMjzuANHTCg6d6FJ0LHOTdC14QOGW7TUVfzzdj0qagDU0UfhvSx+c+EIXafhv6k9d+5x9xyPv7jHlrXaiL/Rdjw5KHBEjoGzFyYU1UtoBgOwSVA9TssxQAFDVBuQ1SSgefw0n9+t+DlnvymhyT9qCWx6rc+O9hU9x7MBfN1qPKgwiYOCgofzhCIKHe6b9hSkV79S3Jc1ocg5Z3/ema2weN9EFr/JcQT/YK1twrTeO16s6Hke/7Wjv2mVgdXWX2lyB+dyCx5UC3BMKCKuqj8YOl86VEqOgXLiz98Kn2Gbn9J2U2QfL9hhXor1mBT8STWd1mvHnoqeV+m/91FsBuCzRDOAfwzBQ0woOn+hSZBatQP0TX8KksK4aCnl7qNqP0Hin6+Ln6byctpu8yKm/tK/VYVNr3uo/hOVG8DXrR4BVZkupnlaZ16LMVD1cVp9QlFizCWQlf40NKraTtwP5YQi55z9+079Hyza+xyL3yKUzU9R1FGv37BjhqfnVvpvHr28Vb3SEuUgViVscUmyT82aiBwDejryKIiG/2lwN3Sqf1vZ8WAvWuos/l0nvocl+yZBqViwA8VPIz4sflNTmC86/+xRNrX+tJ47jnl6rlf/6keXXkapXgZw7HfooCaB84SitGpXQFaTpyHeFtxFS8+ePSs2IhvF/+VeJ/FzP4/pEZ1/mrcvfr3v9hsre753BvD1ZX3wB7pUVA85UUjocOQY0CcUVY+tCzdmTIT6ic3F/UAnFDnn7N927FtYlvMKi99iFOvRp1hj7/t67+3LKnu+dwbwzWU2vDLl4M0U0RnIASEhpWyFItCaBD0aj4TL6/QvO+5PjgFn8a8/8jmsPChWhtJW6+FAL0sgIv/0Pt0oG6S91mu7vbLXeF2fHLXssmfxCjWRJgdxZGDoEU0CpwlFLWt2hRtSx/i8aCkF9lB73534RZSncaKQmQARMSbUoazAxOl9tj/nzWu8NgCsBdQrtcNB/L3ZRGQgdxSFHpcmQa34RjAw41monaDldaAmAfULVDRKQAk86MpfVKS9wbrDn8F/Dr4tblOVn5N3Wgh96A/93h4VAw1f77X9iDcv80nGj3zVeh7ubuUrR3hxbhLERMVDz8YPQ5vaPcuOkwFQJyEZAtUIaCovxfU78vUT3+6fDet//0Lc5v+f9RDDyVqE6acz+m27zdvX+WQA2AzooJYqP9OrODAovIgcA04TitrX6Qs9Gj1UtmipJ5zFz/Ec1sMp8Idm/nXE6v8Gb1/rs4SxFrAGd535KhJ+xISi886LljaBG9JGl40SuHKi4BCsPPAm7Dm5Ttxn8VsTp6v/Wrz6X+vLa303gGWts/AqtFjRawHcFxB+RI6Bggv3Gya1hvQaV0C1WG3R13PFp2D/mc2w7+R6McxHsPgtyoW2P43ODZjRZ9sSX17ul3wf/rL1Vty15lqAPFybBBVC+fsSOG23VXFc/VH/m2b239be19f7ZwBftR6CnziX+wLkQuKnf74j7ZgrYkZfFY7bsCrObX/U4tA3+m370Nf38Eu6jyxtbcMf3068mcFxAfKhHwLNKnTUBkjwFLLNwrc2ZeP+AHuUaGiJ1f9KA39c8fvajc2AIfjyuXQ7lqMDGSasiECxM/odRfXr6i9e6m8BHsZaAJQo1BfQIopjyRkmrIjRIC2+K1uJVjNn9PX96k8E1Hp/+KvWWVCqLKbbMbw+HMOEBZFkVpvQSeP+A2b0863n35mAu+8eXpL5E+46UTYrWiSShwUZJoSo+hwRbXR33RtZW68K5O0CN4AvM69TVVhNt20cX84wIUUsPaeHhStR0OWNflu/D+T9gnK9HrkkcwHubnYsGMkdggwTfETHHyX70JLJLpyZtfWWQN8zWAaQgYWiDsH4KE4awjAhgQK/9DDwAoiCzJn9t+4J8C2D12IfuTjzBXy7CXTbxmGnDBNUKNiL1poUKOokvPo/HYz3DZ4BfJmZpJYqFByUQk0AXlCCYYKDmASWXxboladEqS3x6p8fjPcOqkRHLM7MwrcUw4LUGWjj2ACGCRj7+QtJYdAGBswasNXvYT9Xgn6NHrGozVe460u3OTaAYQLDecwfWTrrxi39gvn+wTeAJW1S9HkCSYo+KgA8KsAwvqP3+qtar38+Nq1bzsrakhfMjwhJK/2hRW0ewt0sus2jAgzjH86rSSMjZt+4ZXawPyNk3XRoAqtw14Vu02zBaM4bwDBeU3Ihyw+xGsXfNRSfEzoDWNwmFVQxWUgsbSMChHhVIYapFPXC6j5EPkSpmbOztuSG4rNCOlD34Bdt7sGPeE98UJTeH8BDgwxTMare7nfkdgB1+OyBW+aE6uNCLscHv2gr1hWk29wfwDCecYr2Ixa/OXBzpev7BULoDWBR22R0tY14M4Xuc38Aw7jHpd2fB1HQ/s0Bm48F8JaVEpYKOZpAFzSBb/GmiArg+ACGKY/LeL8dldn9zRs3BzTTzxvC1iJ/4Iu2Ym1B8aGKHirM8QEMI9r7xRfG+0kfE7Hq79XafoESTgOwoQFQlGAv8cE8X4BhXOP8ieVY9e/31o2b/Urx5SthlR+aQDKoynq8mSo+3KblrOeRASYioR5/WtvhgtRzIUq9AsUf0na/M2GXHppAWzSBtaDHB3BCUSZScUrsSeSDonZ+a+DmzeEsg5Rr7/2ft70DP/pjx/1oXluAiTDEgi6Fzo+og9++afMn4S6HtMr3/QvbvYC7CY77PDzIRAouw33EpLdv3hSUBB++IrX1jSag5RLU4UxCjNUpl9lHYyGKP+Dcfv4i1wA+b5cEKnyDNzs7HmMTYKyKG/GvRQX2fvumTUHJ7uMP0vvf7/u8XT00AZo52MLxGAcKMVbDJdCHyEb1dX3npk1HZJZLugEQ9y1sl4o7WmCknuMxYQLRhigewwREaYnqKv4jqLyrUPy5sstmGIVhTaA51gTW4c0ajsdixLr2hikiw/hMqV0VE3ycOImq64Ti3yW7bISh1IU1gWtUioTSYwQIihGIijFUMRnGK0qLVTHW70Q+/pJ7vXPzph9kl82B4ZT1dzQBcDEBseQYmwBjIkpQ/HYX8ePW6x8GEj9hSFW5M4HoeDSCWEMWl2HKYS9SoaT8OL8hxU8YVlF/X+DGBGitgXjDFplhwF6gOuXwF2jiv8V44icMraZ73ZiAyCpEJmDokjMRB83qQ/E7ZfMhhPjfNaj4CcPLSDMBZSk4jQ5QctGYBIWnEjOGQEzpPaeKZJ5OnMQjfY0sfsIUEkITaI5FXQ1OcQIin0AVMgNTnAJjUdQSraffaT4/cQQf6YLiN8RQnydMo57hC9qlKqpCYcNlEYNUejFMyLECjATEGD/19KvlHs4GRe2N4s+VXT5vMJVy7v2sHdYAFJpA1Nn5cZpFGB1nqlNhTE5JoeoynVewFsV/C4pfanivL5hONfd+1p46BD8Ap1mE4kRsFC/A/QJMaKH2vv286pzFx8FC3Ia9+7eN0ib2+INp5YJGUC6fgONsKHyY+wWYUCDa+xTWq150aBIKX8p8/kAxtVLQBO7A3dvgNExIcJOACTYVVPnpan8/ij/smXyChelVMnx++7Z4GotBTzRadmLRepOAU48zAUC9+6LKX3LRoVw8OuC9QRvDmsMv2JjeAAg0gWQ8lX+CnnLc+ewo1RhPJmL8gSbziNRdF1f5l+ODd6L4w5a9N1RYRhloApRCZDyeEvULlEsnQslFormDkPES6ugrwat+6cUdffiIOgn3L6L4w5K3P9RYThLD51/eBf9/VBtIKXeiijahiGsDjCfoqk8TedSLr/p5+MsZ/N6gX0K+XFc4saQa7pl/OS1I+i7oqxKXO2GbNqGI+wYYZ0Rbv8Dt8B6xGJVy75xBv5i+yu+KJQ3AwT2fXn4P7qaDyygBQSMFUbHcLIh06EpfWuS2h5+gXv5Rc279ZY7scoYKy//80QRSQQsc6nLRwSi9k5BDiSMSCuUVnXylbg+vxm0Yij9XdjlDScT88u/+9PKH8HQng5vagOgkjOMAokiBAnqonV9a4vYwLdU57v1bf5ktu5zhIKJ+8WgCKXjKb+HNvu6OU64BCiDi/gFrQu18CuhxmbPvzFJ81gMo/jzZZQ0XEWUADu6ed3kWnvoscBkpcEALlkbHshFYBSF8bOeXFlX4FBS8OuL9235ZIrus4SYiDYBAE8CmgDIWb47B7eKlSRUtBRkNG7IRmBMSvhjWK6zwKdQDMBWfOQXFb6pJPMEiYg3AwbB5HTJw9zK4zC50JlqvEQAbgTnQr/glRR6ftRD/o0++f9uGPbKLK5OINwAHaATX4Y46CTtV9BzRRxDLnYVGRXTuFYGnNj5Bi8+M++C2DZYK6PEX/iW7gEaQBaowghYVPYeCiUTzgIcPDQEN55HwVc/BubQWHwk/4tr5nuBfsBuG/asDzSW4Q59XkFHhE7mfQBpl7Xuq5qsen7pHj9//5IPbN1gifj+YsAF4YOgFI6COwtaenkuxBNREELUC/lZDg6pd7amKX1q5lLfhC6bi/pO5LPwK4Z+ql6AZZOlG0NnjExWHEXATIVgI0dv1tr1a6dPXkvBR9FzV9wL+hfrI0H917ADa0CGNGtg8PpnNwG98FD1d4SknHwr/5w2yy24m+FfpJ0M+6VgPv7z78OZwqCCgqByKwwioE5EnIblCk3JUh+hJzpWLnqCIvffwqe98eMfPpsnEayT4ZxggaARUC+iJP+DhKGoKMbZ58zpKWaaZAe6jIrDfgNrzpdr0WxK8WuL1K8keaKWo93BbgcLn9n0ARNrPLqTc9XHHZDQBSlQ6FLd2vrxWGEG0FmNA5mC1GoK4wpdoY/U0CUf1XbabcJuL23y+2gcPi/3MjMOQjztm4Lc7CL9i6ivwyQwIGlYURuDYR5un2aCJXUukScN1jr0foOhVatuT6CM6Yi9UmOQnZW7uIjMAoFEEylBEkYZeNRNcEQYQRU0G3Ou1BCVKj0EI939S1cVN1Xhqr5dQlR5EGK7qXfvdHVQvWIfvQFmel3w0mEUfatgAwgyaAa1y3BO/espg3AVc0pkHQpkRKLpZuO7LnljBv91JueKmevHeIfwgkgsi+YZKy8CvQNGfDOq7Mx5hA5DMXR9fQbWDbkA1AxU6438kI9D3NDh0VV8LWkz+dx8NXs9XeYmwARgMNIRk3F2DW0fQ+g6oyZAsu1x+Qkk0SejUgfczbj+g4C2XWNPMsAGYAN0U2oI2QcmxUU0hVXbZdHJBu7JnO22bWezGhw3AxKAxUGciBSGl4tYYt3qg1RaS9cfj4UKQUj1wl/jEPZQowzHUlqffp/0xfaNj+0ETfh4KncfiTQobAMNEMP8PkSfu8QdFyfYAAAAASUVORK5CYII=');
    background-size: 100%;
    background-repeat: no-repeat;
    transform: translateY(-10%);
}
 
.notice.error {
    border-left-color: red;
}
 
/* Background url source: http://icons.iconarchive.com/icons/papirus-team/papirus-status/256/dialog-error-icon.png */
.notice.error:before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR42u3deXxcZb0/8M/3OefMTJJJMlmbttnaUsAWQWS7KFzvFVDZCpXSRaEtoCI/FeTelwoFlB8iiL/rCgpcxbYUKl1YWkEuKCAueLFoBUqBbkmzL5PJZPY5y/P8/khSkpiWtJ0sZ+b7fr3mBZm2k5ln+Zzneeac5wCMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4yxCUVcBNmlaeXSIpCqVUqVE1GZAkqIqJSkE5BAPgnyKEVeAvIU4AEAKGWCKEmk0koqk4AESAsrqBABvUqpHgBBCL2p7pfrI1zKHABsEjVetTBAyvMhCJoPqHqSOAZENSDUgKhiXOtVoQ9KNgFokcrZTUJ/F1LtVGT+o371k2GuHQ4AlkH7r1oSIOAsAk5XwEkAToIQNQDElHqjCkpBdZJSbxLRdqXUNlL0h5o1j3VxLXIAsLEe3VcsrRVCnQcpz4TQ/kURPkBEwpUfRkFBqX1QeAWE30vp/K5+7aYmrmUOAHZgOL/EQ8BHAXwKwKdIiA9mcb0oSLVbQT0LhecI6sXaNRvT3Ao4AHJrWH/1Yh8UXaCglgoS54PIP249TkrAcaAcB1AKUBJQAJSEUqq/ERABJPpbAwmACKRpgKaBxDgOPpSKSSl/QwpPKWBL/dqNCW4dHABZqWHlYoOILibCIgJdBKLCo+4/jgNlmlCWBWVZgG1BWSaUZUNJBxjs9EfVQmggCDSQoYMMD2AYIN0AGQbI4+kPi6POApWEYz8Doa0XUj5ds3aTxa2GA8D9R/urlhwPYDkRrQTR9CPsHVCmCZlKQZlpKDMNmU4D1hTpI5oG4fWBvF6Q1wfh84E8nv7wOLLPG1RKrRHSWVOzdvNb3Io4ANw1r1+x1CChlhDwOQjxr4dbzspxoFIpyGTiwH8hpbsKQYj+UMjPh8jLB/l8hz9SUFBQ8q8KuE9J2lC/9jEeFXAATOmjfRGU+gKR+CoEzTycI7xMpyDjcahEHDKRnVNh8uVBFPghCvIhfHmHN0JQqktK/JhIPVi3ekMPtzYOgCmjeeXSWZLU9SC6hsY4t1dSQcVjcGJRyHisf76eSzQNosAPzV8IKvCDBI01COJKqtUktO/X/nJ9I7c+DoBJPOIvrQawioiuAQ2cVjvWTh+Lum9YP26tkCD8hdAKi8YeBkpZgHhYycSddWue4iDgAJjQoX4VgJtI0LUA+d7v78t0GjIchhMJc6cfy9pBYRG0QKB/mvD+0sqRvwRwd92aDc1cgBwA46bxqsUFBKwiIW4E6JCtUzkOZDQCJxyGSqe48I6kcXp9/UFQVAQS2vuNCJJKyh9Cqbvr1m6KcelxAGTuiH/1UiLHvgKafheIqg/ZDi0LTjgEJ8xH+0yOCrSiYmglpf1fLx46CDqk49xKQvyybvUGxYXHAXCUw/3FZxLoRxDi9EMO85MJOL0hyGiUC208s8Dvh1ZaBpGXf+gckPJvkOrLdWs3/i+XGgfAYWu+akmhAu6EEF8CoB2y4weDkIk4F9pENty8fOjl5RD5BYfMZSXlfyuob9Sv3sj7GHAAjLXzL7tQkfoZiGq547sgCCoqDj0iUKoFir5Uu/pXW7nEOAAOPtxfubiUBN0LEssOVjYqnYbd3QkZ544/paYGBX7oFZUgr/fgswLL3AyhfbF+zcYQlxgHwDCNK5Z8XGi0BkQ1o7Yex4ET7IYT7uXCmsK04gC08gqQrh9sNNAupbyifs3GF7m0OADQuHKxRxB9GyT+EzTKXF8pOL0h2D1BXtV3zXBAQC8rh1ZSOurpxgpKwpE/hlI3163dlOYAyN3OP0uQeAKCPjT6PD8Ju6MdyuQ9K1zZuD1e6FXTIfIOcsqGlNuVUkvq1mzczQGQe0P+i4VG60BUzMP9LJ8WBEr6pwWjXY2oVFha1or6dY9v5QDIiaP+QkEwvkWaditG2VhTxmOw2tsBx+aek010Hca06RB+/ygZoCQceTcIt9Wt2ag4ALK18y9fHNAE1itNO/+fGoGUcLq7+Kif7csDxQHoldNG3epM2fZzCrSkfu3GPg6ALLN/5eJaIvoNhJg/+ly/Dco0uYfkQqM3PNCnzxh1bUBJ+TakvLhu7aa9HABZomHFZacKzfg1EVUNr23ADvXACfLW9Tm5NlBeAb20/J97gVSdylEL6h7e8FcOAPcf+ReQEOtBNOycUeU4sNvb+jfjYLk7JfD7oVfN+OcFQqUSUHJZ7eqNWzkA3Nr5ly9eTob2EIBhZ4XIVAp2WyuUxUN+BpBhQJ9RDeHzjcgA2Mqyv1C/btNqDgC3df4Vi6+DLu4jDL+rjhPpg93RfvTbZbMs6wkEvWo6tKIR3worSOnYN9Sv3XQfB4B7hv1fI6HdAxry+RRg93TD6QlyY2cHXxcoLYNeXjm8Zygo5di31K3ddDcHwNTv/N8kTbt96GdTUsLuaIeM8hWhbAzrAoVF0Kumj/yqUCnbvqNu7abbOQCmbOdf8jXSxD3DOr9jw2ppgUoluWWzsXcMXx6M6mqQpg8PActeVffwpu9yAEwxTSsuvw6a/tOhw35lW7Cam/lcfnZkncPjgVFdCzKMYdMB6djXZ8uaQFYEwP7ll6+Erj009DbayjRhtTT13zOPsSOl6/DU1A3bi1BBSbLsz9U+vHk1B8Aka1m5eIEU2hNDL+WVqTSslv25d7MNNj40DUZ1HYTPO3QkYJNjLapZu3kLB8AkaVi+8BShe/9ARPnDOn/zfkBy52cZJASMmvqRIRB3rNS/zVr35GscABM+7F9UD13/y9DTe1U6DbOZj/yeY47tP8U1g+xQEOaeXTwSqKmDGLrtmFKdyrLOqFv3+H4OgInq/FcuKiZD/zOI5g+d85tNjTzsB1B1x/fg//fzMvqasZd+i45vfp1HApoGT20dyPNeCCgp31KWc1b9I5vDrlvicNsbbly+iGBovwJGdH4+8rOJ4Dgwm5uGLQySEPOFgfWNV152Yf26xxUHwHgOWYS4gyAOXM+vHBtWazNg8wYebILYNqyWZhh1dQfOE1BCnE9C3AHgNg6AcdKw4vKLoIlVQ4Ze/Sf58HX8bIIpy4TV0gKjpva9MwY1bVXjisu31a/dtJUDINPz/uWXzSVNW4fBi3uUgt3eymf4sckLgVQSdlsrjJnVABGISJCmPdx45WWn1q97fA8HQKbm/Vde5oGmbwRR4MAorKsTMsbX8o/GksoVr5kNZDwGu6sT+rSBL6OIioVubGj87MIz6x990uQAyMS8XxN3kRAHtu52wmHeu49NGU64F+TzQSseOD4J+jDp+p0Avs4BcLRH/+WLPk6afuOBxE0mYXd1cKtjU4rd2QHyeA/sM0ia/h+NV172P/XrHn+RA+BI5/1XfrqENP1hDGzfrSwLVmsLb+bBpuCCgILV1gJP3az+25IRNGEYaxuvWPih+kee7OEAOKKhv34/BM08UMDtrbxfP5vCwwC7PwRq6vpvSUZULTyeewF8hgPgcIf+Ky65EJq2+EDZBruhkrziz6b4QCCZhN0ThF5eMXAUE0ubVix5tHbthmc4AMao6crLCqHpD2DgVGUZj8MJ9XDrYq7g9AQh8vIhCgoAgKDR/Y2fXTi//tEnoxwAY0lRIb5LJKoBQNk2rPY2blXMVayOtiHrAVRDun4XgK9wALyPhhWLziRdv/bA0L+D79PH3LkeYHe0w6iu6Z8JaNp1DVcsfHTWI0/+LwfAweb9n11IJLSfAP2bezh9fXzjDuZaMh6D09cHrbgYINI0w/OTxs9cckb9+i2KA2A0mlhBQpw6OPTn7/uZ6wcCXR0QBQX9UwEhToPmWQ5gLQfAyKH/FZ/2C92460DBdbYDUnILYi4fBshhUwGha3c1Lrvk8fpfbYlxAAwhNLEKRNOB/rv38Hn+LJumAjISgSgqAgTNIMO4CcCtHACDR//PXDqTdP2rwMBNPLr4br0su1jdnfD4C0BCA+n6jY3LLvlp/a+2tHMAABC6cRNAeQDgBLt51Z9l4WKADSfYA72yEiDKh2HcDOD6nA+Axs9cWku6/nmgf1NPpzfEjYVlJSccghYo7r9oyNA/37h0wffqH9vaktMBQIZxCwheoP8af8ayllKwOzth1NQCIB95PLcAuC5nA2D/8sWzSNNWAoCMxSATcW4kLKvJRBwyFoPw+0G6fnXT4gX31G7c2pibIwCSXwVpHigFO8gLfyxHlgOCXfAU+AEij/IaNwK4IecCoHHZghLS9KsBwIlGoNJ8A0+WIzOBdBpOtA9aUTFgGFc1LF7wrVkbt4ZzKgDI8FwLIj+U6l/5ZyyHOMFuaIVFIKJC4TGuBXBPzgTAvmULDNL1rwCA0xfmO/iy3BsFWFb/dQKBAMhjXN+weMEPZm3cauVEAAihLQHRDCgFm6/zZ7k6CggFBy8UmkGaWALgkZwIADI81w7O/cFHf5bLo4BoFFpREYTP8/mcCIDGZZceT5r4KBR4lx/Go4BQEFphESC0sxuXLjiu/rGt72Z1AJChXQOAZDzGK/+MRwHpNGQ8BuH3E+n61QC+kbUBsG/xJQZ0YwUA2L189GdssC94/H7AY6xsXHT+rfWbn7WyMgBIx8VEVKHSaahEgmueMQAqkYBKp0Feb6XSjQsBPJWVASB83suB/lt7McaGrAX0haFXToPm812elQHQsORiH0FcpKSEE+EAYGxkAGjlFVBCXNyw6IK8WZt/k8yqAIAQF4PIL/v6eKsvxkaSEjISgRYIFELXLgDweFYFgPAODP/7+OjP2KijgMjAmYF5eZdnVQA0XH6BhzTtfGWaUCm+vRdjo1HJBJRlQRjGhQ0LP+mZ9eRzZnaMADT93wH4nWiEa5mx9xkF6GXlfhjGxwD8NisCgHT9XACQkT6uYcYOtRQQ6QPKykEez3lZEwDC47lIplJQpsk1zNihpgGmCZlKQXg8FwD4uusDYN+Si2oBOk7Goly7jI1lFBCLQpRVzNu36Pya2ZufbXZ1AAjQeSAQBwBjYw2AGFBeQSTEuQBWuzsAfL6PKMviC38YG+s0IJ3q/zYgr+Ajrg8AJbSzZV8v1ypjhzkK0IqLz3b1GsD+RReVk6A5fJ8/xg4zAOJRaCUlc/ctOq909ubfhlwZAJJwlqaUkEm+8o+xw+o7iQSglCAYZwHY6s4pgNc4TaaSgFJco4wd1txZQaZSIJ/nNNcGgGZ4Pmzzvf4YO8JRQBxaoPQU164BKKITeOMPxo6w/yQSoNKyE1wZAPsuPzdAwEye/zN2hCOA/r5T3bDgnOJZW1/oc1UAQHpOluk08fyfsaNYBzDTpAzjQwBedlUAkMA8lUpxJTJ2NBmQSoGI5rkuALTCwGy7q41rkLGjDABRVDzbdWsAkM4xkkcAjB1dN0qloJVXznFdAChS9Xz+P2NH2Y/SKYAwy30jAMuu4QVAxo42ARRgWbWuCoDGT19QJC0zwLXHWAYywLJKGi75ROGsLc9HXREACrJWmTZx1TGWgXUAyyQIVQvgLXcEgFIVvP0XYxnqT6YJYRjlrpkCEKFUcgAwlqEASEMZRplrAgCgUtgW1xxjmWDZIKJSFwWAKlG2zRXHWCZ6U//BtMQ9AaB5SvgrQMYylQAKpOsB9wSAruVxrTGWyYPq+PSpcQkA4dherjHGMjgIcKTPNQHg2BwAjGU2AByvawIAUnIAMJbZo6qbAsDhAGAsg0gq9wSAkg7XGGMu6FPjcyagZSe5yhjLYABYVtI1AWAnEym+EoixzPYp1wRA1DStIl3nWmMsQyLm+JxbPy69tMN0HA4AxjLZp9KOawJgXyJtHpvPXwQwlil7EmnTNQGwMxYPfaq8iGuNsQzZFU/2uCYAHKggVxljmWMr5Z4AMKXiO4IylkFpR4ZcEwCLqkrDXGWMZc6SqrLww+1BdwRAr+lEkM+VxlimhCw74poRwK5EsuuMgF8RwOcDMXaUlFJqVyLd7ZoAaEymo5aUIY8QZVx9jB0dSyHYlEpFXRMAUik76chmDgDGjl7Skc1SwXZNADiA02XZHcUGnw3I2NHqNK0OqZSLAkAp+81oomtuvo9rj7GjtD0a73LgohHA8QV51p5kaj9XHWNHrzGZ3j+vIM89AfDtfa32omml73DVMXb0eiz7nV+0drknAADgtUj8XQVIAgRXIWNHRgHyb32xXeP1+uMWAI3JdF/Kkc15mqjjamTsyCQdp6kpbUZcFwDHF/jMDtPcMyvPxwHA2BFqT1u75xXkpXfGk+4KgGPzfek/90b3zcrzncPVyNiR+WM42nBcgc99AWArJPckU3/nKmTsyDUkU393FFLj9frjFgBz8rzJZ3vCO3khkLEjo6DkX8KxnZdVliZdFwD3NndaAPpijr2rUNOP5+pk7PBEbeedhmQ68l/72y3XBcCA5OuRxI6zSoo4ABg7TNujiR0AxvUeG+MaALPzvMk/hqPbzyopWsTVOXFijXsht7+W0ddMNO7lgp1gr/RGt8/N9yV3J1LuDID6PG98eyS+TQG8N8AE2v3AvYjYmd1FukjXUOvjnZ4nbv4P9Vo0/tqcPG/ctQFgSRXfHk2Eorazs0jX5nO1MjY2EdvZ8UY00fuR6sqYa6cAfwxH0wCsF0PhVy+tLOMAYGyMftcT/isA64GWLtO1ATA4Jd3WF//TpZVlV3O1MjY2r0XifwIQG+/fM+4BcFagMP5sMLzz9jk1UUNQIVctY4dmShl5Lhh++5zSotgLoYi7A8BUMhp1pL0jnnj55MKCi7h6x1+N1wOV4fU6XsGdODtiyZejjrQtqaLj/bvGPQD+2hdPALCe7go/zwEwMYiIO6yLPd3d+xwA6w/haHLc28pEfKBqr6c+IZ1pfz79hOd1Ir5pIGMHYSvV95FXd3yySNc69qfMcd9Va0J27azyGn2vRcyyf8Tivz+10L+Aq5mx0W2PxF/qtR17nj8vsj9lIisCoNTQIwDU1s7e5zkAGDu4rd29zwNQVR4jMhG/byKniscWaCLw6hknbPUKMY2rmrHhUlJ2nPnqjktijgwD2DURv3PCNu4/qTC/9/VoovC5YPjXCypLP8fVzdhw/xMMb4050jmjuKD31b44sioAArrWC6Dm8c7QUxdXll7NewQw9h4FyCc6Q1sAqHLD6J2o3zthAfByb9QGEHulL9bRmjJfrfZ5zuRqZ6xfSzL9l7/0xToBRJ8Jhu2sCwAAmFeQ17sznix8uK3ryVWzqzkAGBvwcHvPFgA4uTC/d3s0gawMgEJd9AKo3tQZevnGuukteZpWzVXPcl3CcVoe7+x5GYAsMfTeifzdExoAr/bF7XJDDwctu3RTZ+hXy2dUfI2rn+W6zZ2966OO41R5jPCLoYiTtQEAAMW6Fgxadumatu6tn5lefi2fGchyma1U35q2rl8DQKmhBztMC1kdAHuT6SiAdHPKxPM9fU9cUB5Yyc2A5arnusNPNKfMJIDUzngyOtG/X5+MDx3QtWDYdmY+1Nr12KfKipcJIt5riuUcR6nUL9q7NgBAuaH3BC0bOREANT5PMBxLTn8jmgi+1BvZfE5p8We5ObBc8/tQdPOOaDIIQM7J8wYnIwAm7arRgK7Vhm2n4gR/funjJ83dIojyuElkRsXXbkXBRz+W0deM//lldP+/O7lwM3f0T3769d0X74wlwmWG3t1j2U2T8T70ySqAmV5PV9hOlu+IJUK/DUU2frKseAU3i8zQCougl5Vn/DVZ5jwfDG/YGUuEAajZed7Onkk4+k9qALwVT6YA9AEI3Lu/bd05pUWLdKICbhos29lKxe9r6lw38GPftkg8PVnvRZ/MgpjhNTrb0lbg3UQ6vKWrd/Vl00q/zM2DZbstXaHVu5KpPgCo93k7G1OT1v8nNwDa0lYMQBRA4Q8b29dfWB5Y6NPETG4iLFslHdnyw/0d6wd+jDam0rHJfD/6ZBdIlcdo6zCt4zoty7y/peMnN9bNuIebydFxlHLFa+ai+1s6f9xpWiYA1Po8rU0TsOvPlA6ADtOKAYgAKHqgpfuFJVXlf5vh9ZzCTeXISeWO18w1rSnzbw+2dL00OPdvSpnxyX5P+lQomEqP3tZl2kVSKdyxr/X79x9fv46ING4yLFsopez/u6/5v+TASGqm12hrTVvgAADQZdpxvybCMUcGXujp2/VCT9+6c/kUYZZFftvT98hLoehuACjWtd7WtJWYCu9LnyoFVGboLTHHLAIg7mho/fmZJYXnFGhaDTcd5nYxx2m6c1/rzwdnU1Ueo7XPdsABMMT+lJnO10RXwpFV7WkrfXdj213fnlPzM76tOHP10B9Q9zS0391uWmkAKNRE17uJSfzeb6oGAAAEdK094cgyAMaG9p5tF5UFtv5LoPASbkbMrV4NR7c81hHcNvCjVeEx2qPJKdP/p1YAtKUtWW7obUHLrgOAW/Y0f//XJx9/Sr4meOcg5joJRzbfsqf5h4M/V3mM1n3JtJxK71GfaoUWtOwggFIAhU0pM3HrnuZbv39s7UP8rQBz2dDfuW1P8zeHfNUX7TCtnqn2PvWpWHjTPUZTu2l9AID4dXfvjo+XFv38ooqSL3KzYm7xTHfvf2/t7n1z4EdZ7/Psb5zkk35cEwDtppXyCepISTUDAL65t2X1KYUFH5nu85zITYtNde1p8/Vv7mlZM/hzvhDtjSkzPRXfqz5VC7HcMDpa0mYJgLyo7Thffqfh5sdOPHadIaiUmxibqiypQl96u+HmqOMMfs+XnOk1Oncnp2T/n7oB0JI2VaVHb+wy7eMAiDdiyc7vNLSu+tac6p8SwOsBbErO+7/T0LLqzViya/CpGq+ncXcyPWVPpNancoF2mXbCK6gtLVU1ADzaHnztpML8+xZWlt7AzY1NNVu6Qvc+2t7z2uDPeUK0NqfNxFR+z/pUL9S0VJ0AigYeuHl38yPH5PlO+GBh/jnc5NhU8WYs8cLNu5sfHfJUNCll51R/37obCrdE1xp7bWceAN1RSn3lncZvbT5p7vRyjzGPmx6bbEHTevv6dxput9WBa6btaR6jodO0pvx7d81ptn5NBGKOnD34nucX5JU9duLcNT5NTOcmOFz8gydDVmW2WERHOwre3M6FO0LSkW1L39i9cmc8GRqc9wd0bW/Ydvrc8P5ddZ69h2imqVTV4M9nFRfO/vkJsx/SiQq5Kb6nKZVGJMMXmxTpGmp9fPuGoWylYp/f2fC5P/VG9gw+5xPUnpKqzS2fwY0X2swdXA8AgCuml59x2+yZPxJEBjdJDoCJopSy7tjbesMjHcG/Dnk6AmC3mz6H7raCL9REQ9SRHwDgAYBH2oOvVnj0W66rqbqbvx5kE9L5AeeBls5bRnT+dJmuN/TYNjgAxlHUkXaRJvZGHHksBjr8D/d3vFigabcvn1FxB18+zMa586tH2oLf/sH+jheHPO2UGfreHstlvd+NAQAAEUcm8oVoSEg5Z3Aac+e+1me9QuQvqSq7KddDIF+IjNdsvhDc+QG1saPnnjv2tTw99OlCTTT0WHbSjZ/J1R1FJ1TYCrVDn/vu3Jpll00r+w/wSIBluP8/0Rn68Td2Nz0y9EkPUZOpVLdbP5TrO4lOVG0rNW3oc3cdU/PpRVVlN/N0gGXqyP9kZ+h739jdtGlE5+80lWpx82fLig6iE2bZCsMuErp19szzl08vv533EWBH2fmdh9u777hzb+szIzp/yFSqwe2fL2uOkDphtq1QMvS5G+qqPv5/qqd9h78iZEdCKmU92NJ12w/2t/9uROcP+zWxL2Q7igNgiigQgtJKHmMrDLuN7ZUzyk+/ZdbMezQ+WYgdBkep6J37Wr/+SPuB/fwAAAZRxK+JPb1Z0PmzKgAAwEsk0kodA2BYZz+rpGj2/cfX/8iniRnctNn7STmy/bq3G274Uzi6b8QfRQuE2BOXUmbLZ826RTIPkTCVmgMMHwl8oCCv7JfzZ/+o3GN8gJs4O5hu09r5ubf2fXXIuf0HOn++EHsSWdT5szIAAMAniCypZjtAYOjzM31G3k+Oq//miYUF53FTZyPtiCV+9+W3G29vTZupoc/rRH15gvZGney7Q2LWfk3mISJbqVkSwxcGBRG+N7d22YLKkq/yqcMMABSUfLo7fN/XdjU9PPIuyDqh10uiIS6z8/aoWf89uQBqJVAx8vll08pPvXXOzO94BJVxF8hdllShO/e1rFrf8d5OPoM0Qrej0JTNnz8nTpQRQJUEZoz8vPML8ioemD/7u1Ue4yTuCrmn3TRf/8rOhltfjyXbRw4KNKDNATqyvQxy5kw5AkoUUN+fB+8p0IT4zjE1Ky6oKPkiTwlyZcgP57lg+Berdjc/FHWckYt6UgCNEujNkX6RO3SC31aYDeCfTgy6oKJk3l3H1NxZoIla7iLZK+E47bftaVk15KYdw2YEXqK9aaXiOXRgzC0aYDjAbAD+kX9W4/PkfXduzY2nFxcuBF9HkHUH/m3h2Jab9jb9oCk56k69cYNon6WUmUuFkpONXANIAjVqlMVBAFhSVXbKTbNm3OTXtFncb9wv6cjmexpb73q0vWfbaH8ugKDef1WfyrWyyfWjXBmA2pHrAgBQ5TG8t8yeec0ny4qXE5HO3ciFh3ylnN+FIo9+e2/Lg+2mNdqteSQBTQroydUyyvlhrgB8sn9KkDfan59TWjz39jkz/7PK6zmVu5R7dKbNv39rb8v3Xgi9t2HnyOUAHWi0gWQulxPPc/tDgCQwE0DlaGUiAHyhuvLfrqupuiFfEzVcYlNXypGtD7Z0/uRnLV0vyNFH9IqAbg1osQGV6+XFATBcEfq/Khz18uFKj+H5z7qqpZdUll6jERVwcU0djlKxrd29a3/Q2L6+Y/ThPgBYBDSq/t17GQfAqDT0jwbKD1Y+c/O9/utrqq78RHlgmSDK5yKbPFKp1AuhyIZ7mzrXvR1PhA+2HED98/wWBThcahwAY+EHUAfAd7C/cFy+r+j6uukrzy0tuil0yRcAAAPUSURBVFwQ5XGRTWjHT78cjjzx4/2dq9+KJUKHmhUMLPRFudQ4AI6kfKYDmIZRvikYdFJhftk1MyqWfKI8sFAjKuFiG9ehfvSFUOSJB1s6178RTRxq9V4C6CSgXfFcnwPgKHkAVGPElYUjVXs9vhUzKy5aMq30ijxNq+Ziy5yUI1s3d4Y2rG7rerIpZb7fyn0YQAuANJccB0CmpwU1AA457/drQrt8Wum/rpxZuWC61/NROsTogR2cAmRX2tq2uq1704aO4B9izvtuxpEY6Pg83OcAGFdlAKoOtT4w6PSigrKFlaWXXlRZssAnxEwuuvdnStn1XLBv6+NdPU/9ORwbyxV5aQDtyOETejgAJqfsBoPgfe+aWaAJsbCy9NQLygPnnFxUcK5OVMxFOHxu/0Y08cKW7tDzT3X1vhZ3xrT1ljmk4/M8nwNgUoNg2lhGBABQamj6heUlpy6oLPnk/IL8jxmCinKx4GylIjtiiZef7u79/TPB8CtB07bG+E/TADoBBLnjcwBMJYGBIPCP9R8Uapq4oDxw3ImF+Wd/orz4jGJd/2C2rhkoQMVt+e5LofBftkXirzwbDL8Ztp3DuaFmHP2bdIS5qXEATGUFA0EQONwy/lBhfuC0Iv9ppxUVfPDUYv8Jfl2b79aNShQgE46z541o4vU/9Eb//loktu0f0UT48F8G4YEjfpybFgeAm+gD04PysU4PRqr1eX1nlxTOm53n/fDZJUV10z3GcV6N6gkkplhnV2lHtgct651XwrF9uxKp7a/2xd56J56MHeFLpgaG+CEAFjclDgC38w8EQQBHeUSv8Xl9ZxT568o82rF1ed7aE/35pZUeo8qviVpDiKrxrFdLqd6E4zR1m3br27Fk8N1EsqHHdHa9Gonub04N3077CDjo34qrB0CMmwwHQLaWeRH6Tyo66jAYqdrn8c4ryCsp1vXifE0EvIICBlFpiaEHygzN8Gu6lq8Jo0AXhgFhAIAFacVtaSUcacUc2+mxHKvXssOWUqG0VOGEI8N9tt23M57sbUmZmT65xhkY4vei/yIdXtTjAMi5MBh8+HLkc6cHOnsfd3oOAPYeD4DigTDwD6whZAN7YEgfHejwKa5qDgD2/rwDQTD48LqgztTAET6G/lX7OHJ81x0OAJbJ+vKhf/uy/IH/egdGDjQJHd0c6OzJgaN6cuAhuao4ANjETx88A4FgDEwfhj409J9gRAMPMaT+1UCnVUP+3xkYug99WAMd3hx4MMYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY4wxxhhjjLEM+//RL8CJNgcJZQAAAABJRU5ErkJggg==');
}
 
.notice.warning {
    border-left-color: #ff8000;
}
 
/* Background url source: http://icons.iconarchive.com/icons/papirus-team/papirus-status/256/dialog-warning-icon.png */
.notice.warning:before {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR42u2dd3gc1fX+3zszu6u2qrYl25LcJFc6pkOAUEIzCQn8HEgCDiV0YQMJxRAIEBsnccEYSCgxzQZCMNi0L6bZhO6Ouyw3SbaK1Xe1bcr9/bErLMndWpXZfT/PMw/e0bK7c+857z3nzL13AEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQkiXItgEsYXccFcqNOQD6AWJLAiRASATEumAlQQhnLCkC6pIhIQz8n+FYMEPRQQhZQhQfBBoAFAHKeshUAuJGqhqqRj8tya2MgWAdKeTlxSlA45jADEKEgMhZAEg8gDkQYjenduvshFSlgIoh7Q2QagbIeU6CH2lKJjZwN6hAJBoutumu9IhcDpUnAgLR0PiaAglD4DS034qpKwCsBoCK2DJJbDwhRg2tZq9SAEgBz2635kPKOcB1imAcjIgRkD0OGc/FFHYAuBrAIsg5SeicGope5kCQH50+LudgDwNEhdA4AJAORIiZvtFQlqbAPEhpPwIAp+JgqlBWgEFIN7C+gQIcRGk/DUUcSEgUjrvy6zwAROABKSM/MFq98ZIkCFExCxUQCjho/PwwrI+AOQ7gJgvCqf6aB0UgFgd6R2QcgwgLocQl0DA3fEPNQHLAKQOSKPtATPi+LLjJiKUiCBo7Q4HoGiAUKPQQNIPab0PiLkA3hOFU3VaDQUgBhz/ruGQuBqKMg5A38N0jrCTW0HA0gEZihxGD7lKFVCcgHCG/6u4wuIgDtO8JGoA60XAelEUTF9LK6IA2Mzp73QAYiyEuB5S/OSQc3ppAVYg4vDB8L/3CNltYFqKC1ASdh+Hnk5ISOt7SMyCkG+IgmmMCigAPTq3TwXwBwgxHkL0P7QRPgSYfsCKHLGI4gKUJEBJjEQJh2B+UlZDyieg4F9iyNRaWhsFoOc4/oa7BkETRQCugxDug3Z6yweYzYDps+EI32E1ANQkQE0Oi8LBioGUzYCcDUWdKgb/bRutjwLQjSP+3bkQ8n4I5TqgZVotnf7w0oVkQDsUMZA6hPIyLP9jouBJCgEFoCtz/LtyAHEvhLgRQMIB/wcrBBgewPTQ6Q8qMkgBNHc4TThwlSAIWP+GxGRROLWM7UcB6MwRPxmQ90OICRAicf9vtsIOb3jC+T05DOt0hoVAdR+4gCilH5DTATlZFEzzsvEoAFEc8e8WkPK3EGIShMjd/2hvAGZj2PE52kfPTFU3oKUBiuNAvVUJ03oAivi3KJgq2XYUgA6O+nedAkXMAMSJ+3f8AKA3AlYzG61TM4QkwJEevq243/6wlkHI20TBtG/ZaBSAwxj173QD4jEI5VYA6v4dvz52b931WCFIALQMQN1vJmZBWs8C8h5RMI37GFAADtL5t/7pYpjW0xAin45vByHIBNSE/dUHyqGIW8Xgvy9gg1EA9hfuZwJ4Eopy5T7bxgoBei0dv0emBpnhqcj76F5I87+Q4iZROLWODUYBaO/8P4VQXoRA3t7fYIZHfJORZI9GdYeFYF8LlKSsgJS/FYVTP2NjUQAgi+90QlEehRB37TXXlxIwGgGjAazq28istYzwXYO9TyqyIK0nIK37ROH0IAUgXp2/5M5BgDIPQhyz1zeYAUCv4X1821q3E3D02nd9QMoVkNZYUThtEwUg7px/whgI9RVApO35RwvQ6xjux0xakBpJC5S9iUADpHGNKJyxgAIQF45fpEA6HoKiPIC9baxp+oDQLoR30CGxY+kq4OgdXoC0h1HAAszJAB4UBdMkBSBWnX/TnekQylwIcSFHfUYDe9qA+REkxorCaY0UgNjL9/MB5QMIMWqPP1qB8Kgvud9EfFi9Bjj77H02obTWQ8oxonDaZgpAzIz8E0ZDqO9CiJx2oV+4um/wtnBcomUCWvqeXiBlFQQuFUP+8T0FwPYj/4RLIdS5gEjeI+QPVYfX55P4RUkKRwPtUwIpfYC8UhRMXUABsG/OfzUU9QUAWtuQPxh2fob85MeUIHtv+w8YsIw/iMLpsykA9sv5b4ZQZ6F9pd/wAvoudHy7bBJzruDoFd5/oG2aaEEad4jC6bMoAPZx/j9CqFPaXJ8EYNSHD0L2WRdID9cGRHsZMCeKwmmTKQA93vnv+jOE8nBb55eAXh3ei4+QA9YFkiN1AdFeBB4RhdMepgD0XOf/I4TSbuQ3gVBlOO8n5KBFwAU4c9ovKpKwjPtF4fTHKQA9M+d/qq3zG0CwgsU+cpje4QBcfcNFwtYiYJpFYui0WRSAnuL8myaMg9BeaPMYbUsHQhU96PFZxJ4eogHOvu33IrRgmdeLwmmzKQDd7fxbx18KU5sH0SpWs0LhkZ/z+UlUUMORQNvNRgzAvFwMmTafAtBtI//44yG0LyBEUlvn3wmu3SdRLgoArn5tRUDKZkjjLFE4YykFoOvD/oEQ6jdtpvdy5AcAlJQbqGuKrgBmpiooyNUoAnuKQBWkcZIonLGdAtB1I38ahPZVm4U9lh4Z+Rn2P/x8ExatiO4mJmcd68TD16cyENhbOiDlWkj9dFH4RIPdrkazn/NPEID62h7OH6Lzk67ADBeXnf12FwaFGAVFnSs3jb9YFM6QFIBOjVnEI23W87fc55d0ftJVo1DE5lz9ds8TkOqFEHgEwIMUgE4b/e+8BEK9f/cJK+L8vM9PutoY9bDtOfu2Wkmo3i833blEFE5bQAGIft5fCEV5BS2Le6SMLOflDD/STbSsKnVmh6cNCygQysty0/jRonBGCQUgWs6/cbwTQvsPINJ/PKnXci3/PggZli0+MzZEwBe2RWevlhw1DUJ7QxYXnSKGzgxRAKKBqkxqs3W34eHefaTnYDYBhhPQIndJhDgOQn0MwJ8oAB0O/Sf8FEKdsLuxA5H1/IT0IPSa8HMIWp5BoGh3yuIJ/yeGTv+MAnC4zl9yRwagvrw77zeAUBWNjfRQEagClP4ti4dUKOpLsrjoGDF0Zi0F4LAUQH0Giugf/reMOD9v95Geaq9mpCjYN1IUFLmA40kAV1EADnn0v/1iCPX/7c7761nxJz0fKxC2VUdm+LWq/Fpu/eMcMejv71MADjrvv8MNOP6JlqnKpj/ycE5CbIDRACiJgJoIAAKmfEaWFI0SBTM9FICDQn08HD61CqsIsVU9oBpQcsMzBYXIg6VNAnA7BeCAo//4U6CoN/54gs/pI7atB+wCXJHFqopysyweP0cMnfEtBWCfzl8kILSZAMITrA0PJ/sQG9cDfGEb1twAhApFmymLbz9JDH1SUgD2/nOugRCjw2pghGdYEWLrVKA2/ETicCpwAhT1agAvUQDaj/7FRSkQyqTdDVcD7upDYiAMCE9cc7bsW6NNksW3vyWGPumlALRG0e6HEH3Dob8XMBn6kxjB9AGmF1BTACH6QdHuBfAABWD36N8fUMaHX1gM/UlspgJKUnjpsFAnyOLbnhJDZ1VQAABAUe+FEInh0b8erPqTmEOakQlCWQBEEoTjPgBFcS8AsrgoH9BuCKdLIcBopLGQ2MRoBFR3eD9BRbtBFt/2NzF0Vnl8RwBCnQgB149hEiGxngq4+gJAAoRjIoCb41YA5OY7BwHqOADhQonlp4GQ2Mbyh21dTQKEdq1cf8sUMeLpbfEZAVhyPBQ4w0/vraNxkDiJAuoiBUE4oTknALgj7gRAbro9A0K9Njz6NwMyRMMg8YEMhW8LaimA0H4vN976kBj2VENcCQCg3QghUiAlYHD0J3GGUQeoyYAQbijOGwFMiRsBkMW3OyDU8Moo08Mn+JI4jAKMsO1rqYBQi2TxrdPE0Kf0uBAACDEWQvQLj/5c50/iNQpoCN8WFKIfoIwF8GqcCIDjxt25P0d/Es9RQHO4FqA4b4gLAZDFtw0HlNMgwdGfEKMhvEYAyhmy+NZhYuhTG2M7AhDadRAQMH2s/BMiQ+F9A9QkAUW7FsA9MSsAsvhWB4R2TVj5OOWXkB99QU0C4BgnN97ygBj2tB6TAgAoYyBEb1ghzvojpAXLH14Hozj7QIiLAbwTmwIgnFeEFY+P9SKkbRTgAZxZgJp4RUwKgNx4awIUcQmkFZ4FRQjZjekBZAYAMUZuvClRDPunP6YEAEKMAUQKTA+41Rche+QBkVuCbjegXgTgrRgTANcVP4Y6hJC9RwGaG1BdV8SUAMgNNzuhKBfC0gHJx3sRsvcgIABYBiC0i+WGPzjF8GdDMSEAEOrZAFKY+xNyoCjACzjSU6BoZwL4ODYEQFHP/fHiCCH7TwMc6QC082JHAITjElhBQOrsYEL2my/rkTkBjosA/Mn2AiCLb82HEMNgNLNzCTmoKKAZcGSMlBtvyhPD/llm7whA4jwgMvefEHKwAiAAcS6A2fYWANV5KiyDC38IOehBMxS+G6Aknmp/AYB6BixO/SXkkLCaATX1DFvXAOT6W3oBYgjDf0IONQ3wAVpaodx4faYY9nydLQUAijwdkAqsADuUkEOKAAKAlAqk43QAC2wqANoJ4Zl/kh1KyKHFz+FZs4rjBPsKgHAex40/CDncNCAAaKnH27YGAIgjGP4TcrhpgB9A2hG2FABZfF06gP4UAEI6UAcAcuX6a9PEiH832koAIB3HQoYE839COlIH0AWE4xgAi22WAoiRsLj0l5CORQFBQIiR9hMAR+pgBKvZgYR0VADUlMG2qwHAMgoYARDS0SwgCCiZQ+wnAMBAzv8npKMDaQgABtlPAKSRxwIgIR12JECa+bYSALn2xlRIPZ2dR0g0HErPkMU3uMXQ5zy2EABoMh9SF+w5QqIiAAIS+QDW2kMAJHpz+y9ColUH0AGh9bJTDSCTAkBI1CIAQGhZ9hEAgUxIgx1HSLQEAEmZ9hEAKTIgTXYcIVHxJxMAMuwjAIqawVuAhERNAQCo6fYRAKEkstMIiaZPqYn2EQBYLvYYIVH1qQT7CIBpUAAIia5TuewjAJAUAEJsEFV30l0ApgCE2MGnOisCYIcREt0IADYSgJCfHUZINNH9thEAywgGFC4FIiR6PqUHA7YRgEZPQM9IdbLXCIkSDY1B3TYCsLM6YFIACIke5ZU+0zYCsHGbNzSqIJW9RkiUWL+lKWQbAVi+rq7ul+f2Y68REiV+KGmstY0A6IasYZcREj0MA/YRgGDIqmOXERI9AkGjzjYCcN2vBjawywiJHjdcPqhh5pzN9hCAmvpgE7uMkOixq5N8qlME4IfixuqzTugthRCcDkRIB5FSyjWbGnfZRgBKSps9uiHrnA6Rxe4jpGOEDFlTUubz2EYALEsaXp9RlpnmpAAQ0kGafUaZtDpnl91OEQDTlGZFTaAyM42zAQnpKDuq/ZWmnQTAMKWxZE199aghnA1ISEf5dmVdtWHaSACOHpamr9/ctJ1dR0jH2VTq3X7siHT7CEDR5FXG7y8buIFdR0jHqa4Lbvj77GL7CAAAfLW8ZqOUsISAwi4k5PCQEtaXy2uKO+vzO00Aird7G/1BoywpQRvAbiTk8PAFjNLNZc1NthOAo4elhcoq/CXDBrkpAIQcJqUVvk3HDk8LrtjQaC8BOKIgNfjxN1Vbhg1yn8NuJOTwWPhV1dajhtlQAHRT+tdv8SxnFxJy+Gzc5l1umDLQWZ/faQIwYrDb/+ZHO9axEEjI4SGltD77fte6cT/P99tOAP7y9HodQGNTs16cluIYzu4k5NBo9BobNm71NN03Y61uOwGI4P9uVd2a80/LpgAQcoh8s6puDYBOfcZGpwrA8EFu/0dfVa04/7Tsy9mdXUdOpsCgvtH/TNK1fPx11YpRBan+tSVN9hSAwgEpzV+vrFsipeTeAF3IJaeqOO2I6D5KKiNVZcN2bf4vv1pes3TEYHezbQUgpFvN3/5QW9fo1delu52j2K2EHBz1Tcaa79fU159zch+vbVOAj76qCgLQFyyq/O7qMfkUAEIOkgWfl38PQJ/8/MaQbQUggvd/S3d9efWY/GvZrYQcHP9bVvclAG9nf0+nC8D5p2Y3/3fhjnVPPXCsx+lQ3OxaQvZPMGQ2zftkx/oxZ/X1vruowt4CENJNT4NHN5ava1h88tGZl7B7O5/8vsnIy5FR/UzWcLuOZevqFzd4dEM3LE9nf1enC8CiJTU+APprH5QtpAB0DZoqANBh7cprH5Z/BED/vy+r/J39XV1iJYP6Jw30+o3sHZ9dvNChKdwnjJB9oBtWY7+z3/9ZuttZWVLq7fRdtbqiCIj+2YmNXy6vzfp+dd2i047tdSm7mZC98+0PtZ/X1IeMY4enN5WUdnoNsGsEoE+mqwmAfPW9soUUAEL2zZz3yhYCkP2zE7vk6VpdmSgOdSdp6VX/u2RBokvNZlcT0hZfwKzse+b7P29q1hsAFHfFd2pddXEnHZVR/90P9e55H+949zeX5F/P7iakLW8tLF/Q1KybZ53Qq37RkhrElABkpbnqAeS9+M72d666OO9aIQT3CCAkgpTSemn+9vkAZE6vhPqu+t6uvlc0FIB7y0cXPDmof/Ip7HZCwmwp93415IKP7gDQBGBTV32v1pUXeezwtPoVGxrdM1/d/Pb0e46iABASYeacLfMB4NRjMuu/XlmHmBSANLejHkDu7Le3LX6saGR5cqKWy64n8U6z3yh/8Z1tiwFYWenO+q787i4VgEVLaozsLFdDVW0w84V5214r+k3BH9n9JN7597xtcxs9upmbndjw7qJKsyu/u8vni44Y7Hav3+IZOjg3OXHDe+e/z5mBJJ7RDatx+CUfXbKl3Oc/dkR68Yr1DZ6u/H6tqy94/RaPB0BwS3kz5n2yc97YC3LH0QxIvPLWxzvnbSn3+QEEutr5uyUCAICsdGdObUOo/wlHZvT6Zs7Z81VFuGgKJN4wTRk4+arPf7F0bX1NdpZrR1VtsLKrf4PWHRc+qH9yTW1DqO+S1fU1Hyyu/O+Ys/v+huZA4o33v6j879K19TUArBGD3TVVtcEu/w3dtmY0K92ZX9sQ6j16ZEbmt6+fPV9VRCJNIjr8Y64XX6+O7k5Spx7pxN1XpbBxozX6W9J/wtjPxqxY39DQJ8u1q7o2WNodv0PrrgYY0C+purYh1Gvpuvq6tz/d+Z/Lz+t/Dc0iOnh9FuqarKh/Joke8z7Z8caK9Q0NAOSwge6q6m4Y/btVAJavawgAaASQ/sgz61/5+dl9L3doSjJNg8Q6umE1P/LMhlciLxv/t6wm2F2/RevOhsjvm1hVWuFPX13c2PDqe6Wzf/+LgbfRPEisM+e90tlrNjU2AkDhgJSqTdu9iEsBKK3wewF4ALgfnLlu7tgL8i5LSlD700RIrOILGOUTZ66dG3np2bTd6+3O36N1d4PkZifuLK/yD9tR7Q9NfnbjzEeLRk6hmXQM05K2+Mx45LF/bXxiZ3UgBABD8pJ3bC5rRlwLQHmV34vwCqjUSc9v+PT6ywcuG9Av6XiaCgUg1ti+s3nZlBc2ft6S+28ua27u7t+k9YSG6ds7YWfFrkCqZUkUTV459Z2Zp7wihODD6EjMIKU0bvvryn9YESEd2C9p57adPlAAAFTsCjSnpmgNTV4jfcHnFcXzP6945Rc/7TeOZkNihbc/3fnqe4srNwFARqqjfttOn68n/C6tpzRQn0xXeZPXSAWgFE1a+dy5J/c5JyVJy6PpELvjaTZKxz++6rnISys3O3FHfZMOCkArSkqbgylJWrXXZ+SUVfqDd/39h0n//PNxTwvBJ1wQO4f+kHdP/WFyWaU/CABpbkf16k1NwZ7y+7Se1FhZac4Kr8/IAuB49s2tS668MG/BWSf2/jnNiNiVz5fsmv/sf7YuibzUc3q5Kho9OigAe2F7hc/KznLtrKoNDgCA6x9aNnXVW+cen5zEnYOI/fD6jLIbH1o+veV1Xk7ijo1bvT1qTrXW0xqtqjZYAyATgHtzWbPvhoeXPzBnygkv8K4AsVfoL82bH13x55Iyb8utPk9Zpb+2p/1OrSc2Xn5OYmlppX8EAOW1D8rWjDmr73NXXpR3E82K2IXXPyx/9tV3S1dHXlqFA1K2d+eUX1sJQGmlP5CUoFb6AmY/ALj50ZWzTz8u69S8nKSjaFqkp1Na4Vt186MrXmx5nZKkVWza7g32xN+q9dRGzM5yVW7d4csAkNjoCZm/Gv/tfV++ctYrToeSSRMjPZWQbtX9avy39zV69JbNPf0D+iVWrS3xgAJwCGzd4ZP9+iRs21kdGAZAWbKmvmrClB/unzXx6KdYDyA9Ne+fMGXV/UvX1le3nBqUm7RtbYmnx86j1npyg+6sDvgSXMrOQNDKBYCnX9+89KSjMmZdfemAO2hupKfxyntlTz79+palLa+TE9UdW8t7xow/WwoAAASCVhWA1MiB6x5c/urIIe4jRo/KPIcmR3oKS9bUfXr9g8vmtDrlafabVT39d2t2aNzeGc5tu+pDIwFohmnJKyZ899C3c3/aN7uXayRNj3Q3VbWB9WPv+u5h3fhxyaSRm52wtbwq0ON/u22m2aamaOlNXmNwy28+bmR61pcvn/ViYoLalybYlg+/bsLWndGdbTaonwMXnspnuLTHFzB2nv67xeNWrG9oeaCfzEp3bq5tCDXa4ffbap69y6n0D4asnJbX553SZ/AHz5z2gqYpbpribraUexHtxSYZqQ4MzuWuwK0xDMt78S1fX7/w66qSlnOJLrXCHzR32uUa7LjQprClHgAAt101+KQn7j1mhqIIB02SAtBVWFLqRX9ddcdTr2/+vtXpLn20d9zUAFqT5nZsbfToIwA4AWDW3C3f5fRKmHj/DcMn8/Yg6QqklObjz22c2M75g30yXVur64KgAHQijR7dyEh1bK5v0ocCUAHggZnrPnMnaw/fflXhI1w+TDrX+SFnvbbl0Ykz137W6rSZneXaXFUbNOx2PZodO6G+SfclJ6pbm/3mkJY05o7JP3yY4NSSbrh80L3xLgKJLg1mcvQ/k84P+fxb26YUTVr5XuvTaW7H1qraoN+O12RrR3FoorduyPzW52Y/dvyV434x8E67Xxvpef7/0vztT4ybuPTV1iddTqU0GLJ22fWibO8kDk3k6obMbn3u+b8c98trfznoPqYDJFoj/4vzt/3t2geWvdnO+auCIavcztcWEw7i0MQg3ZBtFgnNuPfoC4t+M+RhFgZJx5xfmrPmbH6k6PFV77dxfodSF9StrXa/vpgZIR2aGKwbMqP1uUduH/nTiTcM/ytvEZLDwZJSf/y5jQ9OnLn2k3bO35Caom3ZVR+SFIAegjtZE4GgWaAbss10tduvKjhx+j1HTVFVwclC5KAxTekZP2XVn2bN3byk9XmnQ2lKTdFKamLA+WNKAAAgwakogZBVAKCNs59/avbgd548ZUaiS+1H0yYHwhcwKy67/es7Fn5TvaXdnzzuJK3E4zNi5lnpMVckczkVJRiyhqDVbEEAOGZ4WtaH/zx9Rk6vhBE0cbIvKmr86y666avxKzc01rV3/pQktcTrM61Yut6YrJInJagiqFuDTVOmtz4/sF9S4pvTT/7z6FEZ59HUSXuWrWv45Ffjv3l4+05fm2V8Dk00Jidqmxs8esw9IDFmb5MlOBWhG3KQabUtDKqKwIuTRl/5m4vzxvMOAQEAKaX12ofls665b+nLRrsBXtNEfaJL3eppNmLy6agxf59cUZBvWejd/vxNYwePfuKeo//qdCpZdIH4JaRbdeMfX3X/M2/s3snnR+dXxS7DlKWxfP1xMVFGEcixJPq1v97jRqb3nv/kqY/nZiceTVeIP8qqfKsuH//dA9+vrqtoHxSoqthpmrIy1tsgbmbKCYEMKTEQgNL6vDtZU559+Lhrxl6QexNTgrgJ+c23Pt7x/PUPLX+h0aO3L+pZioJtloX6uPCLeOp4hyZSdEMOBrDHxKCxF+SOfP4vxz+Wkqzl00ViF6/PqLj50RX3t3poR2v0RJey2R+0muNmYIw3A1AVOEwLgwHssbvF4LzkxBceOX7CWSf0vgxcTBRzA//iZTXzr3tw6bTNpc1726m32eUQW4K6DMVTo8SlkasqhGUhT8o9i4MAcMPlg47/xx+Pujc1WRtEv7E/zX6j7J6pqyc99fqWJXv7u6KgxqEppcGQJeOtbeJ9lMsCkN++LgAAuTmJrhn3HHXdL8/tf7UQgovhbZrrz/+8Yk7RpJX/Kqv0722rHksIlEqJ2nhto7gPcxUFCVY4JUjc299/fnbfwlkTj7krNydpNF3KPpRX+Zff+tiKvy34vKJkH2/xOTSxTTekP57biXkuAEVAWBL9AfTZW5soisC91w09674bht+RkqTlscV6Lr6AuWPy8xtmTnp246fW3iN6KQR2qaooNwwp4729KABtGyNVAgOxl7sEANC3T4JzUtGoX/9uTP51qqoks8V6DoYpvXPeK33pgZlr55ZX+fe1M6euCGyzJJrYYhSAfaEC6A+g177a54jC1JSHbhn5u8vO6XelqogkNln3YVkysGBRxRt/eXr9Kys3NDTsqxwgBGoBlEsJk61GATgYUgAMAJCwrzccNSwt9S+3jBp36dk5VyiKSGSTdanjBz/8snLeQ7PWzV62rqFuP28NRAp9HrYaBeBw2qcvgGzs5U5BCycemZF197hhYy87p+9lmqZksNk6M9S3PAs+r5w35fkNc79fU7+/6r0FoEoRqLAkJFuOAtARnAByAezXuQf2S0oY/7vCS66/fOBvkxO1XDZb9PAFzB2z397+xvSXi9/eXNZ8oMp9gwDKJRBky1EAop0W5AHYb96fluJQr/3VwJ/c8duCS/Nzkk4TYt/RA9k3UsLaucu/ZPrLm9587s1tXzQ16wfajMMHoBxguE8B6FyyAOTsrz7Qwpmje2VdfemAX1x5Ud6liQlqfzbdgQmGzOq3PtmxYPa87e988m31wazICwKoAOJ3Qg8FoHvarkUIXAd6sztZU66+dMDoKy7IPee0ozPP1TQljU24G9O0PEvW1H/66id+qQsAAAK8SURBVLulC19aULrUe3D77oVaOT7zfApAtwpB9sFEBADQO8Op/fqivNFXXZT3s+NHZpzpcCip8dhwhmE1LV1bv/j1D8sXvfFh2deVtcGDfaRxEEAVgBo6PgWgJ5EeEYKDfo52utuhXPGz/sNOPDLrjF+e2++kjFTnkbFaM5AS0tOsb3xvceU3Xyzb9fV/F+5YXdsQOpQHajYDqATQQFOjAPRkkiNCkH6obXzy0ZnpZxzX64SfnND7yDOOzToiNcUxSgio9nR4aXl8Rsn3q+tXLfyqavkXy2qWfPdD3aE6r4w4fFVEAAgFwDZokfSg18GmB+0pyEtJOP+0PiOHD3Yf97NTswfk5iQOS3RpA3talCAlZCBoVlTWBjd8+l3VltUbm1YsWrZr7Q8bGr2H+ZGBSIhfB0CnKVEA7E5KRAjSgY6N6EPyUhLOHN1rQJ8s19DC/JT80UdkZPbvk5DjTnbkOx1KTmf2q25Y9Z5mo7SqNrBjxbqGmtUlTVurawPFi5fUbt9c7g108ONNAPUIF/W8NBkKQKy2eSrCk4o6LAbtGdQ/2XXMiLSMrFRnWnKSlu5yKulOh5LZOz0hvU+W05Ga4lBTEjVHcorqcDkUBwAEdUtv9pq612/oTV7drK4N6bsaAg0h3aoLhqyGZp/RUNsUaly5vrF+647maE+uMSMhfj2AJrCoRwGIQzFoORLi5LqDEWdvpNNTAMhunADSImKQEqkhxAJGJKT3RBw+wK6mAJAD44oIQcvhskGfycgI70W4at8MwM+upACQ6PRXAsLblyVF/uuKRA6iGxw9FHF2f2RU90cOi11FASBdnz44I4LgiKQPrQ8V4SXNInIorfpfRpxWtvq3GQndWx96xOFDkYMQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGERJn/D0LnXZx+nbGWAAAAAElFTkSuQmCC');
}
 
.notice.show {
    opacity: 1;
}
 
.notice.hide {
    opacity: 0;
} /* http://programmingnotes.org/ */

4. More Examples

Below are more examples demonstrating the use of ‘Notice.js‘. Don’t forget to include the module when running the examples!





		
		
			More Examples
			
XHTML
			
			<!-- 
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 31, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Notification.html
//    Description: Demonstrates how to display a notification div message to 
//      the page with icons.
// ============================================================================ 
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Notification Display Demo</title>

<style>
.button {
    padding: 8px;
    background-color: #d2d2d2;
    height:100%;
    text-align:center;
    text-decoration:none;
    color:black;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    border-radius: 15px;
    cursor: pointer;
}

.button:hover {
    background-color:#bdbdbd;
}

.buttonSection {
    border-top: 1px solid #a3a3a3;
    border-bottom: 1px solid #a3a3a3;
    padding:8px;
    margin-bottom:10px;
    text-align:center;
    margin-top: 10px;
}
    
.inline {
    display:inline-block;
}

.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}   
</style>


<!-- // Include module -->
<link type="text/css" rel="stylesheet" href="./Notice.css">
<script type="text/javascript" src="./Notice.js"></script>

</head>

<body>
<div class="main">
    <div class="notice-message notice hide"></div>
    
    <br />
    <div class="notice"> Success </div> <br />
    <div class="notice warning"> Warning </div> <br />
    <div class="notice error"> Error </div> <br />
  
    <div class="buttonSection">
        <div id="btnSuccessMessage" class="inline button">
            Success Message
        </div>
        
        <div id="btnWarningMessage" class="inline button">
            Warning Message
        </div>

        <div id="btnErrorMessage" class="inline button">
            Error Message
        </div>  
        
        <div style="margin-top: 5px;">
            Click a button to see the different message styles!
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(eventLoaded) {

    document.querySelector('#btnSuccessMessage').addEventListener('click', (e) => {
        Notice.display(document.querySelector('.notice-message'), 'Success!', Notice.type.success);
    });
    
    document.querySelector('#btnWarningMessage').addEventListener('click', (e) => {
        Notice.display(document.querySelector('.notice-message'), 'Warning!', Notice.type.warning);
    });  

    document.querySelector('#btnErrorMessage').addEventListener('click', (e) => {
        Notice.display(document.querySelector('.notice-message'), 'Error!', Notice.type.error);
    });     
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
				
						<!-- 
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 31, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Notification.html
//    Description: Demonstrates how to display a notification div message to 
//      the page with icons.
// ============================================================================ 
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Notification Display Demo</title>
 
<style>
.button {
    padding: 8px;
    background-color: #d2d2d2;
    height:100%;
    text-align:center;
    text-decoration:none;
    color:black;
 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 
    border-radius: 15px;
    cursor: pointer;
}
 
.button:hover {
    background-color:#bdbdbd;
}
 
.buttonSection {
    border-top: 1px solid #a3a3a3;
    border-bottom: 1px solid #a3a3a3;
    padding:8px;
    margin-bottom:10px;
    text-align:center;
    margin-top: 10px;
}
    
.inline {
    display:inline-block;
}
 
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}   
</style>
 
 
<!-- // Include module -->
<link type="text/css" rel="stylesheet" href="./Notice.css">
<script type="text/javascript" src="./Notice.js"></script>
 
</head>
 
<body>
<div class="main">
    <div class="notice-message notice hide"></div>
    
    <br />
    <div class="notice"> Success </div> <br />
    <div class="notice warning"> Warning </div> <br />
    <div class="notice error"> Error </div> <br />
  
    <div class="buttonSection">
        <div id="btnSuccessMessage" class="inline button">
            Success Message
        </div>
        
        <div id="btnWarningMessage" class="inline button">
            Warning Message
        </div>
 
        <div id="btnErrorMessage" class="inline button">
            Error Message
        </div>  
        
        <div style="margin-top: 5px;">
            Click a button to see the different message styles!
        </div>
    </div>
</div>
 
<script>
document.addEventListener('DOMContentLoaded', function(eventLoaded) {
 
    document.querySelector('#btnSuccessMessage').addEventListener('click', (e) => {
        Notice.display(document.querySelector('.notice-message'), 'Success!', Notice.type.success);
    });
    
    document.querySelector('#btnWarningMessage').addEventListener('click', (e) => {
        Notice.display(document.querySelector('.notice-message'), 'Warning!', Notice.type.warning);
    });  
 
    document.querySelector('#btnErrorMessage').addEventListener('click', (e) => {
        Notice.display(document.querySelector('.notice-message'), 'Error!', Notice.type.error);
    });     
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || How To Get All Unique Values In An Array & Remove Duplicates Using Vanilla JavaScript

October 19, 2020 admin No comments

The following is a module with functions which demonstrates how to get all distinct values in an array & remove duplicates from a simple and object array.

The functions on this page allows for an optional selector function as a parameter, which makes them general enough to work on arrays of any type.

1. Simple Array

The example below demonstrates the use of ‘Utils.arrayUnique‘ to get unique values from a simple array.





		
		
			1. Simple Array
			
JavaScript
			
			// Simple Array

<script>
(() => {
    // Simple array
    let fruits = [
        'apple',
        'orange',
        'apple',
        'watermelon',
        'apple',
        'peach',
        'orange',
        'watermelon',
        'grape'
    ];
    // Get unique items from an array
    let result = Utils.arrayUnique(fruits);
    result.forEach(item => {
        console.log(item);
    });  
})();
</script>

// expected output:
/*
    apple 
    orange 
    watermelon 
    peach 
    grape
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
				
						// Simple Array
 
<script>
(() => {
    // Simple array
    let fruits = [
        'apple',
        'orange',
        'apple',
        'watermelon',
        'apple',
        'peach',
        'orange',
        'watermelon',
        'grape'
    ];
    // Get unique items from an array
    let result = Utils.arrayUnique(fruits);
    result.forEach(item => {
        console.log(item);
    });  
})();
</script>
 
// expected output:
/*
    apple 
    orange 
    watermelon 
    peach 
    grape
*/

2. Object Array

The example below demonstrates the use of ‘Utils.arrayUnique‘ to get unique values from an object array.

In this example, a selector is used, which extracts the value to be used in the evaluation.





		
		
			2. Object Array
			
JavaScript
			
			// Object Array

<script>
(() => {
    // Object array
    let products = [{
            'id': 1,
            'title':
            'iPad 4 Mini',
            'price': 500.01,
            'inventory': 2,
            'categories': ['Electronics'],
        }, {
            'id': 2,
            'title': 'H&M T-Shirt White',
            'price': 10.99,
            'inventory': 10,
            'categories': ['Clothing'],
        }, {
            'id': 3,
            'title': 'Charli XCX - Sucker CD',
            'price': 19.99,
            'inventory': 5,
            'categories': ['Music', 'Electronics']
        }
    ];
    // Get unique items from an object array
    let result = Utils.arrayUnique(products, (product) => product.categories);
    result.forEach(item => {
        console.log(item);
    });
})();
</script>

// expected output:
/*
    Electronics  
    Clothing  
    Music
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
				
						// Object Array
 
<script>
(() => {
    // Object array
    let products = [{
            'id': 1,
            'title':
            'iPad 4 Mini',
            'price': 500.01,
            'inventory': 2,
            'categories': ['Electronics'],
        }, {
            'id': 2,
            'title': 'H&M T-Shirt White',
            'price': 10.99,
            'inventory': 10,
            'categories': ['Clothing'],
        }, {
            'id': 3,
            'title': 'Charli XCX - Sucker CD',
            'price': 19.99,
            'inventory': 5,
            'categories': ['Music', 'Electronics']
        }
    ];
    // Get unique items from an object array
    let result = Utils.arrayUnique(products, (product) => product.categories);
    result.forEach(item => {
        console.log(item);
    });
})();
</script>
 
// expected output:
/*
    Electronics  
    Clothing  
    Music
*/

3. Mixed Array

The example below demonstrates the use of ‘Utils.arrayUnique‘ to get unique values from a mixed array.

In this example, a selector is used, which extracts the value to be used in the evaluation.





		
		
			3. Mixed Array
			
JavaScript
			
			// Mixed Array

<script>
(() => {
    // Mixed array
    let mixedArray = [
        [0, 'Aluminium', 0, 'Francis'],
        [1, 'Argon', 1, 'Ada'],
        [2, 'Brom', 2, 'John'],
        [3, 'Cadmium', 9, 'Marie'],
        [4, 'Fluor', 12, 'Marie'],
        [5, 'Gold', 1, 'Ada'],
        [6, 'Kupfer', 4, 'Ines'],
        [7, 'Krypton', 4, 'Joe'],
        [8, 'Sauerstoff', 0, 'Marie'],
        [9, 'Zink', 5, 'Max']
    ];
    // Get unique items from an array at index 2
    let result = Utils.arrayUnique(mixedArray, (item) => item[2]);
    result.forEach(item => {
        console.log(item);
    });  
})();
</script>

// expected output:
/*
    0 
    1  
    2 
    9  
    12  
    4  
    5
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
				
						// Mixed Array
 
<script>
(() => {
    // Mixed array
    let mixedArray = [
        [0, 'Aluminium', 0, 'Francis'],
        [1, 'Argon', 1, 'Ada'],
        [2, 'Brom', 2, 'John'],
        [3, 'Cadmium', 9, 'Marie'],
        [4, 'Fluor', 12, 'Marie'],
        [5, 'Gold', 1, 'Ada'],
        [6, 'Kupfer', 4, 'Ines'],
        [7, 'Krypton', 4, 'Joe'],
        [8, 'Sauerstoff', 0, 'Marie'],
        [9, 'Zink', 5, 'Max']
    ];
    // Get unique items from an array at index 2
    let result = Utils.arrayUnique(mixedArray, (item) => item[2]);
    result.forEach(item => {
        console.log(item);
    });  
})();
</script>
 
// expected output:
/*
    0 
    1  
    2 
    9  
    12  
    4  
    5
*/

4. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 19, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';

    // Property to hold public variables and functions
    let exposed = namespace;

    /**
    * FUNCTION: arrayUnique
    * USE: Returns distinct elements from a sequence.
    * @param array: The array to remove duplicate elements from.
    * @param selector: Optional. A transform function to extract values from each element.
    * @return: An array that contains distinct elements from the source sequence.
    */
    exposed.arrayUnique = (array, selector = null) => {
        if (typeof selector !== 'function') {
            selector = (item) => item;
        }
        let value = array
            .reduce((acc, item) => acc.concat(selector.call(array, item)), [])
            .filter((value, index, self) => self.indexOf(value) === index);
        return value;
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 19, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';
 
    // Property to hold public variables and functions
    let exposed = namespace;
 
    /**
    * FUNCTION: arrayUnique
    * USE: Returns distinct elements from a sequence.
    * @param array: The array to remove duplicate elements from.
    * @param selector: Optional. A transform function to extract values from each element.
    * @return: An array that contains distinct elements from the source sequence.
    */
    exposed.arrayUnique = (array, selector = null) => {
        if (typeof selector !== 'function') {
            selector = (item) => item;
        }
        let value = array
            .reduce((acc, item) => acc.concat(selector.call(array, item)), [])
            .filter((value, index, self) => self.indexOf(value) === index);
        return value;
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || Circular Array – How To Index Into Array As If It Is Circular Using Vanilla JavaScript

October 07, 2020 admin No comments

The following is a module with functions which demonstrates how to index into an array as if it is circular using Vanilla JavaScript.

This function adjusts a range as circular and ‘wraps around’ the value to become in bounds.

1. Circular Array

The example below demonstrates the use of ‘Utils.circularWrap‘ to index into an array as if it is circular.





		
		
			1. Circular Array
			
JavaScript
			
			// Circular Array

<script>
(() => {
    let words = ['this', 'and', 'that'];
    for (let index = -9; index <= 10; ++index) {
        let adjusted = Utils.circularWrap(index, words.length);
        console.log(`Index: ${index}, Adjusted Index: ${adjusted}, Word: ${words[adjusted]}`);
    }
})();
</script>

// expected output:
/*
    Index: -9, Adjusted Index: 0, Word: this
    Index: -8, Adjusted Index: 1, Word: and
    Index: -7, Adjusted Index: 2, Word: that
    Index: -6, Adjusted Index: 0, Word: this
    Index: -5, Adjusted Index: 1, Word: and
    Index: -4, Adjusted Index: 2, Word: that
    Index: -3, Adjusted Index: 0, Word: this
    Index: -2, Adjusted Index: 1, Word: and
    Index: -1, Adjusted Index: 2, Word: that
    Index: 0, Adjusted Index: 0, Word: this
    Index: 1, Adjusted Index: 1, Word: and
    Index: 2, Adjusted Index: 2, Word: that
    Index: 3, Adjusted Index: 0, Word: this
    Index: 4, Adjusted Index: 1, Word: and
    Index: 5, Adjusted Index: 2, Word: that
    Index: 6, Adjusted Index: 0, Word: this
    Index: 7, Adjusted Index: 1, Word: and
    Index: 8, Adjusted Index: 2, Word: that
    Index: 9, Adjusted Index: 0, Word: this
    Index: 10, Adjusted Index: 1, Word: and
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
				
						// Circular Array
 
<script>
(() => {
    let words = ['this', 'and', 'that'];
    for (let index = -9; index <= 10; ++index) {
        let adjusted = Utils.circularWrap(index, words.length);
        console.log(`Index: ${index}, Adjusted Index: ${adjusted}, Word: ${words[adjusted]}`);
    }
})();
</script>
 
// expected output:
/*
    Index: -9, Adjusted Index: 0, Word: this
    Index: -8, Adjusted Index: 1, Word: and
    Index: -7, Adjusted Index: 2, Word: that
    Index: -6, Adjusted Index: 0, Word: this
    Index: -5, Adjusted Index: 1, Word: and
    Index: -4, Adjusted Index: 2, Word: that
    Index: -3, Adjusted Index: 0, Word: this
    Index: -2, Adjusted Index: 1, Word: and
    Index: -1, Adjusted Index: 2, Word: that
    Index: 0, Adjusted Index: 0, Word: this
    Index: 1, Adjusted Index: 1, Word: and
    Index: 2, Adjusted Index: 2, Word: that
    Index: 3, Adjusted Index: 0, Word: this
    Index: 4, Adjusted Index: 1, Word: and
    Index: 5, Adjusted Index: 2, Word: that
    Index: 6, Adjusted Index: 0, Word: this
    Index: 7, Adjusted Index: 1, Word: and
    Index: 8, Adjusted Index: 2, Word: that
    Index: 9, Adjusted Index: 0, Word: this
    Index: 10, Adjusted Index: 1, Word: and
*/

2. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 7, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';

    // Property to hold public variables and functions
    let exposed = namespace;

    /**
    * FUNCTION: circularWrap 
    * USE: Adjusts a range as circular and 'wraps around' the value to become in bounds
    * @param left: The current number, or the 'numerator'
    * @param right: The upper bound maximum range number, or the 'denominator'
    * @return: The adjusted value according to the denominator
    */
    exposed.circularWrap = (left, right) => {
        return ((left % right) + right) % right;
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 7, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';
 
    // Property to hold public variables and functions
    let exposed = namespace;
 
    /**
    * FUNCTION: circularWrap 
    * USE: Adjusts a range as circular and 'wraps around' the value to become in bounds
    * @param left: The current number, or the 'numerator'
    * @param right: The upper bound maximum range number, or the 'denominator'
    * @return: The adjusted value according to the denominator
    */
    exposed.circularWrap = (left, right) => {
        return ((left % right) + right) % right;
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || How To Find All Combinations Of Well-Formed Brackets Using Vanilla JavaScript

October 06, 2020 admin No comments

The following is a module with functions which demonstrates how to find all combinations of well-formed brackets.

The task is to write a function Brackets(int n) that prints all combinations of well-formed brackets from 1…n. For example, Brackets(3), the output would be:

() (()) ()() ((())) (()()) (())() ()(()) ()()()

The number of possible combinations is the Catalan number of N pairs C(n).

1. Find All Well-Formed Brackets

The example below demonstrates the use of ‘Utils.brackets‘ to find all the well-formed bracket combinations.





		
		
			1. Find All Well-Formed Brackets
			
JavaScript
			
			// Find All Well-Formed Brackets

<script>
(() => {
    let results = Utils.brackets(4);    
    results.forEach((result) => {
        console.log(`Pair: ${result.pair}, Combination: ${result.combination}`);
    });
})();
</script>

// expected output:
/*
    Pair: 1, Combination: () 
    Pair: 2, Combination: (()), ()() 
    Pair: 3, Combination: ((())), (()()), (())(), ()(()), ()()() 
    Pair: 4, Combination: (((()))), ((()())), ((())()), ((()))(), (()(())), (()()()), (()())(), (())(()), (())()(), ()((())), ()(()()), ()(())(), ()()(()), ()()()()  
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						// Find All Well-Formed Brackets
 
<script>
(() => {
    let results = Utils.brackets(4);    
    results.forEach((result) => {
        console.log(`Pair: ${result.pair}, Combination: ${result.combination}`);
    });
})();
</script>
 
// expected output:
/*
    Pair: 1, Combination: () 
    Pair: 2, Combination: (()), ()() 
    Pair: 3, Combination: ((())), (()()), (())(), ()(()), ()()() 
    Pair: 4, Combination: (((()))), ((()())), ((())()), ((()))(), (()(())), (()()()), (()())(), (())(()), (())()(), ()((())), ()(()()), ()(())(), ()()(()), ()()()()  
*/

2. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 6, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';

    // Property to hold public variables and functions
    let exposed = namespace;

    /**
    * FUNCTION: brackets
    * USE: Returns all combinations of well-formed brackets from 1...n
    * @param pairs: The number of bracket combinations to generate.
    * @param open: Optional. The 'open bracket' symbol.
    * @param close: Optional. The 'close bracket' symbol.
    * @return: An array of bracket combination info.
    */
    exposed.brackets = (pairs, open = '(', close = ')') => {
        let results = [];
        let symbols = {
            open: open,
            close: close,
        };
        for (let pair = 1; pair <= pairs; ++pair) {
            results.push({
                pair: pair,
                combination: buildBrackets('', 0, 0, pair, symbols),
            });
        }
        return results;
    }

    let buildBrackets = (output, open, close, pair, symbols) => {
        if ((open === pair) && (close === pair)) {
            return output;
        }
        let result = '';
        if (open < pair) {
            let openCombo = buildBrackets(output + symbols.open, open + 1, close, pair, symbols);
            if (openCombo.length > 0) {
                result += (result.length > 0 ? ', ' : '') + openCombo;
            }
        }
        if (close < open) {
            let closeCombo = buildBrackets(output + symbols.close, open, close + 1, pair, symbols);
            if (closeCombo.length > 0) {
                result += (result.length > 0 ? ', ' : '') + closeCombo;
            }
        }
        return result;
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 6, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';
 
    // Property to hold public variables and functions
    let exposed = namespace;
 
    /**
    * FUNCTION: brackets
    * USE: Returns all combinations of well-formed brackets from 1...n
    * @param pairs: The number of bracket combinations to generate.
    * @param open: Optional. The 'open bracket' symbol.
    * @param close: Optional. The 'close bracket' symbol.
    * @return: An array of bracket combination info.
    */
    exposed.brackets = (pairs, open = '(', close = ')') => {
        let results = [];
        let symbols = {
            open: open,
            close: close,
        };
        for (let pair = 1; pair <= pairs; ++pair) {
            results.push({
                pair: pair,
                combination: buildBrackets('', 0, 0, pair, symbols),
            });
        }
        return results;
    }
 
    let buildBrackets = (output, open, close, pair, symbols) => {
        if ((open === pair) && (close === pair)) {
            return output;
        }
        let result = '';
        if (open < pair) {
            let openCombo = buildBrackets(output + symbols.open, open + 1, close, pair, symbols);
            if (openCombo.length > 0) {
                result += (result.length > 0 ? ', ' : '') + openCombo;
            }
        }
        if (close < open) {
            let closeCombo = buildBrackets(output + symbols.close, open, close + 1, pair, symbols);
            if (closeCombo.length > 0) {
                result += (result.length > 0 ? ', ' : '') + closeCombo;
            }
        }
        return result;
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || How To Calculate Nth Catalan Number Using Vanilla JavaScript

October 06, 2020 admin No comments

In combinatorial mathematics, a Catalan number forms a sequence of natural numbers that occur in various counting problems. It can be used to determine how many different ways to split something up.

The following is a module with functions which demonstrates how to calculate nth Catalan number.

1. Calculate Nth Catalan Number

The example below demonstrates the use of ‘Utils.catalan‘ to calculate nth Catalan number.





		
		
			1. Calculate Nth Catalan Number
			
JavaScript
			
			// Calculate Nth Catalan Number

<script>
(() => {    
    for (let number = 0; number <= 10; ++number) {
        console.log(`Number: ${number}, Catalan: ${Utils.catalan(number)}`);
    }
})();
</script>

// expected output:
/*
    Number: 0, Catalan: 1  
    Number: 1, Catalan: 1  
    Number: 2, Catalan: 2  
    Number: 3, Catalan: 5  
    Number: 4, Catalan: 14  
    Number: 5, Catalan: 42  
    Number: 6, Catalan: 132  
    Number: 7, Catalan: 429  
    Number: 8, Catalan: 1430  
    Number: 9, Catalan: 4862  
    Number: 10, Catalan: 16796  
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						// Calculate Nth Catalan Number
 
<script>
(() => {    
    for (let number = 0; number <= 10; ++number) {
        console.log(`Number: ${number}, Catalan: ${Utils.catalan(number)}`);
    }
})();
</script>
 
// expected output:
/*
    Number: 0, Catalan: 1  
    Number: 1, Catalan: 1  
    Number: 2, Catalan: 2  
    Number: 3, Catalan: 5  
    Number: 4, Catalan: 14  
    Number: 5, Catalan: 42  
    Number: 6, Catalan: 132  
    Number: 7, Catalan: 429  
    Number: 8, Catalan: 1430  
    Number: 9, Catalan: 4862  
    Number: 10, Catalan: 16796  
*/

2. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 6, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';

    // Property to hold public variables and functions
    let exposed = namespace;

    /**
    * FUNCTION: catalan
    * USE: Calculates the catalan number for the number in question
    * @param n: The number to calculate the catalan number.
    * @return: The catalan number for the number in question.
    */
    exposed.catalan = (n) => {
        n = Math.max(0, n);
        let result = Array(n + 1);
        result[0] = result[1] = 1;
        for (let x = 2; x <= n; ++x) {
            result[x] = 0;
            for (let y = 0; y < x; ++y) {
                result[x] += result[y] * result[x - y - 1];
            }
        }
        return result[n];
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Oct 6, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';
 
    // Property to hold public variables and functions
    let exposed = namespace;
 
    /**
    * FUNCTION: catalan
    * USE: Calculates the catalan number for the number in question
    * @param n: The number to calculate the catalan number.
    * @return: The catalan number for the number in question.
    */
    exposed.catalan = (n) => {
        n = Math.max(0, n);
        let result = Array(n + 1);
        result[0] = result[1] = 1;
        for (let x = 2; x <= n; ++x) {
            result[x] = 0;
            for (let y = 0; y < x; ++y) {
                result[x] += result[y] * result[x - y - 1];
            }
        }
        return result[n];
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript/CSS/HTML || Modal.js – Simple Modal Dialog Prompt Using Vanilla JavaScript

September 23, 2020 admin No comments

The following is a module which allows for a simple modal popup dialog panel in vanilla JavaScript. This module allows for custom Yes/No prompts.

Options include allowing the modal to be dragged, resized, and closed on outer area click. Modal drag and resize supports touch (mobile) input.

Modal.js & CSS Source

Contents

1. Basic Usage 2. Available Options 3. Alert Dialog 4. Yes/No Dialog 5. Custom Buttons 6. Dialog Instance 7. Modal.js & CSS Source 8. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates adding a simple dialog to the page.





		
		
			1. Simple Dialog
			
JavaScript
			
			// Add simple dialog. 

<script>
(() => {
    // Adds a simple dialog to the page
    Modal.showDialog({
        title: 'Save Content?',
        body: 'Content will be saved. Continue?',
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						// Add simple dialog. 
 
<script>
(() => {
    // Adds a simple dialog to the page
    Modal.showDialog({
        title: 'Save Content?',
        body: 'Content will be saved. Continue?',
    });
})();
</script>

Sample:

The following example demonstrates how to add click events to the default dialog buttons. The ordering of the buttons on initialization defines its placement on the dialog.





		
		
			2. Simple Dialog - Add Click Events
			
JavaScript
			
			// Add click events. 

<script>
(() => {
    // Add click events to the buttons
    Modal.showDialog({
        title: 'Save Content?',
        body: 'Content will be saved. Continue?',
        buttons: {
            cancel: {
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            ok: {
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            }
        }
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
				
						// Add click events. 
 
<script>
(() => {
    // Add click events to the buttons
    Modal.showDialog({
        title: 'Save Content?',
        body: 'Content will be saved. Continue?',
        buttons: {
            cancel: {
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            ok: {
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            }
        }
    });
})();
</script>

2. Available Options

The options supplied to the ‘Modal.showDialog‘ function is an object that is made up of the following properties.





		
		
			2. Available Options
			
JavaScript
			
			// Available options

Modal.showDialog({
    title: 'Save Content?',                     // The title of the dialog
    body: 'Content will be saved. Continue?',   // The content body of the dialog
    onShow: () => {                             // Optional. Function that allows to do something before show. Return false to stop showing process
        console.log(`Dialog is showing`);
    },        
    onHide: () => {                             // Optional. Function that allows to do something before hide. Return false to stop hidding process
        console.log(`Dialog is hiding`);
    },
    onDestroy: () => {                          // Optional. Function that allows to do something before destroy. Return false to stop destroying process
        console.log(`Dialog is destroying`);
    },
    closeOnOuterClick: false,                   // Optional. Determines if the dialog should close on outer dialog click. Default is False
    draggable: false,                           // Optional. Determines if the dialog is draggable. Default is False
    resizable: false,                           // Optional. Determines if the dialog is resizable. Default is False
    autoOpen: true,                             // Optional. Determines if the dialog should auto open. Default is True
    destroyOnHide: true,                        // Optional. Determines if the dialog should be removed from DOM after hiding. Default is True
    buttons: {                                  // Optional. Allows to add custom buttons to the dialog
        custom1: {
            text: 'Custom Button',
            cssClass: '',
            visible: true,
            onClick: (event) => {
                console.log(`${event.target.innerText} Button Clicked`);
            }
        },
        // ..... Additional buttons
    },
});
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
				
						// Available options
 
Modal.showDialog({
    title: 'Save Content?',                     // The title of the dialog
    body: 'Content will be saved. Continue?',   // The content body of the dialog
    onShow: () => {                             // Optional. Function that allows to do something before show. Return false to stop showing process
        console.log(`Dialog is showing`);
    },        
    onHide: () => {                             // Optional. Function that allows to do something before hide. Return false to stop hidding process
        console.log(`Dialog is hiding`);
    },
    onDestroy: () => {                          // Optional. Function that allows to do something before destroy. Return false to stop destroying process
        console.log(`Dialog is destroying`);
    },
    closeOnOuterClick: false,                   // Optional. Determines if the dialog should close on outer dialog click. Default is False
    draggable: false,                           // Optional. Determines if the dialog is draggable. Default is False
    resizable: false,                           // Optional. Determines if the dialog is resizable. Default is False
    autoOpen: true,                             // Optional. Determines if the dialog should auto open. Default is True
    destroyOnHide: true,                        // Optional. Determines if the dialog should be removed from DOM after hiding. Default is True
    buttons: {                                  // Optional. Allows to add custom buttons to the dialog
        custom1: {
            text: 'Custom Button',
            cssClass: '',
            visible: true,
            onClick: (event) => {
                console.log(`${event.target.innerText} Button Clicked`);
            }
        },
        // ..... Additional buttons
    },
});

Supplying different options to ‘Modal.showDialog‘ can change its appearance. The following examples below demonstrate this.

3. Alert Dialog

The following example demonstrates an alert dialog.





		
		
			3. Alert Dialog
			
JavaScript
			
			// Alert dialog. 

<script>
(() => {
    // Alert
    Modal.showDialog({
        title: 'Content Saved!',
        body: 'Content has been saved to your account',
        buttons: {
            ok: {}
        }
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
				
						// Alert dialog. 
 
<script>
(() => {
    // Alert
    Modal.showDialog({
        title: 'Content Saved!',
        body: 'Content has been saved to your account',
        buttons: {
            ok: {}
        }
    });
})();
</script>

Sample:

4. Yes/No Dialog

The following example demonstrates a yes/no dialog.





		
		
			4. Yes/No Dialog
			
JavaScript
			
			// Yes/No dialog. 

<script>
(() => {
    // Yes/No
    Modal.showDialog({
        title: 'Continue?',
        body: 'Do you want to continue?',
        buttons: {
            no: {text: '&#x1f622; No'},
            yes: {text: '&#x1f60a; Yes'}
        }
    }); 
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				
						// Yes/No dialog. 
 
<script>
(() => {
    // Yes/No
    Modal.showDialog({
        title: 'Continue?',
        body: 'Do you want to continue?',
        buttons: {
            no: {text: '&#x1f622; No'},
            yes: {text: '&#x1f60a; Yes'}
        }
    }); 
})();
</script>

Sample:

5. Custom Buttons

The following example demonstrates multiple custom buttons.





		
		
			5. Custom Buttons
			
JavaScript
			
			// Custom buttons. 

<script>
(() => {
    // Custom buttons
    Modal.showDialog({
        title: 'Save Content?',                     
        body: 'Content will be saved. Continue?',
        draggable: true,                          
        buttons: {                                  
            custom1: {
                text: 'No Way!',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            custom2: {
                text: 'Maybe?',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            custom3: {
                text: 'Sure',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
        },
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
				
						// Custom buttons. 
 
<script>
(() => {
    // Custom buttons
    Modal.showDialog({
        title: 'Save Content?',                     
        body: 'Content will be saved. Continue?',
        draggable: true,                          
        buttons: {                                  
            custom1: {
                text: 'No Way!',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            custom2: {
                text: 'Maybe?',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            custom3: {
                text: 'Sure',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
        },
    });
})();
</script>

Sample:

6. Dialog Instance

The following example demonstrates how to use the dialog instance to show and hide when needed.





		
		
			6. Dialog Instance
			
JavaScript
			
			// Dialog Instance. 

<script>
(() => {
    // Create dialog instance and show/hide when needed
    let dialog = Modal.showDialog({
        title: 'Save Content?',
        body: 'Content will be saved. Continue?',
        autoOpen: false,
    });
    
    //dialog.modal           // The Javascript modal element
    dialog.show();           // Shows the modal popup   
    //dialog.hide();         // Hides the modal popup
    //dialog.destroy();      // Hides the modal popup & removes it from the DOM
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
				
						// Dialog Instance. 
 
<script>
(() => {
    // Create dialog instance and show/hide when needed
    let dialog = Modal.showDialog({
        title: 'Save Content?',
        body: 'Content will be saved. Continue?',
        autoOpen: false,
    });
    
    //dialog.modal           // The Javascript modal element
    dialog.show();           // Shows the modal popup   
    //dialog.hide();         // Hides the modal popup
    //dialog.destroy();      // Hides the modal popup & removes it from the DOM
})();
</script>

7. Modal.js & CSS Source

Modal.js & CSS Source

8. More Examples

Below are more examples demonstrating the use of ‘Modal.js‘. Don’t forget to include the module when running the examples!





		
		
			More Examples
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  modalDialog.html
//    Description: Demonstrates the use of Modal.js
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Modal.js Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.button {
    padding: 5px;
    background-color: #d2d2d2;
    height:100%;
    text-align:center;
    text-decoration:none;
    color:black;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    border-radius: 15px;
    cursor: pointer;
    width: 120px;
    border: none;
    font-size: 15px;
    font-family: "Roboto",sans-serif, Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,"Helvetica Neue",Helvetica;
}

.button:hover {
    background-color:#bdbdbd;
}

.inline {
    display:inline-block;
}
</style>

<!-- // Include module -->
<link type="text/css" rel="stylesheet" href="./Modal.css">
<script type="text/javascript" src="./Modal.js"></script>

</head>
<body>
<div class="main">
    My Programming Notes Modal.js Demo

    <div style="margin-top: 20px;">
        <div id="btnShow" class="inline button">
            Show
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {   
    // Custom buttons
    let dialog = Modal.showDialog({
        title: 'Save Content?',                     // The title of the dialog
        body: 'Content will be saved. Continue?',   // The content body of the dialog
        onShow: () => {                             // Optional. Function that allows to do something before show. Return false to stop showing process
            console.log(`Dialog ${dialog.modal.id} is showing`);
        },        
        onHide: () => {                             // Optional. Function that allows to do something before hide. Return false to stop hidding process
            console.log(`Dialog ${dialog.modal.id} is hiding`);
        },
        onDestroy: () => {                          // Optional. Function that allows to do something before destroy. Return false to stop destroying process
            console.log(`Dialog ${dialog.modal.id} is destroying`);
        },
        closeOnOuterClick: false,                   // Optional. Determines if the dialog should close on outer dialog click. Default is False
        draggable: true,                            // Optional. Determines if the dialog is draggable. Default is False
        resizable: false,                           // Optional. Determines if the dialog is resizable. Default is False
        autoOpen: false,                            // Optional. Determines if the dialog should auto open. Default is True
        destroyOnHide: false,                       // Optional. Determines if the dialog should be removed from DOM after hiding. Default is True
        buttons: {                                  // Optional. Allows to add custom buttons to the dialog
            custom1: {
                text: 'No Way!',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            custom2: {
                text: 'Maybe?',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            custom3: {
                text: 'Sure',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
        },
    });

    setTimeout(() => {
        //dialog.modal           // The Javascript modal element
        dialog.show();           // Shows the modal popup
        setTimeout(() => {
            dialog.hide();      // Hides the modal popup
            //dialog.destroy();    // Hides the modal popup & removes it from the DOM
        }, 2000);
    }, 200);

    // Show the modal
    document.querySelector('#btnShow').addEventListener('click', (event) => {
        dialog.show()
    });
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  modalDialog.html
//    Description: Demonstrates the use of Modal.js
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Modal.js Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
 
.button {
    padding: 5px;
    background-color: #d2d2d2;
    height:100%;
    text-align:center;
    text-decoration:none;
    color:black;
 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 
    border-radius: 15px;
    cursor: pointer;
    width: 120px;
    border: none;
    font-size: 15px;
    font-family: "Roboto",sans-serif, Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,"Helvetica Neue",Helvetica;
}
 
.button:hover {
    background-color:#bdbdbd;
}
 
.inline {
    display:inline-block;
}
</style>
 
<!-- // Include module -->
<link type="text/css" rel="stylesheet" href="./Modal.css">
<script type="text/javascript" src="./Modal.js"></script>
 
</head>
<body>
<div class="main">
    My Programming Notes Modal.js Demo
 
    <div style="margin-top: 20px;">
        <div id="btnShow" class="inline button">
            Show
        </div>
    </div>
</div>
 
<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {   
    // Custom buttons
    let dialog = Modal.showDialog({
        title: 'Save Content?',                     // The title of the dialog
        body: 'Content will be saved. Continue?',   // The content body of the dialog
        onShow: () => {                             // Optional. Function that allows to do something before show. Return false to stop showing process
            console.log(`Dialog ${dialog.modal.id} is showing`);
        },        
        onHide: () => {                             // Optional. Function that allows to do something before hide. Return false to stop hidding process
            console.log(`Dialog ${dialog.modal.id} is hiding`);
        },
        onDestroy: () => {                          // Optional. Function that allows to do something before destroy. Return false to stop destroying process
            console.log(`Dialog ${dialog.modal.id} is destroying`);
        },
        closeOnOuterClick: false,                   // Optional. Determines if the dialog should close on outer dialog click. Default is False
        draggable: true,                            // Optional. Determines if the dialog is draggable. Default is False
        resizable: false,                           // Optional. Determines if the dialog is resizable. Default is False
        autoOpen: false,                            // Optional. Determines if the dialog should auto open. Default is True
        destroyOnHide: false,                       // Optional. Determines if the dialog should be removed from DOM after hiding. Default is True
        buttons: {                                  // Optional. Allows to add custom buttons to the dialog
            custom1: {
                text: 'No Way!',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            custom2: {
                text: 'Maybe?',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
            custom3: {
                text: 'Sure',
                cssClass: '',
                visible: true,
                onClick: (event) => {
                    console.log(`${event.target.innerText} Button Clicked`);
                }
            },
        },
    });
 
    setTimeout(() => {
        //dialog.modal           // The Javascript modal element
        dialog.show();           // Shows the modal popup
        setTimeout(() => {
            dialog.hide();      // Hides the modal popup
            //dialog.destroy();    // Hides the modal popup & removes it from the DOM
        }, 2000);
    }, 200);
 
    // Show the modal
    document.querySelector('#btnShow').addEventListener('click', (event) => {
        dialog.show()
    });
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || How To Get The Minimum & Maximum Values In A Simple & Object Array

September 16, 2020 admin No comments

The following is a module with functions which demonstrates how to get the minimum and maximum values in a simple and object array.

The functions on this page allows for an optional selector function as a parameter, which makes them general enough to work on arrays of any type.

1. Simple Array

The example below demonstrates the use of ‘Utils.arrayMin‘ and ‘Utils.arrayMax‘ to get the minimum and maximum values from a simple array.





		
		
			1. Simple Array
			
JavaScript
			
			// Simple Array

<script>
(() => {
    // Simple array
    let values = [
        4294967296,
        1991,
        466855135,
        1987,
        81125,
    ];
    // Get the minimum and maximum array value
    console.log( Utils.arrayMin(values) ); 
    console.log( Utils.arrayMax(values) );   
})();
</script>

// expected output:
/*
	1987
	4294967296  
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
				
						// Simple Array
 
<script>
(() => {
    // Simple array
    let values = [
        4294967296,
        1991,
        466855135,
        1987,
        81125,
    ];
    // Get the minimum and maximum array value
    console.log( Utils.arrayMin(values) ); 
    console.log( Utils.arrayMax(values) );   
})();
</script>
 
// expected output:
/*
	1987
	4294967296  
*/

2. Object Array

The example below demonstrates the use of ‘Utils.arrayMin‘ and ‘Utils.arrayMax‘ to get the minimum and maximum values from an object array.

In this example, a selector is used, which extracts the value to be used in the evaluation.





		
		
			2. Object Array
			
JavaScript
			
			// Object Array

<script>
(() => {
    // Object array
    let users = [
        {USER:"bob",      SCORE:2000, TIME:32,    AGE:16, COUNTRY:"US"},
        {USER:"jane",     SCORE:4000, TIME:35,    AGE:16, COUNTRY:"DE"},
        {USER:"tim",      SCORE:1000, TIME:30,    AGE:17, COUNTRY:"UK"},
        {USER:"mary",     SCORE:1500, TIME:31,    AGE:19, COUNTRY:"PL"},
        {USER:"joe",      SCORE:2500, TIME:33,    AGE:18, COUNTRY:"US"},
        {USER:"sally",    SCORE:2000, TIME:30,    AGE:16, COUNTRY:"CA"},
        {USER:"yuri",     SCORE:3000, TIME:34,    AGE:19, COUNTRY:"RU"},
        {USER:"anita",    SCORE:2500, TIME:32,    AGE:17, COUNTRY:"LV"},
        {USER:"mark",     SCORE:2000, TIME:30,    AGE:18, COUNTRY:"DE"},
        {USER:"amy",      SCORE:1500, TIME:29,    AGE:19, COUNTRY:"UK"}
    ];
    // Get the minimum and maximum user score
    console.log( Utils.arrayMin(users, (user) => user.SCORE) ); 
    console.log( Utils.arrayMax(users, (user) => user.SCORE) );  
})();
</script>

// expected output:
/*
	1000
	4000
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
				
						// Object Array
 
<script>
(() => {
    // Object array
    let users = [
        {USER:"bob",      SCORE:2000, TIME:32,    AGE:16, COUNTRY:"US"},
        {USER:"jane",     SCORE:4000, TIME:35,    AGE:16, COUNTRY:"DE"},
        {USER:"tim",      SCORE:1000, TIME:30,    AGE:17, COUNTRY:"UK"},
        {USER:"mary",     SCORE:1500, TIME:31,    AGE:19, COUNTRY:"PL"},
        {USER:"joe",      SCORE:2500, TIME:33,    AGE:18, COUNTRY:"US"},
        {USER:"sally",    SCORE:2000, TIME:30,    AGE:16, COUNTRY:"CA"},
        {USER:"yuri",     SCORE:3000, TIME:34,    AGE:19, COUNTRY:"RU"},
        {USER:"anita",    SCORE:2500, TIME:32,    AGE:17, COUNTRY:"LV"},
        {USER:"mark",     SCORE:2000, TIME:30,    AGE:18, COUNTRY:"DE"},
        {USER:"amy",      SCORE:1500, TIME:29,    AGE:19, COUNTRY:"UK"}
    ];
    // Get the minimum and maximum user score
    console.log( Utils.arrayMin(users, (user) => user.SCORE) ); 
    console.log( Utils.arrayMax(users, (user) => user.SCORE) );  
})();
</script>
 
// expected output:
/*
	1000
	4000
*/

3. Mixed Array

The example below demonstrates the use of ‘Utils.arrayMin‘ and ‘Utils.arrayMax‘ to get the minimum and maximum values from a mixed array.

In this example, a selector is used, which extracts the value to be used in the evaluation.





		
		
			3. Mixed Array
			
JavaScript
			
			// Mixed Array

<script>
(() => {
    // Mixed array
    let mixedArray = [
        [0, 'Aluminium', 0, 'Francis'],
        [1, 'Argon', 1, 'Ada'],
        [2, 'Brom', 2, 'John'],
        [3, 'Cadmium', 9, 'Marie'],
        [4, 'Fluor', 12, 'Marie'],
        [5, 'Gold', 1, 'Ada'],
        [6, 'Kupfer', 4, 'Ines'],
        [7, 'Krypton', 4, 'Joe'],
        [8, 'Sauerstoff', 0, 'Marie'],
        [9, 'Zink', 5, 'Max']
    ];
    // Get the minimum and maximum name length at index 1
    console.log( Utils.arrayMin(mixedArray, (item) => item[1].length) );
    console.log( Utils.arrayMax(mixedArray, (item) => item[1].length) );
})();
</script>

// expected output:
/*
	4
	10 
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
				
						// Mixed Array
 
<script>
(() => {
    // Mixed array
    let mixedArray = [
        [0, 'Aluminium', 0, 'Francis'],
        [1, 'Argon', 1, 'Ada'],
        [2, 'Brom', 2, 'John'],
        [3, 'Cadmium', 9, 'Marie'],
        [4, 'Fluor', 12, 'Marie'],
        [5, 'Gold', 1, 'Ada'],
        [6, 'Kupfer', 4, 'Ines'],
        [7, 'Krypton', 4, 'Joe'],
        [8, 'Sauerstoff', 0, 'Marie'],
        [9, 'Zink', 5, 'Max']
    ];
    // Get the minimum and maximum name length at index 1
    console.log( Utils.arrayMin(mixedArray, (item) => item[1].length) );
    console.log( Utils.arrayMax(mixedArray, (item) => item[1].length) );
})();
</script>
 
// expected output:
/*
	4
	10 
*/

4. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 16, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';

    // Property to hold public variables and functions
    let exposed = namespace;

    /**
    * FUNCTION: arrayMax
    * USE: Returns the maximum value in a sequence.
    * @param array: Array to determine the maximum value of.
    * @param selector: Optional. A transform function to extract values from each element.
    * @return: The maximum value in the sequence.
    */
    exposed.arrayMax = (array, selector = null) => {
        let value = arrayMinMax(array, compareType.max, selector);
        return value;
    }

    /**
    * FUNCTION: arrayMin
    * USE: Returns the minimum value in a sequence.
    * @param array: Array to determine the minimum value of.
    * @param selector: Optional. A transform function to extract values from each element.
    * @return: The minimum value in the sequence.
    */
    exposed.arrayMin = (array, selector = null) => {
        let value = arrayMinMax(array, compareType.min, selector);
        return value;
    }

    let arrayMinMax = (array, type, selector = null) => {
        if (typeof selector !== 'function') {
            selector = (item) => item;
        }
        let value = array
            .map((item) => selector.call(array, item))
            .reduce((x, y) => compare(x, y, type) ? x : y);
        return value;
    }    
    
    let compare = (valueX, valueY, type) => {
        let result = valueX > valueY ? 1 : -1;
        if (type === compareType.min) {
            result *= -1;
        }
        return result > 0;
    }
    
    let compareType = Object.freeze({min: 1, max: 2});

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 16, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';
 
    // Property to hold public variables and functions
    let exposed = namespace;
 
    /**
    * FUNCTION: arrayMax
    * USE: Returns the maximum value in a sequence.
    * @param array: Array to determine the maximum value of.
    * @param selector: Optional. A transform function to extract values from each element.
    * @return: The maximum value in the sequence.
    */
    exposed.arrayMax = (array, selector = null) => {
        let value = arrayMinMax(array, compareType.max, selector);
        return value;
    }
 
    /**
    * FUNCTION: arrayMin
    * USE: Returns the minimum value in a sequence.
    * @param array: Array to determine the minimum value of.
    * @param selector: Optional. A transform function to extract values from each element.
    * @return: The minimum value in the sequence.
    */
    exposed.arrayMin = (array, selector = null) => {
        let value = arrayMinMax(array, compareType.min, selector);
        return value;
    }
 
    let arrayMinMax = (array, type, selector = null) => {
        if (typeof selector !== 'function') {
            selector = (item) => item;
        }
        let value = array
            .map((item) => selector.call(array, item))
            .reduce((x, y) => compare(x, y, type) ? x : y);
        return value;
    }    
    
    let compare = (valueX, valueY, type) => {
        let result = valueX > valueY ? 1 : -1;
        if (type === compareType.min) {
            result *= -1;
        }
        return result > 0;
    }
    
    let compareType = Object.freeze({min: 1, max: 2});
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript/CSS/HTML || Placeholder.js – Simple Animated Floating Label For Textbox, Dropdown & Textarea Using Vanilla JavaScript

September 09, 2020 admin No comments

The following is a module which allows for a simple animated floating placeholder label for textbox, dropdown & textarea using vanilla javascript.

No special HTML markup is required.

Placeholder.js & CSS Source

Contents

1. Basic Usage 2. Placeholder HTML 3. Placeholder.js & CSS Source 4. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates adding and removing floating placeholders to elements.





		
		
			1. Basic Usage
			
JavaScript
			
			// Add & Remove Floating Placeholders. 

<script>
(() => {
    // Add floating placeholder. It accepts either a string selector
    // or one or more Javascript elements.
    Placeholder.float('input:not([type="radio"]):not([type="checkbox"]), select, textarea');
    
    // Remove floating placeholder. It accepts either a string selector
    // or one or more Javascript elements. 
    Placeholder.remove(document.querySelectorAll('input:not([type="radio"]):not([type="checkbox"]), select, textarea'));
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						// Add & Remove Floating Placeholders. 
 
<script>
(() => {
    // Add floating placeholder. It accepts either a string selector
    // or one or more Javascript elements.
    Placeholder.float('input:not([type="radio"]):not([type="checkbox"]), select, textarea');
    
    // Remove floating placeholder. It accepts either a string selector
    // or one or more Javascript elements. 
    Placeholder.remove(document.querySelectorAll('input:not([type="radio"]):not([type="checkbox"]), select, textarea'));
})();
</script>

‘Placeholder.float‘ and ‘Placeholder.remove‘ accepts either a string selector or one or more Javascript elements.

2. Placeholder HTML

The following is sample HTML used for the floating placeholder label. No special HTML markup is required. Simply supply an element with a ‘placeholder‘ attribute, and you’re all set!





		
		
			2. Placeholder HTML
			
XHTML
			
			<!-- // Sample HTML -->

<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" /> 
<select name="gender" id="gender" placeholder="Gender" >
    <option value="" selected></option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="na">Prefer Not To Say</option>
</select>            
<textarea rows="4" cols="50" placeholder="Describe Yourself"></textarea>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						<!-- // Sample HTML -->
 
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" /> 
<select name="gender" id="gender" placeholder="Gender" >
    <option value="" selected></option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="na">Prefer Not To Say</option>
</select>            
<textarea rows="4" cols="50" placeholder="Describe Yourself"></textarea>

Sample – Blank:

Sample – Filled:

3. Placeholder.js & CSS Source

The following is the Placeholder.js Namespace & CSS Source. Include this in your project to start using!





		
		
			Placeholder.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 9, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Placeholder.js
//    Description: Module that adds a floating placeholder label to an element
//    Example:
//        // Add Placeholder
//        Placeholder.float('selector')
//
//        // Remove Placeholder
//        Placeholder.remove('selector')
// ============================================================================
/**
* NAMESPACE: Placeholder
* USE: Handles Placeholder related functions
*/
var Placeholder = Placeholder || {};
(function(namespace) {
    'use strict';

// -- Public data --
    // Property to hold public variables and functions
    let exposed = namespace;

    // Set class names and other shared data
    const settings = {
        attributePlaceholder: 'placeholder',

        // Element class names
        classNameFloatingItem: '.floating-placeholder',
        classNameContainer: '.floating-placeholder-container',
        classNamePlaceholder: '.floating-placeholder-label',
        classNameActive: '.active',

        // Element data names
        dataNamePlaceholderCache: 'data-placeholder-cache',
        cleanClassName: (str) => {
            return str ? str.trim().replace('.', '') : '';
        },
    };

    exposed.settings = settings;

    /**
    * FUNCTION: float
    * USE: Adds a floating placeholder to the selected elements.
    * @param element: One or more JavaScript element to add floating placeholder to.
    * @return: N/A.
    */
    exposed.float = (element) => {
        let items = verifyElements(element);
        for (const item of items) {
            addPlaceholder(item);
        }
    }

    /**
    * FUNCTION: remove
    * USE: Removes a floating placeholder from the selected elements.
    * @param element: One or more JavaScript element to remove floating placeholder from.
    * @return: N/A.
    */
    exposed.remove = (element) => {
        let items = verifyElements(element);
        for (const item of items) {
            removePlaceholder(item);
        }
    }

// -- Private data --
    let removePlaceholder = (element) => {
        let container = getContainer(element);
        let parentNode = container.parentNode;
        removeClass(element, settings.classNameFloatingItem);

        let placeholderText = getPlaceholderTextCache(element);
        setPlaceholderText(element, placeholderText);
        setPlaceholderTextCache(element, null);

        getEvents().forEach(eventInfo => {
            eventInfo.names.forEach(eventName => {
                element.removeEventListener(eventName, eventInfo.callback);
            });
        });

        parentNode.insertBefore(element, container);
        parentNode.removeChild(container);
    }

    let addPlaceholder = (element) => {
        addClass(element, settings.classNameFloatingItem);
        let placeholderText = verifyPlaceholderText(element);
        let container = getContainer(element) || createContainer(element);
        let placeholder = getPlaceholder(element) || createPlaceholder(container);

        placeholder.innerHTML = placeholderText;
        placeholder.htmlFor = element.id;

        getEvents().forEach(eventInfo => {
            registerEvents(element, eventInfo.names, eventInfo.callback);
        });

        if (!isEmpty(element.value)) {
            floatPlaceholder(element);
        } else {
            resetPlaceholder(element);
        }
        
        setDetectChangeHandler(element);
    }
    
    let setDetectChangeHandler = (element, property = 'value') => {
        let elementPrototype = Object.getPrototypeOf(element);
        if (!elementPrototype.hasOwnProperty(property)) {
            return;
        }
        let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, property);
        let newProps = {
            get: function () {
                return descriptor.get.apply(element, arguments);
            },
            set: function (t) {
                setTimeout( () => { element.dispatchEvent(new Event(property + 'change')); }, 10);
                return descriptor.set.apply(element, arguments);
            }
        };
        Object.defineProperty(element, property, newProps);
    }

    let floatPlaceholder = (element) => {
        let placeholder = getPlaceholder(element);
        if (!isNull(placeholder)) {
            addClass(placeholder, settings.classNameActive);
        }
    }

    let resetPlaceholder = (element) => {
        let placeholder = getPlaceholder(element);
        if (!isNull(placeholder)) {
            if (isEmpty(element.value)) {
                removeClass(placeholder, settings.classNameActive);
            }
        }
    }

    let getContainer = (element) => {
        return element.closest(settings.classNameContainer);
    }

    let getPlaceholder = (element) => {
        let container = getContainer(element);
        return !isNull(container)
            ? container.querySelector(settings.classNamePlaceholder) : null;
    }

    let createPlaceholder = (container) => {
        let placeholder = document.createElement('label');
        addClass(placeholder, settings.classNamePlaceholder);
        container.appendChild(placeholder);
        return placeholder;
    }

    let createContainer = (element) => {
        let container = document.createElement('div');
        let parentNode = element.parentNode;
        addClass(container, settings.classNameContainer);
        parentNode.insertBefore(container, element);
        container.appendChild(element);
        return container;
    }

    let verifyPlaceholderText = (element) => {
        if (isEmpty(element.id)) {
            element.id = `floating_placeholder_${randomFromTo(1271991, 7281987)}`;
        }
        let placeholderText = getPlaceholderText(element);
        if (!isEmpty(placeholderText)) {
            setPlaceholderTextCache(element, placeholderText);
        }
        setPlaceholderText(element, null);
        return getPlaceholderTextCache(element);
    }

    let setPlaceholderText = (element, value) => {
        addData(element, {key: settings.attributePlaceholder, value: value});
    }

    let getPlaceholderText = (element) => {
        let value = getData(element, settings.attributePlaceholder);
        return value;
    }

    let setPlaceholderTextCache = (element, value) => {
        addData(element, {key: settings.dataNamePlaceholderCache, value: value});
    }

    let getPlaceholderTextCache = (element) => {
        let value = getData(element, settings.dataNamePlaceholderCache);
        return value;
    }

    let floatPlaceholderEvent = (event) => {
        let element = event.currentTarget;
        let nodeName = element.nodeName.toLowerCase();
        switch (event.type) {
            case 'focus':
                if (nodeName === 'select') {
                    return;
                }
                break;
            case 'keyup':
                if (nodeName === 'select') {
                    if (isEmpty(element.value)) {
                        return;
                    }
                } else {
                    return;
                }
                break;
        }
        floatPlaceholder(element);
    }

    let resetPlaceholderEvent = (event) => {
        let element = event.currentTarget;
        let nodeName = element.nodeName.toLowerCase();
        switch (event.type) {
            case 'keyup':
                if (nodeName === 'select') {
                    if (!isEmpty(element.value)) {
                        return;
                    }
                } else {
                    return;
                }
                break;
        }
        resetPlaceholder(element);
    }

    let registerEvents = (element, eventNames, func) => {
        eventNames.forEach((eventName, index) => {
            element.removeEventListener(eventName, func);
            element.addEventListener(eventName, func);
        });
    }

    let addClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);

        let modified = false;
        if (cssClass.length > 0 && !hasClass(element, cssClass)) {
            element.classList.add(cssClass)
            modified = true;
        }
        return modified;
    }

    let removeClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);

        let modified = false;
        if (cssClass.length > 0 && hasClass(element, cssClass)) {
            element.classList.remove(cssClass);
            modified = true;
        }
        return modified;
    }

    let hasClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
        return element.classList.contains(cssClass);
    }

    let isNull = (item) => {
        return undefined === item || null === item;
    }

    let isEmpty = (str) => {
        return isNull(str) || String(str).trim().length < 1;
    }

    let randomFromTo = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    let addData = (element, data) => {
        if (isNull(data)) {
            return;
        } else if (!Array.isArray(data)) {
            data = [data];
        }
        data.forEach(item => {
            if (!isNull(item.value)) {
                element.setAttribute(item.key, item.value);
            } else {
                removeData(element, item);
            }
        });
    }

    let removeData = (element, data) => {
        if (isNull(data)) {
            return;
        } else if (!Array.isArray(data)) {
            data = [data];
        }
        data.forEach(item => {
            let key = item.key || item;
            element.removeAttribute(key);
        });
    }

    let getData = (element, data) => {
        if (isNull(data)) {
            return null;
        } else if (!Array.isArray(data)) {
            data = [data];
        }
        let results = [];
        data.forEach(item => {
            let key = item.key || item;
            results.push(element.getAttribute(key));
        });
        return results.length == 1 ? results[0] : results;
    }
    
    let isString = (item) => {
        return 'string' === typeof item;
    }    

    let verifyElements = (items) => {
        if (isNull(items)) {
            throw new TypeError('No elements specified');
        } else if (isString(items)) {
            items = document.querySelectorAll(items);
        }        
        if (!isArrayLike(items)) {
            items = [items];
        }
        return items;
    }

    // see if it looks and smells like an iterable object, and do accept length === 0
    let isArrayLike = (item) => {
        return (
            Array.isArray(item) ||
            (!!item &&
                typeof item === "object" &&
                typeof (item.length) === "number" &&
                (item.length === 0 ||
                    (item.length > 0 &&
                        (item.length - 1) in item)
                )
            )
        );
    }

    let getEvents = () => {
        return [
            {names: ['click', 'focus', 'keyup', 'valuechange'], callback: floatPlaceholderEvent},
            {names: ['blur', 'focusout', 'keyup', 'valuechange'], callback: resetPlaceholderEvent},
        ];
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Placeholder)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 9, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Placeholder.js
//    Description: Module that adds a floating placeholder label to an element
//    Example:
//        // Add Placeholder
//        Placeholder.float('selector')
//
//        // Remove Placeholder
//        Placeholder.remove('selector')
// ============================================================================
/**
* NAMESPACE: Placeholder
* USE: Handles Placeholder related functions
*/
var Placeholder = Placeholder || {};
(function(namespace) {
    'use strict';
 
// -- Public data --
    // Property to hold public variables and functions
    let exposed = namespace;
 
    // Set class names and other shared data
    const settings = {
        attributePlaceholder: 'placeholder',
 
        // Element class names
        classNameFloatingItem: '.floating-placeholder',
        classNameContainer: '.floating-placeholder-container',
        classNamePlaceholder: '.floating-placeholder-label',
        classNameActive: '.active',
 
        // Element data names
        dataNamePlaceholderCache: 'data-placeholder-cache',
        cleanClassName: (str) => {
            return str ? str.trim().replace('.', '') : '';
        },
    };
 
    exposed.settings = settings;
 
    /**
    * FUNCTION: float
    * USE: Adds a floating placeholder to the selected elements.
    * @param element: One or more JavaScript element to add floating placeholder to.
    * @return: N/A.
    */
    exposed.float = (element) => {
        let items = verifyElements(element);
        for (const item of items) {
            addPlaceholder(item);
        }
    }
 
    /**
    * FUNCTION: remove
    * USE: Removes a floating placeholder from the selected elements.
    * @param element: One or more JavaScript element to remove floating placeholder from.
    * @return: N/A.
    */
    exposed.remove = (element) => {
        let items = verifyElements(element);
        for (const item of items) {
            removePlaceholder(item);
        }
    }
 
// -- Private data --
    let removePlaceholder = (element) => {
        let container = getContainer(element);
        let parentNode = container.parentNode;
        removeClass(element, settings.classNameFloatingItem);
 
        let placeholderText = getPlaceholderTextCache(element);
        setPlaceholderText(element, placeholderText);
        setPlaceholderTextCache(element, null);
 
        getEvents().forEach(eventInfo => {
            eventInfo.names.forEach(eventName => {
                element.removeEventListener(eventName, eventInfo.callback);
            });
        });
 
        parentNode.insertBefore(element, container);
        parentNode.removeChild(container);
    }
 
    let addPlaceholder = (element) => {
        addClass(element, settings.classNameFloatingItem);
        let placeholderText = verifyPlaceholderText(element);
        let container = getContainer(element) || createContainer(element);
        let placeholder = getPlaceholder(element) || createPlaceholder(container);
 
        placeholder.innerHTML = placeholderText;
        placeholder.htmlFor = element.id;
 
        getEvents().forEach(eventInfo => {
            registerEvents(element, eventInfo.names, eventInfo.callback);
        });
 
        if (!isEmpty(element.value)) {
            floatPlaceholder(element);
        } else {
            resetPlaceholder(element);
        }
        
        setDetectChangeHandler(element);
    }
    
    let setDetectChangeHandler = (element, property = 'value') => {
        let elementPrototype = Object.getPrototypeOf(element);
        if (!elementPrototype.hasOwnProperty(property)) {
            return;
        }
        let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, property);
        let newProps = {
            get: function () {
                return descriptor.get.apply(element, arguments);
            },
            set: function (t) {
                setTimeout( () => { element.dispatchEvent(new Event(property + 'change')); }, 10);
                return descriptor.set.apply(element, arguments);
            }
        };
        Object.defineProperty(element, property, newProps);
    }
 
    let floatPlaceholder = (element) => {
        let placeholder = getPlaceholder(element);
        if (!isNull(placeholder)) {
            addClass(placeholder, settings.classNameActive);
        }
    }
 
    let resetPlaceholder = (element) => {
        let placeholder = getPlaceholder(element);
        if (!isNull(placeholder)) {
            if (isEmpty(element.value)) {
                removeClass(placeholder, settings.classNameActive);
            }
        }
    }
 
    let getContainer = (element) => {
        return element.closest(settings.classNameContainer);
    }
 
    let getPlaceholder = (element) => {
        let container = getContainer(element);
        return !isNull(container)
            ? container.querySelector(settings.classNamePlaceholder) : null;
    }
 
    let createPlaceholder = (container) => {
        let placeholder = document.createElement('label');
        addClass(placeholder, settings.classNamePlaceholder);
        container.appendChild(placeholder);
        return placeholder;
    }
 
    let createContainer = (element) => {
        let container = document.createElement('div');
        let parentNode = element.parentNode;
        addClass(container, settings.classNameContainer);
        parentNode.insertBefore(container, element);
        container.appendChild(element);
        return container;
    }
 
    let verifyPlaceholderText = (element) => {
        if (isEmpty(element.id)) {
            element.id = `floating_placeholder_${randomFromTo(1271991, 7281987)}`;
        }
        let placeholderText = getPlaceholderText(element);
        if (!isEmpty(placeholderText)) {
            setPlaceholderTextCache(element, placeholderText);
        }
        setPlaceholderText(element, null);
        return getPlaceholderTextCache(element);
    }
 
    let setPlaceholderText = (element, value) => {
        addData(element, {key: settings.attributePlaceholder, value: value});
    }
 
    let getPlaceholderText = (element) => {
        let value = getData(element, settings.attributePlaceholder);
        return value;
    }
 
    let setPlaceholderTextCache = (element, value) => {
        addData(element, {key: settings.dataNamePlaceholderCache, value: value});
    }
 
    let getPlaceholderTextCache = (element) => {
        let value = getData(element, settings.dataNamePlaceholderCache);
        return value;
    }
 
    let floatPlaceholderEvent = (event) => {
        let element = event.currentTarget;
        let nodeName = element.nodeName.toLowerCase();
        switch (event.type) {
            case 'focus':
                if (nodeName === 'select') {
                    return;
                }
                break;
            case 'keyup':
                if (nodeName === 'select') {
                    if (isEmpty(element.value)) {
                        return;
                    }
                } else {
                    return;
                }
                break;
        }
        floatPlaceholder(element);
    }
 
    let resetPlaceholderEvent = (event) => {
        let element = event.currentTarget;
        let nodeName = element.nodeName.toLowerCase();
        switch (event.type) {
            case 'keyup':
                if (nodeName === 'select') {
                    if (!isEmpty(element.value)) {
                        return;
                    }
                } else {
                    return;
                }
                break;
        }
        resetPlaceholder(element);
    }
 
    let registerEvents = (element, eventNames, func) => {
        eventNames.forEach((eventName, index) => {
            element.removeEventListener(eventName, func);
            element.addEventListener(eventName, func);
        });
    }
 
    let addClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
 
        let modified = false;
        if (cssClass.length > 0 && !hasClass(element, cssClass)) {
            element.classList.add(cssClass)
            modified = true;
        }
        return modified;
    }
 
    let removeClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
 
        let modified = false;
        if (cssClass.length > 0 && hasClass(element, cssClass)) {
            element.classList.remove(cssClass);
            modified = true;
        }
        return modified;
    }
 
    let hasClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
        return element.classList.contains(cssClass);
    }
 
    let isNull = (item) => {
        return undefined === item || null === item;
    }
 
    let isEmpty = (str) => {
        return isNull(str) || String(str).trim().length < 1;
    }
 
    let randomFromTo = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }
 
    let addData = (element, data) => {
        if (isNull(data)) {
            return;
        } else if (!Array.isArray(data)) {
            data = [data];
        }
        data.forEach(item => {
            if (!isNull(item.value)) {
                element.setAttribute(item.key, item.value);
            } else {
                removeData(element, item);
            }
        });
    }
 
    let removeData = (element, data) => {
        if (isNull(data)) {
            return;
        } else if (!Array.isArray(data)) {
            data = [data];
        }
        data.forEach(item => {
            let key = item.key || item;
            element.removeAttribute(key);
        });
    }
 
    let getData = (element, data) => {
        if (isNull(data)) {
            return null;
        } else if (!Array.isArray(data)) {
            data = [data];
        }
        let results = [];
        data.forEach(item => {
            let key = item.key || item;
            results.push(element.getAttribute(key));
        });
        return results.length == 1 ? results[0] : results;
    }
    
    let isString = (item) => {
        return 'string' === typeof item;
    }    
 
    let verifyElements = (items) => {
        if (isNull(items)) {
            throw new TypeError('No elements specified');
        } else if (isString(items)) {
            items = document.querySelectorAll(items);
        }        
        if (!isArrayLike(items)) {
            items = [items];
        }
        return items;
    }
 
    // see if it looks and smells like an iterable object, and do accept length === 0
    let isArrayLike = (item) => {
        return (
            Array.isArray(item) ||
            (!!item &&
                typeof item === "object" &&
                typeof (item.length) === "number" &&
                (item.length === 0 ||
                    (item.length > 0 &&
                        (item.length - 1) in item)
                )
            )
        );
    }
 
    let getEvents = () => {
        return [
            {names: ['click', 'focus', 'keyup', 'valuechange'], callback: floatPlaceholderEvent},
            {names: ['blur', 'focusout', 'keyup', 'valuechange'], callback: resetPlaceholderEvent},
        ];
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Placeholder)); // http://programmingnotes.org/

The following is Placeholder.css.





		
		
			Placeholder.css
			
CSS
			
			/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 9, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Placeholder.css
//    Description: CSS for the floating placeholder
// ============================================================================
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100');

.floating-placeholder {
    align-self: flex-end;
}

.floating-placeholder:focus {
    border:  none;
    outline:none;
    background-color: #fff9e5;
    border-bottom: 1px solid orangered;
}

.floating-placeholder-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    pointer-events: none;
    transition: all 150ms ease-in-out;
    font-family: inherit;
}

.floating-placeholder-label.active {
    top: -12.5px;
    left: -9px;
    font-size: 11px;
    font-style: italic;
}

.floating-placeholder-container {
    position: relative;
    margin-bottom: 25px;
    display: flex;
    color: #898d8d;
    font-family: "Roboto",sans-serif, Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,"Helvetica Neue",Helvetica;
}

.floating-placeholder-container input,
.floating-placeholder-container textarea,
.floating-placeholder-container select {
    border: 0;
    border-bottom: 1px solid #767c7c;
    background: transparent;
    width: 100%;
    padding: 8px 0 5px 0.15em;
    font-size: 16px;
    font-family: inherit;
    color: black;
}

.floating-placeholder-container select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='1' viewBox='0 0 30 30' width='1' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;
}

.floating-placeholder-container select::-ms-expand {
    display: none;
}

.floating-placeholder-container select option {
    color: black;
    background-color: white;
} /* // http://programmingnotes.org/ */
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
				
						/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 9, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Placeholder.css
//    Description: CSS for the floating placeholder
// ============================================================================
*/
 
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100');
 
.floating-placeholder {
    align-self: flex-end;
}
 
.floating-placeholder:focus {
    border:  none;
    outline:none;
    background-color: #fff9e5;
    border-bottom: 1px solid orangered;
}
 
.floating-placeholder-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    pointer-events: none;
    transition: all 150ms ease-in-out;
    font-family: inherit;
}
 
.floating-placeholder-label.active {
    top: -12.5px;
    left: -9px;
    font-size: 11px;
    font-style: italic;
}
 
.floating-placeholder-container {
    position: relative;
    margin-bottom: 25px;
    display: flex;
    color: #898d8d;
    font-family: "Roboto",sans-serif, Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,"Helvetica Neue",Helvetica;
}
 
.floating-placeholder-container input,
.floating-placeholder-container textarea,
.floating-placeholder-container select {
    border: 0;
    border-bottom: 1px solid #767c7c;
    background: transparent;
    width: 100%;
    padding: 8px 0 5px 0.15em;
    font-size: 16px;
    font-family: inherit;
    color: black;
}
 
.floating-placeholder-container select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='1' viewBox='0 0 30 30' width='1' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;
}
 
.floating-placeholder-container select::-ms-expand {
    display: none;
}
 
.floating-placeholder-container select option {
    color: black;
    background-color: white;
} /* // http://programmingnotes.org/ */

4. More Examples

Below are more examples demonstrating the use of ‘Placeholder.js‘. Don’t forget to include the module when running the examples!





		
		
			More Examples
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 9, 2020
//    Taken From: http://programmingnotes.org/
//    File:  placeholderDemo.html
//    Description: Demonstrates the use of Placeholder.js
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Placeholder.js Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.inline {
    display:inline-block;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 280px;
    border: 1px solid lightgrey;
    padding: 60px;
    border-radius: 10px;
    margin-top: 30px;
    background-color: #f9f9f9;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

body {
	background-image: url("https://images.pexels.com/photos/3116416/pexels-photo-3116416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
	background-position: center;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
	min-height:100vh;
}
</style>

<!-- // Include module -->
<link type="text/css" rel="stylesheet" href="./Placeholder.css">
<script type="text/javascript" src="./Placeholder.js"></script>

</head>
<body>
<div class="main">
    My Programming Notes Placeholder.js Demo
    
    <div class="center">
        <div class="container">
            <input type="text" placeholder="Name" />
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Password" /> 
            <select name="gender" id="gender" placeholder="Gender" >
                <option value="" selected></option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="na">Prefer Not To Say</option>
            </select>            
            <textarea rows="4" cols="50" placeholder="Describe Yourself"></textarea>   
        </div>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
    
    // Add floating placeholder to the selected elements
    Placeholder.float('input:not([type="radio"]):not([type="checkbox"]), select, textarea');
    
    // Remove floating placeholder to the selected elements
    //Placeholder.remove(document.querySelectorAll('input:not([type="radio"]):not([type="checkbox"]), select, textarea'));
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 9, 2020
//    Taken From: http://programmingnotes.org/
//    File:  placeholderDemo.html
//    Description: Demonstrates the use of Placeholder.js
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Placeholder.js Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
 
.inline {
    display:inline-block;
}
 
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.container {
    width: 280px;
    border: 1px solid lightgrey;
    padding: 60px;
    border-radius: 10px;
    margin-top: 30px;
    background-color: #f9f9f9;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
 
body {
	background-image: url("https://images.pexels.com/photos/3116416/pexels-photo-3116416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
	background-position: center;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
	min-height:100vh;
}
</style>
 
<!-- // Include module -->
<link type="text/css" rel="stylesheet" href="./Placeholder.css">
<script type="text/javascript" src="./Placeholder.js"></script>
 
</head>
<body>
<div class="main">
    My Programming Notes Placeholder.js Demo
    
    <div class="center">
        <div class="container">
            <input type="text" placeholder="Name" />
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Password" /> 
            <select name="gender" id="gender" placeholder="Gender" >
                <option value="" selected></option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="na">Prefer Not To Say</option>
            </select>            
            <textarea rows="4" cols="50" placeholder="Describe Yourself"></textarea>   
        </div>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
    
    // Add floating placeholder to the selected elements
    Placeholder.float('input:not([type="radio"]):not([type="checkbox"]), select, textarea');
    
    // Remove floating placeholder to the selected elements
    //Placeholder.remove(document.querySelectorAll('input:not([type="radio"]):not([type="checkbox"]), select, textarea'));
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript/CSS/HTML || Modal.js – Simple Modal Popup Panel Using Vanilla JavaScript

September 04, 2020 admin No comments

The following is a module which allows for a simple modal popup panel in vanilla JavaScript. Options include allowing the modal to be dragged, resized, and closed on outer area click.

Modal drag and resize supports touch (mobile) input.

Modal.js & CSS Source

Contents

1. Basic Usage 2. Modal HTML 3. Initialize Modal Options 4. Modal Dialog 5. Modal.js & CSS Source 6. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates showing and hiding a modal popup.





		
		
			1. Basic Usage
			
JavaScript
			
			// Opening & Closing Modal. 

<script>
(() => {
    // Shows the modal popup. It accepts either a string selector
    // or a Javascript element
    Modal.show('selector');
    
    // Hides the modal popup. It accepts either a string selector
    // or a Javascript element    
    Modal.hide(document.querySelector('selector'));
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						// Opening & Closing Modal. 
 
<script>
(() => {
    // Shows the modal popup. It accepts either a string selector
    // or a Javascript element
    Modal.show('selector');
    
    // Hides the modal popup. It accepts either a string selector
    // or a Javascript element    
    Modal.hide(document.querySelector('selector'));
})();
</script>

‘Modal.show‘ and ‘Modal.hide‘ accepts either a string selector or a Javascript element.

2. Modal HTML

The following is the HTML used to display the modal. The attributes supplied to the ‘modal’ element specifies whether it is allowed to be dragged, resized, or closed on outer area click.





		
		
			2. Modal HTML
			
XHTML
			
			<!-- // Available options -->

<!-- The Modal Background-->
<section id="modalExample" class="modal"
        data-closeOnOuterClick="true"
        data-draggable="true"
        data-resizable="true"
    >
    <!-- Modal Panel -->
    <article class="modal-panel">
        <header class="modal-header">
            <div class="modal-header-text">
                Modal Header
            </div>
            <div class="modal-close-button"></div>
        </header>
        <div class="modal-body">
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
        </div>
        <footer class="modal-footer">
            <div class="modal-footer-text">
                Modal Footer
            </div>
        </footer>
    </article>
</section>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
				
						<!-- // Available options -->
 
<!-- The Modal Background-->
<section id="modalExample" class="modal"
        data-closeOnOuterClick="true"
        data-draggable="true"
        data-resizable="true"
    >
    <!-- Modal Panel -->
    <article class="modal-panel">
        <header class="modal-header">
            <div class="modal-header-text">
                Modal Header
            </div>
            <div class="modal-close-button"></div>
        </header>
        <div class="modal-body">
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
        </div>
        <footer class="modal-footer">
            <div class="modal-footer-text">
                Modal Footer
            </div>
        </footer>
    </article>
</section>

Sample:

3. Initialize Modal Options

In order for the options on the modal to take effect, it needs to be initialized.

The following example demonstrates initializing the modal popup options.





		
		
			3. Initialize Modal Options
			
JavaScript
			
			// Initialize options. 

<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
    // Sets up the modal option button clicks
    Modal.init();
});
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Initialize options. 
 
<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
    // Sets up the modal option button clicks
    Modal.init();
});
</script>

Note: ‘Modal.init‘ only needs to be called once. It will initialize all modals on the page.

4. Modal Dialog

The following demonstrates adding a simple dialog to the page.

For more options, click here!





		
		
			4. Modal Dialog
			
JavaScript
			
			// Add simple dialog. 

<script>
(() => {
    // Adds a simple dialog to the page
    Modal.showDialog({
        title: 'Save Content?',
        body: 'Content will be saved. Continue?',
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						// Add simple dialog. 
 
<script>
(() => {
    // Adds a simple dialog to the page
    Modal.showDialog({
        title: 'Save Content?',
        body: 'Content will be saved. Continue?',
    });
})();
</script>

Sample:

5. Modal.js & CSS Source

The following is the Modal.js Namespace & CSS Source. Include this in your project to start using!





		
		
			Modal.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 4, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Modal.js
//    Description: Javascript that handles modal popup related functions
//    Example:
//        // Show Modal
//        Modal.show('selector')
//
//        // Hide Modal
//        Modal.hide('selector')
// ============================================================================
/**
* NAMESPACE: Modal
* USE: Handles Modal related functions
*/
var Modal = Modal || {};
(function(namespace) {
    'use strict';

// -- Public data --
    // Property to hold public variables and functions
    let exposed = namespace;

    // Set class names and other shared data
    const settings = {
        handleTypeResize: 'resize',
        handleTypeDrag: 'drag',

        // Element class names
        classNameModal: '.modal',
        classNameModalPanel: '.modal-panel',
        classNameCloseButton: '.modal-close-button',
        classNameModalHeader: '.modal-header',
        classNameModalHeaderText: '.modal-header-text',
        classNameModalBody: '.modal-body',
        classNameModalFooter: '.modal-footer',
        classNameModalFooterText: '.modal-footer-text',
        classNameDraggable: '.modal-draggable',
        classNameDraggableIcon: '.icon',
        classNameShow: '.show',
        classNameResizable: '.modal-resizable',
        classNameResizableIcon: '.icon',
        classNameDialog: '.dialog',
        classNameButton: '.modal-button',
        classNameButtonCancel: '.cancel',
        classNameButtonOK: '.ok',
        classNameButtonContainer: '.buttonContainer',
        classNameResizeMargin: '.resizeMargin',

        // Element data names
        dataNameCloseOnOuterClick: 'data-closeOnOuterClick',
        dataNameDraggable: 'data-draggable',
        dataNameIsDraggable: 'data-isDraggable',
        dataNameResizable: 'data-resizable',
        dataNameIsResizable: 'data-isResizable',
        cleanClassName: (str) => {
            return str ? str.trim().replace('.', '') : '';
        },
    };

    exposed.settings = settings;

    /**
    * FUNCTION: init
    * USE: Initializes the modal button clicks.
    * @param element: JavaScript element to search for modals.
    * @return: N/A.
    */
    exposed.init = (element = document) => {
        addClickEvents(element);
    }

    /**
    * FUNCTION: show
    * USE: Shows the modal popup.
    * @param element: JavaScript element/String selector of the modal to show.
    * @return: N/A.
    */
    exposed.show = (element) => {
        element = verifyElement(element);
        addClass(element, settings.classNameShow);
    }

    /**
    * FUNCTION: hide
    * USE: Hides the modal popup.
    * @param element: JavaScript element/String selector of the modal to hide.
    * @return: N/A.
    */
    exposed.hide = (element) => {
        element = verifyElement(element);
        resetPosition(element);
        removeClass(element, settings.classNameShow);
    }

    /**
    * FUNCTION: getPanel
    * USE: Returns the modal panel element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal panel element.
    */
    exposed.getPanel = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalPanel);
    }

    /**
    * FUNCTION: getHeader
    * USE: Returns the modal header element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal header element.
    */
    exposed.getHeader = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalHeader);
    }

    /**
    * FUNCTION: getHeaderText
    * USE: Returns the modal header text element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal header text element.
    */
    exposed.getHeaderText = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalHeaderText);
    }

    /**
    * FUNCTION: getBody
    * USE: Returns the modal body element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal body element.
    */
    exposed.getBody = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalBody);
    }

    /**
    * FUNCTION: getFooter
    * USE: Returns the modal footer element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal footer element.
    */
    exposed.getFooter = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalFooter);
    }

    /**
    * FUNCTION: getFooterText
    * USE: Returns the modal footer text element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal footer text element.
    */
    exposed.getFooterText = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalFooterText);
    }

    /**
    * FUNCTION: showDialog
    * USE: Shows a modal dialog box with an OK/Cancel button.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       title: The title of the dialog
    *       body: The content body of the dialog
    *       onShow(): Optional. Function that allows to do something before show.
    *          Return false to stop showing process
    *       onHide(): Optional. Function that allows to do something before hide.
    *          Return false to stop hidding process
    *       onDestroy(): Optional. Function that allows to do something before
    *          destroy. Return false to stop destroying process
    *       closeOnOuterClick: Optional. Determines if the dialog should close
    *          on outer dialog click. Default is False
    *       draggable: Optional. Determines if the dialog is draggable.
    *          Default is False
    *       resizable: Optional. Determines if the dialog is resizable.
    *          Default is False
    *       autoOpen: Optional. Determines if the dialog should auto open.
    *          Default is True
    *       draggable: Optional. Determines if the dialog is draggable.
    *          Default is False
    *       destroyOnHide: Optional. Determines if the dialog should be removed
    *          from DOM after hiding. Default is True
    *       buttons: Optional. Object allows to add custom buttons to the dialog
    *   }
    * @return: The modal dialog object.
    */
    exposed.showDialog = (options) => {
        options = verifyOptions(options);
        let dialog = createDialog(options);
        if (toBoolean(options.autoOpen)) {
            dialog.show();
        }
        return dialog;
    }

// -- Private data --
    let verifyOptions = (options) => {
        if (typeof options !== 'object') {
            let body = options;
            options = {};
            options.body = body;
        }
        return options;
    }

    let createDialog = (options) => {
        let defaultButtons = {
            cancel: {
                text: 'Cancel',
                cssClass: settings.classNameButtonCancel,
                visible: true,
            },
            ok: {
                text: 'OK',
                cssClass: settings.classNameButtonOK,
                visible: true,
            },
        };

        copyDefaults(options, defaultButtons);

        let modalButtons = options.buttons;
        let container = document.body;
        let modal = createElement('section', [settings.classNameModal, settings.classNameDialog]);
        let modalPanel = createElement('article', [settings.classNameModalPanel, settings.classNameDialog]);
        let modalHeader = createElement('header', [settings.classNameModalHeader, settings.classNameDialog]);
        let modalHeaderText = createElement('div', [settings.classNameModalHeaderText, settings.classNameDialog]);
        let modalBody = createElement('div', [settings.classNameModalBody, settings.classNameDialog]);
        let modalFooter = createElement('footer', [settings.classNameModalFooter, settings.classNameDialog]);
        let buttonContainer = createElement('div', [settings.classNameButtonContainer]);

        modal.appendChild(modalPanel);
        modalPanel.appendChild(modalHeader);
        modalHeader.appendChild(modalHeaderText);
        modalPanel.appendChild(modalBody);
        modalPanel.appendChild(modalFooter);
        modalFooter.appendChild(buttonContainer);

        let showHeaderCloseButton = true;
        let keys = Object.keys(modalButtons);
        keys.forEach((prop, index) => {
            prop = prop.toLowerCase();
            let buttonOptions = modalButtons[prop];
            if (!isNull(buttonOptions.visible) && !toBoolean(buttonOptions.visible)) {
                return false;
            }

            let text = buttonOptions.text || '';
            let cssClass = buttonOptions.cssClass || '';
            let button = createElement('button', [settings.classNameButton, settings.classNameDialog, cssClass]);
            button.innerHTML = !isNull(text) && isEmpty(text) ? '&nbsp;' : text;
            buttonContainer.appendChild(button)

            registerEvents(button, ['click'], (eventClick) => {
                if (buttonOptions.onClick) {
                    let value = buttonOptions.onClick.call(button, eventClick);
                    if (!isNull(value) && !value) {
                        return;
                    }
                }
                hide(options.destroyOnHide);
            });

            if ((index + 1) === keys.length) {
                if (toBoolean(options.resizable)) {
                    addClass(button, settings.classNameResizeMargin);
                }
            }
            showHeaderCloseButton = false;
        });

        if (showHeaderCloseButton) {
            let modalHeaderClose = createElement('div', [settings.classNameCloseButton, settings.classNameDialog]);
            modalHeader.appendChild(modalHeaderClose);
            registerEvents(modalHeaderClose, ['click'], (eventClick) => {
                hide(options.destroyOnHide);
            });
        }

        modalHeaderText.innerHTML = options.title || '';
        modalBody.innerHTML = options.body || '';

        modal.id = `modal_${randomFromTo(1271991, 7281987)}`;
        if (toBoolean(options.closeOnOuterClick)) {
            modal.setAttribute(settings.dataNameCloseOnOuterClick, options.closeOnOuterClick);
        }
        if (toBoolean(options.draggable)) {
            modal.setAttribute(settings.dataNameDraggable, options.draggable);
        }
        if (toBoolean(options.resizable)) {
            modal.setAttribute(settings.dataNameResizable, options.resizable);
        }
        container.appendChild(modal);

        options.autoOpen = !isNull(options.autoOpen) ? options.autoOpen : true;
        if (!options.autoOpen) {
            if (isNull(options.destroyOnHide)) {
                options.destroyOnHide = false;
            }
        }
        options.destroyOnHide = !isNull(options.destroyOnHide) ? options.destroyOnHide : true;

        let show = () => {
            if (options.onShow) {
                let value = options.onShow.call(this);
                if (!isNull(value) && !value) {
                    return;
                }
            }
            setTimeout(()=> {
                exposed.show(modal);
            }, 10);
        }
        let hide = (destroyModal = false) => {
            if (options.onHide) {
                let value = options.onHide.call(this);
                if (!isNull(value) && !value) {
                    return;
                }
            }
            exposed.hide(modal);
            if (destroyModal) {
                setTimeout(()=> {
                    destroy();
                }, 500);
            }
        }
        let destroy = () => {
            if (options.onDestroy) {
                let value = options.onDestroy.call(this);
                if (!isNull(value) && !value) {
                    return;
                }
            }
            if (!isDestroyed()) {
                container.removeChild(modal);
            }
        }
        let isDestroyed = () => {
            return !container.contains(modal);
        }
        let isShowing = () => {
            return hasClass(modal, settings.classNameShow);
        }

        addModalClickEvents(modal);

        if (getCoords(modalFooter).position === 'absolute') {
            modalFooter.style.position = 'relative';
            let coords = getCoords(modalFooter);
            modalPanel.style['min-width'] = coords.width + 'px';
            modalBody.style['padding-bottom'] = coords.height + 'px';
            modalFooter.style.position = null;
        }

        return {
            modal: modal,
            show: () => {
                show();
            },
            hide: () => {
                hide(options.destroyOnHide);
            },
            destroy: () => {
                hide(true);
            },
            isDestroyed: () => {
                return isDestroyed();
            },
            isShowing: () => {
                return isShowing();
            }
        };
    }

    let copyDefaults = (options, defaultButtons) => {
        if (isNull(options.buttons)) {
            options.buttons = defaultButtons
            return;
        }
        for (let prop in options.buttons) {
            prop = prop.toLowerCase();
            if (!defaultButtons.hasOwnProperty(prop)) {
                continue;
            }
            options.buttons[prop] = Object.assign(defaultButtons[prop], options.buttons[prop])
        }
    }

    let createElement = (type, classes) => {
        let element = document.createElement(type);
        if (!isNull(classes)) {
            classes.forEach(item => {
               addClass(element, item);
            });
        }
        return element;
    }

    let addClickEvents = (element) => {
        // Add misc click events for the modals
        let modals = element.querySelectorAll(settings.classNameModal);
        modals.forEach((modal, index) => {
            addModalClickEvents(modal, index);
        });
    }

    let addModalClickEvents = (modal, index = 0) => {
        let registerCloseOnOuterClick = false;

        // Add button clicks for the close button
        let closeButton = modal.querySelector(settings.classNameCloseButton);
        if (!isNull(closeButton)) {
            registerEvents(closeButton, ['click'], closeButtonEvent);
        }
        // Add functionalty to make the modal draggable
        if (shouldDrag(modal) && !isDraggable(modal)) {
            // Get elements and make sure they exist
            let panel = exposed.getPanel(modal);
            if (isNull(panel)) {
                throw new TypeError(`Unable to make Modal #${index + 1} draggable. Reason: Modal has no 'Modal Panel' associated with it.`);
            }
            // If a header exists, attach a drag handle to it
            let handle = getHandle(modal, settings.handleTypeDrag);
            if (isNull(handle)) {
                let header = exposed.getHeader(modal);
                if (!isNull(header)) {
                    handle = createHandle(header, settings.handleTypeDrag);
                } else {
                    addClass(panel, settings.classNameDraggable);
                }
            }
            makeDraggable({
                element: panel,
                handle: handle,
                keepInViewPort: true,
            });
            // Mark that this modal is draggable
            setIsDraggable(modal, true)
        }

        // Add functionalty to make the modal resizable
        if (shouldResize(modal) && !isResizable(modal)) {
            // Get elements and make sure they exist
            let panel = exposed.getPanel(modal);
            if (isNull(panel)) {
                throw new TypeError(`Unable to make Modal #${index + 1} resizable. Reason: Modal has no 'Modal Panel' associated with it.`);
            }
            // If a footer exists, attach a resize handle to it
            let handle = getHandle(modal, settings.handleTypeResize);
            if (isNull(handle)) {
                let footer = exposed.getFooter(modal);
                if (!isNull(footer)) {
                    handle = createHandle(footer, settings.handleTypeResize);
                } else {
                    addClass(panel, settings.classNameResizable);
                }
            }
            makeResizable({
                element: panel,
                handle: handle,
                keepInViewPort: true,
            });
            // Mark that this modal is resizable
            setIsResizable(modal, true);
        }
        // Check to see if we need to register the close on click event
        if (!registerCloseOnOuterClick) {
            registerCloseOnOuterClick = shouldCloseOnOuterClick(modal);
        }

        // Determine if the modal should close if the outer area is clicked
        if (registerCloseOnOuterClick) {
            registerEvents(document, ['click'], backgroundHideEvent);
        }
    }

    let registerEvents = (element, eventNames, func) => {
        eventNames.forEach((eventName, index) => {
            element.removeEventListener(eventName, func);
            element.addEventListener(eventName, func);
        });
    }

    let closeButtonEvent = (event) => {
        let closeButton = event.target || event.currentTarget;
        if (isNull(closeButton)) {
            return;
        }
        let modal = closeButton.closest(settings.classNameModal);
        exposed.hide(modal);
    }

    let backgroundHideEvent = (event) => {
        let target = event.target;
        if (isNull(target)
            || !isElement(target)
            || !hasClass(target, settings.classNameModal)
            || !hasClass(target, settings.classNameShow)
            || !shouldCloseOnOuterClick(target)) {
            return;
        }
        exposed.hide(target);
    }

    let createHandle = (container, type) => {
        let handle = document.createElement('div');
        switch (type) {
            case settings.handleTypeResize:
                addClass(handle, settings.classNameResizable);
                addClass(handle, settings.classNameResizableIcon);
                break;
            case settings.handleTypeDrag:
                addClass(handle, settings.classNameDraggable);
                addClass(handle, settings.classNameDraggableIcon);
                break;
            default:
                throw new TypeError(`Unknown handle type: ${type}`);
                break;
        }
        handle.setAttribute('tabindex', 0);
        container.appendChild(handle);
        return handle;
    }

    let getHandle = (element, type)  => {
        let selector = null;
        switch (type) {
            case settings.handleTypeResize:
                selector = `${settings.classNameResizable}${settings.classNameResizableIcon}`;
                break;
            case settings.handleTypeDrag:
                selector = `${settings.classNameDraggable}${settings.classNameDraggableIcon}`;
                break;
            default:
                throw new TypeError(`Unknown handle type: ${type}`);
                break;
        }
        return element.querySelector(selector);
    }

    let makeResizable = (options) => {
        let resizable = options.element || options;
        let handle = options.handle || resizable;
        let keepInViewPort = !isNull(options.keepInViewPort) ? options.keepInViewPort : false;

        let coords = getCoords(resizable);
        let initialWidth = coords.width;
        let initialHeight = coords.height;

        let mouseDown = (event) => {
            event.stopPropagation();
            // Get the mouse down position of the element
            let coords = getCoords(resizable);
            let offsetX = event.clientX - coords.width;
            let offsetY = event.clientY - coords.height;

            let moveElement = (event) => {
                // Get the new position
                let newWidth = (event.clientX - offsetX);
                let newHeight = (event.clientY - offsetY);

                // Make sure the width/height is never less than the initial values
                newWidth = Math.max(newWidth, initialWidth);
                newHeight = Math.max(newHeight, initialHeight);

                setPosition(resizable, {width: newWidth, height: newHeight});

                if (keepInViewPort && !isInViewport(resizable)) {
                    let bounding = resizable.getBoundingClientRect();
                    let viewInfo = getViewportInfo();
                    let viewportHeight = viewInfo.height;
                    let viewportWidth = viewInfo.width;
                    if (bounding.bottom > viewportHeight) {
                        newHeight -= Math.abs(bounding.bottom - viewportHeight);
                    }
                    if (bounding.right > viewportWidth) {
                        newWidth -= Math.abs(bounding.right - viewportWidth);
                    }
                    setPosition(resizable, {width: newWidth, height: newHeight});
                }
            }
            let reset = (event) => {
                document.removeEventListener('mousemove', moveElement);
                document.removeEventListener('mouseup', reset);
            }
            document.addEventListener('mouseup', reset);
            document.addEventListener('mousemove', moveElement);
        }
        addTouchSupport(handle);
        handle.addEventListener('mousedown', mouseDown);
    }

    let makeDraggable = (options) => {
        let draggable = options.element || options;
        let handle = options.handle || draggable;
        let keepInViewPort = !isNull(options.keepInViewPort) ? options.keepInViewPort : false;

        let mouseDown = (event) => {
            // Get the mouse down position of the element
            let coords = getCoords(draggable);
            let offsetX = event.clientX - coords.left;
            let offsetY = event.clientY - coords.top;

            let moveElement = (event) => {
                // Get the new position
                let newLeft = event.clientX - offsetX;
                let newTop = event.clientY - offsetY;

                setPosition(draggable, {left: newLeft, top: newTop});

                if (keepInViewPort && !isInViewport(draggable)) {
                    let bounding = draggable.getBoundingClientRect();
                    let viewInfo = getViewportInfo();
                    let viewportHeight = viewInfo.height;
                    let viewportWidth = viewInfo.width;

                    if (bounding.left < 0) {
                        newLeft += Math.abs(bounding.left);
                    }
                    if (bounding.top < 0) {
                        newTop += Math.abs(bounding.top);
                    }
                    if (bounding.bottom > viewportHeight) {
                        newTop -= Math.abs(bounding.bottom - viewportHeight);
                    }
                    if (bounding.right > viewportWidth) {
                        newLeft -= Math.abs(bounding.right - viewportWidth);
                    }
                    setPosition(draggable, {left: newLeft, top: newTop});
                }
            }
            let reset = (event) => {
                document.removeEventListener('mousemove', moveElement);
                document.removeEventListener('mouseup', reset);
            }
            document.addEventListener('mouseup', reset);
            document.addEventListener('mousemove', moveElement);
        }
        addTouchSupport(handle);
        handle.addEventListener('mousedown', mouseDown);
    }

    // Check to make sure the element will be within our viewport boundary
    let isInViewport = (element) => {
        let bounding = element.getBoundingClientRect();
        let viewInfo = getViewportInfo();
        return (
            bounding.top >= 0
            && bounding.left >= 0
            && bounding.bottom <= viewInfo.height
            && bounding.right <= viewInfo.width
        );
    }

    let getViewportInfo = () => {
        return {
            height: Math.max(window.innerHeight || 0, document.documentElement.clientHeight || 0),
            width: Math.max(window.innerWidth || 0, document.documentElement.clientWidth || 0),
        };
    }

    let getCoords = (element) => {
        let computedStyle = window.getComputedStyle(element);
        let intProps = ['left', 'top', 'width', 'height'];
        let result = {};
        for (const prop of intProps) {
            result[prop] = parseInt(computedStyle[prop], 10) || parseInt(element.style[prop], 10) || 0;
        }
        let stringProps = ['position'];
        for (const prop of stringProps) {
            result[prop] = (computedStyle[prop] || element.style[prop]).toLowerCase();
        }
        if (result.position !== 'relative') {
            if (!result.left) {
                result.left = element.offsetLeft || 0;
            }
            if (!result.top) {
                result.top = element.offsetTop || 0;
            }
            if (!result.width) {
                result.width = element.offsetWidth || 0;
            }
            if (!result.height) {
                result.height = element.offsetHeight || 0;
            }
        }
        return result;
    }

    let addTouchSupport = (element) => {
        let events = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
        registerEvents(element, events, touchConverter);
    }

    let touchConverter = (event) => {
        // stop touch event
        event.stopPropagation();
        event.preventDefault();
        let touches = event.changedTouches;
        if (!touches || touches.length < 1) {
            return;
        }
        let first = touches[0];
        let target = first.target;
        let type = '';
        switch (event.type) {
            case 'touchstart':
                type = 'mousedown';
                break;
            case 'touchmove':
                type = 'mousemove';
                break;
            case 'touchend': case 'touchcancel':
                type = 'mouseup';
                break;
            default:
                return;
        }
        let simulatedEvent = null;
        try {
            simulatedEvent = new MouseEvent(type, {
                bubbles: true,
                cancelable: true,
                view: window,
                screenX: first.screenX,
                screenY: first.screenY,
                clientX: first.clientX,
                clientY: first.clientY,
            });
        } catch (e) {
            simulatedEvent = document.createEvent('MouseEvent');
            simulatedEvent.initMouseEvent(type, true, true, window, 1,
                                      first.screenX, first.screenY,
                                      first.clientX, first.clientY, false,
                                      false, false, false, 0 /*left*/, null);
        }
        target.dispatchEvent(simulatedEvent);
    }

    let resetPosition = (element) => {
        let panel = exposed.getPanel(element);
        if (isNull(panel)) {
            return;
        }
        setPosition(panel, {left: null, top: null, width: null, height: null});
    }

    let setPosition = (element, options) => {
        for (const prop in options) {
            if (prop in element.style) {
                let value = options[prop];
                element.style[prop] = !isNull(value) ? parseInt(value, 10) + 'px' : value;
            }
        }
    }

    let shouldCloseOnOuterClick = (element) => {
        let value = element.getAttribute(settings.dataNameCloseOnOuterClick);
        return toBoolean(value);
    }

    let shouldDrag = (element) => {
        let value = element.getAttribute(settings.dataNameDraggable);
        return toBoolean(value);
    }

    let setIsDraggable = (element, value) => {
        element.setAttribute(settings.dataNameIsDraggable, value);
    }

    let isDraggable = (element) => {
        let value = element.getAttribute(settings.dataNameIsDraggable);
        return toBoolean(value);
    }

    let shouldResize = (element) => {
        let value = element.getAttribute(settings.dataNameResizable);
        return toBoolean(value);
    }

    let setIsResizable = (element, value) => {
        element.setAttribute(settings.dataNameIsResizable, value);
    }

    let isResizable = (element) => {
        let value = element.getAttribute(settings.dataNameIsResizable);
        return toBoolean(value);
    }

    let verifyElement = (element) => {
        if (isString(element)) {
            element = document.querySelector(element);
        }
        if (isNull(element)) {
            throw new TypeError(`Unable to process. Element provided is null`);
        } else if (!isElement(element)) {
            throw new TypeError(`Unable to process element of type: ${typeof element}. Reason: '${element}' is not an HTMLElement.`);
        }
        return element;
    }

    let addClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);

        let modified = false;
        if (cssClass.length > 0 && !hasClass(element, cssClass)) {
            element.classList.add(cssClass)
            modified = true;
        }
        return modified;
    }

    let removeClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);

        let modified = false;
        if (cssClass.length > 0 && hasClass(element, cssClass)) {
            element.classList.remove(cssClass);
            modified = true;
        }
        return modified;
    }

    let hasClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
        return element.classList.contains(cssClass);
    }

    let isString = (item) => {
        return 'string' === typeof item;
    }

    let isNull = (item) => {
        return undefined === item || null === item;
    }

    let isElement = (item) => {
        let value = false;
        try {
            value = item instanceof HTMLElement || item instanceof HTMLDocument;
        }
        catch (e) {
            value = (typeof item==="object") &&
                (item.nodeType===1) && (typeof item.style === "object") &&
                (typeof item.ownerDocument ==="object");
        }
        return value;
    }

    let toBoolean = (value) => {
        value = String(value).trim().toLowerCase();
        let ret = false;
        switch (value) {
            case 'true': case 'yes': case '1':
                ret = true;
                break;
        }
        return ret;
    }

    let isEmpty = (str) => {
        return isNull(str) || String(str).trim().length < 1;
    }

    let randomFromTo = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Modal)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 4, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Modal.js
//    Description: Javascript that handles modal popup related functions
//    Example:
//        // Show Modal
//        Modal.show('selector')
//
//        // Hide Modal
//        Modal.hide('selector')
// ============================================================================
/**
* NAMESPACE: Modal
* USE: Handles Modal related functions
*/
var Modal = Modal || {};
(function(namespace) {
    'use strict';
 
// -- Public data --
    // Property to hold public variables and functions
    let exposed = namespace;
 
    // Set class names and other shared data
    const settings = {
        handleTypeResize: 'resize',
        handleTypeDrag: 'drag',
 
        // Element class names
        classNameModal: '.modal',
        classNameModalPanel: '.modal-panel',
        classNameCloseButton: '.modal-close-button',
        classNameModalHeader: '.modal-header',
        classNameModalHeaderText: '.modal-header-text',
        classNameModalBody: '.modal-body',
        classNameModalFooter: '.modal-footer',
        classNameModalFooterText: '.modal-footer-text',
        classNameDraggable: '.modal-draggable',
        classNameDraggableIcon: '.icon',
        classNameShow: '.show',
        classNameResizable: '.modal-resizable',
        classNameResizableIcon: '.icon',
        classNameDialog: '.dialog',
        classNameButton: '.modal-button',
        classNameButtonCancel: '.cancel',
        classNameButtonOK: '.ok',
        classNameButtonContainer: '.buttonContainer',
        classNameResizeMargin: '.resizeMargin',
 
        // Element data names
        dataNameCloseOnOuterClick: 'data-closeOnOuterClick',
        dataNameDraggable: 'data-draggable',
        dataNameIsDraggable: 'data-isDraggable',
        dataNameResizable: 'data-resizable',
        dataNameIsResizable: 'data-isResizable',
        cleanClassName: (str) => {
            return str ? str.trim().replace('.', '') : '';
        },
    };
 
    exposed.settings = settings;
 
    /**
    * FUNCTION: init
    * USE: Initializes the modal button clicks.
    * @param element: JavaScript element to search for modals.
    * @return: N/A.
    */
    exposed.init = (element = document) => {
        addClickEvents(element);
    }
 
    /**
    * FUNCTION: show
    * USE: Shows the modal popup.
    * @param element: JavaScript element/String selector of the modal to show.
    * @return: N/A.
    */
    exposed.show = (element) => {
        element = verifyElement(element);
        addClass(element, settings.classNameShow);
    }
 
    /**
    * FUNCTION: hide
    * USE: Hides the modal popup.
    * @param element: JavaScript element/String selector of the modal to hide.
    * @return: N/A.
    */
    exposed.hide = (element) => {
        element = verifyElement(element);
        resetPosition(element);
        removeClass(element, settings.classNameShow);
    }
 
    /**
    * FUNCTION: getPanel
    * USE: Returns the modal panel element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal panel element.
    */
    exposed.getPanel = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalPanel);
    }
 
    /**
    * FUNCTION: getHeader
    * USE: Returns the modal header element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal header element.
    */
    exposed.getHeader = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalHeader);
    }
 
    /**
    * FUNCTION: getHeaderText
    * USE: Returns the modal header text element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal header text element.
    */
    exposed.getHeaderText = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalHeaderText);
    }
 
    /**
    * FUNCTION: getBody
    * USE: Returns the modal body element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal body element.
    */
    exposed.getBody = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalBody);
    }
 
    /**
    * FUNCTION: getFooter
    * USE: Returns the modal footer element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal footer element.
    */
    exposed.getFooter = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalFooter);
    }
 
    /**
    * FUNCTION: getFooterText
    * USE: Returns the modal footer text element.
    * @param element: JavaScript element/String selector of the modal.
    * @return: The modal footer text element.
    */
    exposed.getFooterText = (element) => {
        element = verifyElement(element);
        return element.querySelector(settings.classNameModalFooterText);
    }
 
    /**
    * FUNCTION: showDialog
    * USE: Shows a modal dialog box with an OK/Cancel button.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       title: The title of the dialog
    *       body: The content body of the dialog
    *       onShow(): Optional. Function that allows to do something before show.
    *          Return false to stop showing process
    *       onHide(): Optional. Function that allows to do something before hide.
    *          Return false to stop hidding process
    *       onDestroy(): Optional. Function that allows to do something before
    *          destroy. Return false to stop destroying process
    *       closeOnOuterClick: Optional. Determines if the dialog should close
    *          on outer dialog click. Default is False
    *       draggable: Optional. Determines if the dialog is draggable.
    *          Default is False
    *       resizable: Optional. Determines if the dialog is resizable.
    *          Default is False
    *       autoOpen: Optional. Determines if the dialog should auto open.
    *          Default is True
    *       draggable: Optional. Determines if the dialog is draggable.
    *          Default is False
    *       destroyOnHide: Optional. Determines if the dialog should be removed
    *          from DOM after hiding. Default is True
    *       buttons: Optional. Object allows to add custom buttons to the dialog
    *   }
    * @return: The modal dialog object.
    */
    exposed.showDialog = (options) => {
        options = verifyOptions(options);
        let dialog = createDialog(options);
        if (toBoolean(options.autoOpen)) {
            dialog.show();
        }
        return dialog;
    }
 
// -- Private data --
    let verifyOptions = (options) => {
        if (typeof options !== 'object') {
            let body = options;
            options = {};
            options.body = body;
        }
        return options;
    }
 
    let createDialog = (options) => {
        let defaultButtons = {
            cancel: {
                text: 'Cancel',
                cssClass: settings.classNameButtonCancel,
                visible: true,
            },
            ok: {
                text: 'OK',
                cssClass: settings.classNameButtonOK,
                visible: true,
            },
        };
 
        copyDefaults(options, defaultButtons);
 
        let modalButtons = options.buttons;
        let container = document.body;
        let modal = createElement('section', [settings.classNameModal, settings.classNameDialog]);
        let modalPanel = createElement('article', [settings.classNameModalPanel, settings.classNameDialog]);
        let modalHeader = createElement('header', [settings.classNameModalHeader, settings.classNameDialog]);
        let modalHeaderText = createElement('div', [settings.classNameModalHeaderText, settings.classNameDialog]);
        let modalBody = createElement('div', [settings.classNameModalBody, settings.classNameDialog]);
        let modalFooter = createElement('footer', [settings.classNameModalFooter, settings.classNameDialog]);
        let buttonContainer = createElement('div', [settings.classNameButtonContainer]);
 
        modal.appendChild(modalPanel);
        modalPanel.appendChild(modalHeader);
        modalHeader.appendChild(modalHeaderText);
        modalPanel.appendChild(modalBody);
        modalPanel.appendChild(modalFooter);
        modalFooter.appendChild(buttonContainer);
 
        let showHeaderCloseButton = true;
        let keys = Object.keys(modalButtons);
        keys.forEach((prop, index) => {
            prop = prop.toLowerCase();
            let buttonOptions = modalButtons[prop];
            if (!isNull(buttonOptions.visible) && !toBoolean(buttonOptions.visible)) {
                return false;
            }
 
            let text = buttonOptions.text || '';
            let cssClass = buttonOptions.cssClass || '';
            let button = createElement('button', [settings.classNameButton, settings.classNameDialog, cssClass]);
            button.innerHTML = !isNull(text) && isEmpty(text) ? '&nbsp;' : text;
            buttonContainer.appendChild(button)
 
            registerEvents(button, ['click'], (eventClick) => {
                if (buttonOptions.onClick) {
                    let value = buttonOptions.onClick.call(button, eventClick);
                    if (!isNull(value) && !value) {
                        return;
                    }
                }
                hide(options.destroyOnHide);
            });
 
            if ((index + 1) === keys.length) {
                if (toBoolean(options.resizable)) {
                    addClass(button, settings.classNameResizeMargin);
                }
            }
            showHeaderCloseButton = false;
        });
 
        if (showHeaderCloseButton) {
            let modalHeaderClose = createElement('div', [settings.classNameCloseButton, settings.classNameDialog]);
            modalHeader.appendChild(modalHeaderClose);
            registerEvents(modalHeaderClose, ['click'], (eventClick) => {
                hide(options.destroyOnHide);
            });
        }
 
        modalHeaderText.innerHTML = options.title || '';
        modalBody.innerHTML = options.body || '';
 
        modal.id = `modal_${randomFromTo(1271991, 7281987)}`;
        if (toBoolean(options.closeOnOuterClick)) {
            modal.setAttribute(settings.dataNameCloseOnOuterClick, options.closeOnOuterClick);
        }
        if (toBoolean(options.draggable)) {
            modal.setAttribute(settings.dataNameDraggable, options.draggable);
        }
        if (toBoolean(options.resizable)) {
            modal.setAttribute(settings.dataNameResizable, options.resizable);
        }
        container.appendChild(modal);
 
        options.autoOpen = !isNull(options.autoOpen) ? options.autoOpen : true;
        if (!options.autoOpen) {
            if (isNull(options.destroyOnHide)) {
                options.destroyOnHide = false;
            }
        }
        options.destroyOnHide = !isNull(options.destroyOnHide) ? options.destroyOnHide : true;
 
        let show = () => {
            if (options.onShow) {
                let value = options.onShow.call(this);
                if (!isNull(value) && !value) {
                    return;
                }
            }
            setTimeout(()=> {
                exposed.show(modal);
            }, 10);
        }
        let hide = (destroyModal = false) => {
            if (options.onHide) {
                let value = options.onHide.call(this);
                if (!isNull(value) && !value) {
                    return;
                }
            }
            exposed.hide(modal);
            if (destroyModal) {
                setTimeout(()=> {
                    destroy();
                }, 500);
            }
        }
        let destroy = () => {
            if (options.onDestroy) {
                let value = options.onDestroy.call(this);
                if (!isNull(value) && !value) {
                    return;
                }
            }
            if (!isDestroyed()) {
                container.removeChild(modal);
            }
        }
        let isDestroyed = () => {
            return !container.contains(modal);
        }
        let isShowing = () => {
            return hasClass(modal, settings.classNameShow);
        }
 
        addModalClickEvents(modal);
 
        if (getCoords(modalFooter).position === 'absolute') {
            modalFooter.style.position = 'relative';
            let coords = getCoords(modalFooter);
            modalPanel.style['min-width'] = coords.width + 'px';
            modalBody.style['padding-bottom'] = coords.height + 'px';
            modalFooter.style.position = null;
        }
 
        return {
            modal: modal,
            show: () => {
                show();
            },
            hide: () => {
                hide(options.destroyOnHide);
            },
            destroy: () => {
                hide(true);
            },
            isDestroyed: () => {
                return isDestroyed();
            },
            isShowing: () => {
                return isShowing();
            }
        };
    }
 
    let copyDefaults = (options, defaultButtons) => {
        if (isNull(options.buttons)) {
            options.buttons = defaultButtons
            return;
        }
        for (let prop in options.buttons) {
            prop = prop.toLowerCase();
            if (!defaultButtons.hasOwnProperty(prop)) {
                continue;
            }
            options.buttons[prop] = Object.assign(defaultButtons[prop], options.buttons[prop])
        }
    }
 
    let createElement = (type, classes) => {
        let element = document.createElement(type);
        if (!isNull(classes)) {
            classes.forEach(item => {
               addClass(element, item);
            });
        }
        return element;
    }
 
    let addClickEvents = (element) => {
        // Add misc click events for the modals
        let modals = element.querySelectorAll(settings.classNameModal);
        modals.forEach((modal, index) => {
            addModalClickEvents(modal, index);
        });
    }
 
    let addModalClickEvents = (modal, index = 0) => {
        let registerCloseOnOuterClick = false;
 
        // Add button clicks for the close button
        let closeButton = modal.querySelector(settings.classNameCloseButton);
        if (!isNull(closeButton)) {
            registerEvents(closeButton, ['click'], closeButtonEvent);
        }
        // Add functionalty to make the modal draggable
        if (shouldDrag(modal) && !isDraggable(modal)) {
            // Get elements and make sure they exist
            let panel = exposed.getPanel(modal);
            if (isNull(panel)) {
                throw new TypeError(`Unable to make Modal #${index + 1} draggable. Reason: Modal has no 'Modal Panel' associated with it.`);
            }
            // If a header exists, attach a drag handle to it
            let handle = getHandle(modal, settings.handleTypeDrag);
            if (isNull(handle)) {
                let header = exposed.getHeader(modal);
                if (!isNull(header)) {
                    handle = createHandle(header, settings.handleTypeDrag);
                } else {
                    addClass(panel, settings.classNameDraggable);
                }
            }
            makeDraggable({
                element: panel,
                handle: handle,
                keepInViewPort: true,
            });
            // Mark that this modal is draggable
            setIsDraggable(modal, true)
        }
 
        // Add functionalty to make the modal resizable
        if (shouldResize(modal) && !isResizable(modal)) {
            // Get elements and make sure they exist
            let panel = exposed.getPanel(modal);
            if (isNull(panel)) {
                throw new TypeError(`Unable to make Modal #${index + 1} resizable. Reason: Modal has no 'Modal Panel' associated with it.`);
            }
            // If a footer exists, attach a resize handle to it
            let handle = getHandle(modal, settings.handleTypeResize);
            if (isNull(handle)) {
                let footer = exposed.getFooter(modal);
                if (!isNull(footer)) {
                    handle = createHandle(footer, settings.handleTypeResize);
                } else {
                    addClass(panel, settings.classNameResizable);
                }
            }
            makeResizable({
                element: panel,
                handle: handle,
                keepInViewPort: true,
            });
            // Mark that this modal is resizable
            setIsResizable(modal, true);
        }
        // Check to see if we need to register the close on click event
        if (!registerCloseOnOuterClick) {
            registerCloseOnOuterClick = shouldCloseOnOuterClick(modal);
        }
 
        // Determine if the modal should close if the outer area is clicked
        if (registerCloseOnOuterClick) {
            registerEvents(document, ['click'], backgroundHideEvent);
        }
    }
 
    let registerEvents = (element, eventNames, func) => {
        eventNames.forEach((eventName, index) => {
            element.removeEventListener(eventName, func);
            element.addEventListener(eventName, func);
        });
    }
 
    let closeButtonEvent = (event) => {
        let closeButton = event.target || event.currentTarget;
        if (isNull(closeButton)) {
            return;
        }
        let modal = closeButton.closest(settings.classNameModal);
        exposed.hide(modal);
    }
 
    let backgroundHideEvent = (event) => {
        let target = event.target;
        if (isNull(target)
            || !isElement(target)
            || !hasClass(target, settings.classNameModal)
            || !hasClass(target, settings.classNameShow)
            || !shouldCloseOnOuterClick(target)) {
            return;
        }
        exposed.hide(target);
    }
 
    let createHandle = (container, type) => {
        let handle = document.createElement('div');
        switch (type) {
            case settings.handleTypeResize:
                addClass(handle, settings.classNameResizable);
                addClass(handle, settings.classNameResizableIcon);
                break;
            case settings.handleTypeDrag:
                addClass(handle, settings.classNameDraggable);
                addClass(handle, settings.classNameDraggableIcon);
                break;
            default:
                throw new TypeError(`Unknown handle type: ${type}`);
                break;
        }
        handle.setAttribute('tabindex', 0);
        container.appendChild(handle);
        return handle;
    }
 
    let getHandle = (element, type)  => {
        let selector = null;
        switch (type) {
            case settings.handleTypeResize:
                selector = `${settings.classNameResizable}${settings.classNameResizableIcon}`;
                break;
            case settings.handleTypeDrag:
                selector = `${settings.classNameDraggable}${settings.classNameDraggableIcon}`;
                break;
            default:
                throw new TypeError(`Unknown handle type: ${type}`);
                break;
        }
        return element.querySelector(selector);
    }
 
    let makeResizable = (options) => {
        let resizable = options.element || options;
        let handle = options.handle || resizable;
        let keepInViewPort = !isNull(options.keepInViewPort) ? options.keepInViewPort : false;
 
        let coords = getCoords(resizable);
        let initialWidth = coords.width;
        let initialHeight = coords.height;
 
        let mouseDown = (event) => {
            event.stopPropagation();
            // Get the mouse down position of the element
            let coords = getCoords(resizable);
            let offsetX = event.clientX - coords.width;
            let offsetY = event.clientY - coords.height;
 
            let moveElement = (event) => {
                // Get the new position
                let newWidth = (event.clientX - offsetX);
                let newHeight = (event.clientY - offsetY);
 
                // Make sure the width/height is never less than the initial values
                newWidth = Math.max(newWidth, initialWidth);
                newHeight = Math.max(newHeight, initialHeight);
 
                setPosition(resizable, {width: newWidth, height: newHeight});
 
                if (keepInViewPort && !isInViewport(resizable)) {
                    let bounding = resizable.getBoundingClientRect();
                    let viewInfo = getViewportInfo();
                    let viewportHeight = viewInfo.height;
                    let viewportWidth = viewInfo.width;
                    if (bounding.bottom > viewportHeight) {
                        newHeight -= Math.abs(bounding.bottom - viewportHeight);
                    }
                    if (bounding.right > viewportWidth) {
                        newWidth -= Math.abs(bounding.right - viewportWidth);
                    }
                    setPosition(resizable, {width: newWidth, height: newHeight});
                }
            }
            let reset = (event) => {
                document.removeEventListener('mousemove', moveElement);
                document.removeEventListener('mouseup', reset);
            }
            document.addEventListener('mouseup', reset);
            document.addEventListener('mousemove', moveElement);
        }
        addTouchSupport(handle);
        handle.addEventListener('mousedown', mouseDown);
    }
 
    let makeDraggable = (options) => {
        let draggable = options.element || options;
        let handle = options.handle || draggable;
        let keepInViewPort = !isNull(options.keepInViewPort) ? options.keepInViewPort : false;
 
        let mouseDown = (event) => {
            // Get the mouse down position of the element
            let coords = getCoords(draggable);
            let offsetX = event.clientX - coords.left;
            let offsetY = event.clientY - coords.top;
 
            let moveElement = (event) => {
                // Get the new position
                let newLeft = event.clientX - offsetX;
                let newTop = event.clientY - offsetY;
 
                setPosition(draggable, {left: newLeft, top: newTop});
 
                if (keepInViewPort && !isInViewport(draggable)) {
                    let bounding = draggable.getBoundingClientRect();
                    let viewInfo = getViewportInfo();
                    let viewportHeight = viewInfo.height;
                    let viewportWidth = viewInfo.width;
 
                    if (bounding.left < 0) {
                        newLeft += Math.abs(bounding.left);
                    }
                    if (bounding.top < 0) {
                        newTop += Math.abs(bounding.top);
                    }
                    if (bounding.bottom > viewportHeight) {
                        newTop -= Math.abs(bounding.bottom - viewportHeight);
                    }
                    if (bounding.right > viewportWidth) {
                        newLeft -= Math.abs(bounding.right - viewportWidth);
                    }
                    setPosition(draggable, {left: newLeft, top: newTop});
                }
            }
            let reset = (event) => {
                document.removeEventListener('mousemove', moveElement);
                document.removeEventListener('mouseup', reset);
            }
            document.addEventListener('mouseup', reset);
            document.addEventListener('mousemove', moveElement);
        }
        addTouchSupport(handle);
        handle.addEventListener('mousedown', mouseDown);
    }
 
    // Check to make sure the element will be within our viewport boundary
    let isInViewport = (element) => {
        let bounding = element.getBoundingClientRect();
        let viewInfo = getViewportInfo();
        return (
            bounding.top >= 0
            && bounding.left >= 0
            && bounding.bottom <= viewInfo.height
            && bounding.right <= viewInfo.width
        );
    }
 
    let getViewportInfo = () => {
        return {
            height: Math.max(window.innerHeight || 0, document.documentElement.clientHeight || 0),
            width: Math.max(window.innerWidth || 0, document.documentElement.clientWidth || 0),
        };
    }
 
    let getCoords = (element) => {
        let computedStyle = window.getComputedStyle(element);
        let intProps = ['left', 'top', 'width', 'height'];
        let result = {};
        for (const prop of intProps) {
            result[prop] = parseInt(computedStyle[prop], 10) || parseInt(element.style[prop], 10) || 0;
        }
        let stringProps = ['position'];
        for (const prop of stringProps) {
            result[prop] = (computedStyle[prop] || element.style[prop]).toLowerCase();
        }
        if (result.position !== 'relative') {
            if (!result.left) {
                result.left = element.offsetLeft || 0;
            }
            if (!result.top) {
                result.top = element.offsetTop || 0;
            }
            if (!result.width) {
                result.width = element.offsetWidth || 0;
            }
            if (!result.height) {
                result.height = element.offsetHeight || 0;
            }
        }
        return result;
    }
 
    let addTouchSupport = (element) => {
        let events = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
        registerEvents(element, events, touchConverter);
    }
 
    let touchConverter = (event) => {
        // stop touch event
        event.stopPropagation();
        event.preventDefault();
        let touches = event.changedTouches;
        if (!touches || touches.length < 1) {
            return;
        }
        let first = touches[0];
        let target = first.target;
        let type = '';
        switch (event.type) {
            case 'touchstart':
                type = 'mousedown';
                break;
            case 'touchmove':
                type = 'mousemove';
                break;
            case 'touchend': case 'touchcancel':
                type = 'mouseup';
                break;
            default:
                return;
        }
        let simulatedEvent = null;
        try {
            simulatedEvent = new MouseEvent(type, {
                bubbles: true,
                cancelable: true,
                view: window,
                screenX: first.screenX,
                screenY: first.screenY,
                clientX: first.clientX,
                clientY: first.clientY,
            });
        } catch (e) {
            simulatedEvent = document.createEvent('MouseEvent');
            simulatedEvent.initMouseEvent(type, true, true, window, 1,
                                      first.screenX, first.screenY,
                                      first.clientX, first.clientY, false,
                                      false, false, false, 0 /*left*/, null);
        }
        target.dispatchEvent(simulatedEvent);
    }
 
    let resetPosition = (element) => {
        let panel = exposed.getPanel(element);
        if (isNull(panel)) {
            return;
        }
        setPosition(panel, {left: null, top: null, width: null, height: null});
    }
 
    let setPosition = (element, options) => {
        for (const prop in options) {
            if (prop in element.style) {
                let value = options[prop];
                element.style[prop] = !isNull(value) ? parseInt(value, 10) + 'px' : value;
            }
        }
    }
 
    let shouldCloseOnOuterClick = (element) => {
        let value = element.getAttribute(settings.dataNameCloseOnOuterClick);
        return toBoolean(value);
    }
 
    let shouldDrag = (element) => {
        let value = element.getAttribute(settings.dataNameDraggable);
        return toBoolean(value);
    }
 
    let setIsDraggable = (element, value) => {
        element.setAttribute(settings.dataNameIsDraggable, value);
    }
 
    let isDraggable = (element) => {
        let value = element.getAttribute(settings.dataNameIsDraggable);
        return toBoolean(value);
    }
 
    let shouldResize = (element) => {
        let value = element.getAttribute(settings.dataNameResizable);
        return toBoolean(value);
    }
 
    let setIsResizable = (element, value) => {
        element.setAttribute(settings.dataNameIsResizable, value);
    }
 
    let isResizable = (element) => {
        let value = element.getAttribute(settings.dataNameIsResizable);
        return toBoolean(value);
    }
 
    let verifyElement = (element) => {
        if (isString(element)) {
            element = document.querySelector(element);
        }
        if (isNull(element)) {
            throw new TypeError(`Unable to process. Element provided is null`);
        } else if (!isElement(element)) {
            throw new TypeError(`Unable to process element of type: ${typeof element}. Reason: '${element}' is not an HTMLElement.`);
        }
        return element;
    }
 
    let addClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
 
        let modified = false;
        if (cssClass.length > 0 && !hasClass(element, cssClass)) {
            element.classList.add(cssClass)
            modified = true;
        }
        return modified;
    }
 
    let removeClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
 
        let modified = false;
        if (cssClass.length > 0 && hasClass(element, cssClass)) {
            element.classList.remove(cssClass);
            modified = true;
        }
        return modified;
    }
 
    let hasClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
        return element.classList.contains(cssClass);
    }
 
    let isString = (item) => {
        return 'string' === typeof item;
    }
 
    let isNull = (item) => {
        return undefined === item || null === item;
    }
 
    let isElement = (item) => {
        let value = false;
        try {
            value = item instanceof HTMLElement || item instanceof HTMLDocument;
        }
        catch (e) {
            value = (typeof item==="object") &&
                (item.nodeType===1) && (typeof item.style === "object") &&
                (typeof item.ownerDocument ==="object");
        }
        return value;
    }
 
    let toBoolean = (value) => {
        value = String(value).trim().toLowerCase();
        let ret = false;
        switch (value) {
            case 'true': case 'yes': case '1':
                ret = true;
                break;
        }
        return ret;
    }
 
    let isEmpty = (str) => {
        return isNull(str) || String(str).trim().length < 1;
    }
 
    let randomFromTo = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Modal)); // http://programmingnotes.org/

The following is Modal.css.





		
		
			Modal.css
			
CSS
			
			/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 4, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Modal.css
//    Description: CSS for the modal popup
// ============================================================================
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100');

/* The Modal (background) */
.modal {
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    display: flex;
    justify-content: center;
}

/* Modal Content */
.modal-panel {
    position: absolute;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    min-width: 400px;
    max-width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 10px;
    min-height: 135px;
    display: table;
}

.modal-close-button {
    position: absolute;
    color: white;
    font-size: 28px;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    right: 0;
    margin-right: 15px;
}

.modal-close-button:hover,
.modal-close-button:focus {
    color: black;
}

.modal-close-button:after {
    content: '×';
}

.modal-body {
    padding-bottom: 52px;
}

.modal-header, .modal-footer {
    padding: 2px;
    background-color: #064685;
    color: white;
    min-height: 50px;
    box-sizing: border-box;
    text-align: center;
}

.modal-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.modal-footer {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    bottom: 0;
    position: absolute;
    width: 99.8%;
    transform: translateY(1%);
}

.modal-header-text, .modal-footer-text {
    font-size: 19px;
    display: inline-block;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: auto;
    transform: translateY(50%);
}

.modal-header-text.bold, .modal-footer-text.bold {
    font-weight: bold;
}

.modal.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.modal-draggable {
    cursor: move;
    cursor: grab;
}

.modal-draggable:active {
    cursor: move;
    cursor: grabbing;
}

.modal-draggable.icon {
    position: absolute;
    color: grey;
    font-size: 23px;
    display: inline-block;
    text-decoration: none;
    left: 0;
    margin-left: 15px;
    outline: none;
}

.modal-draggable.icon:hover, .modal-resizable.icon:hover {
    color: white;
    background-color: rgba(0,191,165,.04)
}

.modal-draggable.icon:active, .modal-resizable.icon:active {
    color: yellow;
}

.modal-draggable.icon:after {
    content: '⮀';
}

.modal-resizable {
    cursor: move;
    cursor: grab;
    cursor: nwse-resize;
}

.modal-resizable:active {
    cursor: move;
    cursor: grabbing;
    cursor: nwse-resize;
}

.modal-resizable.icon {
    position: absolute;
    color: grey;
    font-size: 20px;
    display: inline-block;
    text-decoration: none;
    width: 10px;
    height: 10px;
    right: 0;
    margin-right: 10px;
    outline: none;
    transform: translateY(-200%);
    bottom: 0;
}

.modal-resizable.icon:after {
    content: '⇲';
}

.modal-header, .modal-footer, .modal-draggable.icon,
.modal-close-button, .modal-body, .modal-button {
    font-family: "Roboto",sans-serif, Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,"Helvetica Neue",Helvetica;
}

.modal-button {
    padding: 4px;
    background-color: #d2d2d2;
    text-align: center;
    text-decoration: none;
    color: black;
    border-radius: 15px;
    cursor: pointer;
    min-width: 100px;
    border: none;
    outline: #eee;
    font-size: 15px;
}

.modal-button:hover {
    background-color:#bdbdbd;
}

.modal-button.cancel {
}
.modal-button.ok {
}

.modal.dialog {
}
.modal-panel.dialog {
}
.modal-header.dialog {
}
.modal-header-text.dialog {
}
.modal-footer.dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
}
.modal-body.dialog {
    margin: 20px;
    text-align: center;    
}
.modal-button.dialog {
    min-width: 150px;
    margin-top: 1px;
}


.modal-button:not(:last-child) {
	margin-right: 20px;
}
.modal-button.resizeMargin {
	margin-right: 16px;
}
.buttonContainer {
	max-width: 600px;
}/* // http://programmingnotes.org/ */
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
				
						/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 4, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Modal.css
//    Description: CSS for the modal popup
// ============================================================================
*/
 
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100');
 
/* The Modal (background) */
.modal {
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    display: flex;
    justify-content: center;
}
 
/* Modal Content */
.modal-panel {
    position: absolute;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    min-width: 400px;
    max-width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 10px;
    min-height: 135px;
    display: table;
}
 
.modal-close-button {
    position: absolute;
    color: white;
    font-size: 28px;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    right: 0;
    margin-right: 15px;
}
 
.modal-close-button:hover,
.modal-close-button:focus {
    color: black;
}
 
.modal-close-button:after {
    content: '×';
}
 
.modal-body {
    padding-bottom: 52px;
}
 
.modal-header, .modal-footer {
    padding: 2px;
    background-color: #064685;
    color: white;
    min-height: 50px;
    box-sizing: border-box;
    text-align: center;
}
 
.modal-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
 
.modal-footer {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    bottom: 0;
    position: absolute;
    width: 99.8%;
    transform: translateY(1%);
}
 
.modal-header-text, .modal-footer-text {
    font-size: 19px;
    display: inline-block;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: auto;
    transform: translateY(50%);
}
 
.modal-header-text.bold, .modal-footer-text.bold {
    font-weight: bold;
}
 
.modal.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
 
.modal-draggable {
    cursor: move;
    cursor: grab;
}
 
.modal-draggable:active {
    cursor: move;
    cursor: grabbing;
}
 
.modal-draggable.icon {
    position: absolute;
    color: grey;
    font-size: 23px;
    display: inline-block;
    text-decoration: none;
    left: 0;
    margin-left: 15px;
    outline: none;
}
 
.modal-draggable.icon:hover, .modal-resizable.icon:hover {
    color: white;
    background-color: rgba(0,191,165,.04)
}
 
.modal-draggable.icon:active, .modal-resizable.icon:active {
    color: yellow;
}
 
.modal-draggable.icon:after {
    content: '⮀';
}
 
.modal-resizable {
    cursor: move;
    cursor: grab;
    cursor: nwse-resize;
}
 
.modal-resizable:active {
    cursor: move;
    cursor: grabbing;
    cursor: nwse-resize;
}
 
.modal-resizable.icon {
    position: absolute;
    color: grey;
    font-size: 20px;
    display: inline-block;
    text-decoration: none;
    width: 10px;
    height: 10px;
    right: 0;
    margin-right: 10px;
    outline: none;
    transform: translateY(-200%);
    bottom: 0;
}
 
.modal-resizable.icon:after {
    content: '⇲';
}
 
.modal-header, .modal-footer, .modal-draggable.icon,
.modal-close-button, .modal-body, .modal-button {
    font-family: "Roboto",sans-serif, Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,"Helvetica Neue",Helvetica;
}
 
.modal-button {
    padding: 4px;
    background-color: #d2d2d2;
    text-align: center;
    text-decoration: none;
    color: black;
    border-radius: 15px;
    cursor: pointer;
    min-width: 100px;
    border: none;
    outline: #eee;
    font-size: 15px;
}
 
.modal-button:hover {
    background-color:#bdbdbd;
}
 
.modal-button.cancel {
}
.modal-button.ok {
}
 
.modal.dialog {
}
.modal-panel.dialog {
}
.modal-header.dialog {
}
.modal-header-text.dialog {
}
.modal-footer.dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
}
.modal-body.dialog {
    margin: 20px;
    text-align: center;    
}
.modal-button.dialog {
    min-width: 150px;
    margin-top: 1px;
}
 
 
.modal-button:not(:last-child) {
	margin-right: 20px;
}
.modal-button.resizeMargin {
	margin-right: 16px;
}
.buttonContainer {
	max-width: 600px;
}/* // http://programmingnotes.org/ */

6. More Examples

Below are more examples demonstrating the use of ‘Modal.js‘. Don’t forget to include the module when running the examples!





		
		
			More Examples
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 4, 2020
//    Taken From: http://programmingnotes.org/
//    File:  modalDemo.html
//    Description: Demonstrates the use of Modal.js
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Modal.js Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.button {
    padding: 5px;
    background-color: #d2d2d2;
    height:100%;
    text-align:center;
    text-decoration:none;
    color:black;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    border-radius: 15px;
    cursor: pointer;
    width: 120px;
}

.button:hover {
    background-color:#bdbdbd;
}

.inline {
    display:inline-block;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-body {
	padding: 2px 16px;
}
</style>

<!-- // Include module -->
<link type="text/css" rel="stylesheet" href="./Modal.css">
<script type="text/javascript" src="./Modal.js"></script>

</head>
<body>
<div class="main">
    My Programming Notes Modal.js Demo

    <div style="margin-top: 20px;">
        <div id="btnShow" class="inline button">
            Show
        </div>
    </div>

    <!-- The Modal Background-->
    <section id="modalExample" class="modal"
            data-closeOnOuterClick="true"
            data-draggable="true"
            data-resizable="true"
        >
        <!-- Modal Panel -->
        <article class="modal-panel">
            <header class="modal-header">
                <div class="modal-header-text">
                    Modal Header
                </div>
                <div class="modal-close-button"></div>
            </header>

            <div class="modal-body">
                <p>Some text in the Modal Body</p>
                <p>Some other text...</p>
            </div>

            <footer class="modal-footer">
                <div class="modal-footer-text">
                    Modal Footer
                </div>
            </footer>
        </article>
    </section>

</div>

<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
    // Optional: Sets up the initial default button clicks
    Modal.init();

    // Show the modal
    document.querySelector('#btnShow').addEventListener('click', (event) => {
        Modal.show('#modalExample');
    });

    // Get the modal element
    let modalElement = document.querySelector('#modalExample');    
    setTimeout(() => {
        Modal.show(modalElement);
        setTimeout(() => {
            Modal.hide(modalElement);
        }, 2000);
    }, 200);
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 4, 2020
//    Taken From: http://programmingnotes.org/
//    File:  modalDemo.html
//    Description: Demonstrates the use of Modal.js
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Modal.js Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
 
.button {
    padding: 5px;
    background-color: #d2d2d2;
    height:100%;
    text-align:center;
    text-decoration:none;
    color:black;
 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 
    border-radius: 15px;
    cursor: pointer;
    width: 120px;
}
 
.button:hover {
    background-color:#bdbdbd;
}
 
.inline {
    display:inline-block;
}
 
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.modal-body {
	padding: 2px 16px;
}
</style>
 
<!-- // Include module -->
<link type="text/css" rel="stylesheet" href="./Modal.css">
<script type="text/javascript" src="./Modal.js"></script>
 
</head>
<body>
<div class="main">
    My Programming Notes Modal.js Demo
 
    <div style="margin-top: 20px;">
        <div id="btnShow" class="inline button">
            Show
        </div>
    </div>
 
    <!-- The Modal Background-->
    <section id="modalExample" class="modal"
            data-closeOnOuterClick="true"
            data-draggable="true"
            data-resizable="true"
        >
        <!-- Modal Panel -->
        <article class="modal-panel">
            <header class="modal-header">
                <div class="modal-header-text">
                    Modal Header
                </div>
                <div class="modal-close-button"></div>
            </header>
 
            <div class="modal-body">
                <p>Some text in the Modal Body</p>
                <p>Some other text...</p>
            </div>
 
            <footer class="modal-footer">
                <div class="modal-footer-text">
                    Modal Footer
                </div>
            </footer>
        </article>
    </section>
 
</div>
 
<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
    // Optional: Sets up the initial default button clicks
    Modal.init();
 
    // Show the modal
    document.querySelector('#btnShow').addEventListener('click', (event) => {
        Modal.show('#modalExample');
    });
 
    // Get the modal element
    let modalElement = document.querySelector('#modalExample');    
    setTimeout(() => {
        Modal.show(modalElement);
        setTimeout(() => {
            Modal.hide(modalElement);
        }, 2000);
    }, 200);
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || Movement.js – Move, Resize, Drag & Drop Elements With The Mouse, Mobile Touch & Keyboard Using Vanilla JavaScript

September 02, 2020 admin No comments

The following is a module that handles dragging and resizing elements with a mouse/touch, moving elements with the keyboard via the arrow keys, and drag and dropping elements onto a drop zone.

Movement.js Source

Contents

1. Basic Usage 2. Draggable - Available Options 3. Resizable - Available Options 4. Movable - Available Options 5. Droppable - Available Options 6. Movement.js Namespace 7. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates basic usage to enable element movement.





		
		
			1. Basic Usage
			
JavaScript
			
			// Basic Usage.
 
<script>
(() => {
    // Makes elements movable with the mouse / touch
    Movement.draggable(document.querySelectorAll('Selector'));

    // Makes elements resizable with the mouse / touch
    Movement.resizable(document.querySelectorAll('Selector'));
    
    // Makes elements movable with the keyboard arrow keys
    Movement.movable(document.querySelectorAll('Selector'));
    
    // Makes elements drag and droppable with the mouse
    Movement.droppable({
        element: document.querySelectorAll('Selector'),
        dropZone: document.querySelectorAll('Selector')
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						// Basic Usage.
 
<script>
(() => {
    // Makes elements movable with the mouse / touch
    Movement.draggable(document.querySelectorAll('Selector'));
 
    // Makes elements resizable with the mouse / touch
    Movement.resizable(document.querySelectorAll('Selector'));
    
    // Makes elements movable with the keyboard arrow keys
    Movement.movable(document.querySelectorAll('Selector'));
    
    // Makes elements drag and droppable with the mouse
    Movement.droppable({
        element: document.querySelectorAll('Selector'),
        dropZone: document.querySelectorAll('Selector')
    });
})();
</script>

‘Movement.draggable‘ makes an element draggable via the mouse/touch input. ‘Movement.resizable‘ makes an element resizable via the mouse/touch input. ‘Movement.movable‘ makes an element movable via the keyboard arrow keys. ‘Movement.droppable‘ makes an element droppable via a dropzone/allows files to be dropped to dropzone.

2. Draggable – Available Options

‘Movement.draggable‘ makes an element draggable via the mouse/touch input.

The options supplied to the ‘Movement.draggable‘ function is an object that is made up of the following properties.





		
		
			2. Options - Movement.draggable
			
JavaScript
			
			// Movement.draggable - Available Options.

<script>
(() => {
    // Makes an element draggable via the mouse/touch input
    Movement.draggable({
        element: document.querySelectorAll('Selector'),     // One or more Javascript elements of the elements to make draggable with the Mouse/Touch      
        handle: document.querySelectorAll('Selector'),      // Optional. One or more Javascript elements that restricts dragging from starting unless mousedown occurs on the specified element
        container: document.querySelector('Selector'),      // Optional. A Javascript element of the container to only restrict the draggable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Draggable Start: Left: ${position.left}, Top: ${position.top}`);
        },        
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.left and position.top can be modified
            console.log(`Draggable Move: Left: ${position.left}, Top: ${position.top}`);
            // Example modifying the element position
            //position.top = position.previous.top;
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Draggable End: Left: ${position.left}, Top: ${position.top}`);
        },
        keepInViewPort: false,                              // Optional. Restricts the draggable element only to the visible viewport area. Default is False
        
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						// Movement.draggable - Available Options.
 
<script>
(() => {
    // Makes an element draggable via the mouse/touch input
    Movement.draggable({
        element: document.querySelectorAll('Selector'),     // One or more Javascript elements of the elements to make draggable with the Mouse/Touch      
        handle: document.querySelectorAll('Selector'),      // Optional. One or more Javascript elements that restricts dragging from starting unless mousedown occurs on the specified element
        container: document.querySelector('Selector'),      // Optional. A Javascript element of the container to only restrict the draggable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Draggable Start: Left: ${position.left}, Top: ${position.top}`);
        },        
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.left and position.top can be modified
            console.log(`Draggable Move: Left: ${position.left}, Top: ${position.top}`);
            // Example modifying the element position
            //position.top = position.previous.top;
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Draggable End: Left: ${position.left}, Top: ${position.top}`);
        },
        keepInViewPort: false,                              // Optional. Restricts the draggable element only to the visible viewport area. Default is False
        
    });
})();
</script>

3. Resizable – Available Options

‘Movement.resizable‘ makes an element resizable via the mouse/touch input.

The options supplied to the ‘Movement.resizable‘ function is an object that is made up of the following properties.





		
		
			3. Options - Movement.resizable
			
JavaScript
			
			// Movement.resizable - Available Options.

<script>
(() => {
    // Makes an element resizable via the mouse/touch input
    Movement.resizable({
        element: document.querySelectorAll('Selector'),     // One or more Javascript elements of the elements to make resizable with the Mouse/Touch
        handle: document.querySelectorAll('Selector'),      // Optional. One or more Javascript elements that restricts resizing from starting unless mousedown occurs on the specified element
        container: document.querySelector('Selector'),      // Optional. A Javascript element of the container to only restrict the resizable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Resizable Start: Width: ${position.width}, Height: ${position.height}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.width, position.height can be modified
            console.log(`Resizable Move: Width: ${position.width}, Height: ${position.height}`);
            // Example modifying the element position
            //position.height = position.previous.height;          
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Resizable End: Width: ${position.width}, Height: ${position.height}`);
        },
        keepInViewPort: true,                              // Optional. Restricts the resizable element only to the visible viewport area. Default is False
        maintainInitialSize: true,                         // Optional. Ensures the element doesnt resize smaller than its initial size. Default is False
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						// Movement.resizable - Available Options.
 
<script>
(() => {
    // Makes an element resizable via the mouse/touch input
    Movement.resizable({
        element: document.querySelectorAll('Selector'),     // One or more Javascript elements of the elements to make resizable with the Mouse/Touch
        handle: document.querySelectorAll('Selector'),      // Optional. One or more Javascript elements that restricts resizing from starting unless mousedown occurs on the specified element
        container: document.querySelector('Selector'),      // Optional. A Javascript element of the container to only restrict the resizable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Resizable Start: Width: ${position.width}, Height: ${position.height}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.width, position.height can be modified
            console.log(`Resizable Move: Width: ${position.width}, Height: ${position.height}`);
            // Example modifying the element position
            //position.height = position.previous.height;          
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Resizable End: Width: ${position.width}, Height: ${position.height}`);
        },
        keepInViewPort: true,                              // Optional. Restricts the resizable element only to the visible viewport area. Default is False
        maintainInitialSize: true,                         // Optional. Ensures the element doesnt resize smaller than its initial size. Default is False
    });
})();
</script>

4. Movable – Available Options

‘Movement.movable‘ makes an element movable via the keyboard arrow keys.

The options supplied to the ‘Movement.movable‘ function is an object that is made up of the following properties.





		
		
			4. Options - Movement.movable
			
JavaScript
			
			// Movement.movable - Available Options.

<script>
(() => {  
    // Makes an element movable via the keyboard arrow keys
    Movement.movable({
        element: document.querySelectorAll('Selector'),     // One or more Javascript elements of the elements to make movable with the Keyboard
        container: document.querySelector('Selector'),      // Optional. A Javascript element of the container to only restrict the movable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Movable Start: Left: ${position.left}, Top: ${position.top}`);
        },        
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.left, position.top and distance can be modified
            console.log(`Movable Move: Left: ${position.left}, Top: ${position.top}`);
            // Example modifying the element position
            //position.top = position.previous.top;            
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Movable End: Left: ${position.left}, Top: ${position.top}`);
        },
        distance: null,                                     // Optional. The distance to move the element (in pixels) on keydown. Default is 5
        keepInViewPort: false,                              // Optional. Restricts the movable element only to the visible viewport area. Default is False      
        attachEventToWindow: true,                          // Optional. Determine if key down/up events should attach to the window or the element. If false, event is attached to the element. Default is True       
    });    
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						// Movement.movable - Available Options.
 
<script>
(() => {  
    // Makes an element movable via the keyboard arrow keys
    Movement.movable({
        element: document.querySelectorAll('Selector'),     // One or more Javascript elements of the elements to make movable with the Keyboard
        container: document.querySelector('Selector'),      // Optional. A Javascript element of the container to only restrict the movable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Movable Start: Left: ${position.left}, Top: ${position.top}`);
        },        
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.left, position.top and distance can be modified
            console.log(`Movable Move: Left: ${position.left}, Top: ${position.top}`);
            // Example modifying the element position
            //position.top = position.previous.top;            
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Movable End: Left: ${position.left}, Top: ${position.top}`);
        },
        distance: null,                                     // Optional. The distance to move the element (in pixels) on keydown. Default is 5
        keepInViewPort: false,                              // Optional. Restricts the movable element only to the visible viewport area. Default is False      
        attachEventToWindow: true,                          // Optional. Determine if key down/up events should attach to the window or the element. If false, event is attached to the element. Default is True       
    });    
})();
</script>

5. Droppable – Available Options

‘Movement.droppable‘ makes an element droppable via a dropzone/allows files to be dropped to dropzone.

The options supplied to the ‘Movement.droppable‘ function is an object that is made up of the following properties.





		
		
			5. Options - Movement.droppable
			
JavaScript
			
			// Movement.droppable - Available Options.

<script>
(() => {
    // Makes an element droppable via a dropzone/allows files to be dropped to dropzone
    Movement.droppable({
        element: document.querySelectorAll('Selector'),     // Optional. One or more Javascript elements of the elements drag and droppable elements
        dropZone: document.querySelectorAll('Selector'),    // Optional. One or more Javascript elements of the dropzone elements
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Droppable Start: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move.
            console.log(`Droppable Move: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
            switch (event.type) {
                case 'dragleave':
                    break;
                case 'dragover':
                    break;
                case 'drag':
                    break;
            }
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            switch (event.type) {
                case 'dragend':
                    console.log(`Droppable End: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
                    break;
                case 'drop':
                    break;
            }
        },
        dragImageUrl: 'https://site.com/image.jpg',         // Optional. The image url to display on element drag
        dropZoneAllowMultiple: false,                       // Optional. Determines if more than one droppable is allowed on a dropzone. Default is true
        dropEffect: 'link',                                 // Optional. The feedback (typically visual) the user is given during a drag and drop operation. Default is 'move'
    });
})();
</script>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
				
						// Movement.droppable - Available Options.
 
<script>
(() => {
    // Makes an element droppable via a dropzone/allows files to be dropped to dropzone
    Movement.droppable({
        element: document.querySelectorAll('Selector'),     // Optional. One or more Javascript elements of the elements drag and droppable elements
        dropZone: document.querySelectorAll('Selector'),    // Optional. One or more Javascript elements of the dropzone elements
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Droppable Start: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move.
            console.log(`Droppable Move: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
            switch (event.type) {
                case 'dragleave':
                    break;
                case 'dragover':
                    break;
                case 'drag':
                    break;
            }
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            switch (event.type) {
                case 'dragend':
                    console.log(`Droppable End: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
                    break;
                case 'drop':
                    break;
            }
        },
        dragImageUrl: 'https://site.com/image.jpg',         // Optional. The image url to display on element drag
        dropZoneAllowMultiple: false,                       // Optional. Determines if more than one droppable is allowed on a dropzone. Default is true
        dropEffect: 'link',                                 // Optional. The feedback (typically visual) the user is given during a drag and drop operation. Default is 'move'
    });
})();
</script>

‘Movement.droppable‘ utilizes the HTML Drag and Drop API to facilitate movement. Currently, the API only allows Mouse support.

To allow for touch support, the polyfill DragDropTouch.js is recommended to be used, which simulates the Drag and Drop API. This allows ‘Movement.droppable‘ to be supported with touch input.

6. Movement.js Namespace

The following is the Movement.js Namespace. Include this in your project to start using!





		
		
			Movement.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 2, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Movement.js
//    Description: Javascript that allows for element movement on a page
// ============================================================================
/**
* NAMESPACE: Movement
* USE: Handles element movement
*/
var Movement = Movement || {};
(function(namespace) {
    'use strict';

// -- Public data --
    // Property to hold public variables and functions
    let exposed = namespace;

    // Set class names and other shared data
    const settings = {
        // Misc data
        visibilityTypeTopLeft: 'top_left',
        visibilityTypeBottomRight: 'bottom_right',
        visibilityTypeWidth: 'width',
        visibilityTypeHeight: 'height',
        keyDirectionUp: 'up',
        keyDirectionLeft: 'left',
        keyDirectionDown: 'down',
        keyDirectionRight: 'right',
        attributeDraggable: 'draggable',
        keepInViewPort: false,
        dropZoneAllowMultiple: true,
        attachEventToWindow: true,
        dropEffect: 'move',
        movableDistance: 5,
        maintainInitialSize: false,

        // Element class names
        classNameModal: '.modal',
        classNameModalPanel: '.modal-panel',
        classNameCloseButton: '.modal-close-button',
        classNameModalHeader: '.modal-header',
        classNameModalHeaderText: '.modal-header-text',
        classNameModalBody: '.modal-body',
        classNameModalFooter: '.modal-footer',
        classNameDraggable: '.modal-draggable',
        classNameDraggableIcon: '.icon',
        classNameShow: '.show',

        // Element data names
        dataNameCloseOnClick: 'data-closeOnClick',
        dataNameDraggable: 'data-draggable',
        dataNameIsDraggable: 'data-isDraggable',
        cleanClassName: (str) => {
            return str ? str.trim().replace('.', '') : '';
        },
    };

    exposed.settings = settings;

    /**
    * FUNCTION: draggable
    * USE: Makes an element draggable via the mouse/touch input.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       element: One or more Javascript elements of the elements to make
    *          draggable with the Mouse/Touch
    *       handle: Optional. One or more Javascript elements that restricts
    *          dragging from starting unless mousedown occurs on the specified element
    *       container: Optional. A Javascript element of the container to only
    *          restrict the draggable element to
    *       onMoveStart(position, event): Optional. Function that allows to do
    *          something on move start
    *       onMove(position, event): Optional. Function that allows to do
    *          something on move. The position.left, top can be modified
    *       onMoveEnd(position, event): Optional. Function that allows to do
    *          something on move end
    *       keepInViewPort: Optional. Restricts the draggable element only to the
    *          visible viewport area. Default is False
    *   }
    * @return: N/A.
    */
    exposed.draggable = (options) => {
        options = verifyDragResizeOptions(options);
        let handles = options.handle;
        let draggables = options.element;
        deleteKeys(options, ['handle', 'element']);

        for (let index = 0; index < draggables.length; ++index) {
            let handle = handles[index];
            let draggable = draggables[index];
            addTouchSupport(handle);
            registerEvents(handle, ['mousedown'], draggable_mouseDown(draggable, options));
        }
    }

    /**
    * FUNCTION: resizable
    * USE: Makes an element resizable via the mouse/touch input.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       element: One or more Javascript elements of the elements to make
    *          resizable with the Mouse/Touch
    *       handle: Optional. One or more Javascript elements that restricts
    *          dragging from starting unless mousedown occurs on the specified element
    *       container: Optional. A Javascript element of the container to only
    *          restrict the resizable element to
    *       onMoveStart(position, event): Optional. Function that allows to do
    *          something on move start
    *       onMove(position, event): Optional. Function that allows to do
    *          something on move. The position.width, height can be modified
    *       onMoveEnd(position, event): Optional. Function that allows to do
    *          something on move end
    *       keepInViewPort: Optional. Restricts the resizable element only to the
    *          visible viewport area. Default is False
    *       maintainInitialSize: Optional. Ensures the element doesnt resize 
    *          smaller than its initial size. Default is False
    *   }
    * @return: N/A.
    */
    exposed.resizable = (options) => {
        options = verifyDragResizeOptions(options);
        let handles = options.handle;
        let resizables = options.element;
        deleteKeys(options, ['handle', 'element']);

        for (let index = 0; index < resizables.length; ++index) {
            let handle = handles[index];
            let resizable = resizables[index];
            addTouchSupport(handle);
            registerEvents(handle, ['mousedown'], resizable_mouseDown(resizable, options));
        }
    }

    /**
    * FUNCTION: movable
    * USE: Makes an element movable via the keyboard arrow keys.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       element: One or more Javascript elements of the elements to make
    *          movable with the Keyboard
    *       container: Optional. A Javascript element of the container to only
    *          restrict the movable element to
    *       onMoveStart(position, event): Optional. Function that allows to do
    *          something on move start
    *       onMove(position, event): Optional. Function that allows to do something
    *          on move. The position.left, top and distance can be modified
    *       onMoveEnd(position, event): Optional. Function that allows to do
    *          something on move end
    *       distance: Optional. The distance to move the element (in pixels) on
    *          keydown. Default is 5
    *       keepInViewPort: Optional. Restricts the draggable element only to the
    *          visible viewport area. Default is False
    *       attachEventToWindow: Optional. Determine if key down/up events should
    *          attach to the window or the element. Default is True
    *   }
    * @return: N/A.
    */
    exposed.movable = (options) => {
        options = verifyMovableOptions(options);
        let movables = options.element;
        deleteKeys(options, ['element']);

        for (let index = 0; index < movables.length; ++index) {
            let movable = movables[index];
            let eventOwner = movable;
            if (options.attachEventToWindow) {
                eventOwner = window || document || movable;
            }
            registerEvents(eventOwner, ['keydown'], movable_keyDown(movable, options));
            registerEvents(eventOwner, ['keyup'], movable_keyUp(movable, options));
            tryFocus(eventOwner);
        }
    }

    /**
    * FUNCTION: droppable
    * USE: Makes an element droppable via a dropzone/allows files to be dropped to dropzone.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       element: Optional. One or more Javascript elements of the elements
    *          drag and droppable elements
    *       dropZone: Optional. One or more Javascript elements of the dropzone
    *          elements the movable element to
    *       onMoveStart(position, event): Optional. Function that allows to do
    *          something on move start
    *       onMove(position, event): Optional. Function that allows to do
    *          something on move
    *       onMoveEnd(position, event): Optional. Function that allows to do
    *          something on move end
    *       dragImageUrl: Optional. The image url to display on element drag
    *       dropZoneAllowMultiple: Optional. Determines if more than one
    *          droppable is allowed on a dropzone. Default is true
    *       dropEffect: Optional. The feedback (typically visual) the user is
    *           given during a drag and drop operation. Default is 'move'
    *   }
    * @return: N/A.
    */
    exposed.droppable = (options) => {
        options = verifyDroppableOptions(options);
        let dropZones = options.dropZone;
        let droppables = options.element;
        deleteKeys(options, ['dropZone', 'element']);

        // Droppables
        let elementCount = !isNull(droppables) ? droppables.length : 0;
        for (let index = 0; index < elementCount; ++index) {
            let droppable = droppables[index];
            registerEvents(droppable, ['dragstart'], droppable_dragStart(droppable, options));
            registerEvents(droppable, ['drag'], droppable_drag(droppable, options));
            registerEvents(droppable, ['dragend'], droppable_dragEnd(droppable, options));
        }

        // Dropzones
        let dropZoneCount = !isNull(dropZones) ? dropZones.length : 0;
        for (let index = 0; index < dropZoneCount; ++index) {
            let dropZone = dropZones[index];
            registerEvents(dropZone, ['drop'], dropZone_drop(dropZone, options));
            registerEvents(dropZone, ['dragenter', 'dragleave'], dropZone_dragEnterLeave(dropZone, options));
            registerEvents(dropZone, ['dragover'], dropZone_dragOver(dropZone, options));
        }
    }

// -- Private data --
    let droppable_dragStart = (droppable, options) => {
        return (event) => {
            if (isFunction(event.dataTransfer.clearData)) {
                event.dataTransfer.clearData('text/plain');
            }
            let dropId = droppable.id;
            if (isNull(dropId)
                || dropId.trim().length < 1
                || !isDroppable(droppable)) {
                return false;
            }
            event.dataTransfer.effectAllowed = options.dropEffect;
            event.dataTransfer.setData('text/plain', dropId);
            if (options.dragImageUrl
                && isFunction(event.dataTransfer.setDragImage)) {
                let img = new Image();
                img.src = options.dragImageUrl;
                event.dataTransfer.setDragImage(img, 10, 10);
            }
            if (options.onMoveStart) {
                let coordsStart = getCoords(droppable);
                let position = createPosition({
                    coordsNew: coordsStart,
                });
                position.element = droppable;
                options.onMoveStart.call(this, position, event);
            }
        }
    }

    let droppable_drag = (droppable, options) => {
        return (event) => {
            if (options.onMove) {
                let coordsNew = getCoords(droppable);
                let position = createPosition({
                    coordsNew: coordsNew,
                });
                position.element = droppable;
                options.onMove.call(this, position, event);
            }
        }
    }

    let droppable_dragEnd = (droppable, options) => {
        return (event) => {
            if (options.onMoveEnd) {
                let coordsEnd = getCoords(droppable);
                let position = createPosition({
                    coordsNew: coordsEnd,
                });
                position.element = droppable;
                position.dropZone = droppable.parentNode;
                options.onMoveEnd.call(this, position, event);
            }
        }
    }

    let dropZone_drop = (dropZone, options) => {
        return (event) => {
            let droppable = null;
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();

            // Check if files or an element was dropped
            let files = event.dataTransfer.files;
            let dropId = event.dataTransfer.getData('text/plain');
            if ((isNull(dropId) || dropId.trim().length < 1)
                && (isNull(files) || files.length < 1)) {
                return false;
            }
            // Handle the dropped element
            if (!isNull(dropId) && dropId.trim().length > 0) {
                droppable = document.getElementById(dropId);
            }
            if (!isNull(droppable)) {
                // Place element on the dropzone
                let isDropZone = (event.target === dropZone);
                if (isDropZone) {
                    moveDroppable(droppable, event.target, options.dropZoneAllowMultiple);
                } else {
                    // We missed the dropzone. Swap locations
                    // if the element is placed on another droppable in the
                    // dropzone
                    let destinationItem = event.target;
                    if (!isDroppable(destinationItem)) {
                        destinationItem = closestDroppable(destinationItem, droppable);
                    }
                    if (!isNull(destinationItem)) {
                        let destinationParent = destinationItem.parentNode;
                        if (destinationParent === droppable.parentNode) {
                            // The two droppables are on the same dropzone
                            reOrderDroppable(droppable, destinationItem, destinationParent);
                        } else {
                            // The two droppables are on a different dropzone
                            moveDroppable(droppable, destinationParent, options.dropZoneAllowMultiple);
                            if (parentContains(destinationParent, destinationItem)
                                && getDroppables(destinationParent).length > 1) {
                                reOrderDroppable(droppable, destinationItem, destinationParent);
                            }
                        }
                    }
                }
            }
            // Handle the file
            if (!isNull(files) && files.length > 0) {
                files = Array.prototype.slice.call(files);
            } else {
                files = null;
            }
            if (options.onMoveEnd) {
                let coordsNew = getCoords(droppable || event.target);
                let position = createPosition({
                    coordsNew: coordsNew,
                });
                position.element = droppable;
                position.dropZone = dropZone;
                position.files = files;
                options.onMoveEnd.call(this, position, event);
            }
        }
    }

    let dropZone_dragEnterLeave = (dropZone, options) => {
        return (event) => {
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();

            if (options.onMove) {
                let coordsNew = getCoords(dropZone);
                let position = createPosition({
                    coordsNew: coordsNew,
                });
                position.dropZone = dropZone;
                options.onMove.call(this, position, event);
            }
        }
    }

    let dropZone_dragOver = (dropZone, options) => {
        return (event) => {
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();

            event.dataTransfer.dropEffect = event.dataTransfer.effectAllowed;
            if (options.onMove) {
                let coordsNew = getCoords(dropZone);
                let position = createPosition({
                    coordsNew: coordsNew,
                });
                position.dropZone = dropZone;
                options.onMove.call(this, position, event);
            }
        }
    }

    let movable_keyDown = (movable, options) => {
        let coordsInitial = getCoords(movable);
        let initialWidth = coordsInitial.width;
        let initialHeight = coordsInitial.height
        let distance = options.distance;

        return (event) => {
            event = event || window.event;
            let direction = settings.keyTracker.translate(event);
            if (isNull(direction)) {
                return;
            }
            event.preventDefault();
            settings.keyTracker.track(direction);

            let moveElement = () => {
                let keepInViewPort = options.keepInViewPort;
                let containerArea = getContainerArea(movable, options.container);
                let coordsStart = getCoords(movable);

                if (!options.moveStartTriggered) {
                    if (options.onMoveStart) {
                        let position = createPosition({
                            coordsNew: coordsStart,
                            containerArea: containerArea,
                        });
                        position.element = movable;
                        options.onMoveStart.call(this, position, event);
                    }
                    options.moveStartTriggered = true;
                }
                
                let newLeft = coordsStart.left;
                let newTop = coordsStart.top;

                let directions = settings.keyTracker.getTracked();
                for (let direction of directions) {
                    switch (direction) {
                        case settings.keyDirectionUp:
                            newTop -= distance;
                            break;
                        case settings.keyDirectionDown:
                            newTop += distance;
                            break;
                        case settings.keyDirectionLeft:
                            newLeft -= distance;
                            break;
                        case settings.keyDirectionRight:
                            newLeft += distance;
                            break;
                    }
                }
                // Update the element position
                updatePosition(movable, {left: newLeft, top: newTop}, containerArea, keepInViewPort);

                if (options.onMove) {
                    let coordsNew = getCoords(movable);
                    let position = createPosition({
                        coordsNew: coordsNew,
                        coordsPrevious: coordsStart,
                        containerArea: containerArea,
                    });
                    position.element = movable;
                    position.direction = directions;
                    position.distance = distance;
                    position.viewportArea = getViewportArea(movable);
                    position.initial = copyProps(coordsInitial);
                    
                    options.onMove.call(this, position, event);
                    distance = position.distance;

                    // Update the element position
                    updatePosition(movable, {left: position.left, top: position.top}, containerArea, keepInViewPort);
                }
            }
            if (isNull(options.keyMoveInterval)) {
                options.keyMoveInterval = setInterval(() => {
                    moveElement();
                }, 20);
            }
        }
    }

    let movable_keyUp = (movable, options) => {
        return (event) => {
            event = event || window.event;
            let direction = settings.keyTracker.translate(event);
            if (isNull(direction)) {
                return;
            }
            settings.keyTracker.untrack(direction);

            let directions = settings.keyTracker.getTracked();
            if (directions.length < 1) {
                clearInterval(options.keyMoveInterval);
                options.keyMoveInterval = null;
                options.moveStartTriggered = false;

                if (options.onMoveEnd) {
                    let containerArea = getContainerArea(movable, options.container);
                    let coordsEnd = getCoords(movable);
                    let position = createPosition({
                        coordsNew: coordsEnd,
                        containerArea: containerArea,
                    });
                    position.element = movable;
                    options.onMoveEnd.call(this, position, event);
                }
            }
        }
    }

    let resizable_mouseDown = (resizable, options) => {
        let coordsInitial = getCoords(resizable);
        let initialWidth = coordsInitial.width;
        let initialHeight = coordsInitial.height;

        return (event) => {
            event.stopPropagation();

            let keepInViewPort = options.keepInViewPort;
            let containerArea = getContainerArea(resizable, options.container);

            // Get the mouse down position of the element
            let coordsStart = getCoords(resizable);
            let offsetX = event.clientX - coordsStart.width;
            let offsetY = event.clientY - coordsStart.height;

            if (options.onMoveStart) {
                let position = createPosition({
                    coordsNew: coordsStart,
                    containerArea: containerArea,
                });
                position.element = resizable;
                options.onMoveStart.call(this, position, event);
            }

            let moveElement = (event) => {
                // Get the new position
                let newWidth = (event.clientX - offsetX);
                let newHeight = (event.clientY - offsetY);

                // Get the previous position
                let coordsPrevious = getCoords(resizable);

                // Make sure the width/height is never less than the initial values
                if (options.maintainInitialSize) {
                    newWidth = Math.max(newWidth, initialWidth);
                    newHeight = Math.max(newHeight, initialHeight);
                }

                // Update the element position
                updatePosition(resizable, {
                    width: newWidth,
                    height: newHeight,
                }, containerArea, keepInViewPort);

                if (options.onMove) {
                    let coordsNew = getCoords(resizable);
                    let position = createPosition({
                        coordsNew: coordsNew,
                        coordsPrevious: coordsPrevious,
                        containerArea: containerArea,
                    });
                    position.element = resizable;
                    position.viewportArea = getViewportArea(resizable);
                    position.initial = copyProps(coordsInitial);
                    options.onMove.call(this, position, event);

                    // Update the element position
                    updatePosition(resizable, {
                        width: position.width,
                        height: position.height,
                    }, containerArea, keepInViewPort);
                }
            }
            let reset = (event) => {
                document.removeEventListener('mousemove', moveElement);
                document.removeEventListener('mouseup', reset);
                if (options.onMoveEnd) {
                    let coordsEnd = getCoords(resizable);
                    let position = createPosition({
                        coordsNew: coordsEnd,
                        containerArea: containerArea,
                    });
                    position.element = resizable;
                    options.onMoveEnd.call(this, position, event);
                }
            }
            document.addEventListener('mouseup', reset);
            document.addEventListener('mousemove', moveElement);
        }
    }

    let draggable_mouseDown = (draggable, options) => {
        let coordsInitial = getCoords(draggable);
        let initialWidth = coordsInitial.width;
        let initialHeight = coordsInitial.height;
        
        return (event) => {
            let keepInViewPort = options.keepInViewPort;
            let containerArea = getContainerArea(draggable, options.container);

            // Get the mouse down position of the element
            let coordsStart = getCoords(draggable);
            let offsetX = event.clientX - coordsStart.left;
            let offsetY = event.clientY - coordsStart.top;

            if (options.onMoveStart) {
                let position = createPosition({
                    coordsNew: coordsStart,
                    containerArea: containerArea,
                });
                position.element = draggable;
                options.onMoveStart.call(this, position, event);
            }

            let moveElement = (event) => {
                // Get the new position
                let newLeft = event.clientX - offsetX;
                let newTop = event.clientY - offsetY;

                // Get the previous position
                let coordsPrevious = getCoords(draggable);

                // Update the element position
                updatePosition(draggable, {
                    left: newLeft,
                    top: newTop
                }, containerArea, keepInViewPort);

                if (options.onMove) {
                    let coordsNew = getCoords(draggable);
                    let position = createPosition({
                        coordsNew: coordsNew,
                        coordsPrevious: coordsPrevious,
                        containerArea: containerArea,
                    });
                    position.element = draggable;
                    position.viewportArea = getViewportArea(draggable);
                    position.initial = copyProps(coordsInitial);
                    options.onMove.call(this, position, event);

                    // Update the element position
                    updatePosition(draggable, {
                        left: position.left,
                        top: position.top,
                    }, containerArea, keepInViewPort);
                }
            }
            let reset = (event) => {
                document.removeEventListener('mousemove', moveElement);
                document.removeEventListener('mouseup', reset);
                if (options.onMoveEnd) {
                    let coordsEnd = getCoords(draggable);
                    let position = createPosition({
                        coordsNew: coordsEnd,
                        containerArea: containerArea,
                    });
                    position.element = draggable;
                    options.onMoveEnd.call(this, position, event);
                }
            }
            document.addEventListener('mouseup', reset);
            document.addEventListener('mousemove', moveElement);
        }
    }

    let createPosition = (options) => {
        let position = {};
        position.previous = {};
        copyProps(options.coordsNew, position);
        copyProps(options.coordsPrevious, position.previous, Object.keys(options.coordsNew));
        position.containerArea = options.containerArea;
        position.viewport = getViewportInfo();
        return position;
    }

    let copyProps = (source, destination, props = null) => {
        props = props || Object.keys(source);
        destination = destination || {};
        for (const prop of props) {
            destination[prop] = source && prop in source ? source[prop] : undefined;
        }
        return destination;
    }

    let setPosition = (element, options) => {
        for (const prop in options) {
            if (!(prop in element.style)) {
                continue;
            }
            let value = options[prop];
            if (isUndefined(value)) {
                continue;
            } else if (!isNull(value) && !isNumeric(value)) {
                throw new TypeError(`${prop} is not a numeric value (${value})!`)
            }
            element.style[prop] = !isNull(value) ? parseInt(value, 10) + 'px' : value;            
        }
    }

    let updatePosition = (element, newPosition, containerArea, keepInViewPort) => {
        // Update the element position
        setPosition(element, newPosition);

        // Make sure the element stays within its container (if it exists)
        if (containerArea) {
            newPosition = maintainContainerArea(element, containerArea, newPosition);
        }
        
        // Make sure the element stays in the viewport
        if (keepInViewPort && !isInViewport(element)) {
            maintainViewportArea(element, newPosition);
        }
    }

    let maintainContainerArea = (element, containerArea, newPosition = null) => {
        newPosition = newPosition || getCoords(element);
        let newLeft = newPosition.left;
        let newTop = newPosition.top;
        let newWidth = newPosition.width;
        let newHeight = newPosition.height

        if (!isNull(newLeft)) {
            newPosition.left = Math.max(containerArea.minLeft, Math.min(newLeft, containerArea.maxLeft));
        }
        if (!isNull(newTop)) {
            newPosition.top = Math.max(containerArea.minTop, Math.min(newTop, containerArea.maxTop));
        }
        if (!isNull(newWidth)) {
            newPosition.width = Math.min(newWidth, containerArea.maxWidth);
        }
        if (!isNull(newHeight)) {
            newPosition.height = Math.min(newHeight, containerArea.maxHeight);
        }
        // Update the element
        setPosition(element, newPosition);

        return newPosition;
    }

    let maintainViewportArea = (element, newPosition = null) => {
        newPosition = newPosition || getCoords(element);
        let updateTypes = [
            settings.visibilityTypeWidth,
            settings.visibilityTypeHeight,
            settings.visibilityTypeBottomRight,
            settings.visibilityTypeTopLeft
        ];
        let updatesRequired;
        do {
            updatesRequired = false;
            for (let type of updateTypes) {
                newPosition = updateVisibility(type, element, newPosition);
                if (!newPosition.updateFound) {
                    continue;
                }
                // Update the element
                setPosition(element, newPosition);

                // Updates are still required
                updatesRequired = true;
            }
        } while (updatesRequired);
        
        return newPosition;
    }

    let updateVisibility = (type, element, newPosition) => {        
        let newLeft = newPosition.left;
        let newTop = newPosition.top;
        let newWidth = newPosition.width;
        let newHeight = newPosition.height;

        let bounding = element.getBoundingClientRect();
        let viewInfo = getViewportInfo();
        let viewportHeight = viewInfo.height;
        let viewportWidth = viewInfo.width;

        let updateFound = false;
        switch (type) {
            case settings.visibilityTypeTopLeft:
                if (!isNull(newLeft)) {
                    if (bounding.left < 0) {
                        newLeft += Math.abs(bounding.left);
                        updateFound = true;
                    }
                }
                if (!isNull(newTop)) {
                    if (bounding.top < 0) {
                        newTop += Math.abs(bounding.top);
                        updateFound = true;
                    }
                }
                break;
            case settings.visibilityTypeBottomRight:
                if (!isNull(newTop)) {
                    if (bounding.bottom > viewportHeight) {
                        newTop -= Math.abs(bounding.bottom - viewportHeight);
                        updateFound = true;
                    }
                }
                if (!isNull(newLeft)) {
                    if (bounding.right > viewportWidth) {
                        newLeft -= Math.abs(bounding.right - viewportWidth);
                        updateFound = true;
                    }
                }
                break;
            case settings.visibilityTypeWidth:
                if (!isNull(newWidth)) {
                    if (bounding.right > viewportWidth) {
                        newWidth -= Math.abs(bounding.right - viewportWidth);
                        updateFound = true;
                    }
                }
                break;
            case settings.visibilityTypeHeight:
                if (!isNull(newHeight)) {
                    if (bounding.bottom > viewportHeight) {
                        newHeight -= Math.abs(bounding.bottom - viewportHeight);
                        updateFound = true;
                    }
                }
                break;
            default:
                throw new TypeError(`Unable to update element position. Unknown visibility type: ${type}.`)
                break;
        }
        return {
            updateFound: updateFound,
            left: newLeft,
            top: newTop,
            width: newWidth,
            height: newHeight,
        };
    }

    // Check to make sure the element will be within our viewport boundary
    let isInViewport = (element) => {
        let bounding = element.getBoundingClientRect();
        let viewInfo = getViewportInfo();
        return (
            bounding.top >= 0
            && bounding.left >= 0
            && bounding.bottom <= viewInfo.height
            && bounding.right <= viewInfo.width
        );
    }

    let getViewportInfo = () => {
        return {
            height: Math.max(window.innerHeight || 0, document.documentElement.clientHeight || 0),
            width: Math.max(window.innerWidth || 0, document.documentElement.clientWidth || 0),
        };
    }

    let getViewportArea = (element) => {
        // Get the binding area in respect to the container
        let viewInfo = getViewportInfo();
        let minLeft = 0;
        let minTop = 0;
        let maxLeft = minLeft + (viewInfo.width - element.offsetWidth);
        let maxTop = minTop + (viewInfo.height - element.offsetHeight);
        let maxWidth = element.offsetWidth + ((viewInfo.width) - (element.offsetLeft + element.offsetWidth));
        let maxHeight = element.offsetHeight + ((viewInfo.height) - (element.offsetTop + element.offsetHeight));
        let viewportArea = {
            minLeft: minLeft,
            minTop: minTop,
            maxLeft: maxLeft,
            maxTop: maxTop,
            maxWidth: maxWidth,
            maxHeight: maxHeight,
        };
        return viewportArea;
    }

    let getContainerArea = (element, container) => {
        // Get the binding area in respect to the container
        let containerArea = null;
        if (container) {
            let minLeft = container.offsetLeft;
            let minTop = container.offsetTop;
            let maxLeft = minLeft + (container.offsetWidth - element.offsetWidth);
            let maxTop = minTop + (container.offsetHeight - element.offsetHeight);
            let maxWidth = element.offsetWidth + ((container.offsetLeft + container.offsetWidth) - (element.offsetLeft + element.offsetWidth));
            let maxHeight = element.offsetHeight + ((container.offsetTop + container.offsetHeight) - (element.offsetTop + element.offsetHeight));
            containerArea = {
                minLeft: minLeft,
                minTop: minTop,
                maxLeft: maxLeft,
                maxTop: maxTop,
                maxWidth: maxWidth,
                maxHeight: maxHeight,
            };
        }
        return containerArea;
    }

    let getCoords = (element) => {
        let computedStyle = window.getComputedStyle(element);
        let intProps = ['left', 'top', 'width', 'height'];
        let result = {};
        for (const prop of intProps) {
            result[prop] = parseInt(computedStyle[prop], 10) || parseInt(element.style[prop], 10) || 0;
        }
        let stringProps = ['position'];
        for (const prop of stringProps) {
            result[prop] = (computedStyle[prop] || element.style[prop]).toLowerCase();
        }
        if (result.position !== 'relative') {
            if (!result.left) {
                result.left = element.offsetLeft || 0;
            }
            if (!result.top) {
                result.top = element.offsetTop || 0;
            }
            if (!result.width) {
                result.width = element.offsetWidth || 0;
            }
            if (!result.height) {
                result.height = element.offsetHeight || 0;
            }
        }
        return result;
    }

    let addTouchSupport = (element) => {
        let events = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
        registerEvents(element, events, touchConverter);
    }

    let touchConverter = (event) => {
        // stop touch event
        event.stopPropagation();
        event.preventDefault();
        let touches = event.changedTouches;
        if (!touches || touches.length < 1) {
            return;
        }
        let first = touches[0];
        let target = first.target;
        let type = '';
        switch (event.type) {
            case 'touchstart':
                type = 'mousedown';
                break;
            case 'touchmove':
                type = 'mousemove';
                break;
            case 'touchend': case 'touchcancel':
                type = 'mouseup';
                break;
            default:
                return;
        }
        let simulatedEvent = null;
        try {
            simulatedEvent = new MouseEvent(type, {
                bubbles: true,
                cancelable: true,
                view: window,
                screenX: first.screenX,
                screenY: first.screenY,
                clientX: first.clientX,
                clientY: first.clientY,
            });
        } catch (e) {
            simulatedEvent = document.createEvent('MouseEvent');
            simulatedEvent.initMouseEvent(type, true, true, window, 1,
                                      first.screenX, first.screenY,
                                      first.clientX, first.clientY, false,
                                      false, false, false, 0 /*left*/, null);
        }
        target.dispatchEvent(simulatedEvent);
    }

    let registerEvents = (element, eventNames, func) => {
        eventNames.forEach((eventName, index) => {
            element.removeEventListener(eventName, func);
            element.addEventListener(eventName, func);
        });
    }

    let verifyElement = (element) => {
        if (isString(element)) {
            element = document.querySelector(element);
        }
        if (isNull(element)) {
            throw new TypeError(`Unable to process. Element provided is null`);
        } else if (!isElement(element)) {
            throw new TypeError(`Unable to process element of type: ${typeof element}. Reason: '${element}' is not an HTMLElement.`);
        }
        return element;
    }

    let addClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);

        let modified = false;
        if (cssClass.length > 0 && !hasClass(element, cssClass)) {
            element.classList.add(cssClass)
            modified = true;
        }
        return modified;
    }

    let removeClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);

        let modified = false;
        if (cssClass.length > 0 && hasClass(element, cssClass)) {
            element.classList.remove(cssClass);
            modified = true;
        }
        return modified;
    }

    let hasClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
        return element.classList.contains(cssClass);
    }

    let isString = (item) => {
        return 'string' === typeof item;
    }

    let isNull = (item) => {
        return isUndefined(item) || null === item;
    }

    let isUndefined = (item) => {
        return undefined === item;
    }

    let isFunction = (item) => {
        return 'function' === typeof item
    }

    let isElement = (item) => {
        let value = false;
        try {
            value = item instanceof HTMLElement || item instanceof HTMLDocument;
        }
        catch (e) {
            value = (typeof item==="object") &&
                (item.nodeType===1) && (typeof item.style === "object") &&
                (typeof item.ownerDocument ==="object");
        }
        return value;
    }

    let isWindow = (item) => {
        return item && item.document && item.location && item.alert && item.setInterval;
    }

    let isNumeric = (n) => {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    let tryFocus = (element) => {
        if (!element.focus) {
            let e = element;
            while (e.frameElement !== null) {e = e.parent;}
            if (e.parent) {
                element = e.parent;
            }
        }
        if (element.setAttribute) {
            element.setAttribute('tabindex', 0);
        }
        if (element.focus) {
            element.focus({preventScroll:true});
        }
    }

    let deleteKeys = (obj, keys) => {
        let modified = false
        if (!isNull(obj)) {
            for (const key of keys) {
                if (key in obj) {
                    delete obj[key];
                    modified = true;
                }
            }
        }
        return modified;
    }

    let getDroppables = (container) => {
        return container.querySelectorAll(`[${settings.attributeDraggable}='true']`);
    }

    let hasDroppable = (container) => {
        let droppables = getDroppables(container);
        return !isNull(droppables) && droppables.length > 0 ? droppables[0] : null;
    }

    let isDroppable = (element) => {
        let value = element.getAttribute(settings.attributeDraggable);
        return !isNull(value) && toBoolean(value);
    }

    let setDroppable = (element) => {
        element.setAttribute(settings.attributeDraggable, true);
    }

    let randomFromTo = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    let toBoolean = (value) => {
        value = String(value).trim().toLowerCase();
        let ret = false;
        switch (value) {
            case 'true': case 'yes': case '1':
                ret = true;
                break;
        }
        return ret;
    }

    // see if it looks and smells like an iterable object, and do accept length === 0
    let isArrayLike = (item) => {
        return (
            Array.isArray(item) ||
            (!!item &&
                typeof item === "object" &&
                typeof (item.length) === "number" &&
                (item.length === 0 ||
                    (item.length > 0 &&
                        (item.length - 1) in item)
                )
            )
        );
    }

    let closestDroppable = (e, exclude = null) => {
        for (; e; e = e.parentElement) {
            if (isDroppable(e) && (isNull(exclude) || exclude !== e)) {
                return e;
            }
        }
        return null;
    }

    let moveDroppable = (element, container, dropZoneAllowMultiple) => {
        let existingDroppable = null;
        if (!isNull(dropZoneAllowMultiple) && !dropZoneAllowMultiple) {
            existingDroppable = hasDroppable(container);
        }
        if (!isNull(existingDroppable)) {
            swapLocations(element, existingDroppable);
        } else {
            if (!parentContains(container, element)) {
                container.appendChild(element);
            }
        }
    }

    let parentContains = (parent, child) => {
        return parent !== child && parent.contains(child);
    }

    let reOrderDroppable = (elementX, elementY, container) => {
        if (isBefore(elementX, elementY, container)) {
            // Droppable originally is before target. Put it after the target
            container.insertBefore(elementX, elementY.nextSibling)
        } else {
            // Droppable originally is after the target. Put it before the target
            container.insertBefore(elementX, elementY);
        }
    }

    let isBefore = (elementX, elementY, container = null) => {
        container = container || (elementX.parentNode === elementY.parentNode ? elementX.parentNode : null) || document;
        let items = container.querySelectorAll('*');
        let result = false;
        for (const item of items) {
            if (item === elementX) {
                result = true;
                break;
            } else if (item === elementY) {
                result = false;
                break;
            }
        }
        return result;
    }

    let swapLocations = (elementX, elementY) => {
        let parentY = elementY.parentNode;
        let nextY = elementY.nextSibling;
        if (nextY === elementX) {
            parentY.insertBefore(elementX, elementY);
        } else {
            elementX.parentNode.insertBefore(elementY, elementX);
            if (nextY) {
                parentY.insertBefore(elementX, nextY);
            } else {
                parentY.appendChild(elementX);
            }
        }
    }

    let propertyToArray = (obj, props) => {
        for (const prop of props) {
            if (prop in obj) {
                obj[prop] = convertToArray(obj[prop]);
            }
        }
    }

    let convertToArray = (value) => {
        if (!isNull(value) && !isArrayLike(value)) {
            value = [value];
        }
        return value;
    }

    class KeyPressTracker {
        constructor(keys) {
            this.validKeys = {};
            this.pressed = {};
            for (const obj of keys) {
                if (!this.validKeys[obj.translation]) {
                    this.validKeys[obj.translation] = [];
                }
                for (const code of obj.keyCodes) {
                    this.validKeys[obj.translation].push(String(code));
                }
            }
        }
        track(key) {
            key = this.translate(key);
            if (!key) {
                throw new Error(`{key} is not a valid tracked translation key!`);
            }
            this.pressed[key] = true;
        }
        untrack(key) {
            key = this.translate(key);
            if (!key) {
                throw new Error(`{key} is not a valid tracked translation key!`);
            }
            if (key in this.pressed) {
                delete this.pressed[key];
            }
        }
        getTracked() {
            let tracked = [];
            for (let key in this.pressed) {
                if (!this.pressed[key]) {
                    continue;
                }
                tracked.push(key);
            }
            return tracked;
        }
        _isValid(key) {
            return (key in this.validKeys);
        }
        translate(event) {
            event = event || window.event;
            let keyCode = event.key || event.keyCode || event;
            let translation = null;
            if (keyCode) {
                keyCode = String(keyCode);
                if (this._isValid(keyCode)) {
                    translation = keyCode;
                } else {
                    for (const key in this.validKeys) {
                        let keyCodes = this.validKeys[key];
                        if (keyCodes.indexOf(keyCode) > -1) {
                            translation = key;
                            break;
                        }
                    }
                }
            }
            return translation;
        }
    }

    let createKeyTracker = () => {
        if (!isNull(settings.keyTracker)) {
            return;
        }
        settings.keyTracker = new KeyPressTracker([
            {translation: settings.keyDirectionUp, keyCodes: ['ArrowUp', 'Up', 38, 87, 'w', 'W']},
            {translation: settings.keyDirectionLeft, keyCodes: ['ArrowLeft', 'Left', 37, 65, 'a', 'A']},
            {translation: settings.keyDirectionDown, keyCodes: ['ArrowDown', 'Down', 40, 83, 's', 'S']},
            {translation: settings.keyDirectionRight, keyCodes: ['ArrowRight', 'Right', 39, 68, 'd', 'D']},
        ]);
    }

    let verifyDroppableOptions = (options) => {
        // Verify if the basic provided options are valid
        options = verifyOptions(options);
        if (isNull(options.element) && isNull(options.dropZone)) {
            throw new TypeError('There are no elements or dropzones specified');
        }

        let elementCount = !isNull(options.element) ? options.element.length : 0;
        for (let index = 0; index < elementCount; ++index) {
            let droppable = verifyElement(options.element[index]);
            if (isNull(droppable.id) || droppable.id.trim().length < 1) {
                droppable.id = `droppable_${index}_${randomFromTo(1271991, 7281987)}`;
            }
            setDroppable(droppable);
        }
        options.dropZoneAllowMultiple = !isNull(options.dropZoneAllowMultiple) ? options.dropZoneAllowMultiple : settings.dropZoneAllowMultiple;
        options.dropEffect = options.dropEffect || settings.dropEffect;
        options.dragImageUrl = isString(options.dragImageUrl) && options.dragImageUrl.length > 0 ? options.dragImageUrl : null;

        return options;
    }

    let verifyMovableOptions = (options) => {
        // Verify if the basic provided options are valid
        options = verifyOptions(options);
        if (isNull(options.element)) {
            throw new TypeError('There are no elements specified');
        }
        options.distance = options.distance || settings.movableDistance;
        options.keepInViewPort = !isNull(options.keepInViewPort) ? options.keepInViewPort : settings.keepInViewPort;
        options.moveStartTriggered = false;
        options.keyMoveInterval = null;
        options.attachEventToWindow = !isNull(options.attachEventToWindow) ? options.attachEventToWindow : settings.attachEventToWindow;
        createKeyTracker();

        return options;
    }

    let verifyDragResizeOptions = (options) => {
        // Verify if the basic provided options are valid
        options = verifyOptions(options);
        if (isNull(options.element)) {
            throw new TypeError('There are no elements specified');
        }
        options.handle = options.handle || options.element;
        if (options.element.length > options.handle.length) {
            for (let index = options.handle.length; index < options.element.length; ++index) {
                options.handle[index] = verifyElement(options.element[index]);
            }
        }
        options.keepInViewPort = !isNull(options.keepInViewPort) ? options.keepInViewPort : settings.keepInViewPort;
        options.maintainInitialSize = !isNull(options.maintainInitialSize) ? options.maintainInitialSize : settings.maintainInitialSize;

        return options;
    }

    let verifyOptions = (options) => {
        // Make sure the required options are valid
        if (isNull(options)) {
            // Check to see if there are options
            throw new TypeError('There are no options specified.');
        } else if (typeof options !== 'object' || isElement(options) || isArrayLike(options)) {
            // Check to see if a table is specified
            let element = options;
            options = {};
            options.element = element;
        }
        // Make sure the element is valid
        if (!isNull(options.container) && !isElement(options.container)) {
            // Check to see if the value is an HTMLElement
            throw new TypeError(`Unable to process container of type: ${typeof options.container}. Reason: '${options.container}' is not an HTMLElement.`);
        } else if (!isNull(options.onMoveStart) && !isFunction(options.onMoveStart)) {
            // Check to see if callback is a function
            throw new TypeError(`Unable to call onMoveStart of type: ${typeof options.onMoveStart}. Reason: '${options.onMoveStart}' is not a function.`);
        } else if (!isNull(options.onMove) && !isFunction(options.onMove)) {
            // Check to see if callback is a function
            throw new TypeError(`Unable to call onMove of type: ${typeof options.onMove}. Reason: '${options.onMove}' is not a function.`);
        } else if (!isNull(options.onMoveEnd) && !isFunction(options.onMoveEnd)) {
            // Check to see if callback is a function
            throw new TypeError(`Unable to call onMoveEnd of type: ${typeof options.onMoveEnd}. Reason: '${options.onMoveEnd}' is not a function.`);
        } else if (!isNull(options.distance) && !isNumeric(options.distance)) {
            // Check to see if a value is valid
            throw new TypeError(`Unable to process distance of type: ${typeof options.distance}. Reason: '${options.distance}' is not a numeric value.`);
        }
        // Make sure items are an array
        propertyToArray(options, ['element', 'handle', 'dropZone']);

        return options;
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Movement)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 2, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Movement.js
//    Description: Javascript that allows for element movement on a page
// ============================================================================
/**
* NAMESPACE: Movement
* USE: Handles element movement
*/
var Movement = Movement || {};
(function(namespace) {
    'use strict';
 
// -- Public data --
    // Property to hold public variables and functions
    let exposed = namespace;
 
    // Set class names and other shared data
    const settings = {
        // Misc data
        visibilityTypeTopLeft: 'top_left',
        visibilityTypeBottomRight: 'bottom_right',
        visibilityTypeWidth: 'width',
        visibilityTypeHeight: 'height',
        keyDirectionUp: 'up',
        keyDirectionLeft: 'left',
        keyDirectionDown: 'down',
        keyDirectionRight: 'right',
        attributeDraggable: 'draggable',
        keepInViewPort: false,
        dropZoneAllowMultiple: true,
        attachEventToWindow: true,
        dropEffect: 'move',
        movableDistance: 5,
        maintainInitialSize: false,
 
        // Element class names
        classNameModal: '.modal',
        classNameModalPanel: '.modal-panel',
        classNameCloseButton: '.modal-close-button',
        classNameModalHeader: '.modal-header',
        classNameModalHeaderText: '.modal-header-text',
        classNameModalBody: '.modal-body',
        classNameModalFooter: '.modal-footer',
        classNameDraggable: '.modal-draggable',
        classNameDraggableIcon: '.icon',
        classNameShow: '.show',
 
        // Element data names
        dataNameCloseOnClick: 'data-closeOnClick',
        dataNameDraggable: 'data-draggable',
        dataNameIsDraggable: 'data-isDraggable',
        cleanClassName: (str) => {
            return str ? str.trim().replace('.', '') : '';
        },
    };
 
    exposed.settings = settings;
 
    /**
    * FUNCTION: draggable
    * USE: Makes an element draggable via the mouse/touch input.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       element: One or more Javascript elements of the elements to make
    *          draggable with the Mouse/Touch
    *       handle: Optional. One or more Javascript elements that restricts
    *          dragging from starting unless mousedown occurs on the specified element
    *       container: Optional. A Javascript element of the container to only
    *          restrict the draggable element to
    *       onMoveStart(position, event): Optional. Function that allows to do
    *          something on move start
    *       onMove(position, event): Optional. Function that allows to do
    *          something on move. The position.left, top can be modified
    *       onMoveEnd(position, event): Optional. Function that allows to do
    *          something on move end
    *       keepInViewPort: Optional. Restricts the draggable element only to the
    *          visible viewport area. Default is False
    *   }
    * @return: N/A.
    */
    exposed.draggable = (options) => {
        options = verifyDragResizeOptions(options);
        let handles = options.handle;
        let draggables = options.element;
        deleteKeys(options, ['handle', 'element']);
 
        for (let index = 0; index < draggables.length; ++index) {
            let handle = handles[index];
            let draggable = draggables[index];
            addTouchSupport(handle);
            registerEvents(handle, ['mousedown'], draggable_mouseDown(draggable, options));
        }
    }
 
    /**
    * FUNCTION: resizable
    * USE: Makes an element resizable via the mouse/touch input.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       element: One or more Javascript elements of the elements to make
    *          resizable with the Mouse/Touch
    *       handle: Optional. One or more Javascript elements that restricts
    *          dragging from starting unless mousedown occurs on the specified element
    *       container: Optional. A Javascript element of the container to only
    *          restrict the resizable element to
    *       onMoveStart(position, event): Optional. Function that allows to do
    *          something on move start
    *       onMove(position, event): Optional. Function that allows to do
    *          something on move. The position.width, height can be modified
    *       onMoveEnd(position, event): Optional. Function that allows to do
    *          something on move end
    *       keepInViewPort: Optional. Restricts the resizable element only to the
    *          visible viewport area. Default is False
    *       maintainInitialSize: Optional. Ensures the element doesnt resize 
    *          smaller than its initial size. Default is False
    *   }
    * @return: N/A.
    */
    exposed.resizable = (options) => {
        options = verifyDragResizeOptions(options);
        let handles = options.handle;
        let resizables = options.element;
        deleteKeys(options, ['handle', 'element']);
 
        for (let index = 0; index < resizables.length; ++index) {
            let handle = handles[index];
            let resizable = resizables[index];
            addTouchSupport(handle);
            registerEvents(handle, ['mousedown'], resizable_mouseDown(resizable, options));
        }
    }
 
    /**
    * FUNCTION: movable
    * USE: Makes an element movable via the keyboard arrow keys.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       element: One or more Javascript elements of the elements to make
    *          movable with the Keyboard
    *       container: Optional. A Javascript element of the container to only
    *          restrict the movable element to
    *       onMoveStart(position, event): Optional. Function that allows to do
    *          something on move start
    *       onMove(position, event): Optional. Function that allows to do something
    *          on move. The position.left, top and distance can be modified
    *       onMoveEnd(position, event): Optional. Function that allows to do
    *          something on move end
    *       distance: Optional. The distance to move the element (in pixels) on
    *          keydown. Default is 5
    *       keepInViewPort: Optional. Restricts the draggable element only to the
    *          visible viewport area. Default is False
    *       attachEventToWindow: Optional. Determine if key down/up events should
    *          attach to the window or the element. Default is True
    *   }
    * @return: N/A.
    */
    exposed.movable = (options) => {
        options = verifyMovableOptions(options);
        let movables = options.element;
        deleteKeys(options, ['element']);
 
        for (let index = 0; index < movables.length; ++index) {
            let movable = movables[index];
            let eventOwner = movable;
            if (options.attachEventToWindow) {
                eventOwner = window || document || movable;
            }
            registerEvents(eventOwner, ['keydown'], movable_keyDown(movable, options));
            registerEvents(eventOwner, ['keyup'], movable_keyUp(movable, options));
            tryFocus(eventOwner);
        }
    }
 
    /**
    * FUNCTION: droppable
    * USE: Makes an element droppable via a dropzone/allows files to be dropped to dropzone.
    * @param options: An object of initialization options.
    *   Its made up of the following properties:
    *   {
    *       element: Optional. One or more Javascript elements of the elements
    *          drag and droppable elements
    *       dropZone: Optional. One or more Javascript elements of the dropzone
    *          elements the movable element to
    *       onMoveStart(position, event): Optional. Function that allows to do
    *          something on move start
    *       onMove(position, event): Optional. Function that allows to do
    *          something on move
    *       onMoveEnd(position, event): Optional. Function that allows to do
    *          something on move end
    *       dragImageUrl: Optional. The image url to display on element drag
    *       dropZoneAllowMultiple: Optional. Determines if more than one
    *          droppable is allowed on a dropzone. Default is true
    *       dropEffect: Optional. The feedback (typically visual) the user is
    *           given during a drag and drop operation. Default is 'move'
    *   }
    * @return: N/A.
    */
    exposed.droppable = (options) => {
        options = verifyDroppableOptions(options);
        let dropZones = options.dropZone;
        let droppables = options.element;
        deleteKeys(options, ['dropZone', 'element']);
 
        // Droppables
        let elementCount = !isNull(droppables) ? droppables.length : 0;
        for (let index = 0; index < elementCount; ++index) {
            let droppable = droppables[index];
            registerEvents(droppable, ['dragstart'], droppable_dragStart(droppable, options));
            registerEvents(droppable, ['drag'], droppable_drag(droppable, options));
            registerEvents(droppable, ['dragend'], droppable_dragEnd(droppable, options));
        }
 
        // Dropzones
        let dropZoneCount = !isNull(dropZones) ? dropZones.length : 0;
        for (let index = 0; index < dropZoneCount; ++index) {
            let dropZone = dropZones[index];
            registerEvents(dropZone, ['drop'], dropZone_drop(dropZone, options));
            registerEvents(dropZone, ['dragenter', 'dragleave'], dropZone_dragEnterLeave(dropZone, options));
            registerEvents(dropZone, ['dragover'], dropZone_dragOver(dropZone, options));
        }
    }
 
// -- Private data --
    let droppable_dragStart = (droppable, options) => {
        return (event) => {
            if (isFunction(event.dataTransfer.clearData)) {
                event.dataTransfer.clearData('text/plain');
            }
            let dropId = droppable.id;
            if (isNull(dropId)
                || dropId.trim().length < 1
                || !isDroppable(droppable)) {
                return false;
            }
            event.dataTransfer.effectAllowed = options.dropEffect;
            event.dataTransfer.setData('text/plain', dropId);
            if (options.dragImageUrl
                && isFunction(event.dataTransfer.setDragImage)) {
                let img = new Image();
                img.src = options.dragImageUrl;
                event.dataTransfer.setDragImage(img, 10, 10);
            }
            if (options.onMoveStart) {
                let coordsStart = getCoords(droppable);
                let position = createPosition({
                    coordsNew: coordsStart,
                });
                position.element = droppable;
                options.onMoveStart.call(this, position, event);
            }
        }
    }
 
    let droppable_drag = (droppable, options) => {
        return (event) => {
            if (options.onMove) {
                let coordsNew = getCoords(droppable);
                let position = createPosition({
                    coordsNew: coordsNew,
                });
                position.element = droppable;
                options.onMove.call(this, position, event);
            }
        }
    }
 
    let droppable_dragEnd = (droppable, options) => {
        return (event) => {
            if (options.onMoveEnd) {
                let coordsEnd = getCoords(droppable);
                let position = createPosition({
                    coordsNew: coordsEnd,
                });
                position.element = droppable;
                position.dropZone = droppable.parentNode;
                options.onMoveEnd.call(this, position, event);
            }
        }
    }
 
    let dropZone_drop = (dropZone, options) => {
        return (event) => {
            let droppable = null;
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();
 
            // Check if files or an element was dropped
            let files = event.dataTransfer.files;
            let dropId = event.dataTransfer.getData('text/plain');
            if ((isNull(dropId) || dropId.trim().length < 1)
                && (isNull(files) || files.length < 1)) {
                return false;
            }
            // Handle the dropped element
            if (!isNull(dropId) && dropId.trim().length > 0) {
                droppable = document.getElementById(dropId);
            }
            if (!isNull(droppable)) {
                // Place element on the dropzone
                let isDropZone = (event.target === dropZone);
                if (isDropZone) {
                    moveDroppable(droppable, event.target, options.dropZoneAllowMultiple);
                } else {
                    // We missed the dropzone. Swap locations
                    // if the element is placed on another droppable in the
                    // dropzone
                    let destinationItem = event.target;
                    if (!isDroppable(destinationItem)) {
                        destinationItem = closestDroppable(destinationItem, droppable);
                    }
                    if (!isNull(destinationItem)) {
                        let destinationParent = destinationItem.parentNode;
                        if (destinationParent === droppable.parentNode) {
                            // The two droppables are on the same dropzone
                            reOrderDroppable(droppable, destinationItem, destinationParent);
                        } else {
                            // The two droppables are on a different dropzone
                            moveDroppable(droppable, destinationParent, options.dropZoneAllowMultiple);
                            if (parentContains(destinationParent, destinationItem)
                                && getDroppables(destinationParent).length > 1) {
                                reOrderDroppable(droppable, destinationItem, destinationParent);
                            }
                        }
                    }
                }
            }
            // Handle the file
            if (!isNull(files) && files.length > 0) {
                files = Array.prototype.slice.call(files);
            } else {
                files = null;
            }
            if (options.onMoveEnd) {
                let coordsNew = getCoords(droppable || event.target);
                let position = createPosition({
                    coordsNew: coordsNew,
                });
                position.element = droppable;
                position.dropZone = dropZone;
                position.files = files;
                options.onMoveEnd.call(this, position, event);
            }
        }
    }
 
    let dropZone_dragEnterLeave = (dropZone, options) => {
        return (event) => {
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();
 
            if (options.onMove) {
                let coordsNew = getCoords(dropZone);
                let position = createPosition({
                    coordsNew: coordsNew,
                });
                position.dropZone = dropZone;
                options.onMove.call(this, position, event);
            }
        }
    }
 
    let dropZone_dragOver = (dropZone, options) => {
        return (event) => {
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();
 
            event.dataTransfer.dropEffect = event.dataTransfer.effectAllowed;
            if (options.onMove) {
                let coordsNew = getCoords(dropZone);
                let position = createPosition({
                    coordsNew: coordsNew,
                });
                position.dropZone = dropZone;
                options.onMove.call(this, position, event);
            }
        }
    }
 
    let movable_keyDown = (movable, options) => {
        let coordsInitial = getCoords(movable);
        let initialWidth = coordsInitial.width;
        let initialHeight = coordsInitial.height
        let distance = options.distance;
 
        return (event) => {
            event = event || window.event;
            let direction = settings.keyTracker.translate(event);
            if (isNull(direction)) {
                return;
            }
            event.preventDefault();
            settings.keyTracker.track(direction);
 
            let moveElement = () => {
                let keepInViewPort = options.keepInViewPort;
                let containerArea = getContainerArea(movable, options.container);
                let coordsStart = getCoords(movable);
 
                if (!options.moveStartTriggered) {
                    if (options.onMoveStart) {
                        let position = createPosition({
                            coordsNew: coordsStart,
                            containerArea: containerArea,
                        });
                        position.element = movable;
                        options.onMoveStart.call(this, position, event);
                    }
                    options.moveStartTriggered = true;
                }
                
                let newLeft = coordsStart.left;
                let newTop = coordsStart.top;
 
                let directions = settings.keyTracker.getTracked();
                for (let direction of directions) {
                    switch (direction) {
                        case settings.keyDirectionUp:
                            newTop -= distance;
                            break;
                        case settings.keyDirectionDown:
                            newTop += distance;
                            break;
                        case settings.keyDirectionLeft:
                            newLeft -= distance;
                            break;
                        case settings.keyDirectionRight:
                            newLeft += distance;
                            break;
                    }
                }
                // Update the element position
                updatePosition(movable, {left: newLeft, top: newTop}, containerArea, keepInViewPort);
 
                if (options.onMove) {
                    let coordsNew = getCoords(movable);
                    let position = createPosition({
                        coordsNew: coordsNew,
                        coordsPrevious: coordsStart,
                        containerArea: containerArea,
                    });
                    position.element = movable;
                    position.direction = directions;
                    position.distance = distance;
                    position.viewportArea = getViewportArea(movable);
                    position.initial = copyProps(coordsInitial);
                    
                    options.onMove.call(this, position, event);
                    distance = position.distance;
 
                    // Update the element position
                    updatePosition(movable, {left: position.left, top: position.top}, containerArea, keepInViewPort);
                }
            }
            if (isNull(options.keyMoveInterval)) {
                options.keyMoveInterval = setInterval(() => {
                    moveElement();
                }, 20);
            }
        }
    }
 
    let movable_keyUp = (movable, options) => {
        return (event) => {
            event = event || window.event;
            let direction = settings.keyTracker.translate(event);
            if (isNull(direction)) {
                return;
            }
            settings.keyTracker.untrack(direction);
 
            let directions = settings.keyTracker.getTracked();
            if (directions.length < 1) {
                clearInterval(options.keyMoveInterval);
                options.keyMoveInterval = null;
                options.moveStartTriggered = false;
 
                if (options.onMoveEnd) {
                    let containerArea = getContainerArea(movable, options.container);
                    let coordsEnd = getCoords(movable);
                    let position = createPosition({
                        coordsNew: coordsEnd,
                        containerArea: containerArea,
                    });
                    position.element = movable;
                    options.onMoveEnd.call(this, position, event);
                }
            }
        }
    }
 
    let resizable_mouseDown = (resizable, options) => {
        let coordsInitial = getCoords(resizable);
        let initialWidth = coordsInitial.width;
        let initialHeight = coordsInitial.height;
 
        return (event) => {
            event.stopPropagation();
 
            let keepInViewPort = options.keepInViewPort;
            let containerArea = getContainerArea(resizable, options.container);
 
            // Get the mouse down position of the element
            let coordsStart = getCoords(resizable);
            let offsetX = event.clientX - coordsStart.width;
            let offsetY = event.clientY - coordsStart.height;
 
            if (options.onMoveStart) {
                let position = createPosition({
                    coordsNew: coordsStart,
                    containerArea: containerArea,
                });
                position.element = resizable;
                options.onMoveStart.call(this, position, event);
            }
 
            let moveElement = (event) => {
                // Get the new position
                let newWidth = (event.clientX - offsetX);
                let newHeight = (event.clientY - offsetY);
 
                // Get the previous position
                let coordsPrevious = getCoords(resizable);
 
                // Make sure the width/height is never less than the initial values
                if (options.maintainInitialSize) {
                    newWidth = Math.max(newWidth, initialWidth);
                    newHeight = Math.max(newHeight, initialHeight);
                }
 
                // Update the element position
                updatePosition(resizable, {
                    width: newWidth,
                    height: newHeight,
                }, containerArea, keepInViewPort);
 
                if (options.onMove) {
                    let coordsNew = getCoords(resizable);
                    let position = createPosition({
                        coordsNew: coordsNew,
                        coordsPrevious: coordsPrevious,
                        containerArea: containerArea,
                    });
                    position.element = resizable;
                    position.viewportArea = getViewportArea(resizable);
                    position.initial = copyProps(coordsInitial);
                    options.onMove.call(this, position, event);
 
                    // Update the element position
                    updatePosition(resizable, {
                        width: position.width,
                        height: position.height,
                    }, containerArea, keepInViewPort);
                }
            }
            let reset = (event) => {
                document.removeEventListener('mousemove', moveElement);
                document.removeEventListener('mouseup', reset);
                if (options.onMoveEnd) {
                    let coordsEnd = getCoords(resizable);
                    let position = createPosition({
                        coordsNew: coordsEnd,
                        containerArea: containerArea,
                    });
                    position.element = resizable;
                    options.onMoveEnd.call(this, position, event);
                }
            }
            document.addEventListener('mouseup', reset);
            document.addEventListener('mousemove', moveElement);
        }
    }
 
    let draggable_mouseDown = (draggable, options) => {
        let coordsInitial = getCoords(draggable);
        let initialWidth = coordsInitial.width;
        let initialHeight = coordsInitial.height;
        
        return (event) => {
            let keepInViewPort = options.keepInViewPort;
            let containerArea = getContainerArea(draggable, options.container);
 
            // Get the mouse down position of the element
            let coordsStart = getCoords(draggable);
            let offsetX = event.clientX - coordsStart.left;
            let offsetY = event.clientY - coordsStart.top;
 
            if (options.onMoveStart) {
                let position = createPosition({
                    coordsNew: coordsStart,
                    containerArea: containerArea,
                });
                position.element = draggable;
                options.onMoveStart.call(this, position, event);
            }
 
            let moveElement = (event) => {
                // Get the new position
                let newLeft = event.clientX - offsetX;
                let newTop = event.clientY - offsetY;
 
                // Get the previous position
                let coordsPrevious = getCoords(draggable);
 
                // Update the element position
                updatePosition(draggable, {
                    left: newLeft,
                    top: newTop
                }, containerArea, keepInViewPort);
 
                if (options.onMove) {
                    let coordsNew = getCoords(draggable);
                    let position = createPosition({
                        coordsNew: coordsNew,
                        coordsPrevious: coordsPrevious,
                        containerArea: containerArea,
                    });
                    position.element = draggable;
                    position.viewportArea = getViewportArea(draggable);
                    position.initial = copyProps(coordsInitial);
                    options.onMove.call(this, position, event);
 
                    // Update the element position
                    updatePosition(draggable, {
                        left: position.left,
                        top: position.top,
                    }, containerArea, keepInViewPort);
                }
            }
            let reset = (event) => {
                document.removeEventListener('mousemove', moveElement);
                document.removeEventListener('mouseup', reset);
                if (options.onMoveEnd) {
                    let coordsEnd = getCoords(draggable);
                    let position = createPosition({
                        coordsNew: coordsEnd,
                        containerArea: containerArea,
                    });
                    position.element = draggable;
                    options.onMoveEnd.call(this, position, event);
                }
            }
            document.addEventListener('mouseup', reset);
            document.addEventListener('mousemove', moveElement);
        }
    }
 
    let createPosition = (options) => {
        let position = {};
        position.previous = {};
        copyProps(options.coordsNew, position);
        copyProps(options.coordsPrevious, position.previous, Object.keys(options.coordsNew));
        position.containerArea = options.containerArea;
        position.viewport = getViewportInfo();
        return position;
    }
 
    let copyProps = (source, destination, props = null) => {
        props = props || Object.keys(source);
        destination = destination || {};
        for (const prop of props) {
            destination[prop] = source && prop in source ? source[prop] : undefined;
        }
        return destination;
    }
 
    let setPosition = (element, options) => {
        for (const prop in options) {
            if (!(prop in element.style)) {
                continue;
            }
            let value = options[prop];
            if (isUndefined(value)) {
                continue;
            } else if (!isNull(value) && !isNumeric(value)) {
                throw new TypeError(`${prop} is not a numeric value (${value})!`)
            }
            element.style[prop] = !isNull(value) ? parseInt(value, 10) + 'px' : value;            
        }
    }
 
    let updatePosition = (element, newPosition, containerArea, keepInViewPort) => {
        // Update the element position
        setPosition(element, newPosition);
 
        // Make sure the element stays within its container (if it exists)
        if (containerArea) {
            newPosition = maintainContainerArea(element, containerArea, newPosition);
        }
        
        // Make sure the element stays in the viewport
        if (keepInViewPort && !isInViewport(element)) {
            maintainViewportArea(element, newPosition);
        }
    }
 
    let maintainContainerArea = (element, containerArea, newPosition = null) => {
        newPosition = newPosition || getCoords(element);
        let newLeft = newPosition.left;
        let newTop = newPosition.top;
        let newWidth = newPosition.width;
        let newHeight = newPosition.height
 
        if (!isNull(newLeft)) {
            newPosition.left = Math.max(containerArea.minLeft, Math.min(newLeft, containerArea.maxLeft));
        }
        if (!isNull(newTop)) {
            newPosition.top = Math.max(containerArea.minTop, Math.min(newTop, containerArea.maxTop));
        }
        if (!isNull(newWidth)) {
            newPosition.width = Math.min(newWidth, containerArea.maxWidth);
        }
        if (!isNull(newHeight)) {
            newPosition.height = Math.min(newHeight, containerArea.maxHeight);
        }
        // Update the element
        setPosition(element, newPosition);
 
        return newPosition;
    }
 
    let maintainViewportArea = (element, newPosition = null) => {
        newPosition = newPosition || getCoords(element);
        let updateTypes = [
            settings.visibilityTypeWidth,
            settings.visibilityTypeHeight,
            settings.visibilityTypeBottomRight,
            settings.visibilityTypeTopLeft
        ];
        let updatesRequired;
        do {
            updatesRequired = false;
            for (let type of updateTypes) {
                newPosition = updateVisibility(type, element, newPosition);
                if (!newPosition.updateFound) {
                    continue;
                }
                // Update the element
                setPosition(element, newPosition);
 
                // Updates are still required
                updatesRequired = true;
            }
        } while (updatesRequired);
        
        return newPosition;
    }
 
    let updateVisibility = (type, element, newPosition) => {        
        let newLeft = newPosition.left;
        let newTop = newPosition.top;
        let newWidth = newPosition.width;
        let newHeight = newPosition.height;
 
        let bounding = element.getBoundingClientRect();
        let viewInfo = getViewportInfo();
        let viewportHeight = viewInfo.height;
        let viewportWidth = viewInfo.width;
 
        let updateFound = false;
        switch (type) {
            case settings.visibilityTypeTopLeft:
                if (!isNull(newLeft)) {
                    if (bounding.left < 0) {
                        newLeft += Math.abs(bounding.left);
                        updateFound = true;
                    }
                }
                if (!isNull(newTop)) {
                    if (bounding.top < 0) {
                        newTop += Math.abs(bounding.top);
                        updateFound = true;
                    }
                }
                break;
            case settings.visibilityTypeBottomRight:
                if (!isNull(newTop)) {
                    if (bounding.bottom > viewportHeight) {
                        newTop -= Math.abs(bounding.bottom - viewportHeight);
                        updateFound = true;
                    }
                }
                if (!isNull(newLeft)) {
                    if (bounding.right > viewportWidth) {
                        newLeft -= Math.abs(bounding.right - viewportWidth);
                        updateFound = true;
                    }
                }
                break;
            case settings.visibilityTypeWidth:
                if (!isNull(newWidth)) {
                    if (bounding.right > viewportWidth) {
                        newWidth -= Math.abs(bounding.right - viewportWidth);
                        updateFound = true;
                    }
                }
                break;
            case settings.visibilityTypeHeight:
                if (!isNull(newHeight)) {
                    if (bounding.bottom > viewportHeight) {
                        newHeight -= Math.abs(bounding.bottom - viewportHeight);
                        updateFound = true;
                    }
                }
                break;
            default:
                throw new TypeError(`Unable to update element position. Unknown visibility type: ${type}.`)
                break;
        }
        return {
            updateFound: updateFound,
            left: newLeft,
            top: newTop,
            width: newWidth,
            height: newHeight,
        };
    }
 
    // Check to make sure the element will be within our viewport boundary
    let isInViewport = (element) => {
        let bounding = element.getBoundingClientRect();
        let viewInfo = getViewportInfo();
        return (
            bounding.top >= 0
            && bounding.left >= 0
            && bounding.bottom <= viewInfo.height
            && bounding.right <= viewInfo.width
        );
    }
 
    let getViewportInfo = () => {
        return {
            height: Math.max(window.innerHeight || 0, document.documentElement.clientHeight || 0),
            width: Math.max(window.innerWidth || 0, document.documentElement.clientWidth || 0),
        };
    }
 
    let getViewportArea = (element) => {
        // Get the binding area in respect to the container
        let viewInfo = getViewportInfo();
        let minLeft = 0;
        let minTop = 0;
        let maxLeft = minLeft + (viewInfo.width - element.offsetWidth);
        let maxTop = minTop + (viewInfo.height - element.offsetHeight);
        let maxWidth = element.offsetWidth + ((viewInfo.width) - (element.offsetLeft + element.offsetWidth));
        let maxHeight = element.offsetHeight + ((viewInfo.height) - (element.offsetTop + element.offsetHeight));
        let viewportArea = {
            minLeft: minLeft,
            minTop: minTop,
            maxLeft: maxLeft,
            maxTop: maxTop,
            maxWidth: maxWidth,
            maxHeight: maxHeight,
        };
        return viewportArea;
    }
 
    let getContainerArea = (element, container) => {
        // Get the binding area in respect to the container
        let containerArea = null;
        if (container) {
            let minLeft = container.offsetLeft;
            let minTop = container.offsetTop;
            let maxLeft = minLeft + (container.offsetWidth - element.offsetWidth);
            let maxTop = minTop + (container.offsetHeight - element.offsetHeight);
            let maxWidth = element.offsetWidth + ((container.offsetLeft + container.offsetWidth) - (element.offsetLeft + element.offsetWidth));
            let maxHeight = element.offsetHeight + ((container.offsetTop + container.offsetHeight) - (element.offsetTop + element.offsetHeight));
            containerArea = {
                minLeft: minLeft,
                minTop: minTop,
                maxLeft: maxLeft,
                maxTop: maxTop,
                maxWidth: maxWidth,
                maxHeight: maxHeight,
            };
        }
        return containerArea;
    }
 
    let getCoords = (element) => {
        let computedStyle = window.getComputedStyle(element);
        let intProps = ['left', 'top', 'width', 'height'];
        let result = {};
        for (const prop of intProps) {
            result[prop] = parseInt(computedStyle[prop], 10) || parseInt(element.style[prop], 10) || 0;
        }
        let stringProps = ['position'];
        for (const prop of stringProps) {
            result[prop] = (computedStyle[prop] || element.style[prop]).toLowerCase();
        }
        if (result.position !== 'relative') {
            if (!result.left) {
                result.left = element.offsetLeft || 0;
            }
            if (!result.top) {
                result.top = element.offsetTop || 0;
            }
            if (!result.width) {
                result.width = element.offsetWidth || 0;
            }
            if (!result.height) {
                result.height = element.offsetHeight || 0;
            }
        }
        return result;
    }
 
    let addTouchSupport = (element) => {
        let events = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
        registerEvents(element, events, touchConverter);
    }
 
    let touchConverter = (event) => {
        // stop touch event
        event.stopPropagation();
        event.preventDefault();
        let touches = event.changedTouches;
        if (!touches || touches.length < 1) {
            return;
        }
        let first = touches[0];
        let target = first.target;
        let type = '';
        switch (event.type) {
            case 'touchstart':
                type = 'mousedown';
                break;
            case 'touchmove':
                type = 'mousemove';
                break;
            case 'touchend': case 'touchcancel':
                type = 'mouseup';
                break;
            default:
                return;
        }
        let simulatedEvent = null;
        try {
            simulatedEvent = new MouseEvent(type, {
                bubbles: true,
                cancelable: true,
                view: window,
                screenX: first.screenX,
                screenY: first.screenY,
                clientX: first.clientX,
                clientY: first.clientY,
            });
        } catch (e) {
            simulatedEvent = document.createEvent('MouseEvent');
            simulatedEvent.initMouseEvent(type, true, true, window, 1,
                                      first.screenX, first.screenY,
                                      first.clientX, first.clientY, false,
                                      false, false, false, 0 /*left*/, null);
        }
        target.dispatchEvent(simulatedEvent);
    }
 
    let registerEvents = (element, eventNames, func) => {
        eventNames.forEach((eventName, index) => {
            element.removeEventListener(eventName, func);
            element.addEventListener(eventName, func);
        });
    }
 
    let verifyElement = (element) => {
        if (isString(element)) {
            element = document.querySelector(element);
        }
        if (isNull(element)) {
            throw new TypeError(`Unable to process. Element provided is null`);
        } else if (!isElement(element)) {
            throw new TypeError(`Unable to process element of type: ${typeof element}. Reason: '${element}' is not an HTMLElement.`);
        }
        return element;
    }
 
    let addClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
 
        let modified = false;
        if (cssClass.length > 0 && !hasClass(element, cssClass)) {
            element.classList.add(cssClass)
            modified = true;
        }
        return modified;
    }
 
    let removeClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
 
        let modified = false;
        if (cssClass.length > 0 && hasClass(element, cssClass)) {
            element.classList.remove(cssClass);
            modified = true;
        }
        return modified;
    }
 
    let hasClass = (element, cssClass) => {
        cssClass = settings.cleanClassName(cssClass);
        return element.classList.contains(cssClass);
    }
 
    let isString = (item) => {
        return 'string' === typeof item;
    }
 
    let isNull = (item) => {
        return isUndefined(item) || null === item;
    }
 
    let isUndefined = (item) => {
        return undefined === item;
    }
 
    let isFunction = (item) => {
        return 'function' === typeof item
    }
 
    let isElement = (item) => {
        let value = false;
        try {
            value = item instanceof HTMLElement || item instanceof HTMLDocument;
        }
        catch (e) {
            value = (typeof item==="object") &&
                (item.nodeType===1) && (typeof item.style === "object") &&
                (typeof item.ownerDocument ==="object");
        }
        return value;
    }
 
    let isWindow = (item) => {
        return item && item.document && item.location && item.alert && item.setInterval;
    }
 
    let isNumeric = (n) => {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
 
    let tryFocus = (element) => {
        if (!element.focus) {
            let e = element;
            while (e.frameElement !== null) {e = e.parent;}
            if (e.parent) {
                element = e.parent;
            }
        }
        if (element.setAttribute) {
            element.setAttribute('tabindex', 0);
        }
        if (element.focus) {
            element.focus({preventScroll:true});
        }
    }
 
    let deleteKeys = (obj, keys) => {
        let modified = false
        if (!isNull(obj)) {
            for (const key of keys) {
                if (key in obj) {
                    delete obj[key];
                    modified = true;
                }
            }
        }
        return modified;
    }
 
    let getDroppables = (container) => {
        return container.querySelectorAll(`[${settings.attributeDraggable}='true']`);
    }
 
    let hasDroppable = (container) => {
        let droppables = getDroppables(container);
        return !isNull(droppables) && droppables.length > 0 ? droppables[0] : null;
    }
 
    let isDroppable = (element) => {
        let value = element.getAttribute(settings.attributeDraggable);
        return !isNull(value) && toBoolean(value);
    }
 
    let setDroppable = (element) => {
        element.setAttribute(settings.attributeDraggable, true);
    }
 
    let randomFromTo = (from, to) => {
        return Math.floor(Math.random() * (to - from + 1) + from);
    }
 
    let toBoolean = (value) => {
        value = String(value).trim().toLowerCase();
        let ret = false;
        switch (value) {
            case 'true': case 'yes': case '1':
                ret = true;
                break;
        }
        return ret;
    }
 
    // see if it looks and smells like an iterable object, and do accept length === 0
    let isArrayLike = (item) => {
        return (
            Array.isArray(item) ||
            (!!item &&
                typeof item === "object" &&
                typeof (item.length) === "number" &&
                (item.length === 0 ||
                    (item.length > 0 &&
                        (item.length - 1) in item)
                )
            )
        );
    }
 
    let closestDroppable = (e, exclude = null) => {
        for (; e; e = e.parentElement) {
            if (isDroppable(e) && (isNull(exclude) || exclude !== e)) {
                return e;
            }
        }
        return null;
    }
 
    let moveDroppable = (element, container, dropZoneAllowMultiple) => {
        let existingDroppable = null;
        if (!isNull(dropZoneAllowMultiple) && !dropZoneAllowMultiple) {
            existingDroppable = hasDroppable(container);
        }
        if (!isNull(existingDroppable)) {
            swapLocations(element, existingDroppable);
        } else {
            if (!parentContains(container, element)) {
                container.appendChild(element);
            }
        }
    }
 
    let parentContains = (parent, child) => {
        return parent !== child && parent.contains(child);
    }
 
    let reOrderDroppable = (elementX, elementY, container) => {
        if (isBefore(elementX, elementY, container)) {
            // Droppable originally is before target. Put it after the target
            container.insertBefore(elementX, elementY.nextSibling)
        } else {
            // Droppable originally is after the target. Put it before the target
            container.insertBefore(elementX, elementY);
        }
    }
 
    let isBefore = (elementX, elementY, container = null) => {
        container = container || (elementX.parentNode === elementY.parentNode ? elementX.parentNode : null) || document;
        let items = container.querySelectorAll('*');
        let result = false;
        for (const item of items) {
            if (item === elementX) {
                result = true;
                break;
            } else if (item === elementY) {
                result = false;
                break;
            }
        }
        return result;
    }
 
    let swapLocations = (elementX, elementY) => {
        let parentY = elementY.parentNode;
        let nextY = elementY.nextSibling;
        if (nextY === elementX) {
            parentY.insertBefore(elementX, elementY);
        } else {
            elementX.parentNode.insertBefore(elementY, elementX);
            if (nextY) {
                parentY.insertBefore(elementX, nextY);
            } else {
                parentY.appendChild(elementX);
            }
        }
    }
 
    let propertyToArray = (obj, props) => {
        for (const prop of props) {
            if (prop in obj) {
                obj[prop] = convertToArray(obj[prop]);
            }
        }
    }
 
    let convertToArray = (value) => {
        if (!isNull(value) && !isArrayLike(value)) {
            value = [value];
        }
        return value;
    }
 
    class KeyPressTracker {
        constructor(keys) {
            this.validKeys = {};
            this.pressed = {};
            for (const obj of keys) {
                if (!this.validKeys[obj.translation]) {
                    this.validKeys[obj.translation] = [];
                }
                for (const code of obj.keyCodes) {
                    this.validKeys[obj.translation].push(String(code));
                }
            }
        }
        track(key) {
            key = this.translate(key);
            if (!key) {
                throw new Error(`{key} is not a valid tracked translation key!`);
            }
            this.pressed[key] = true;
        }
        untrack(key) {
            key = this.translate(key);
            if (!key) {
                throw new Error(`{key} is not a valid tracked translation key!`);
            }
            if (key in this.pressed) {
                delete this.pressed[key];
            }
        }
        getTracked() {
            let tracked = [];
            for (let key in this.pressed) {
                if (!this.pressed[key]) {
                    continue;
                }
                tracked.push(key);
            }
            return tracked;
        }
        _isValid(key) {
            return (key in this.validKeys);
        }
        translate(event) {
            event = event || window.event;
            let keyCode = event.key || event.keyCode || event;
            let translation = null;
            if (keyCode) {
                keyCode = String(keyCode);
                if (this._isValid(keyCode)) {
                    translation = keyCode;
                } else {
                    for (const key in this.validKeys) {
                        let keyCodes = this.validKeys[key];
                        if (keyCodes.indexOf(keyCode) > -1) {
                            translation = key;
                            break;
                        }
                    }
                }
            }
            return translation;
        }
    }
 
    let createKeyTracker = () => {
        if (!isNull(settings.keyTracker)) {
            return;
        }
        settings.keyTracker = new KeyPressTracker([
            {translation: settings.keyDirectionUp, keyCodes: ['ArrowUp', 'Up', 38, 87, 'w', 'W']},
            {translation: settings.keyDirectionLeft, keyCodes: ['ArrowLeft', 'Left', 37, 65, 'a', 'A']},
            {translation: settings.keyDirectionDown, keyCodes: ['ArrowDown', 'Down', 40, 83, 's', 'S']},
            {translation: settings.keyDirectionRight, keyCodes: ['ArrowRight', 'Right', 39, 68, 'd', 'D']},
        ]);
    }
 
    let verifyDroppableOptions = (options) => {
        // Verify if the basic provided options are valid
        options = verifyOptions(options);
        if (isNull(options.element) && isNull(options.dropZone)) {
            throw new TypeError('There are no elements or dropzones specified');
        }
 
        let elementCount = !isNull(options.element) ? options.element.length : 0;
        for (let index = 0; index < elementCount; ++index) {
            let droppable = verifyElement(options.element[index]);
            if (isNull(droppable.id) || droppable.id.trim().length < 1) {
                droppable.id = `droppable_${index}_${randomFromTo(1271991, 7281987)}`;
            }
            setDroppable(droppable);
        }
        options.dropZoneAllowMultiple = !isNull(options.dropZoneAllowMultiple) ? options.dropZoneAllowMultiple : settings.dropZoneAllowMultiple;
        options.dropEffect = options.dropEffect || settings.dropEffect;
        options.dragImageUrl = isString(options.dragImageUrl) && options.dragImageUrl.length > 0 ? options.dragImageUrl : null;
 
        return options;
    }
 
    let verifyMovableOptions = (options) => {
        // Verify if the basic provided options are valid
        options = verifyOptions(options);
        if (isNull(options.element)) {
            throw new TypeError('There are no elements specified');
        }
        options.distance = options.distance || settings.movableDistance;
        options.keepInViewPort = !isNull(options.keepInViewPort) ? options.keepInViewPort : settings.keepInViewPort;
        options.moveStartTriggered = false;
        options.keyMoveInterval = null;
        options.attachEventToWindow = !isNull(options.attachEventToWindow) ? options.attachEventToWindow : settings.attachEventToWindow;
        createKeyTracker();
 
        return options;
    }
 
    let verifyDragResizeOptions = (options) => {
        // Verify if the basic provided options are valid
        options = verifyOptions(options);
        if (isNull(options.element)) {
            throw new TypeError('There are no elements specified');
        }
        options.handle = options.handle || options.element;
        if (options.element.length > options.handle.length) {
            for (let index = options.handle.length; index < options.element.length; ++index) {
                options.handle[index] = verifyElement(options.element[index]);
            }
        }
        options.keepInViewPort = !isNull(options.keepInViewPort) ? options.keepInViewPort : settings.keepInViewPort;
        options.maintainInitialSize = !isNull(options.maintainInitialSize) ? options.maintainInitialSize : settings.maintainInitialSize;
 
        return options;
    }
 
    let verifyOptions = (options) => {
        // Make sure the required options are valid
        if (isNull(options)) {
            // Check to see if there are options
            throw new TypeError('There are no options specified.');
        } else if (typeof options !== 'object' || isElement(options) || isArrayLike(options)) {
            // Check to see if a table is specified
            let element = options;
            options = {};
            options.element = element;
        }
        // Make sure the element is valid
        if (!isNull(options.container) && !isElement(options.container)) {
            // Check to see if the value is an HTMLElement
            throw new TypeError(`Unable to process container of type: ${typeof options.container}. Reason: '${options.container}' is not an HTMLElement.`);
        } else if (!isNull(options.onMoveStart) && !isFunction(options.onMoveStart)) {
            // Check to see if callback is a function
            throw new TypeError(`Unable to call onMoveStart of type: ${typeof options.onMoveStart}. Reason: '${options.onMoveStart}' is not a function.`);
        } else if (!isNull(options.onMove) && !isFunction(options.onMove)) {
            // Check to see if callback is a function
            throw new TypeError(`Unable to call onMove of type: ${typeof options.onMove}. Reason: '${options.onMove}' is not a function.`);
        } else if (!isNull(options.onMoveEnd) && !isFunction(options.onMoveEnd)) {
            // Check to see if callback is a function
            throw new TypeError(`Unable to call onMoveEnd of type: ${typeof options.onMoveEnd}. Reason: '${options.onMoveEnd}' is not a function.`);
        } else if (!isNull(options.distance) && !isNumeric(options.distance)) {
            // Check to see if a value is valid
            throw new TypeError(`Unable to process distance of type: ${typeof options.distance}. Reason: '${options.distance}' is not a numeric value.`);
        }
        // Make sure items are an array
        propertyToArray(options, ['element', 'handle', 'dropZone']);
 
        return options;
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Movement)); // http://programmingnotes.org/

7. More Examples

Below are more examples demonstrating the use of ‘Movement.js‘. Don’t forget to include the module when running the examples!





		
		
			7. More Examples
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 2, 2020
//    Taken From: http://programmingnotes.org/
//    File:  movementDemo.html
//    Description: Demonstrates the use of Movement.js
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Movement.js Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.inline {
    display:inline-block;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

#boxContainer {
    width: 500px;
    height: 500px;
    border: 1px solid grey;
    cursor: default;
    user-select: none;
    background-color: #eee;
    display: flex;
}

.box {
    width: 200px;
    height: 125px;
    position: absolute;
    user-select: none;
}


#box1 {
    background-color: salmon;
    align-self: flex-end;
    z-index: 1;    
}

#box1Handle {
    width: 100px;
    height: 35px;
    background-color: yellow;
    text-align: center;
    cursor: move;
}

#box2 {
    background-color: cyan;
    cursor: move;
    align-self: center;
}

#box3 {
    background-color: #cc99cc;
    cursor: move; 
    align-self: start;
}

#box3Handle {
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
}

.boxInfo {
    margin-top: 10px;
    font-weight: bold;
    font-family: monospace;
}

.droppable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
    user-select: none;
    border: 1px solid grey;
    border-radius: 5px;
    cursor: grab;
}

.droppable:active {
    cursor: grabbing;
}

.dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    user-select: none;
}
</style>

<!-- // Include module -->
<script type="text/javascript" src="./Movement.js"></script>
<!-- Optional: The Following Adds Touch Screen (Mobile) Support For Movement.droppable -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/drag-drop-touch-polyfill@1.0.0/DragDropTouch.min.js"></script>

</head>
<body>
<div class="main">
    My Programming Notes Movement.js Demo

    <div class="center" style="margin-top: 30px;">
        <div style="margin-right: 30px;">
            <div class="dropzone">
                <div class="droppable">
                    This div is Droppable
                </div>
            </div>
            <div class="dropzone"></div>
            <div class="dropzone"></div>
            <div class="dropzone"></div>
            <div class="droppable">
                This div is another Droppable
            </div>
        </div>

        <div id="boxContainer">
            <div id="box1" class="box">
                <div id="box1Handle">
                    Drag Here
                </div>
                <div>
                    Constrained Draggable & Movable Box With Handle
                </div>
                <div id="box1Info" class="boxInfo">
                </div>
            </div>      

            <div id="box3" class="box">
                Constrained Resizable Box With Handle
                <div id="box3Info" class="boxInfo">
                </div>            
                <div id="box3Handle">
                </div>
            </div>             

            <div id="box2" class="box">
                Unconstrained Draggable & Movable Box
                <div id="box2Info" class="boxInfo">
                </div>
            </div>
        </div>
    </div>

</div>
<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {

    // Mouse draggables
    let box1Info = document.querySelector('#box1Info');
    Movement.draggable({
        element: document.querySelector('#box1'),           // One or more Javascript elements of the elements to make draggable with the Mouse/Touch
        handle: document.querySelector('#box1Handle'),      // Optional. One or more Javascript elements that restricts dragging from starting unless mousedown occurs on the specified element
        container: document.querySelector('#boxContainer'), // Optional. A Javascript element of the container to only restrict the draggable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Draggable Start: Left: ${position.left}, Top: ${position.top}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.left, position.top, can be modified
            console.log(`Draggable Move: Left: ${position.left}, Top: ${position.top}`);
            // Example modifying the element position
            //position.top = position.previous.top;
            box1Info.innerHTML = `Left: ${position.left}px, Top: ${position.top}px`;
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Draggable End: Left: ${position.left}, Top: ${position.top}`);
        },
        keepInViewPort: false,                              // Optional. Restricts the draggable element only to the visible viewport area. Default is False

    });

    // Keyboard movables
    Movement.movable({
        element: document.querySelector('#box1'),           // One or more Javascript elements of the elements to make movable with the Keyboard
        container: document.querySelector('#boxContainer'), // Optional. A Javascript element of the container to only restrict the movable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Movable Start: Left: ${position.left}, Top: ${position.top}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.left, position.top, and distance can be modified
            console.log(`Movable Move: Left: ${position.left}, Top: ${position.top}`);
            // Example modifying the element position
            //position.top = position.previous.top;
            box1Info.innerHTML = `Direction: ${position.direction.join('_')}
                <br />Left: ${position.left}px, Top: ${position.top}px`;
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Movable End: Left: ${position.left}, Top: ${position.top}`);
        },
        distance: null,                                     // Optional. The distance to move the element (in pixels) on keydown. Default is 5
        keepInViewPort: false,                              // Optional. Restricts the movable element only to the visible viewport area. Default is False
        attachEventToWindow: true,                          // Optional. Determine if key down/up events should attach to the window or the element. Default is True
    });

    // Mouse drag and droppables with dropzones
    Movement.droppable({
        element: document.querySelectorAll('.droppable'),   // Optional. One or more Javascript elements of the elements drag and droppable elements
        dropZone: document.querySelectorAll('.dropzone'),   // Optional. One or more Javascript elements of the dropzone elements
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Droppable Start: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move.
            //console.log(`Droppable Move: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
            switch (event.type) {
                case 'dragleave':
                    position.dropZone.style.backgroundColor = null;
                    break;
                case 'dragover':
                    position.dropZone.style.backgroundColor = '#ffffb2';
                    break;
                case 'drag':
                    position.element.style.backgroundColor = 'orange';
                    break;
            }
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            switch (event.type) {
                case 'dragend':
                    console.log(`Droppable End: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
                    position.element.style.backgroundColor = null;
                    break;
                case 'drop':
                    position.dropZone.style.backgroundColor = null;
                    break;
            }
        },
        dragImageUrl: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',                   // Optional. The image url to display on element drag
        dropZoneAllowMultiple: false,                   // Optional. Determines if more than one droppable is allowed on a dropzone. Default is true
        dropEffect: 'link',                             // Optional. The feedback (typically visual) the user is given during a drag and drop operation. Default is 'move'
    });

    let box2Info = document.querySelector('#box2Info');
    Movement.draggable({
        element: document.querySelector('#box2'),
        keepInViewPort: true,
        onMove: (position, event) => {
            box2Info.innerHTML = `Left: ${position.left}px, Top: ${position.top}px`;
        },
    });

    Movement.movable({
        element: document.querySelector('#box2'),
        keepInViewPort: true,
        //container: document.querySelector('#boxContainer'),
        onMoveStart: (position, event) => {
            console.log(`Movable Start: Left: ${position.left}, Top: ${position.top}`);
        },
        onMove: (position, event) => {
            box2Info.innerHTML = `Direction: ${position.direction.join('_')}
                <br />Left: ${position.left}px, Top: ${position.top}px`;

            if (position.top < position.previous.top) {
                //position.top = position.previous.top;
            }

            if (position.left <= position.viewportArea.minLeft) {
                position.left = position.viewportArea.maxLeft;
            } else if (position.left >= position.viewportArea.maxLeft) {
                position.left = position.viewportArea.minLeft;
            }
            if (position.top <= position.viewportArea.minTop) {
                position.top = position.viewportArea.maxTop;
            } else if (position.top >= position.viewportArea.maxTop) {
                position.top = position.viewportArea.minTop;
            }
        },
        onMoveEnd: (position, event) => {
            console.log(`Movable End: Left: ${position.left}, Top: ${position.top}`);
        },
        distance: 5,    // The distance to move (in pixels) per keydown iteration
        attachEventToWindow: false,  // If true, event listeners will be attached to the window, false they are attached to the element
    });
    
    // Resizable
    let box3Info = document.querySelector('#box3Info');
    Movement.resizable({
        element: document.querySelector('#box3'),           // One or more Javascript elements of the elements to make resizable with the Mouse/Touch
        handle: document.querySelector('#box3Handle'),      // Optional. One or more Javascript elements that restricts resizing from starting unless mousedown occurs on the specified element
        container: document.querySelector('#boxContainer'), // Optional. A Javascript element of the container to only restrict the resizable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Resizable Start: Width: ${position.width}, Height: ${position.height}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.width, position.height can be modified
            console.log(`Resizable Move: Width: ${position.width}, Height: ${position.height}`);
            // Example modifying the element position
            //position.height = position.previous.height;
            box3Info.innerHTML = `Width: ${position.width}px, Height: ${position.height}px`;            
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Resizable End: Width: ${position.width}, Height: ${position.height}`);
        },
        keepInViewPort: true,                              // Optional. Restricts the resizable element only to the visible viewport area. Default is False
        maintainInitialSize: true,                         // Optional. Ensures the element doesnt resize smaller than its initial size. Default is False
    });

    Movement.draggable({
        element: document.querySelector('#box3'),
        container: document.querySelector('#boxContainer'),
        onMove: (position, event) => {
            box3Info.innerHTML = `Left: ${position.left}px, Top: ${position.top}px`;
        },
    });
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Sept 2, 2020
//    Taken From: http://programmingnotes.org/
//    File:  movementDemo.html
//    Description: Demonstrates the use of Movement.js
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes Movement.js Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
 
.inline {
    display:inline-block;
}
 
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
#boxContainer {
    width: 500px;
    height: 500px;
    border: 1px solid grey;
    cursor: default;
    user-select: none;
    background-color: #eee;
    display: flex;
}
 
.box {
    width: 200px;
    height: 125px;
    position: absolute;
    user-select: none;
}
 
 
#box1 {
    background-color: salmon;
    align-self: flex-end;
    z-index: 1;    
}
 
#box1Handle {
    width: 100px;
    height: 35px;
    background-color: yellow;
    text-align: center;
    cursor: move;
}
 
#box2 {
    background-color: cyan;
    cursor: move;
    align-self: center;
}
 
#box3 {
    background-color: #cc99cc;
    cursor: move; 
    align-self: start;
}
 
#box3Handle {
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
}
 
.boxInfo {
    margin-top: 10px;
    font-weight: bold;
    font-family: monospace;
}
 
.droppable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
    user-select: none;
    border: 1px solid grey;
    border-radius: 5px;
    cursor: grab;
}
 
.droppable:active {
    cursor: grabbing;
}
 
.dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    user-select: none;
}
</style>
 
<!-- // Include module -->
<script type="text/javascript" src="./Movement.js"></script>
<!-- Optional: The Following Adds Touch Screen (Mobile) Support For Movement.droppable -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/DragDropTouch.min.js"></script>
 
</head>
<body>
<div class="main">
    My Programming Notes Movement.js Demo
 
    <div class="center" style="margin-top: 30px;">
        <div style="margin-right: 30px;">
            <div class="dropzone">
                <div class="droppable">
                    This div is Droppable
                </div>
            </div>
            <div class="dropzone"></div>
            <div class="dropzone"></div>
            <div class="dropzone"></div>
            <div class="droppable">
                This div is another Droppable
            </div>
        </div>
 
        <div id="boxContainer">
            <div id="box1" class="box">
                <div id="box1Handle">
                    Drag Here
                </div>
                <div>
                    Constrained Draggable & Movable Box With Handle
                </div>
                <div id="box1Info" class="boxInfo">
                </div>
            </div>      
 
            <div id="box3" class="box">
                Constrained Resizable Box With Handle
                <div id="box3Info" class="boxInfo">
                </div>            
                <div id="box3Handle">
                </div>
            </div>             
 
            <div id="box2" class="box">
                Unconstrained Draggable & Movable Box
                <div id="box2Info" class="boxInfo">
                </div>
            </div>
        </div>
    </div>
 
</div>
<script>
document.addEventListener("DOMContentLoaded", function(eventLoaded) {
 
    // Mouse draggables
    let box1Info = document.querySelector('#box1Info');
    Movement.draggable({
        element: document.querySelector('#box1'),           // One or more Javascript elements of the elements to make draggable with the Mouse/Touch
        handle: document.querySelector('#box1Handle'),      // Optional. One or more Javascript elements that restricts dragging from starting unless mousedown occurs on the specified element
        container: document.querySelector('#boxContainer'), // Optional. A Javascript element of the container to only restrict the draggable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Draggable Start: Left: ${position.left}, Top: ${position.top}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.left, position.top, can be modified
            console.log(`Draggable Move: Left: ${position.left}, Top: ${position.top}`);
            // Example modifying the element position
            //position.top = position.previous.top;
            box1Info.innerHTML = `Left: ${position.left}px, Top: ${position.top}px`;
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Draggable End: Left: ${position.left}, Top: ${position.top}`);
        },
        keepInViewPort: false,                              // Optional. Restricts the draggable element only to the visible viewport area. Default is False
 
    });
 
    // Keyboard movables
    Movement.movable({
        element: document.querySelector('#box1'),           // One or more Javascript elements of the elements to make movable with the Keyboard
        container: document.querySelector('#boxContainer'), // Optional. A Javascript element of the container to only restrict the movable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Movable Start: Left: ${position.left}, Top: ${position.top}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.left, position.top, and distance can be modified
            console.log(`Movable Move: Left: ${position.left}, Top: ${position.top}`);
            // Example modifying the element position
            //position.top = position.previous.top;
            box1Info.innerHTML = `Direction: ${position.direction.join('_')}
                <br />Left: ${position.left}px, Top: ${position.top}px`;
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Movable End: Left: ${position.left}, Top: ${position.top}`);
        },
        distance: null,                                     // Optional. The distance to move the element (in pixels) on keydown. Default is 5
        keepInViewPort: false,                              // Optional. Restricts the movable element only to the visible viewport area. Default is False
        attachEventToWindow: true,                          // Optional. Determine if key down/up events should attach to the window or the element. Default is True
    });
 
    // Mouse drag and droppables with dropzones
    Movement.droppable({
        element: document.querySelectorAll('.droppable'),   // Optional. One or more Javascript elements of the elements drag and droppable elements
        dropZone: document.querySelectorAll('.dropzone'),   // Optional. One or more Javascript elements of the dropzone elements
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Droppable Start: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move.
            //console.log(`Droppable Move: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
            switch (event.type) {
                case 'dragleave':
                    position.dropZone.style.backgroundColor = null;
                    break;
                case 'dragover':
                    position.dropZone.style.backgroundColor = '#ffffb2';
                    break;
                case 'drag':
                    position.element.style.backgroundColor = 'orange';
                    break;
            }
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            switch (event.type) {
                case 'dragend':
                    console.log(`Droppable End: Left: ${position.left}, Top: ${position.top}. Type: ${event.type}`);
                    position.element.style.backgroundColor = null;
                    break;
                case 'drop':
                    position.dropZone.style.backgroundColor = null;
                    break;
            }
        },
        dragImageUrl: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',                   // Optional. The image url to display on element drag
        dropZoneAllowMultiple: false,                   // Optional. Determines if more than one droppable is allowed on a dropzone. Default is true
        dropEffect: 'link',                             // Optional. The feedback (typically visual) the user is given during a drag and drop operation. Default is 'move'
    });
 
    let box2Info = document.querySelector('#box2Info');
    Movement.draggable({
        element: document.querySelector('#box2'),
        keepInViewPort: true,
        onMove: (position, event) => {
            box2Info.innerHTML = `Left: ${position.left}px, Top: ${position.top}px`;
        },
    });
 
    Movement.movable({
        element: document.querySelector('#box2'),
        keepInViewPort: true,
        //container: document.querySelector('#boxContainer'),
        onMoveStart: (position, event) => {
            console.log(`Movable Start: Left: ${position.left}, Top: ${position.top}`);
        },
        onMove: (position, event) => {
            box2Info.innerHTML = `Direction: ${position.direction.join('_')}
                <br />Left: ${position.left}px, Top: ${position.top}px`;
 
            if (position.top < position.previous.top) {
                //position.top = position.previous.top;
            }
 
            if (position.left <= position.viewportArea.minLeft) {
                position.left = position.viewportArea.maxLeft;
            } else if (position.left >= position.viewportArea.maxLeft) {
                position.left = position.viewportArea.minLeft;
            }
            if (position.top <= position.viewportArea.minTop) {
                position.top = position.viewportArea.maxTop;
            } else if (position.top >= position.viewportArea.maxTop) {
                position.top = position.viewportArea.minTop;
            }
        },
        onMoveEnd: (position, event) => {
            console.log(`Movable End: Left: ${position.left}, Top: ${position.top}`);
        },
        distance: 5,    // The distance to move (in pixels) per keydown iteration
        attachEventToWindow: false,  // If true, event listeners will be attached to the window, false they are attached to the element
    });
    
    // Resizable
    let box3Info = document.querySelector('#box3Info');
    Movement.resizable({
        element: document.querySelector('#box3'),           // One or more Javascript elements of the elements to make resizable with the Mouse/Touch
        handle: document.querySelector('#box3Handle'),      // Optional. One or more Javascript elements that restricts resizing from starting unless mousedown occurs on the specified element
        container: document.querySelector('#boxContainer'), // Optional. A Javascript element of the container to only restrict the resizable element to
        onMoveStart: (position, event) => {                 // Optional. Function that allows to do something on move start
            console.log(`Resizable Start: Width: ${position.width}, Height: ${position.height}`);
        },
        onMove: (position, event) => {                      // Optional. Function that allows to do something on move. The position.width, position.height can be modified
            console.log(`Resizable Move: Width: ${position.width}, Height: ${position.height}`);
            // Example modifying the element position
            //position.height = position.previous.height;
            box3Info.innerHTML = `Width: ${position.width}px, Height: ${position.height}px`;            
        },
        onMoveEnd: (position, event) => {                   // Optional. Function that allows to do something on move end
            console.log(`Resizable End: Width: ${position.width}, Height: ${position.height}`);
        },
        keepInViewPort: true,                              // Optional. Restricts the resizable element only to the visible viewport area. Default is False
        maintainInitialSize: true,                         // Optional. Ensures the element doesnt resize smaller than its initial size. Default is False
    });
 
    Movement.draggable({
        element: document.querySelector('#box3'),
        container: document.querySelector('#boxContainer'),
        onMove: (position, event) => {
            box3Info.innerHTML = `Left: ${position.left}px, Top: ${position.top}px`;
        },
    });
});
</script>
</body>
</html><!-- // http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || How To Make Change – Display The Total Sales Amount In Dollars & Cents Using Modulus

August 29, 2020 admin No comments

The following is a module with functions which demonstrates the use of the modulus (%) operator to make change.

So for example, given the value of 2.34, this function would return the result of 2 dollars, 1 quarters, 1 nickels, and 4 pennies.

1. Make Change

The example below demonstrates how to make change.





		
		
			1. Make Change
			
JavaScript
			
			// Make change

<script>
(() => {
    let values = [
        19.87,
        11.93,
        187.91,
        3,
        20.19,
        1991
    ];
    values.forEach(value => {
        // Make change
        let change = Utils.makeChange(value);   
        
        console.log(`\n$${value} is made up of: `);
        for (let amount of change) {
            console.log(`\t${amount.denomination.description}: x${amount.quantity}`);
        }    
    });    
})();
</script>

// expected output:
/*
    $19.87 is made up of: 
        Ten-Dollar Bill: x1  
        Five-Dollar Bill: x1 
        One-Dollar Bill: x4 
        Quarter: x3 
        Dime: x1 
        Penny: x2 

    $11.93 is made up of:  
        Ten-Dollar Bill: x1 
        One-Dollar Bill: x1 
        Quarter: x3  
        Dime: x1 
        Nickel: x1  
        Penny: x3  

    $187.91 is made up of: 
        Hundred-Dollar Bill: x1 
        Fifty-Dollar Bill: x1 
        Twenty-Dollar Bill: x1  
        Ten-Dollar Bill: x1 
        Five-Dollar Bill: x1 
        One-Dollar Bill: x2 
        Quarter: x3 
        Dime: x1  
        Nickel: x1 
        Penny: x1

    $3 is made up of:  
        One-Dollar Bill: x3  

    $20.19 is made up of:  
        Twenty-Dollar Bill: x1  
        Dime: x1  
        Nickel: x1  
        Penny: x4  

    $1991 is made up of:  
        Hundred-Dollar Bill: x19  
        Fifty-Dollar Bill: x1 
        Twenty-Dollar Bill: x2  
        One-Dollar Bill: x1
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
				
						// Make change
 
<script>
(() => {
    let values = [
        19.87,
        11.93,
        187.91,
        3,
        20.19,
        1991
    ];
    values.forEach(value => {
        // Make change
        let change = Utils.makeChange(value);   
        
        console.log(`\n$${value} is made up of: `);
        for (let amount of change) {
            console.log(`\t${amount.denomination.description}: x${amount.quantity}`);
        }    
    });    
})();
</script>
 
// expected output:
/*
    $19.87 is made up of: 
        Ten-Dollar Bill: x1  
        Five-Dollar Bill: x1 
        One-Dollar Bill: x4 
        Quarter: x3 
        Dime: x1 
        Penny: x2 
 
    $11.93 is made up of:  
        Ten-Dollar Bill: x1 
        One-Dollar Bill: x1 
        Quarter: x3  
        Dime: x1 
        Nickel: x1  
        Penny: x3  
 
    $187.91 is made up of: 
        Hundred-Dollar Bill: x1 
        Fifty-Dollar Bill: x1 
        Twenty-Dollar Bill: x1  
        Ten-Dollar Bill: x1 
        Five-Dollar Bill: x1 
        One-Dollar Bill: x2 
        Quarter: x3 
        Dime: x1  
        Nickel: x1 
        Penny: x1
 
    $3 is made up of:  
        One-Dollar Bill: x3  
 
    $20.19 is made up of:  
        Twenty-Dollar Bill: x1  
        Dime: x1  
        Nickel: x1  
        Penny: x4  
 
    $1991 is made up of:  
        Hundred-Dollar Bill: x19  
        Fifty-Dollar Bill: x1 
        Twenty-Dollar Bill: x2  
        One-Dollar Bill: x1
*/

2. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 29, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: makeChange
    * USE: Makes change out of a given dollar amount.
    * @param amount: The dollar amount of the change to make.
    * @return: An array of Denomination info that makes up the given amount.
    */
    exposed.makeChange = (amount) => {
        let denominations = exposed.Denomination.get();
        let remainingCents = exposed.Denomination.convert(amount);
        let change = [];        
        for (const denomination of denominations) {
            let quantity = Math.floor(remainingCents / denomination.cents());
            remainingCents %= denomination.cents();
            if (quantity > 0) {
                change.push({
                    quantity: quantity,
                    denomination: denomination,
                });
            }            
        }
        return change
    } 
    
    exposed.Denomination = class {
        constructor(dollars, description) {
            this.dollars = dollars;
            this.description = description;
        }
        cents() {
            return exposed.Denomination.convert(this.dollars);
        }
        static convert(dollars) {
            return dollars * 100;
        }
        static get() {
            let denominations = [
                new exposed.Denomination(100, 'Hundred-Dollar Bill'),
                new exposed.Denomination(50, 'Fifty-Dollar Bill'),
                new exposed.Denomination(20, 'Twenty-Dollar Bill'),
                new exposed.Denomination(10, 'Ten-Dollar Bill'),
                new exposed.Denomination(5, 'Five-Dollar Bill'),
                new exposed.Denomination(1, 'One-Dollar Bill'),
                new exposed.Denomination(.25, 'Quarter'),
                new exposed.Denomination(.10, 'Dime'),
                new exposed.Denomination(.05, 'Nickel'),
                new exposed.Denomination(.01, 'Penny'),
            ];
            return denominations;
        }
    }      

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 29, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: makeChange
    * USE: Makes change out of a given dollar amount.
    * @param amount: The dollar amount of the change to make.
    * @return: An array of Denomination info that makes up the given amount.
    */
    exposed.makeChange = (amount) => {
        let denominations = exposed.Denomination.get();
        let remainingCents = exposed.Denomination.convert(amount);
        let change = [];        
        for (const denomination of denominations) {
            let quantity = Math.floor(remainingCents / denomination.cents());
            remainingCents %= denomination.cents();
            if (quantity > 0) {
                change.push({
                    quantity: quantity,
                    denomination: denomination,
                });
            }            
        }
        return change
    } 
    
    exposed.Denomination = class {
        constructor(dollars, description) {
            this.dollars = dollars;
            this.description = description;
        }
        cents() {
            return exposed.Denomination.convert(this.dollars);
        }
        static convert(dollars) {
            return dollars * 100;
        }
        static get() {
            let denominations = [
                new exposed.Denomination(100, 'Hundred-Dollar Bill'),
                new exposed.Denomination(50, 'Fifty-Dollar Bill'),
                new exposed.Denomination(20, 'Twenty-Dollar Bill'),
                new exposed.Denomination(10, 'Ten-Dollar Bill'),
                new exposed.Denomination(5, 'Five-Dollar Bill'),
                new exposed.Denomination(1, 'One-Dollar Bill'),
                new exposed.Denomination(.25, 'Quarter'),
                new exposed.Denomination(.10, 'Dime'),
                new exposed.Denomination(.05, 'Nickel'),
                new exposed.Denomination(.01, 'Penny'),
            ];
            return denominations;
        }
    }      
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || Swap Two HTML Element Locations In Dom Tree Using Vanilla JavaScript

August 28, 2020 admin No comments

The following is a module with functions that demonstrates a simple way how to swap two HTML element locations in the Dom tree using JavaScript.

This method retains any existing event listeners.

1. Swap Element Locations

The example below demonstrates how to swap two HTML element locations.





		
		
			1. Swap Element Locations
			
XHTML
			
			<!-- // Swap Element Locations. -->

<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    

<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');    
    let container = document.querySelector('.container');

    console.log('=== Before Swap ===');
    console.log(container.innerHTML);
    
    // Swap the two locations
    Utils.swapLocations(first, second);
    
    console.log('=== After Swap ===');
    console.log(container.innerHTML);  
})();
</script>

<!--
// expected output:
/*
    === Before Swap ===  

        <p>some irrelevant text 1</p>
        <p>some irrelevant text 2</p>
        <p class="first">I'm first</p>
        <div>
            <p class="second">I'm second</p>
            <p>some irrelevant text outside 1</p>
            <p>some irrelevant text outside 2</p>
        </div> 

    === After Swap === 

        <p>some irrelevant text 1</p>
        <p>some irrelevant text 2</p>
        <p class="second">I'm second</p>
        <div>
            <p class="first">I'm first</p>
            <p>some irrelevant text outside 1</p>
            <p>some irrelevant text outside 2</p>
        </div>
*/
-->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
				
						<!-- // Swap Element Locations. -->
 
<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    
 
<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');    
    let container = document.querySelector('.container');
 
    console.log('=== Before Swap ===');
    console.log(container.innerHTML);
    
    // Swap the two locations
    Utils.swapLocations(first, second);
    
    console.log('=== After Swap ===');
    console.log(container.innerHTML);  
})();
</script>
 
<!--
// expected output:
/*
    === Before Swap ===  
 
        <p>some irrelevant text 1</p>
        <p>some irrelevant text 2</p>
        <p class="first">I'm first</p>
        <div>
            <p class="second">I'm second</p>
            <p>some irrelevant text outside 1</p>
            <p>some irrelevant text outside 2</p>
        </div> 
 
    === After Swap === 
 
        <p>some irrelevant text 1</p>
        <p>some irrelevant text 2</p>
        <p class="second">I'm second</p>
        <div>
            <p class="first">I'm first</p>
            <p>some irrelevant text outside 1</p>
            <p>some irrelevant text outside 2</p>
        </div>
*/
-->

2. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 28, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: swapLocations
    * USE: Swaps two Javascript element locations in the DOM tree.
    * @param elementX: The first Javascript element to swap.
    * @param elementY: The second Javascript element to swap.
    * @return: N/A.
    */
    exposed.swapLocations = (elementX, elementY) => {
        let parentY = elementY.parentNode;
        let nextY = elementY.nextSibling;
        if (nextY === elementX) {
            parentY.insertBefore(elementX, elementY);
        } else {
            elementX.parentNode.insertBefore(elementY, elementX);
            if (nextY) {
                parentY.insertBefore(elementX, nextY);
            } else {
                parentY.appendChild(elementX);
            }
        }
    }     

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 28, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: swapLocations
    * USE: Swaps two Javascript element locations in the DOM tree.
    * @param elementX: The first Javascript element to swap.
    * @param elementY: The second Javascript element to swap.
    * @return: N/A.
    */
    exposed.swapLocations = (elementX, elementY) => {
        let parentY = elementY.parentNode;
        let nextY = elementY.nextSibling;
        if (nextY === elementX) {
            parentY.insertBefore(elementX, elementY);
        } else {
            elementX.parentNode.insertBefore(elementY, elementX);
            if (nextY) {
                parentY.insertBefore(elementX, nextY);
            } else {
                parentY.appendChild(elementX);
            }
        }
    }     
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || Check If An Element Comes Before Or After Another Element In Dom Tree Using Vanilla JavaScript

August 28, 2020 admin No comments

The following is a module with functions that demonstrates a simple way how to check if an element comes before or after another element in the Dom tree using JavaScript.

1. Check If Before / After

The example below demonstrates how to check if an element is before or after another element.





		
		
			1. Check Before / After
			
XHTML
			
			<!-- // Check before / after. -->

<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    

<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');
    
    console.log(Utils.isBefore(first, second));
    console.log(Utils.isAfter(first, second));   
})();
</script>

<!--
// expected output:
/*
    true
    false
*/
-->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
				
						<!-- // Check before / after. -->
 
<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    
 
<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');
    
    console.log(Utils.isBefore(first, second));
    console.log(Utils.isAfter(first, second));   
})();
</script>
 
<!--
// expected output:
/*
    true
    false
*/
-->

2. Refined Search

The example below demonstrates how to check if an element is before or after another element by refining the search by a specific container.





		
		
			2. Refined Search
			
XHTML
			
			<!-- // Refined Search. -->

<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    

<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');
    let container = document.querySelector('.container');
   
    console.log(Utils.isBefore(first, second, container));
    console.log(Utils.isAfter(first, second, container)); 
})();
</script>

<!-- 
// expected output:
/*
    true
    false
*/
-->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
				
						<!-- // Refined Search. -->
 
<div class="container">
    <p>some irrelevant text 1</p>
    <p>some irrelevant text 2</p>
    <p class="first">I'm first</p>
    <div>
        <p class="second">I'm second</p>
        <p>some irrelevant text outside 1</p>
        <p>some irrelevant text outside 2</p>
    </div>
</div>    
 
<script>
(() => { 
    let first = document.querySelector('.first');
    let second = document.querySelector('.second');
    let container = document.querySelector('.container');
   
    console.log(Utils.isBefore(first, second, container));
    console.log(Utils.isAfter(first, second, container)); 
})();
</script>
 
<!-- 
// expected output:
/*
    true
    false
*/
-->

3. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 28, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: isBefore
    * USE: Determines if 'elementX' comes before 'elementY' in the DOM tree.
    * @param elementX: The first Javascript element to compare.
    * @param elementY: The second Javascript element to compare.
    * @param container: Optional. The container to limit the search.    
    * @return: True if 'elementX' comes before 'elementY', false otherwise.
    */    
    exposed.isBefore = (elementX, elementY, container = null) => {
        container = container || (elementX.parentNode === elementY.parentNode ? elementX.parentNode : null) || document;        
        let items = container.querySelectorAll('*');
        let result = false;
        for (const item of items) {
            if (item === elementX) {
                result = true;
                break;
            } else if (item === elementY) {
                result = false;
                break;
            }            
        }
        return result;
    }
    
    /**
    * FUNCTION: isAfter
    * USE: Determines if 'elementX' comes after 'elementY' in the DOM tree.
    * @param elementX: The first Javascript element to compare.
    * @param elementY: The second Javascript element to compare.
    * @param container: Optional. The container to limit the search.    
    * @return: True if 'elementX' comes after 'elementY', false otherwise.
    */      
    exposed.isAfter = (elementX, elementY, container = null) => {
        return !exposed.isBefore(elementX, elementY, container);
    }    

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 28, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: isBefore
    * USE: Determines if 'elementX' comes before 'elementY' in the DOM tree.
    * @param elementX: The first Javascript element to compare.
    * @param elementY: The second Javascript element to compare.
    * @param container: Optional. The container to limit the search.    
    * @return: True if 'elementX' comes before 'elementY', false otherwise.
    */    
    exposed.isBefore = (elementX, elementY, container = null) => {
        container = container || (elementX.parentNode === elementY.parentNode ? elementX.parentNode : null) || document;        
        let items = container.querySelectorAll('*');
        let result = false;
        for (const item of items) {
            if (item === elementX) {
                result = true;
                break;
            } else if (item === elementY) {
                result = false;
                break;
            }            
        }
        return result;
    }
    
    /**
    * FUNCTION: isAfter
    * USE: Determines if 'elementX' comes after 'elementY' in the DOM tree.
    * @param elementX: The first Javascript element to compare.
    * @param elementY: The second Javascript element to compare.
    * @param container: Optional. The container to limit the search.    
    * @return: True if 'elementX' comes after 'elementY', false otherwise.
    */      
    exposed.isAfter = (elementX, elementY, container = null) => {
        return !exposed.isBefore(elementX, elementY, container);
    }    
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

JavaScript || How To Get The Next & Previous Multiple Of A Number Using Vanilla JavaScript

August 08, 2020 admin No comments

The following is a module with functions that demonstrates how to get the next and previous multiple of a number using Vanilla JavaScript.

If a number is already a multiple, there is a parameter that allows you to specify if it should be rounded or not.

1. Get Next Multiple – Include Existing

The example below demonstrates how to round up a number to the next multiple. In this example, if a number is already a multiple, it will not be rounded up to the next multiple.





		
		
			1. Get Next - Include Existing
			
JavaScript
			
			// Get next multiple - include if already a multiple. 

<script>
(() => { 
    let multiple = 5;
    for (let index = 1; index <= 10; ++index) {
      console.log(index, '=>', Utils.getNextMultiple(index, multiple));
    }   
})();
</script>

// expected output:
/*
    1 => 5 
    2 => 5 
    3 => 5 
    4 => 5 
    5 => 5 
    6 => 10 
    7 => 10 
    8 => 10 
    9 => 10 
    10 => 10
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						// Get next multiple - include if already a multiple. 
 
<script>
(() => { 
    let multiple = 5;
    for (let index = 1; index <= 10; ++index) {
      console.log(index, '=>', Utils.getNextMultiple(index, multiple));
    }   
})();
</script>
 
// expected output:
/*
    1 => 5 
    2 => 5 
    3 => 5 
    4 => 5 
    5 => 5 
    6 => 10 
    7 => 10 
    8 => 10 
    9 => 10 
    10 => 10
*/

2. Get Next Multiple – Skip Existing

The example below demonstrates how to round up a number to the next multiple. In this example, if a number is already a multiple, it will be rounded up to the next multiple.





		
		
			2. Get Next - Skip Existing
			
JavaScript
			
			// Get next multiple - skip if already a multiple. 

<script>
(() => { 
    let multiple = 5;

    // Set 3rd parameter to true to skip numbers that are already a 
    // multiple to the next value
    for (let index = 1; index <= 10; ++index) {
      console.log(index, '=>', Utils.getNextMultiple(index, multiple, true));
    }    
})();
</script>

// expected output:
/*
    1 => 5 
    2 => 5 
    3 => 5  
    4 => 5 
    5 => 10  
    6 => 10  
    7 => 10  
    8 => 10  
    9 => 10  
    10 => 15
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
				
						// Get next multiple - skip if already a multiple. 
 
<script>
(() => { 
    let multiple = 5;
 
    // Set 3rd parameter to true to skip numbers that are already a 
    // multiple to the next value
    for (let index = 1; index <= 10; ++index) {
      console.log(index, '=>', Utils.getNextMultiple(index, multiple, true));
    }    
})();
</script>
 
// expected output:
/*
    1 => 5 
    2 => 5 
    3 => 5  
    4 => 5 
    5 => 10  
    6 => 10  
    7 => 10  
    8 => 10  
    9 => 10  
    10 => 15
*/

3. Get Previous Multiple – Include Existing

The example below demonstrates how to round down a number to the previous multiple. In this example, if a number is already a multiple, it will not be rounded down to the previous multiple.





		
		
			3. Get Previous - Include Existing
			
JavaScript
			
			// Get previous multiple - include if already a multiple. 

<script>
(() => { 
    let multiple = 5;
    for (let index = 10; index >= 1; --index) {
      console.log(index, '=>', Utils.getPreviousMultiple(index, multiple));
    }  
})();
</script>

// expected output:
/*
    10 => 10 
    9 => 5 
    8 => 5 
    7 => 5 
    6 => 5 
    5 => 5 
    4 => 0 
    3 => 0 
    2 => 0 
    1 => 0
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						// Get previous multiple - include if already a multiple. 
 
<script>
(() => { 
    let multiple = 5;
    for (let index = 10; index >= 1; --index) {
      console.log(index, '=>', Utils.getPreviousMultiple(index, multiple));
    }  
})();
</script>
 
// expected output:
/*
    10 => 10 
    9 => 5 
    8 => 5 
    7 => 5 
    6 => 5 
    5 => 5 
    4 => 0 
    3 => 0 
    2 => 0 
    1 => 0
*/

4. Get Previous Multiple – Skip Existing

The example below demonstrates how to round down a number to the previous multiple. In this example, if a number is already a multiple, it will be rounded down to the previous multiple.





		
		
			4. Get Previous - Skip Existing
			
JavaScript
			
			// Get previous multiple - skip if already a multiple. 

<script>
(() => { 
    let multiple = 5;

    // Set 3rd parameter to true to skip numbers that are already a 
    // multiple to the previous value
    for (let index = 10; index >= 1; --index) {
      console.log(index, '=>', Utils.getPreviousMultiple(index, multiple, true));
    } 
})();
</script>

// expected output:
/*
    10 => 5 
    9 => 5 
    8 => 5  
    7 => 5 
    6 => 5 
    5 => 0 
    4 => 0 
    3 => 0 
    2 => 0 
    1 => 0
*/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
				
						// Get previous multiple - skip if already a multiple. 
 
<script>
(() => { 
    let multiple = 5;
 
    // Set 3rd parameter to true to skip numbers that are already a 
    // multiple to the previous value
    for (let index = 10; index >= 1; --index) {
      console.log(index, '=>', Utils.getPreviousMultiple(index, multiple, true));
    } 
})();
</script>
 
// expected output:
/*
    10 => 5 
    9 => 5 
    8 => 5  
    7 => 5 
    6 => 5 
    5 => 0 
    4 => 0 
    3 => 0 
    2 => 0 
    1 => 0
*/

5. Utils Namespace

The following is the Utils.js Namespace. Include this in your project to start using!





		
		
			Utils.js Namespace
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 8, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: getNextMultiple
    * USE: Returns the next multiple of a given number. Unless specified,
    *   it will not round up numbers which are already multiples
    * @param number: The given number to find the next multiple
    * @param multiple: The multiple number
    * @param skipAlreadyMultiple: Boolean that specifies if input numbers which
    *   are already multiples should be skipped to the next multiple or not
    * @return: The next multiple of the given number
    */
    exposed.getNextMultiple = (number, multiple, skipAlreadyMultiple = false) => {
        let result = 0;
        if (multiple !== 0) {
            let remainder = (Math.abs(number) % multiple);
            if (!skipAlreadyMultiple && remainder === 0) {
                result = number;
            } else if (number < 0 && remainder !== 0) {
                result = -(Math.abs(number) - remainder);
            } else {
                result = number + (multiple - remainder);
            }
        }
        return result;
    }

    /**
    * FUNCTION: getPreviousMultiple
    * USE: Returns the previous multiple of a given number. Unless specified,
    *   it will not round down numbers which are already multiples
    * @param number: The given number to find the previous multiple
    * @param multiple: The multiple number
    * @param skipAlreadyMultiple: Boolean that specifies if input numbers which
    *   are already multiples should be skipped to the previous multiple or not.
    * @return: The previous multiple of the given number
    */
    exposed.getPreviousMultiple = (number, multiple, skipAlreadyMultiple = false) => {
        return exposed.getNextMultiple(number, multiple, !skipAlreadyMultiple) - multiple;
    }

    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Aug 8, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.js
//    Description: Javascript that handles general utility functions    
// ============================================================================
/**
* NAMESPACE: Utils
* USE: Handles general utility functions.
*/
var Utils = Utils || {};
(function(namespace) {
    'use strict';   
 
    // Property to hold public variables and functions
    let exposed = namespace;
    
    /**
    * FUNCTION: getNextMultiple
    * USE: Returns the next multiple of a given number. Unless specified,
    *   it will not round up numbers which are already multiples
    * @param number: The given number to find the next multiple
    * @param multiple: The multiple number
    * @param skipAlreadyMultiple: Boolean that specifies if input numbers which
    *   are already multiples should be skipped to the next multiple or not
    * @return: The next multiple of the given number
    */
    exposed.getNextMultiple = (number, multiple, skipAlreadyMultiple = false) => {
        let result = 0;
        if (multiple !== 0) {
            let remainder = (Math.abs(number) % multiple);
            if (!skipAlreadyMultiple && remainder === 0) {
                result = number;
            } else if (number < 0 && remainder !== 0) {
                result = -(Math.abs(number) - remainder);
            } else {
                result = number + (multiple - remainder);
            }
        }
        return result;
    }
 
    /**
    * FUNCTION: getPreviousMultiple
    * USE: Returns the previous multiple of a given number. Unless specified,
    *   it will not round down numbers which are already multiples
    * @param number: The given number to find the previous multiple
    * @param multiple: The multiple number
    * @param skipAlreadyMultiple: Boolean that specifies if input numbers which
    *   are already multiples should be skipped to the previous multiple or not.
    * @return: The previous multiple of the given number
    */
    exposed.getPreviousMultiple = (number, multiple, skipAlreadyMultiple = false) => {
        return exposed.getNextMultiple(number, multiple, !skipAlreadyMultiple) - multiple;
    }
 
    (function (factory) {
        if (typeof define === 'function' && define.amd) {
            define([], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory();
        }
    }(function() { return namespace; })); 
}(Utils)); // http://programmingnotes.org/

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Tag Archives: javascript

JavaScript/CSS/HTML || Notice.js – Simple Notification Message With Success, Warning & Error Icons Using Vanilla JavaScript

JavaScript || How To Get All Unique Values In An Array & Remove Duplicates Using Vanilla JavaScript

JavaScript || Circular Array – How To Index Into Array As If It Is Circular Using Vanilla JavaScript

JavaScript || How To Find All Combinations Of Well-Formed Brackets Using Vanilla JavaScript

JavaScript || How To Calculate Nth Catalan Number Using Vanilla JavaScript

JavaScript/CSS/HTML || Modal.js – Simple Modal Dialog Prompt Using Vanilla JavaScript

JavaScript || How To Get The Minimum & Maximum Values In A Simple & Object Array

JavaScript/CSS/HTML || Placeholder.js – Simple Animated Floating Label For Textbox, Dropdown & Textarea Using Vanilla JavaScript

JavaScript/CSS/HTML || Modal.js – Simple Modal Popup Panel Using Vanilla JavaScript

JavaScript || Movement.js – Move, Resize, Drag & Drop Elements With The Mouse, Mobile Touch & Keyboard Using Vanilla JavaScript

JavaScript || How To Make Change – Display The Total Sales Amount In Dollars & Cents Using Modulus

JavaScript || Swap Two HTML Element Locations In Dom Tree Using Vanilla JavaScript

JavaScript || Check If An Element Comes Before Or After Another Element In Dom Tree Using Vanilla JavaScript

JavaScript || How To Get The Next & Previous Multiple Of A Number Using Vanilla JavaScript

Search

Compile Your Code Now

Translate Page

Popular Pages

Recent

Archives

Categories