Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Making the names of the css classes to be used configureable #26

Merged
merged 1 commit into from

3 participants

@cburgdorf

It would be great if one could use custom names for the classes.

Use case:

  • you might already have a scrollable class that matches the definition of the overthrow class and you don't want to change your code or add another class with the same definition but different name

  • you have specific conventions for your class names.

  • you are a pedantic moron like me

@cburgdorf

I also added tests

@scottjehl
Owner

Hey this is nice! I'll need some time to look it over - we're pretty slammed. Consider it tentatively approved. thanks for sending :)

@Wilto
Owner

You had me at “I also added tests.”

@cburgdorf

Thanks for the positive feedback. Let me know if it needs further tweaking (e.g. the variable names could be better maybe)

@scottjehl scottjehl merged commit d73c2aa into filamentgroup:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 21, 2013
  1. @cburgdorf
This page is out of date. Refresh to see the latest.
Showing with 31 additions and 6 deletions.
  1. +13 −5 overthrow.js
  2. +18 −1 test/tests.js
View
18 overthrow.js
@@ -3,8 +3,9 @@
var doc = w.document,
docElem = doc.documentElement,
- classtext = "overthrow-enabled",
-
+ enabledClassName = "overthrow-enabled",
+ scrollIndicatorClassName = "overthrow",
+
// Touch events are used in the polyfill, and thus are a prerequisite
canBeFilledWithPoly = "ontouchmove" in doc,
@@ -61,6 +62,12 @@
// Keeper of intervals
timeKeeper,
+
+ //can be used to configure custom names for the css classes
+ configure = function(config){
+ enabledClassName = config.enabledClassName || enabledClassName;
+ scrollIndicatorClassName = config.scrollIndicatorClassName || scrollIndicatorClassName;
+ },
/* toss scrolls and element with easing
@@ -135,7 +142,7 @@
// find closest overthrow (elem or a parent)
closest = function( target, ascend ){
- return !ascend && target.className && target.className.indexOf( "overthrow" ) > -1 && target || closest( target.parentNode );
+ return !ascend && target.className && target.className.indexOf( scrollIndicatorClassName ) > -1 && target || closest( target.parentNode );
},
// Intercept any throw in progress
@@ -155,13 +162,13 @@
// If overflowProbablyAlreadyWorks or at least the element canBeFilledWithPoly, add a class to cue CSS that assumes overflow scrolling will work (setting height on elements and such)
if( overflowProbablyAlreadyWorks || canBeFilledWithPoly ){
- docElem.className += " " + classtext;
+ docElem.className += " " + enabledClassName;
}
// Destroy everything later. If you want to.
w.overthrow.forget = function(){
// Strip the class name from docElem
- docElem.className = docElem.className.replace( classtext, "" );
+ docElem.className = docElem.className.replace( enabledClassName, "" );
// Remove touch binding (check for method support since this part isn't qualified by touch support like the rest)
if( doc.removeEventListener ){
doc.removeEventListener( "touchstart", start, false );
@@ -351,6 +358,7 @@
// Expose overthrow API
w.overthrow = {
+ configure: configure,
set: enable,
forget: function(){},
easing: defaultEasing,
View
19 test/tests.js
@@ -88,6 +88,22 @@ window.onload = function(){
ok( document.documentElement.className.indexOf( "overthrow-enabled" ) === -1 );
}
});
+
+ test( 'overthrow.set adds HTML class with custom name', function() {
+ overthrow.forget();
+ overthrow.configure({enabledClassName: "prefixed-overthrow-enabled"});
+ overthrow.set();
+ ok( document.documentElement.className.indexOf( "prefixed-overthrow-enabled" ) > -1 );
+ });
+
+ test( 'overthrow.forget destroys HTML class with custom name', function() {
+ overthrow.forget();
+ ok( document.documentElement.className.indexOf( "prefixed-overthrow-enabled" ) === -1 );
+
+ //since the following tests assume the class name to be the default, we set it back
+ overthrow.configure({enabledClassName: "overthrow-enabled"});
+ overthrow.set();
+ });
test( 'overthrow.forget destroys HTML class', function() {
overthrow.forget();
@@ -100,7 +116,8 @@ window.onload = function(){
overthrow.set();
ok( document.documentElement.className.indexOf( "overthrow-enabled" ) > -1 );
});
-
+
+
test( 'When set in an overthrow-supporting browser, the test element height is less than scrollHeight', function() {
if(overthrow.support === "native" || overthrow.support === "polyfilled" ){
ok( testElem.offsetHeight < testElem.scrollHeight );
Something went wrong with that request. Please try again.