javascript - Make item slide back to 0 with Polymer -
i'm trying element go came from. drag stores how far has travelled, thought tell go towards 0 1 pixel @ time. not work (it triggered touchend). when in dev tools see {{drag}} value correct, if statement not triggered.
any appreciated.
function bouncetozero() { if({{drag}} != 0) { document.queryselector('pull-to-action').drag = {{drag}} - 1; if({{drag}} != 0) { settimeout('bouncetozero()',1000); } } } thanks help.
edit: here full element
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/core-icons/core-icons.html"> <link rel="import" href="../bower_components/core-icon/core-icon.html"> <polymer-element attributes="action distance container color" name="pull-to-action"> <template> <style> :host { display: block; position: absolute; width: calc(100% - 8px); text-align:center; z-index:99; } .refreshicon { background-color:white; border-radius: 50%; border: 1px solid {{color}}; padding: 8px; top: calc(({{drag}}px - 50px) / 3); color: {{color}}; opacity: calc({{drag}} / {{distance}}); transform: rotate({{drag}}deg); filter: grayscale({{desat}}%); -webkit-filter: grayscale({{desat}}%); } </style> <span flex><core-icon class="refreshicon" icon="icons:refresh"></core-icon></span> <script> window.addeventlistener('load', function() { var dragobs = 0; var lasttouchy = 0; var starttouchy = 0; var endtouchy = 0; var desat = 100; var touchstarthandler = function(e) { if (e.touches.length != 1) return; lasttouchy = e.touches[0].clienty; starttouchy = e.touches[0].clienty; document.queryselector('pull-to-action').width = window.innerwidth; } var touchmovehandler = function(e) { var touchy = e.touches[0].clienty; var touchydelta = touchy - lasttouchy; lasttouchy = touchy; endtouchy = e.touches[0].clienty; if (document.getelementbyid('{{container}}').scrolltop == 0) { dragobs = endtouchy - starttouchy; desat = 100 - ((dragobs / {{distance}}) * 100); document.queryselector('pull-to-action').desat = desat; document.queryselector('pull-to-action').drag = endtouchy - starttouchy; } if (document.getelementbyid('{{container}}').scrolltop == 0 && touchydelta > 0) { e.preventdefault(); return; } if (document.getelementbyid('{{container}}').scrolltop == 0 &&dragobs > 0) { e.preventdefault(); return; } } var touchendhandler = function(e) { if (document.getelementbyid('{{container}}').scrolltop == 0 && endtouchy - starttouchy >= {{distance}}) { {{action}}; document.queryselector('pull-to-action').drag = {{distance}}; dragobs = {{distance}} settimeout('bouncetozero()',2000); } else { function bouncetozero() { if({{drag}} != 0) { document.queryselector('pull-to-action').drag = {{drag}} - 1; if({{drag}} != 0) { settimeout('bouncetozero()',1000); } } } } } document.addeventlistener('touchstart', touchstarthandler, false); document.addeventlistener('touchmove', touchmovehandler, false); document.addeventlistener('touchend', touchendhandler, false); }); </script> </template> <script> polymer({ action: 'alert("you need set action attribute")', distance: '100', container: 'body', drag: '0', desat: '100', color: '#ccc' }); </script> </polymer-element>
i think can not use template inside script
function bouncetozero() { if(drag != 0) { document.queryselector('pull-to-action').drag = drag - 1; if(drag != 0) { settimeout('bouncetozero()',1000); } } } add this context drag if need to
Comments
Post a Comment