diff --git a/README.md b/README.md index 148dd01..263cb24 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ scrolly.disposeAll(); ### React Component -See example usage via `gulp watch` and [localhost:3001/react](http://localhost:3001/react/). Or just look at `public/react/index.html` in this repo. +See example usage via `gulp watch` and [/react](https://annexare.com/js/scrolly/react/). Or just look at `public/react/index.html` in this repo. ```jsx @@ -61,7 +61,7 @@ $('.selector').scrolly('dispose'); ### Demo -Just open `public/index.html`. Will be published online with `v0.5.0`. +Just open `public/index.html`, or check the [live demo](https://annexare.com/js/scrolly/). ## Details diff --git a/public/js/react-scrolly.js b/public/js/react-scrolly.js index 48a70bb..13731a1 100644 --- a/public/js/react-scrolly.js +++ b/public/js/react-scrolly.js @@ -257,7 +257,7 @@ var dataSet = function initDataSet() { addClass('area', node); if (hasClass(name, node.parentNode)) { // Wrap exists - data.wrap = node; + data.wrap = node.parentNode; } else { data.wrap = wrap(node, name); data.dispose.wrap = true; diff --git a/public/js/react-scrolly.min.js b/public/js/react-scrolly.min.js index 00b8175..c17a922 100644 --- a/public/js/react-scrolly.min.js +++ b/public/js/react-scrolly.min.js @@ -1,2 +1,2 @@ /* scrolly v0.4.6, 2015.01.12 */ -var dataSet=function(){return document.documentElement.dataset?function(e,t,n){return"undefined"!=typeof n?e.dataset[t]=n:e.dataset[t]}:function(e,t,n){return"undefined"!=typeof n?e.setAttribute("data-"+t,n):e.getAttribute("data-"+t)}}();!function(e){"undefined"!=typeof module&&module.exports?e.call(module.exports):"function"==typeof define&&define.amd?define(["jquery"],e):e.call(window,window.$||window.jQuery||window.Zepto||window.jBone)}(function(e){"use strict";var t="Scrolly",n=t.toLowerCase(),i=function(e){return n+e},r=function(e){return t+": "+e},a=function(e,t){var n=(t.className||"").split(/\s+/);return-1===n.indexOf(e)&&n.push.apply(n,[e]),t.className=n.join(" ")},o=function(e,t){var n=(t?t.className||"":"").split(/\s+/);return-1!==n.indexOf(e)},s=function(e,t){var n=(t?t.className||"":"").split(/\s+/),i=n.indexOf(e);return-1!==i&&n.splice(i,1),t.className=n.join(" ")},u=function(e){var t=document.createElement("div");return t.className=e||"",t},d=function(e,t){var n=e.parentNode;if(o(t,n))return n;var i=u(t);return n.insertBefore(i,e),i.appendChild(e),i},l={X:"Width",Y:"Height"},c={X:"Left",Y:"Top"},p=function(e,t){return t["page"+e]||t["client"+e]},f=function(e,t,n){return e[(n||"scroll")+c[t]]},h=function(e,t,n){return e[(n||"scroll")+l[t]]},m=function(e){var t=f(e.wrap,e.axis)||0;return Math.floor((t+e.wrapSize/2)*e.wrapRatio)},b=function(e){return e+"px"},v="ontouchstart"in document.documentElement,w="onwheel"in document||document.documentMode>=9?"wheel":"undefined"==typeof document.onmousewheel?"DOMMouseScroll":"mousewheel",y=function(e){document.body.onmousemove=document.body.onmouseup=null,document.ontouchmove=document.ontouchend=null,s(this.noUserSelectClass,document.body),s(this.onDragClass,e.bar)},S=function(e,t){var n=this,i=p(e.axis,t),r=0,o=1*e.thumb.style.top.replace("px",""),s=function(t){r=p(e.axis,t)-i+e.thumbSize/2,v&&(r*=-.5),n.setThumbPos.call(n,e,o+r,!0)},u=function(){y.call(n,e)};a(this.noUserSelectClass,document.body),a(this.onDragClass,e.bar),v?(document.ontouchmove=function(e){e.preventDefault(),s(e.touches[0])},document.ontouchend=u):(document.body.onmousemove=s,document.body.onmouseup=u)},x=function(e,t){if(1!==e.wrapRatio){var n=f(e.wrap,e.axis)+t["delta"+e.axis];e.wrapRatio=e.wrapSize/h(e.area,e.axis),n>0&&n+e.wrapSizet,!e.visible)return void(e.bar.style.visibility="hidden");var i=e.wrapRatio=t/n,r=e.thumbSize=Math.min(t,Math.max(e.thumbMinSize,t*i));e.thumb.style.height=b(r),e.thumbSize=h(e.thumb,e.axis,"offset"),this.setThumbPos(e),e.bar.style.height=b(t),e.bar.style.visibility="visible"},setThumbPos:function(e,t,n){var i="number"==typeof t?t:m(e),r=e.thumbSize/2,a=e.wrapSize-e.thumbSize,o=r>i?0:i-r;o=o>a?a:o,e.thumb.style[c[e.axis].toLowerCase()]=b(o),n&&(o=o===a?e.wrapSize:o,e.wrap["scroll"+c[e.axis]]=Math.floor(o/e.wrapSize*h(e.area,e.axis)))}};e&&e.fn&&(e.fn.scrolly=function(e){return this.length?"string"!=typeof e?(N.bar(this,e||{}),this):(["dispose","update"].indexOf(e)>-1&&this.forEach(function(t){var n=dataSet(t,i("id"));N[e](n)}),this):this}),this.scrolly=N,this.scrollyst=g});var Scrolly=React.createClass({displayName:"Scrolly",getDefaultProps:function(){return{params:{}}},getID:function(){return this.id},componentDidMount:function(){"undefined"!=typeof scrolly&&(this.id=scrolly.barNode(this.refs.area.getDOMNode(),this.props.params))},componentWillUnmount:function(){this.id&&(scrolly.dispose(this.id),this.id=!1)},componentDidUpdate:function(){this.id&&scrolly.update(this.id)},render:function(){return React.createElement("div",React.__spread({},this.props),React.createElement("div",{className:"scrolly react"},React.createElement("div",{ref:"area",className:"area"},this.props.children)),React.createElement("div",{className:"bar"},React.createElement("div",{className:"thumb"})))}});"undefined"!=typeof module&&(module.exports=Scrolly); \ No newline at end of file +var dataSet=function(){return document.documentElement.dataset?function(e,t,n){return"undefined"!=typeof n?e.dataset[t]=n:e.dataset[t]}:function(e,t,n){return"undefined"!=typeof n?e.setAttribute("data-"+t,n):e.getAttribute("data-"+t)}}();!function(e){"undefined"!=typeof module&&module.exports?e.call(module.exports):"function"==typeof define&&define.amd?define(["jquery"],e):e.call(window,window.$||window.jQuery||window.Zepto||window.jBone)}(function(e){"use strict";var t="Scrolly",n=t.toLowerCase(),i=function(e){return n+e},r=function(e){return t+": "+e},a=function(e,t){var n=(t.className||"").split(/\s+/);return-1===n.indexOf(e)&&n.push.apply(n,[e]),t.className=n.join(" ")},o=function(e,t){var n=(t?t.className||"":"").split(/\s+/);return-1!==n.indexOf(e)},s=function(e,t){var n=(t?t.className||"":"").split(/\s+/),i=n.indexOf(e);return-1!==i&&n.splice(i,1),t.className=n.join(" ")},u=function(e){var t=document.createElement("div");return t.className=e||"",t},d=function(e,t){var n=e.parentNode;if(o(t,n))return n;var i=u(t);return n.insertBefore(i,e),i.appendChild(e),i},l={X:"Width",Y:"Height"},c={X:"Left",Y:"Top"},p=function(e,t){return t["page"+e]||t["client"+e]},f=function(e,t,n){return e[(n||"scroll")+c[t]]},h=function(e,t,n){return e[(n||"scroll")+l[t]]},m=function(e){var t=f(e.wrap,e.axis)||0;return Math.floor((t+e.wrapSize/2)*e.wrapRatio)},b=function(e){return e+"px"},v="ontouchstart"in document.documentElement,w="onwheel"in document||document.documentMode>=9?"wheel":"undefined"==typeof document.onmousewheel?"DOMMouseScroll":"mousewheel",y=function(e){document.body.onmousemove=document.body.onmouseup=null,document.ontouchmove=document.ontouchend=null,s(this.noUserSelectClass,document.body),s(this.onDragClass,e.bar)},S=function(e,t){var n=this,i=p(e.axis,t),r=0,o=1*e.thumb.style.top.replace("px",""),s=function(t){r=p(e.axis,t)-i+e.thumbSize/2,v&&(r*=-.5),n.setThumbPos.call(n,e,o+r,!0)},u=function(){y.call(n,e)};a(this.noUserSelectClass,document.body),a(this.onDragClass,e.bar),v?(document.ontouchmove=function(e){e.preventDefault(),s(e.touches[0])},document.ontouchend=u):(document.body.onmousemove=s,document.body.onmouseup=u)},x=function(e,t){if(1!==e.wrapRatio){var n=f(e.wrap,e.axis)+t["delta"+e.axis];e.wrapRatio=e.wrapSize/h(e.area,e.axis),n>0&&n+e.wrapSizet,!e.visible)return void(e.bar.style.visibility="hidden");var i=e.wrapRatio=t/n,r=e.thumbSize=Math.min(t,Math.max(e.thumbMinSize,t*i));e.thumb.style.height=b(r),e.thumbSize=h(e.thumb,e.axis,"offset"),this.setThumbPos(e),e.bar.style.height=b(t),e.bar.style.visibility="visible"},setThumbPos:function(e,t,n){var i="number"==typeof t?t:m(e),r=e.thumbSize/2,a=e.wrapSize-e.thumbSize,o=r>i?0:i-r;o=o>a?a:o,e.thumb.style[c[e.axis].toLowerCase()]=b(o),n&&(o=o===a?e.wrapSize:o,e.wrap["scroll"+c[e.axis]]=Math.floor(o/e.wrapSize*h(e.area,e.axis)))}};e&&e.fn&&(e.fn.scrolly=function(e){return this.length?"string"!=typeof e?(N.bar(this,e||{}),this):(["dispose","update"].indexOf(e)>-1&&this.forEach(function(t){var n=dataSet(t,i("id"));N[e](n)}),this):this}),this.scrolly=N,this.scrollyst=g});var Scrolly=React.createClass({displayName:"Scrolly",getDefaultProps:function(){return{params:{}}},getID:function(){return this.id},componentDidMount:function(){"undefined"!=typeof scrolly&&(this.id=scrolly.barNode(this.refs.area.getDOMNode(),this.props.params))},componentWillUnmount:function(){this.id&&(scrolly.dispose(this.id),this.id=!1)},componentDidUpdate:function(){this.id&&scrolly.update(this.id)},render:function(){return React.createElement("div",React.__spread({},this.props),React.createElement("div",{className:"scrolly react"},React.createElement("div",{ref:"area",className:"area"},this.props.children)),React.createElement("div",{className:"bar"},React.createElement("div",{className:"thumb"})))}});"undefined"!=typeof module&&(module.exports=Scrolly); \ No newline at end of file diff --git a/public/js/scrolly.js b/public/js/scrolly.js index ae77317..da5e80f 100644 --- a/public/js/scrolly.js +++ b/public/js/scrolly.js @@ -257,7 +257,7 @@ var dataSet = function initDataSet() { addClass('area', node); if (hasClass(name, node.parentNode)) { // Wrap exists - data.wrap = node; + data.wrap = node.parentNode; } else { data.wrap = wrap(node, name); data.dispose.wrap = true; diff --git a/public/js/scrolly.min.js b/public/js/scrolly.min.js index 7af9243..1608eb0 100644 --- a/public/js/scrolly.min.js +++ b/public/js/scrolly.min.js @@ -1,2 +1,2 @@ /* scrolly v0.4.6, 2015.01.12 */ -var dataSet=function(){return document.documentElement.dataset?function(e,t,n){return"undefined"!=typeof n?e.dataset[t]=n:e.dataset[t]}:function(e,t,n){return"undefined"!=typeof n?e.setAttribute("data-"+t,n):e.getAttribute("data-"+t)}}();!function(e){"undefined"!=typeof module&&module.exports?e.call(module.exports):"function"==typeof define&&define.amd?define(["jquery"],e):e.call(window,window.$||window.jQuery||window.Zepto||window.jBone)}(function(e){"use strict";var t="Scrolly",n=t.toLowerCase(),i=function(e){return n+e},r=function(e){return t+": "+e},a=function(e,t){var n=(t.className||"").split(/\s+/);return-1===n.indexOf(e)&&n.push.apply(n,[e]),t.className=n.join(" ")},o=function(e,t){var n=(t?t.className||"":"").split(/\s+/);return-1!==n.indexOf(e)},s=function(e,t){var n=(t?t.className||"":"").split(/\s+/),i=n.indexOf(e);return-1!==i&&n.splice(i,1),t.className=n.join(" ")},u=function(e){var t=document.createElement("div");return t.className=e||"",t},d=function(e,t){var n=e.parentNode;if(o(t,n))return n;var i=u(t);return n.insertBefore(i,e),i.appendChild(e),i},l={X:"Width",Y:"Height"},c={X:"Left",Y:"Top"},p=function(e,t){return t["page"+e]||t["client"+e]},f=function(e,t,n){return e[(n||"scroll")+c[t]]},h=function(e,t,n){return e[(n||"scroll")+l[t]]},m=function(e){var t=f(e.wrap,e.axis)||0;return Math.floor((t+e.wrapSize/2)*e.wrapRatio)},b=function(e){return e+"px"},v="ontouchstart"in document.documentElement,w="onwheel"in document||document.documentMode>=9?"wheel":"undefined"==typeof document.onmousewheel?"DOMMouseScroll":"mousewheel",y=function(e){document.body.onmousemove=document.body.onmouseup=null,document.ontouchmove=document.ontouchend=null,s(this.noUserSelectClass,document.body),s(this.onDragClass,e.bar)},S=function(e,t){var n=this,i=p(e.axis,t),r=0,o=1*e.thumb.style.top.replace("px",""),s=function(t){r=p(e.axis,t)-i+e.thumbSize/2,v&&(r*=-.5),n.setThumbPos.call(n,e,o+r,!0)},u=function(){y.call(n,e)};a(this.noUserSelectClass,document.body),a(this.onDragClass,e.bar),v?(document.ontouchmove=function(e){e.preventDefault(),s(e.touches[0])},document.ontouchend=u):(document.body.onmousemove=s,document.body.onmouseup=u)},x=function(e,t){if(1!==e.wrapRatio){var n=f(e.wrap,e.axis)+t["delta"+e.axis];e.wrapRatio=e.wrapSize/h(e.area,e.axis),n>0&&n+e.wrapSizet,!e.visible)return void(e.bar.style.visibility="hidden");var i=e.wrapRatio=t/n,r=e.thumbSize=Math.min(t,Math.max(e.thumbMinSize,t*i));e.thumb.style.height=b(r),e.thumbSize=h(e.thumb,e.axis,"offset"),this.setThumbPos(e),e.bar.style.height=b(t),e.bar.style.visibility="visible"},setThumbPos:function(e,t,n){var i="number"==typeof t?t:m(e),r=e.thumbSize/2,a=e.wrapSize-e.thumbSize,o=r>i?0:i-r;o=o>a?a:o,e.thumb.style[c[e.axis].toLowerCase()]=b(o),n&&(o=o===a?e.wrapSize:o,e.wrap["scroll"+c[e.axis]]=Math.floor(o/e.wrapSize*h(e.area,e.axis)))}};e&&e.fn&&(e.fn.scrolly=function(e){return this.length?"string"!=typeof e?(z.bar(this,e||{}),this):(["dispose","update"].indexOf(e)>-1&&this.forEach(function(t){var n=dataSet(t,i("id"));z[e](n)}),this):this}),this.scrolly=z,this.scrollyst=g}); \ No newline at end of file +var dataSet=function(){return document.documentElement.dataset?function(e,t,n){return"undefined"!=typeof n?e.dataset[t]=n:e.dataset[t]}:function(e,t,n){return"undefined"!=typeof n?e.setAttribute("data-"+t,n):e.getAttribute("data-"+t)}}();!function(e){"undefined"!=typeof module&&module.exports?e.call(module.exports):"function"==typeof define&&define.amd?define(["jquery"],e):e.call(window,window.$||window.jQuery||window.Zepto||window.jBone)}(function(e){"use strict";var t="Scrolly",n=t.toLowerCase(),i=function(e){return n+e},r=function(e){return t+": "+e},a=function(e,t){var n=(t.className||"").split(/\s+/);return-1===n.indexOf(e)&&n.push.apply(n,[e]),t.className=n.join(" ")},o=function(e,t){var n=(t?t.className||"":"").split(/\s+/);return-1!==n.indexOf(e)},s=function(e,t){var n=(t?t.className||"":"").split(/\s+/),i=n.indexOf(e);return-1!==i&&n.splice(i,1),t.className=n.join(" ")},u=function(e){var t=document.createElement("div");return t.className=e||"",t},d=function(e,t){var n=e.parentNode;if(o(t,n))return n;var i=u(t);return n.insertBefore(i,e),i.appendChild(e),i},l={X:"Width",Y:"Height"},c={X:"Left",Y:"Top"},p=function(e,t){return t["page"+e]||t["client"+e]},f=function(e,t,n){return e[(n||"scroll")+c[t]]},h=function(e,t,n){return e[(n||"scroll")+l[t]]},m=function(e){var t=f(e.wrap,e.axis)||0;return Math.floor((t+e.wrapSize/2)*e.wrapRatio)},b=function(e){return e+"px"},v="ontouchstart"in document.documentElement,w="onwheel"in document||document.documentMode>=9?"wheel":"undefined"==typeof document.onmousewheel?"DOMMouseScroll":"mousewheel",y=function(e){document.body.onmousemove=document.body.onmouseup=null,document.ontouchmove=document.ontouchend=null,s(this.noUserSelectClass,document.body),s(this.onDragClass,e.bar)},S=function(e,t){var n=this,i=p(e.axis,t),r=0,o=1*e.thumb.style.top.replace("px",""),s=function(t){r=p(e.axis,t)-i+e.thumbSize/2,v&&(r*=-.5),n.setThumbPos.call(n,e,o+r,!0)},u=function(){y.call(n,e)};a(this.noUserSelectClass,document.body),a(this.onDragClass,e.bar),v?(document.ontouchmove=function(e){e.preventDefault(),s(e.touches[0])},document.ontouchend=u):(document.body.onmousemove=s,document.body.onmouseup=u)},x=function(e,t){if(1!==e.wrapRatio){var n=f(e.wrap,e.axis)+t["delta"+e.axis];e.wrapRatio=e.wrapSize/h(e.area,e.axis),n>0&&n+e.wrapSizet,!e.visible)return void(e.bar.style.visibility="hidden");var i=e.wrapRatio=t/n,r=e.thumbSize=Math.min(t,Math.max(e.thumbMinSize,t*i));e.thumb.style.height=b(r),e.thumbSize=h(e.thumb,e.axis,"offset"),this.setThumbPos(e),e.bar.style.height=b(t),e.bar.style.visibility="visible"},setThumbPos:function(e,t,n){var i="number"==typeof t?t:m(e),r=e.thumbSize/2,a=e.wrapSize-e.thumbSize,o=r>i?0:i-r;o=o>a?a:o,e.thumb.style[c[e.axis].toLowerCase()]=b(o),n&&(o=o===a?e.wrapSize:o,e.wrap["scroll"+c[e.axis]]=Math.floor(o/e.wrapSize*h(e.area,e.axis)))}};e&&e.fn&&(e.fn.scrolly=function(e){return this.length?"string"!=typeof e?(z.bar(this,e||{}),this):(["dispose","update"].indexOf(e)>-1&&this.forEach(function(t){var n=dataSet(t,i("id"));z[e](n)}),this):this}),this.scrolly=z,this.scrollyst=g}); \ No newline at end of file diff --git a/src/js/scrolly.js b/src/js/scrolly.js index 533c1e6..eb8296c 100644 --- a/src/js/scrolly.js +++ b/src/js/scrolly.js @@ -234,7 +234,7 @@ addClass('area', node); if (hasClass(name, node.parentNode)) { // Wrap exists - data.wrap = node; + data.wrap = node.parentNode; } else { data.wrap = wrap(node, name); data.dispose.wrap = true;