1.0.1

Fixed a spelling issue

Author: bfiessinger

dist/js/magicline.js

@@ -38,7 +38,7 @@ var magicLine = (function () {
       navElements: 'a',
       mode: 'line',
       lineStrength: 2,
-      lineClass: 'floating-line',
+      lineClass: 'magic-line',
       wrapper: 'div',
       animationCallback: null
     };
@@ -140,19 +140,19 @@ var magicLine = (function () {
 
     var onLoad = function onLoad() {
       Array.prototype.forEach.call(_this.elements, function (el) {
-        el.classList.add('init-floating-line', 'floating-line-mode-' + _this.settings.mode.toLowerCase()); // Build an Element Wrapper
+        el.classList.add('init-magic-line', 'magic-line-mode-' + _this.settings.mode.toLowerCase()); // Build an Element Wrapper
 
         var linkWrapper = document.createElement(_this.settings.wrapper);
-        linkWrapper.className = 'floating-line-inner'; // Create the Line Element
+        linkWrapper.className = 'magic-line-inner'; // Create the Line Element
 
-        var floatingLineEl = document.createElement('div');
-        floatingLineEl.className = _this.settings.lineClass;
+        var magicLineEl = document.createElement('div');
+        magicLineEl.className = _this.settings.lineClass;
 
         if (_this.settings.animationCallback === null) {
-          floatingLineEl.classList.add('floating-line-css-transition');
+          magicLineEl.classList.add('magic-line-css-transition');
         }
 
-        el.appendChild(floatingLineEl); // Wrap all Child Elements
+        el.appendChild(magicLineEl); // Wrap all Child Elements
 
         while (el.firstChild) {
           linkWrapper.appendChild(el.firstChild);
@@ -162,15 +162,15 @@ var magicLine = (function () {
         el.appendChild(linkWrapper);
         var initActive = getActiveElement(getNavElements(el)); // Draw
 
-        drawLine(floatingLineEl, initActive, true);
+        drawLine(magicLineEl, initActive, true);
       });
     };
 
     var BindEvents = function BindEvents() {
       Array.prototype.forEach.call(_this.elements, function (el) {
         var lineSelector = '.' + _this.settings.lineClass;
         var lineEl = el.querySelector(lineSelector);
-        var linkWrapper = el.querySelector('.floating-line-inner');
+        var linkWrapper = el.querySelector('.magic-line-inner');
         var links = getNavElements(linkWrapper);
         Array.prototype.forEach.call(links, function (link) {
           link.addEventListener('click', setActiveElement.bind(null, links));

dist/js/magicline.min.js

@@ -12,17 +12,17 @@
 
   <style type="text/css">
     /* Required styling */
-    .init-floating-line,
-    .floating-line-inner {
+    .init-magic-line,
+    .magic-line-inner {
       position: relative;
     }
 
-    .floating-line {
+    .magic-line {
       z-index: -1;
       position: absolute;
     }
 
-    .floating-line-css-transition {
+    .magic-line-css-transition {
       transition: all .2s ease-in-out;
     }
 
@@ -41,21 +41,21 @@
       margin: 0 auto;
     }
 
-    .floating-line-menu,
-    .floating-line-menu-pill,
-    .floating-line-inner,
-    .floating-line-inner ul {
+    .magic-line-menu,
+    .magic-line-menu-pill,
+    .magic-line-inner,
+    .magic-line-inner ul {
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
     }
 
-    .floating-line-inner ul {
+    .magic-line-inner ul {
       list-style: none;
     }
 
-    .floating-line-menu a,
-    .floating-line-menu-pill a {
+    .magic-line-menu a,
+    .magic-line-menu-pill a {
       font-weight: 700;
       color: #182848;
       cursor: pointer;
@@ -64,7 +64,7 @@
       display: block;
     }
 
-    .floating-line {
+    .magic-line {
       border-radius: 4px;
       background: #FFF;
       box-shadow: 0 0 10px rgba(90, 129, 177, 0.6);
@@ -77,14 +77,14 @@
 
   <div class="wrapper">
 
-    <nav class="floating-line-menu-pill">
+    <nav class="magic-line-menu-pill">
       <a>Menu</a>
       <a>Links</a>
       <a class="active">are</a>
       <a>awesome</a>
     </nav>
 
-    <nav class="floating-line-menu">
+    <nav class="magic-line-menu">
       <ul>
         <li>
           <a>There's</a>
@@ -96,7 +96,7 @@
           <a>an</a>
         </li>
         <li>
-          <a>undlerline</a>
+          <a>underline</a>
         </li>
         <li>
           <a>option</a>
@@ -112,7 +112,7 @@
   <script>
 
     var myMagicPill = new magicLine(
-      document.querySelectorAll('.floating-line-menu-pill'),
+      document.querySelectorAll('.magic-line-menu-pill'),
       {
         mode: 'pill',
         animationCallback: function (el, params) {
@@ -129,7 +129,7 @@
     myMagicPill.init();
 
     var myMagicLine = new magicLine(
-      document.querySelectorAll('.floating-line-menu'),
+      document.querySelectorAll('.magic-line-menu'),
       {
         mode: 'line',
         animationCallback: function (el, params) {

index.html

@@ -24,7 +24,7 @@ export default class magicLine {
       navElements: 'a',
       mode: 'line',
       lineStrength: 2,
-      lineClass: 'floating-line',
+      lineClass: 'magic-line',
       wrapper: 'div',
       animationCallback: null
     };
@@ -125,19 +125,19 @@ export default class magicLine {
 
       Array.prototype.forEach.call(this.elements, (el) => {
 
-        el.classList.add('init-floating-line', 'floating-line-mode-' + this.settings.mode.toLowerCase());
+        el.classList.add('init-magic-line', 'magic-line-mode-' + this.settings.mode.toLowerCase());
 
         // Build an Element Wrapper
         let linkWrapper = document.createElement(this.settings.wrapper);
-        linkWrapper.className = 'floating-line-inner';
+        linkWrapper.className = 'magic-line-inner';
 
         // Create the Line Element
-        let floatingLineEl = document.createElement('div');
-        floatingLineEl.className = this.settings.lineClass;
+        let magicLineEl = document.createElement('div');
+        magicLineEl.className = this.settings.lineClass;
         if (this.settings.animationCallback === null) {
-          floatingLineEl.classList.add('floating-line-css-transition');
+          magicLineEl.classList.add('magic-line-css-transition');
         }
-        el.appendChild(floatingLineEl);
+        el.appendChild(magicLineEl);
 
         // Wrap all Child Elements
         while (el.firstChild) {
@@ -150,7 +150,7 @@ export default class magicLine {
         let initActive = getActiveElement(getNavElements(el));
 
         // Draw
-        drawLine(floatingLineEl, initActive, true);
+        drawLine(magicLineEl, initActive, true);
 
       });
 
@@ -162,7 +162,7 @@ export default class magicLine {
 
         let lineSelector = '.' + this.settings.lineClass;
         let lineEl = el.querySelector(lineSelector);
-        let linkWrapper = el.querySelector('.floating-line-inner');
+        let linkWrapper = el.querySelector('.magic-line-inner');
         let links = getNavElements(linkWrapper);
 
         Array.prototype.forEach.call(links, (link) => {