Automation

.gitignore

@@ -0,0 +1,14 @@
+# Node.js dependencies
+node_modules/
+
+# npm log files
+npm-debug.log*
+
+# Husky lock files
+.husky/_/husky.sh
+
+## Compiled JS files, minified files, and build outputs
+#dist/
+
+# Logs and temporary files
+*.log

.husky/pre-commit

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# Run the custom version bump script if necessary
+node scripts/update-version.js
+
+# Then run lint-staged
+npx lint-staged

.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "indentation": 2,  // Enforce 2 spaces indentation for CSS files
+    "no-duplicate-selectors": true,  // Prevent duplicate selectors
+    "color-no-invalid-hex": true     // Ensure only valid hex colors are used
+  }
+}

demos/index.html

@@ -284,7 +284,34 @@ <h2 id="toasts-stack"><span class="muted">6.</span> Setting the toast stack</h2>
 
         <p><strong>Note</strong> Hit the run button multiple times to test these demos.</p>
 
-        <h2 id="toasts-positioning"><span class="muted">7.</span> Positioning the toast</h2>
+        <h2 id="toasts-positioning"><span class="muted">7.</span> Direction of the toast</h2>
+        <p><span class="code">direction</span> property can be used to specify the direction of content. There are following predefined direction which you can use:</p>
+        <ul>
+            <li><span class="code">ltr</span> The content of the box will render from Left to Right</li>
+            <li><span class="code">rtl</span> The content of the box will render from Left to Right</li>
+        </ul>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+            <pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Direction',
+    text: 'این متن از چپ به راست نوشته شده است. This text is written from left to right.',
+    direction: 'ltr',
+    stack: false
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+            <pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Direction',
+    text: 'این متن از راست به چپ نوشته شده است. This text is written from right to left.',
+    direction: 'rtl',
+    stack: false
+})</code></pre>
+        </div>
+
+        <h2 id="toasts-direction"><span class="muted">8.</span> Positioning the toast</h2>
         <p><span class="code">position</span> property can be used to specify the position. There are following predefined positions which you can use:</p>
         <ul>
             <li><span class="code">bottom-left</span> value to show the toast at bottom left position</li>
@@ -387,7 +414,7 @@ <h2 id="toasts-positioning"><span class="muted">7.</span> Positioning the toast<
 <pre><code>$.toast().reset('all');</code></pre>
         </div>
 
-        <h2 id="toasts-icons"><span class="muted">8.</span> Messages with icons</h2>
+        <h2 id="toasts-icons"><span class="muted">9.</span> Messages with icons</h2>
         <p><span class="code">icon</span> property can be used to specify the predefined types of toasts. Following are the predefined types:</p>
         <ul>
             <li><span class="code">info</span> generates a toast with information icon</li>
@@ -432,7 +459,7 @@ <h2 id="toasts-icons"><span class="muted">8.</span> Messages with icons</h2>
 })</code></pre>
         </div>
 
-        <h2 id="toasts-bg-color"><span class="muted">9.</span> Background &amp; text color</h2>
+        <h2 id="toasts-bg-color"><span class="muted">10.</span> Background &amp; text color</h2>
         <p><span class="code">bgColor</span> property is used to specify the background color of the toast message. Default is '#444'</p>
         <p><span class="code">textColor</span> property is used to specify the text color of the toast message. Default is '#eee'</p>
 
@@ -446,7 +473,7 @@ <h2 id="toasts-bg-color"><span class="muted">9.</span> Background &amp; text col
 })</code></pre>
         </div>
 
-        <h2 id="toasts-text-alignment"><span class="muted">10.</span> Setting the text alignment</h2>
+        <h2 id="toasts-text-alignment"><span class="muted">11.</span> Setting the text alignment</h2>
         <p><span class="code">textAlign</span> property is used to set the alignment of text inside the toast. Permitted values are:</p>
         <ul>
             <li><span class="code">left</span></li>
@@ -462,7 +489,7 @@ <h2 id="toasts-text-alignment"><span class="muted">10.</span> Setting the text a
 })</code></pre>
         </div>
 
-        <h2 id="toasts-class"><span class="muted">9.</span> Custom Classes </h2>
+        <h2 id="toasts-class"><span class="muted">12.</span> Custom Classes </h2>
         <p><span class="code">class</span> property is used to add custom classes to the toast element</p>
         <style type="text/css">
             .larger-font {
@@ -479,7 +506,7 @@ <h2 id="toasts-class"><span class="muted">9.</span> Custom Classes </h2>
 })</code></pre>
         </div>
 
-        <h2 id="toasts-events"><span class="muted">11.</span> Toast Events</h2>
+        <h2 id="toasts-events"><span class="muted">13.</span> Toast Events</h2>
         <p>Toast exposes the following events for you to bind to whatever you want</p>
         <ul>
             <li><span class="code">beforeShow</span> will be triggered right before the toast is about to appear</li>
@@ -511,7 +538,7 @@ <h2 id="toasts-events"><span class="muted">11.</span> Toast Events</h2>
 })</code></pre>
         </div>
 
-        <h2 id="updating-toasts"><span class="muted">12.</span> Updating Toasts</h2>
+        <h2 id="updating-toasts"><span class="muted">14.</span> Updating Toasts</h2>
         <p>If you have a reference to a toast and want to update that, you can do so by calling the <span class="code">update</span> method on the instance.</p>
 
         <div class="code-runner">
@@ -537,7 +564,7 @@ <h2 id="updating-toasts"><span class="muted">12.</span> Updating Toasts</h2>
 </code></pre>
         </div>
 
-        <h2 id="resetting-toasts"><span class="muted">13.</span> Resetting Toasts</h2>
+        <h2 id="resetting-toasts"><span class="muted">15.</span> Resetting Toasts</h2>
         <p>If you have the reference to a specific toast, you can reset that by doing the following</p>
 
         <div class="code-runner">
@@ -567,6 +594,13 @@ <h1 id="toast-generator">Customize Plugin</h1>
             <label for="toast-heading">Heading</label>
             <input type="text" id="toast-heading" class="toast-heading" value="Note">
           </p>
+          <p>
+            <label for="toast-direction">Direction</label>
+            <select name="toast-direction" id="toast-direction" class="toast-direction">
+              <option value="ltr">Left to Right</option>
+              <option value="rtl">Right to Left</option>
+            </select>
+          </p>
           <p>
             <label for="toast-transition">Transition</label>
             <select name="toast-transition" id="toast-transition" class="toast-transition">
@@ -705,6 +739,7 @@ <h1 id="toast-generator">Customize Plugin</h1>
     <span class="toast-text-line"><span class="k">text</span>: "<span class="toast-text s">Hey there fellas, here is a simple toast. Change the options above and then see the code that generates that toast</span>", <span class="c">// Text that is to be shown in the toast</span></span>
     <span class="toast-heading-line"><span class="k">heading</span>: '<span class="toast-heading s">How to use</span>', <span class="c">// Optional heading to be shown on the toast</span></span>
     <span class="toast-icon-line"><span class="k">icon</span>: '<span class="toast-icon s">warning</span>', <span class="c">// Type of toast icon</span></span>
+    <span class="toast-direction-line"><span class="k">direction</span>: '<span class="toast-direction s">ltr</span>', <span class="c">// ltr or rtl: `ltr` for Left to Right and `rtl` for Right to Left</span></span>
     <span class="toast-transition-line"><span class="k">showHideTransition</span>: '<span class="toast-transition s">fade</span>', <span class="c">// fade, slide or plain</span></span>
     <span class="toast-allowToastClose-line"><span class="k">allowToastClose</span>: <spna class="kt toast-allowToastClose">true</spna>, <span class="c">// Boolean value <span class="kt">true</span> or <span class="kt">false</span></span></span>
     <span class="toast-hideAfter-line"><span class="k">hideAfter</span>: <span class="n toast-hideAfter">3000</span>, <span class="c">// <span class="kt">false</span> to make it sticky or number representing the miliseconds as time after which toast needs to be hidden</span></span>
@@ -765,6 +800,7 @@ <h1 id="toast-generator">Customize Plugin</h1>
                 function generateCode () {
                     var text = $('.plugin-options #toast-text').val(); 
                     var heading = $('.plugin-options #toast-heading').val(); 
+                    var direction = $('.toast-direction').val(); 
                     var transition = $('.toast-transition').val(); 
                     var allowToastClose = $('#allow-toast-close').val(); 
                     var autoHide = $('#auto-hide-toast').val(); 
@@ -794,6 +830,14 @@ <h1 id="toast-generator">Customize Plugin</h1>
                         $('.toast-heading-line .toast-heading').text(''); 
                     }; 
 
+                    if ( transition ) {
+                        $('.toast-direction-line').show() 
+                        $('.toast-direction-line .toast-direction').text( direction ); 
+                    } else {
+                        $('.toast-direction-line').hide(); 
+                        $('.toast-direction-line .toast-direction').text('ltr'); 
+                    } 
+
                     if ( transition ) {
                         $('.toast-transition-line').show() 
                         $('.toast-transition-line .toast-transition').text( transition ); 
@@ -929,6 +973,10 @@ <h1 id="toast-generator">Customize Plugin</h1>
                         options.heading = $('.toast-heading').text(); 
                     }; 
 
+                    if ( $('.toast-direction-line').is(':visible') ) {
+                        options.direction = $('.toast-direction-line .toast-direction').text(); 
+                    }; 
+
                     if ( $('.toast-transition-line').is(':visible') ) {
                         options.showHideTransition = $('.toast-transition-line .toast-transition').text(); 
                     };