rename to twentytwenty

zurb · Jun 11, 2013 · 46b5a99 · 46b5a99
1 parent bcdf931
commit 46b5a99
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 27 deletions.
diff --git a/config.rb b/config.rb
@@ -10,12 +10,13 @@
 
 # You can select your preferred output style here (can be overridden via the command line):
 # output_style = :expanded or :nested or :compact or :compressed
+output_style = :nested
 
 # To enable relative paths to assets via compass helper functions. Uncomment:
 # relative_assets = true
 
 # To disable debugging comments that display the original location of your selectors. Uncomment:
-# line_comments = false
+line_comments = false
 
 
 # If you prefer the indented syntax, you might want to regenerate this

diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>compareit</title>
+  <title>twentytwenty</title>
   <link href="css/styles.css" rel="stylesheet" type="text/css" />
 </head>
   <body>
@@ -19,7 +19,7 @@ <h3>Basic Usage</h3>
         <p>Demonstrates basic usage of the plugin.</p>
       </div>
       <div class="large-8 columns">
-        <div class="compareit-container">
+        <div class="twentytwenty-container">
           <img src="img/1_1.jpg" />
           <img src="img/1_2.jpg" />
         </div>
@@ -32,13 +32,13 @@ <h3>Side by side</h3>
         <p>Using multiple comparisons at once.</p>
       </div>
       <div class="large-4 columns">
-        <div class="compareit-container">
+        <div class="twentytwenty-container">
           <img src="img/2_1.jpg" />
           <img src="img/2_2.jpg" />
         </div>
       </div>
       <div class="large-4 columns">
-        <div class="compareit-container">
+        <div class="twentytwenty-container">
           <img src="img/3_1.jpg" />
           <img src="img/3_2.jpg" />
         </div>
@@ -47,10 +47,10 @@ <h3>Side by side</h3>
 
     <script src="components/jquery/jquery.min.js"></script>
     <script src="js/jquery.event.move.js"></script>
-    <script src="js/jquery.compareit.js"></script>
+    <script src="js/jquery.twentytwenty.js"></script>
     <script>
     $(window).load(function(){
-      $(".compareit-container").compareit();  
+      $(".twentytwenty-container").twentytwenty();  
     });
     </script>
   </body>

diff --git a/js/jquery.compareit.js → js/jquery.twentytwenty.js b/js/jquery.compareit.js → js/jquery.twentytwenty.js
@@ -1,20 +1,20 @@
 (function($){
 
-  $.fn.compareit = function(options) {
+  $.fn.twentytwenty = function(options) {
     return this.each(function() {
 
       var sliderPct = 0.5;
       var container = $(this);
-      container.wrap("<div class='compareit-wrapper'></div>");
+      container.wrap("<div class='twentytwenty-wrapper'></div>");
       var beforeImg = container.find("img:first");
       var afterImg = container.find("img:last");
-      container.append("<div class='compareit-slider-bar'></div>");
-      var slider = container.find(".compareit-slider-bar");
-      slider.append("<div class='compareit-handle'></div>");
-      var handle = slider.find(".compareit-handle");
-      container.addClass("compareit-container");
-      beforeImg.addClass("compareit-before");
-      afterImg.addClass("compareit-after");
+      container.append("<div class='twentytwenty-slider-bar'></div>");
+      var slider = container.find(".twentytwenty-slider-bar");
+      slider.append("<div class='twentytwenty-handle'></div>");
+      var handle = slider.find(".twentytwenty-handle");
+      container.addClass("twentytwenty-container");
+      beforeImg.addClass("twentytwenty-before");
+      afterImg.addClass("twentytwenty-after");
 
 
       var calcOffset = function(widthPct) {
@@ -39,7 +39,7 @@
         adjustContainer(offset);
       }
 
-      $(window).on("resize.compareit", function(e) {
+      $(window).on("resize.twentytwenty", function(e) {
         adjustSlider(sliderPct);
       });
 
@@ -74,7 +74,7 @@
         event.preventDefault();
       });
 
-      $(window).trigger("resize.compareit");
+      $(window).trigger("resize.twentytwenty");
     });
   };
 

diff --git a/scss/styles.scss b/scss/styles.scss
@@ -2,12 +2,9 @@
 @import "foundation/components/global";
 @import "foundation/components/grid";
 
-.compareit-wrapper {
-  border: 1px solid #ccc;
-  margin: 10px 0;
-}
+$pluginPrefix: "twentytwenty";
 
-.compareit-container {
+.#{$pluginPrefix}-container {
   position: relative;
   -webkit-user-select: none; 
   -moz-user-select:none;
@@ -16,15 +13,15 @@
     top:0; 
     display:block;
   }
-  .compareit-before {z-index:20;}
-  .compareit-after {z-index:10;}
-  .compareit-slider-bar {
+  .#{$pluginPrefix}-before {z-index:20;}
+  .#{$pluginPrefix}-after {z-index:10;}
+  .#{$pluginPrefix}-slider-bar {
     z-index:40; 
     position:absolute; 
     width: 44px; 
     margin-left: -22px;
     background: inline-image("divider.png") top center no-repeat;
-    .compareit-handle {
+    .#{$pluginPrefix}-handle {
       background: inline-image("handle.png") no-repeat;
       width: 45px;
       height: 45px;