Closes #40 - Adding the ChicChat theme family

README.md

@@ -1,6 +1,6 @@
 # jquery-notific8
 
-Notific8 is a notification plug-in inspired by the notifications introduced in Windows 8 with some web ready restyling and customizations. Notific8 has built in themes and is easy to create new themes for. The plug-in was born from a want for a simply designed yet modern and stylish notification system. The plug-in is also designed to scale based on the page's font-size setting (it was designed for the default of 100%/16px as the default).
+Notific8 is a notification plug-in that was originally inspired by the notifications introduced in Windows 8 with some web ready restyling and customizations. Notific8 has built in themes (colors) and theme families (styles) and is easy to create new theme and theme families for. The plug-in was born from a want for a simply designed yet modern and stylish notification system. The plug-in is also designed to scale based on the page's font-size setting (it was designed for the default of 100%/16px as the default).
 
 ## Install with Bower
 
@@ -51,9 +51,8 @@ Please view the [https://github.com/ralivue/jquery-notific8/wiki](wiki) for info
 
 ## Future development
 
-* Create new theme style with theme options
-    * Existing themes will be kept in a legacy SASS module included with the plug-in and new included themes will have different names for backwards compatibility
 * Add the ability to use a custom image instead of one of the built in icons
+* Add the ability to plug into a browser's notification API to use that instead of a notification generated by the plug-in
 
 ## License
 

demo/index.html

@@ -14,6 +14,9 @@
       font-weight: bold;
       text-align: right;
     }
+    #notific8Theme option {
+      display: none;
+    }
   </style>
 </head>
 
@@ -246,7 +249,8 @@ <h1>jQuery notific8 demo</h1>
         <td class="label"><label for="notific8Family">Theme Family</label></td>
         <td>
            <select name="notific8Family" id="notific8Family">
-            <option value="legacy" selected="">legacy (default)</option>
+            <option value="legacy" selected>legacy (default)</option>
+            <option value="chicchat">ChicChat</option>
           </select>
         </td>
       </tr>
@@ -256,14 +260,19 @@ <h1>jQuery notific8 demo</h1>
         </td>
         <td>
           <select name="notific8Theme" id="notific8Theme">
-            <option value="teal" selected="selected">teal (default)</option>
-            <option value="amethyst">amethyst</option>
-            <option value="ruby">ruby</option>
-            <option value="tangerine">tangerine</option>
-            <option value="lemon">lemon</option>
-            <option value="lime">lime</option>
-            <option value="ebony">ebony</option>
-            <option value="smoke">smoke</option>
+            <option value="teal" data-for="legacy" data-selected>teal</option>
+            <option value="amethyst" data-for="legacy">amethyst</option>
+            <option value="ruby" data-for="legacy">ruby</option>
+            <option value="tangerine" data-for="legacy">tangerine</option>
+            <option value="lemon" data-for="legacy">lemon</option>
+            <option value="lime" data-for="legacy">lime</option>
+            <option value="ebony" data-for="legacy">ebony</option>
+            <option value="smoke" data-for="legacy">smoke</option>
+
+            <option value="cobalt" data-for="chicchat" data-selected>cobalt</option>
+            <option value="ruby" data-for="chicchat">ruby</option>
+            <option value="honey" data-for="chicchat">honey</option>
+            <option value="shamrock" data-for="chicchat">shamrock</option>
           </select>
         </td>
       </tr>
@@ -294,6 +303,19 @@ <h1>jQuery notific8 demo</h1>
   <script src="../dist/jquery.notific8.min.js"></script>
   <script type="text/javascript">
     $(function () {
+      $('#notific8Family').on(
+        'change',
+        function(event) {
+          $family = $(event.currentTarget);
+          family = $family.val()
+          $theme = $('#notific8Theme')
+          $theme.find('option:selected').prop('selected', false);
+          $theme.find('option').hide();
+          $theme.find('option[data-for="' + family + '"]').show()
+          $theme.find('option[data-for="' + family + '"][data-selected]').prop('selected', true)
+        }
+      )
+
       $('#notific8Test').on('click', function (event) {
         var params = {
             life: $('#notific8Life').find('option:selected').val(),
@@ -346,6 +368,8 @@ <h1>jQuery notific8 demo</h1>
         // show notification
         $.notific8(text, params);
       });
+
+      $('#notific8Family').trigger('change');
     });
   </script>
 </body>