Add onFlake setting, use array for character setting, prettier

joshmcrty · Dec 30, 2023 · 0eb80ec · 0eb80ec
1 parent 688e74e
commit 0eb80ec
Show file tree

Hide file tree

Showing 5 changed files with 296 additions and 158 deletions.
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ $("body").flurry("destroy");
 
 ## Options
 
-`character` (string) determines the character or html entity to be replicated as a snowflake. Default is `"❄"`. If you set this to a string of several unicode characters Flurry will randomize which flakes use each character (e.g. `"❄❅❆"`).
+`character` (array) determines the character or html entity to be replicated as a snowflake. Default is `["❄"]`. If you set this to an array of several unicode character or emoji strings Flurry will randomize which flakes use each character (e.g. `["❄","❅","❆"]`). Even if using a single character, it is best to provide an array instead of a string due to the way JavaScript handles certain emoji characters.
 
 `color` (string or array) determines the color of the snowflake. Default is `"white"`. You may use any valid [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). If you set this to an array of colors Flurry will randomly use one of the colors for each flake (e.g. `["white", "silver"]`).
 
@@ -82,6 +82,8 @@ $("body").flurry("destroy");
 
 `zIndex` (number) sets the `z-index` CSS property for the snowflakes. Default is `9999`.
 
+`onFlake` (function) allows you to execute a function when each snowflake element is created. `this` within the `onFlake()` function is set to the snowflake element; see demo page for an example that uses a FontAwesome shape for each flake.
+
 `onInit` (function) allows you to execute a function when a Flurry instance is initialized. `this` within the `onInit()` function is set to the flurry element (e.g. `<body>` by default).
 
 `onDestroy` (function) allows you to execute a function when a Flurry instance is destroyed. `this` within the `onDestroy()` function is set to the flurry element (e.g. `<body>` by default).

diff --git a/flurry.jquery.json b/flurry.jquery.json
@@ -3,7 +3,7 @@
   "title": "jQuery Flurry",
   "description": "Flurry is an easy-to-use animated snow plugin for jQuery inspired by jSnow.",
   "keywords": ["snow", "animation"],
-  "version": "1.0.2",
+  "version": "1.2.0",
   "author": {
     "name": "Josh McCarty",
     "email": "[email protected]",

diff --git a/index.html b/index.html
@@ -1,10 +1,11 @@
+<!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Flurry Example</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
-      body{
+      body {
         background: #443344;
         color: white;
         font-family: sans-serif;
@@ -13,64 +14,60 @@
         margin: 0 auto;
         max-width: 80%;
       }
+      pre {
+        background-color: rgba(0, 0, 0, 0.2);
+        padding: 10px;
+        white-space: pre-wrap;
+        max-width: 100%;
+      }
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="jquery.flurry.js"></script>
     <script>
-      $( document ).ready( function() {
-
+      $(document).ready(function () {
         // Snow toggle
-        $('.toggle-snow').on('click', function(event) {
-
+        $(".toggle-snow").on("click", function (event) {
           event.preventDefault();
 
           try {
-            $('body').flurry('destroy');
-          }
-          catch(err) {
-          }
-          finally {
-            $('body').flurry();
+            $("body").flurry("destroy");
+          } catch (err) {
+          } finally {
+            $("body").flurry();
           }
         });
-
-        // Custom snow toggle
-        $('.toggle-custom-snow').on('click', function(event) {
 
+        // Custom snow toggle
+        $(".toggle-custom-snow").on("click", function (event) {
           event.preventDefault();
 
           try {
-            $('body').flurry('destroy');
-          }
-          catch(err) {
-          }
-          finally {
-            $('body').flurry({
-              character: '❄❅❆*⛄☃',
+            $("body").flurry("destroy");
+          } catch (err) {
+          } finally {
+            $("body").flurry({
+              character: ["❄", "❅", "❆", "*", "⛄", "🥶", "🎄", "🎅"],
               height: 240,
               speed: 1400,
               wind: 200,
               windVariance: 220,
               frequency: 10,
               large: 40,
-              small: 4
+              small: 4,
             });
           }
         });
-
-        // Confetti toggle
-        $('.toggle-confetti').on('click', function(event) {
 
+        // Confetti toggle
+        $(".toggle-confetti").on("click", function (event) {
           event.preventDefault();
 
           try {
-            $('body').flurry('destroy');
-          }
-          catch(err) {
-          }
-          finally {
-            $('body').flurry({
-              character: "~",
+            $("body").flurry("destroy");
+          } catch (err) {
+          } finally {
+            $("body").flurry({
+              character: ["~"],
               color: ["#55476A", "#AE3D63", "#DB3853", "#F45C44", "#F8B646"],
               speed: 2000,
               height: 480,
@@ -82,7 +79,31 @@
               startRotation: 90,
               wind: 10,
               windVariance: 100,
-              opacityEasing: "cubic-bezier(1,0,.96,.9)"
+              opacityEasing: "cubic-bezier(1,0,.96,.9)",
+            });
+          }
+        });
+
+        // Custom flake toggle
+        $(".toggle-custom-flake").on("click", function (event) {
+          event.preventDefault();
+
+          try {
+            $("body").flurry("destroy");
+          } catch (err) {
+          } finally {
+            // Load Font Awesome CSS
+            $("head").append(
+              '<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />'
+            );
+
+            // Flurry
+            $("body").flurry({
+              character: [""],
+              height: 640,
+              onFlake: function () {
+                $(this).html("<i class='fa-regular fa-sun'></i>");
+              },
             });
           }
         });
@@ -93,20 +114,35 @@
     <main>
       <h1>Flurry Example</h1>
       <p>Click the buttons below to see examples of Flurry in action.</p>
-      <p><button class="toggle-snow">Toggle Snow</button> This uses the default options.</p>
-      <p><button class="toggle-custom-snow">Toggle Custom Snow</button> This uses custom options for a more intense snow effect (with snowmen!):</p>
-      <pre>$('body').flurry({
-  character: '❄❅❆*⛄☃',
+      <hr />
+      <p>
+        <button class="toggle-snow">Toggle Snow</button> This uses the default
+        options.
+      </p>
+      <hr />
+      <p>
+        <button class="toggle-custom-snow">Toggle Custom Snow</button> This uses
+        custom options for a more intense snow effect (with snowmen!):
+      </p>
+      <pre>
+$('body').flurry({
+  character: ["❄", "❅", "❆", "*", "⛄", "🥶", "🎄", "🎅"],
   height: 240,
   speed: 1400,
   wind: 200,
   windVariance: 220,
   frequency: 10,
   large: 40,
   small: 4
-});</pre>
-      <p><button class="toggle-confetti">Toggle Confetti</button> This uses custom options to create a "confetti" effect:</p>
-      <pre>$('body').flurry({
+});</pre
+      >
+      <hr />
+      <p>
+        <button class="toggle-confetti">Toggle Confetti</button> This uses
+        custom options to create a "confetti" effect:
+      </p>
+      <pre>
+$('body').flurry({
   character: "~",
   color: ["#55476A", "#AE3D63", "#DB3853", "#F45C44", "#F8B646"],
   speed: 2000,
@@ -120,7 +156,27 @@ <h1>Flurry Example</h1>
   wind: 10,
   windVariance: 100,
   opacityEasing: "cubic-bezier(1,0,.96,.9)"
-});</pre>
+});</pre
+      >
+      <hr />
+      <p>
+        <button class="toggle-custom-flake">Toggle Custom Flakes</button> This
+        uses custom options to create custom &ldquo;snowflakes&rdquo; with Font
+        Awesome:
+      </p>
+      <pre>
+// Load Font Awesome from CDN dynamically; probably not needed if you are already using it for other icons on your page
+$('head').append('&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /&gt;');
+
+// Flurry
+$('body').flurry({
+  character: "",
+  height: 640,
+  onFlake: function () {
+    $(this).html("&lt;i class='fa-regular fa-sun'&gt;&lt;/i&gt;");
+  },
+});</pre
+      >
     </main>
   </body>
 </html>