diff --git a/assets/css/index.css b/assets/css/index.css index 8e1b07f..d6aface 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -3186,6 +3186,10 @@ h4 { text-align: center; } +.homepage { + background: #E63B34; +} + .homepage ::selection { background: none; } @@ -3219,7 +3223,7 @@ h4 { line-height: normal; padding: 0.7em 0; margin-bottom: 25px; - color: #333; + color: #fff; } @media only screen and (min-width: 36.063em) { diff --git a/assets/css/index.scss b/assets/css/index.scss index ae2954b..6630740 100644 --- a/assets/css/index.scss +++ b/assets/css/index.scss @@ -75,9 +75,7 @@ h4 { color: #000; text-transform: uppercase; font-size: 1em; margin-bottom: 5px; text-align: right; font-size: 85%; } -.footer { - background: $red; -} + .header { background: $red; color: #fff; @@ -158,6 +156,7 @@ h4 { color: #000; text-transform: uppercase; font-size: 1em; margin-bottom: 5px; } .homepage { + background: $red; ::selection { background: none; @@ -191,7 +190,7 @@ h4 { color: #000; text-transform: uppercase; font-size: 1em; margin-bottom: 5px; line-height: normal; padding: .7em 0; margin-bottom: 25px; - color: #333; + color: #fff; } @media #{$medium-up} { @@ -210,208 +209,8 @@ h4 { color: #000; text-transform: uppercase; font-size: 1em; margin-bottom: 5px; @import "demo"; } -.callout.large.primary { - padding: 3em; - background: #f8f8f8; - margin-top: 4em; - margin-bottom: 4em; -} .small-text { font-size: 12px; line-height: 16px; } - -.demo-box { - width: 300px; - height: 200px; - overflow: hidden; - position: relative; -} - -.demo-box>img { - height: 400px; - width: 1900px; - position: absolute; - margin-left: -950px; - display: none; - pointer-events: none; - margin-top: -220px; - left: 50%; - top: 50%; - max-width: none; -} - -.demo-box-wrap h2, -.target-wrap h2 { - pointer-events: none; - color: white; -} - -.demo-box-wrap, .target-wrap { - border: 1px solid #333; - font-family: sans-serif; - background: #333; - text-align: center; - color: white; - width: 302px; - height: 245px; - margin-left: auto; - margin-right: auto; - margin-bottom: 3em; -} - -.target-wrap { - width: 315px; - height: auto; -} - -.target { - background: white; - padding: 1em; - color: #333; -} - -.demo-box img.active { - display: block; -} - -.page-num .active { - color: red; -} - -.demo-box .page-num { - position: absolute; - bottom: 5px; - left: 50%; - margin-left: -20px; - color: white; - z-index: 999; - background: rgba( 170, 170, 170, .5 ); - padding: 3px; - border-radius: 5px; - border: 1px solid black; - pointer-events: none; -} - -.demo-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba( 70, 70, 70, .8 ); - display: none; -} - -.demo-overlay img { - width: 50px; - height: 50px; - position: absolute; - top: 50%; - left: 50%; - margin-left: -25px; - margin-top: -25px; -} - -.row-try-it { - max-width: none; -} - -.target { - background: white; -} - -.hit-target { - width: 96%; - margin: auto; - height: 75px; - background: $red; - color: white; - text-align: center; - margin-top: 1em; -} -.hit-target:after { - position: relative; - top: calc( 37px - .5em ); - content: "Target"; -} -.click-gauge { - -webkit-appearance: none; - height: 2em; - width: 100%; - border-radius: 2px -} -.click-gauge[value]::-webkit-progress-bar { - box-shadow: inset - -3px -3px 3px #ccc, - inset 3px 3px 3px #ccc; - background-color: #fff; - border-radius: 2px; - overflow: hidden; -} -.click-gauge[value]::-webkit-progress-value { - box-shadow: - 2px .5px 1px #333, - inset 2px 2px 7px darkgreen, - inset -2px -2px 7px darkgreen; - border-radius: 2px 0 0 2px; - position: relative; -} -.click-gauge.warning[value]::-webkit-progress-value { - background: orange; - box-shadow: - 2px .5px 1px #333, - inset 2px 2px 7px darkorange, - inset -2px -2px 7px darkorange; -} -.click-gauge.failure[value]::-webkit-progress-value { - background: red; - box-shadow: - 2px .5px 1px #333, - inset 2px 2px 7px darkred, - inset -2px -2px 7px darkred; -} -.output { - height: 30px; - width: 100%; - display: block; - color: #333; - text-align: left; -} -.top-header { - margin-top: -1.8em !important; -} -.contrib-box { - width: 250px; - height: 325px; - background: #333; - color: white; - text-align: center; - border: 1px solid #333; - margin: auto; - margin-top: 1em; - margin-bottom: 1em; -} - -.contrib-box h4 { - color: white; -} - -.contrib-box img { - width: 100%; -} - -.support-row { - text-align: center; - margin-bottom: 3em; -} - -.support-row a { - text-decoration: none; -} - -.support-row img { - width: 150px; -} - diff --git a/assets/js/index.js b/assets/js/index.js index 4cba779..c1e4c6c 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -68,161 +68,6 @@ /* 1 */ /***/ function(module, exports, __webpack_require__) { - - $( function() { - // Swipe - (function() { - new Hammer( $( ".swipe" )[ 0 ], { - domEvents: true - } ); - var current = 0; - var imgs = $( ".demo-box.swipe img" ); - var pages = $( ".swipe .page-num span" ); - $( ".swipe" ).on( "swipeleft", function( e ) { - if ( imgs[ current + 1 ] ) { - imgs.removeClass( "active" ); - imgs.eq( ++current ).addClass( "active" ); - pages.removeClass( "active" ); - pages.eq( current ).addClass( "active" ); - } - } ); - $( ".swipe" ).on( "swiperight", function( e ) { - if ( imgs[ current - 1 ] ) { - imgs.removeClass( "active" ); - imgs.eq( --current ).addClass( "active" ); - pages.removeClass( "active" ); - pages.eq( current ).addClass( "active" ); - } - } ); - } )(); - - // Pan - (function() { - var img, margin; - new Hammer( $( ".pan" )[ 0 ], { - domEvents: true - } ); - $( ".pan" ).on( "panstart", function( e ) { - img = $( ".pan img" ); - margin = parseInt( img.css( "margin-left" ), 10 ); - } ); - $( ".pan" ).on( "pan", function( e ) { - console.log( "pan" ); - var delta = margin + e.originalEvent.gesture.deltaX; - console.log( delta ); - if ( delta >= -1750 && delta <= -150 ) { - img.css( { - "margin-left": margin + e.originalEvent.gesture.deltaX - } ); - } - } ); - })(); - - // tap - (function() { - new Hammer( $( ".tap" )[ 0 ], { - domEvents: true - } ); - var current = 0; - var imgs = $( ".demo-box.tap img" ); - var pages = $( ".tap .page-num span" ); - $( ".tap" ).on( "tap", function( e ) { - console.log( "tap" ); - if ( imgs[ current + 1 ] ) { - current++; - } else { - current = 0; - } - console.log( current ); - imgs.removeClass( "active" ); - imgs.eq( current ).addClass( "active" ); - pages.removeClass( "active" ); - pages.eq( current ).addClass( "active" ); - } ); - } )(); - - // press - (function() { - new Hammer( $( ".press" )[ 0 ], { - domEvents: true - } ); - $( ".press" ).on( "press", function( e ) { - $( ".demo-overlay" ).toggle(); - } ); - } )(); - // pinch - (function() { - var ham = new Hammer( $( ".pinch" )[ 0 ], { - domEvents: true - } ); - var width = 1900; - var height = 400; - var left = 950; - var top = 220; - ham.get('pinch').set({ enable: true }); - $( ".pinch" ).on( "pinch", function( e ) { - console.log( "pinch" ); - if ( width * e.originalEvent.gesture.scale >= 300 ) { - $( this ).find( "img" ).css({ - width: width * e.originalEvent.gesture.scale, - "margin-left": -left * e.originalEvent.gesture.scale, - height: height * e.originalEvent.gesture.scale, - "margin-top": -top * e.originalEvent.gesture.scale - }); - } - console.log( e.originalEvent.gesture.scale ); - } ); - $( ".pinch" ).on( "pinchend", function( e ) { - width = width * e.originalEvent.gesture.scale; - height = height * e.originalEvent.gesture.scale; - left = left * e.originalEvent.gesture.scale; - top = top * e.originalEvent.gesture.scale; - console.log( width ); - } ); - } )(); - // rotate - (function() { - var ham = new Hammer( $( ".rotate" )[ 0 ], { - domEvents: true - } ); - var liveScale = 1; - var currentRotation = 0; - - ham.get('rotate').set({ enable: true }); - $( ".rotate" ).on( "rotate", function( e ) { - var rotation = currentRotation + Math.round(liveScale * e.originalEvent.gesture.rotation); - $( this ).find( "img" ).css( "transform", "rotate( " + rotation + "deg)" ); - } ); - $( ".rotate" ).on( "rotateend", function( e ) { - currentRotation += Math.round( e.originalEvent.gesture.rotation ); - } ); - } )(); - - // Hammer Time - $(function(){ - var upEvent = window.PointerEvent ? "pointerup" : ( ( 'ontouchstart' in window ) || window.DocumentTouch && document instanceof DocumentTouch ) ? "touchend" : "mouseup"; - $( ".target" ).on( upEvent, function( e ) { - this.startTime = Date.now(); - $( this ).find( ".output" ).html( e.type + ": " + this.startTime + "
"); - } ); - $( ".target" ).on( "click", function( e ) { - var now = Date.now(); - var clickTime = now - this.startTime; - var target = $( this ); - var status = clickTime < 100 ? "" : clickTime < 300 ? "warning" : "failure" - target.find( ".click-gauge" ) - .attr( "value", clickTime ) - .removeClass( "failure success" ) - .addClass( status ); - target.find( ".click-time-output" ).text( clickTime + "ms" ); - target.find( ".output" ).append( "click: " + now + "
"); - $( this ).addClass( "clicked" ); - setTimeout( function() { - $( this ).removeClass( "clicked" ); - }.bind( this ), 1000 ) - } ); - }); -} ); /** * kind of messy code, but good enough for now */ diff --git a/index.html b/index.html index 97fd4dd..8f0ef15 100644 --- a/index.html +++ b/index.html @@ -2,31 +2,17 @@ layout: homepage title: Hammer.JS --- -
-
-

You can touch this!

-

Hammer helps you add support for touch gestures to your page, and remove the 300ms delay from clicks.

-

Use the original Hammer.js for gesture support,

-

and the all new Hammer Time for removing the 300ms delay

-
-
+
-
-
- - Hammer.min.js
- v{{site.data.hammer.version}} — {{site.data.hammer.gzipped}} gzipped - -
-
- - Hammer-time.min.js
- v{{site.data.hammer.timeVersion}} — {{site.data.hammer.timeGzipped}} gzipped - -
-
+

Add touch gestures to your webapp.

+

+ + Hammer.min.js
+ v{{site.data.hammer.version}} — {{site.data.hammer.gzipped}} gzipped + +

@@ -41,277 +27,3 @@

and the all new Hammer Time for removing the 300ms delay

-
-
-

Gestures

-

Hammer.js supports most common single and multi-touch gestures, and is fully extendable to add custom gestures.

-
-
-
-
-

Rotate

- -
-
-

Pinch

- -
-
-

Press

- -
-
-

Pan

- -
-
-

Tap

- -
-
-

Swipe

- -
-
-
-
-

Try it!

-

Use the shift key to emulate multi touch with a mouse

-
-
-
-
-
-

Swipe

-
- - - -
- 1 - 2 - 3 -
-
-
-
-
-
-

Pan

-
- -
-
-
-
-
-

Tap

-
- - - -
- 1 - 2 - 3 -
-
-
-
-
-
-

Press

-
- -
- -
-
-
-
-
-
-

Rotate

-
- -
-
-
-
-
-

Pinch / Zoom

-
- -
-
-
-
-
-
-

Hammer Time

-

Hammer time removes the 300ms delay from both clicks and focus

-

Hammer time is a partial polyfill for the touch-action css property from the pointer events spec http://www.w3.org/TR/pointerevents/#the-touch-action-css-property

-
-
-
-
-
-

None

-
- style="touch-action: none;"
- Click Time: 0ms - - -
-
-
-
-
-
-

Manipulation

-
- style="touch-action: manipulation;"
- Click Time: 0ms - - -
-
-
-
-
-
-

Auto / unset

-
- style=""
- Click Time: 0ms - - -
-
-
-
-
-
-
-

Team

-

Hammerjs and its associated libraries are developed entirely by volunteer contributors

-
-
-
-
-
-
-
-
-
- -

Alexander Schmitz

- (arschmitz) -

Project Lead

-
-
-
-
- -

Chris Thoburn

- (runspired) -

Developer

-
-
-
-
- -

Jorik Tangelder

- (jtangelder) -

Original Creator (inactive)

-
-
-
-
-
-
-
-
-
-

Contributing

-

Interested in helping out on hammer?

-

We are always looking for new team members to help out.

-

There is no need to be an expert or even really know JavaScript

-
-
-
-
-

Just a few of the areas we could use help in are...

-
-
-
-
-
    -
  • Documentation
    • -
  • Copy Editing ( we make a lot of typos )
    • -
  • testing
    • -
  • Website design
    • -
-
-
-
    -
  • Fixing Bugs
    • -
  • Triaging issues
    • -
  • Supporting other hammer users
    • -
  • Testing
    • -
-
-
- -
-
-

Support

-

Need help using Hammerjs?

-
-
-
-
-

General Help

-
-
-

Bugs / Features

-
-
- -

Docs / API

- - -
-
- -

Stack Overflow

- - -
-
- -

Slack #support

- - -
-
-

Bugs / Features

-
-
- -

Github Issues

- - -
-
- -

Slack #general

- - -
-
- - - - -