From 46b5a99de8df526c7fdc10b8ad5189281e96be1b Mon Sep 17 00:00:00 2001 From: Mark Hayes Date: Tue, 11 Jun 2013 16:33:00 -0700 Subject: [PATCH] rename to twentytwenty --- config.rb | 3 ++- index.html | 12 +++++----- ...ry.compareit.js => jquery.twentytwenty.js} | 22 +++++++++---------- scss/styles.scss | 15 +++++-------- 4 files changed, 25 insertions(+), 27 deletions(-) rename js/{jquery.compareit.js => jquery.twentytwenty.js} (74%) diff --git a/config.rb b/config.rb index e5ed07f..d357b7f 100644 --- 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 index 86e1179..92c0df8 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - compareit + twentytwenty @@ -19,7 +19,7 @@

Basic Usage

Demonstrates basic usage of the plugin.

-
+
@@ -32,13 +32,13 @@

Side by side

Using multiple comparisons at once.

-
+
-
+
@@ -47,10 +47,10 @@

Side by side

- + diff --git a/js/jquery.compareit.js b/js/jquery.twentytwenty.js similarity index 74% rename from js/jquery.compareit.js rename to js/jquery.twentytwenty.js index 7a4e26e..635710d 100644 --- a/js/jquery.compareit.js +++ b/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("
"); + container.wrap("
"); var beforeImg = container.find("img:first"); var afterImg = container.find("img:last"); - container.append("
"); - var slider = container.find(".compareit-slider-bar"); - slider.append("
"); - var handle = slider.find(".compareit-handle"); - container.addClass("compareit-container"); - beforeImg.addClass("compareit-before"); - afterImg.addClass("compareit-after"); + container.append("
"); + var slider = container.find(".twentytwenty-slider-bar"); + slider.append("
"); + 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 index a9e4537..9dd64ae 100644 --- 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;