Re: Scrolling Panel Card Issues (not responsive) When Touching a Control first
We submitted this as a bug report to Alpha and Selwyn fixed this - it will be in tomorrow's pre-release. For user's of older builds, Selwyn offered a solution as well:
Thank you to Selwyn for the prompt reply on this bug report.
Solution for older Builds (Working in Build 4346) - in the UX - go to properties - advanced - other properties and add
We submitted this as a bug report to Alpha and Selwyn fixed this - it will be in tomorrow's pre-release. For user's of older builds, Selwyn offered a solution as well:
Thank you to Selwyn for the prompt reply on this bug report.
Solution for older Builds (Working in Build 4346) - in the UX - go to properties - advanced - other properties and add
Code:
tmpl.jsRunAtBeginning=<<%longString%
A5.u.drag._start = function(e){
// start
// get data
var d = A5.u.drag;
var i = d._i;
if(i._sEle){
if(i._sEle.parentNode == null) d.stop();
}
// bail if edit control
var sEle = e.target || e.srcElement;
if(sEle){
if(sEle.tagName){
var tag = sEle.tagName.toLowerCase();
if(tag == 'input' || tag == 'textarea'){
if(document.activeElement){
if(document.activeElement == sEle) return null;
} else return null;
}
}
}
// bail if not active
if(i._a) return true;
var c = d._getCoors(e);
i._sEle = document.elementFromPoint(c.clientX,c.clientY);
var ti = false;
if(e.type == 'touchstart') ti = e.changedTouches[0].identifier;
d._setupI(i,c.clientX,c.clientY,ti);
d._awe = {};
var stopEvent = false;
var ele = this;
var eId = '';
while(ele.tagName.toUpperCase() != 'BODY'){
eId = ele.id;
if(eId != ''){
if(typeof d._w[eId] != 'undefined'){
d._awe[eId] = ele;
// prevent
if(d._w[eId].p){
stopEvent = true;
break;
}
// scrolling
if(d._w[eId].s && !d._w[eId].s.disabled && !i._s){
var ss = d._w[eId].s;
// retrive custom scroll location
var cScrl = $ga(ele,'A5CustomScroll');
var cSX = 0;
var cSY = 0;
if(cScrl){
cScrl = cScrl.split(',');
cSX = Number(cScrl[0]);
cSY = Number(cScrl[1]);
}
// calc size of content
// get y padding first time around
if(typeof ss._p == 'undefined'){
ss._p = {t: 0, b: 0};
// get computed styles from transforms
var swcs = {paddingTop: '', paddingBottom: ''};
if(typeof window.getComputedStyle != 'undefined') swcs = window.getComputedStyle(ele);
else if(ele.currentStyle) swcs = ele.currentStyle;
if(swcs.paddingTop != '') ss._p.t = A5.u.convertUnits(swcs.paddingTop,'px');
if(swcs.paddingBottom != '') ss._p.b = A5.u.convertUnits(swcs.paddingBottom,'px');
ss._p.y = ss._p.t+ss._p.b;
}
var sW = ele.scrollWidth+cSX;
// -2 for padding on top and bottom to fix child margin issue
var sH = ele.firstChild.offsetHeight+ss._p.y-2;
//var sH = ele.scrollHeight;
//if(!A5.flags.isFireFox) sH +=cSY;
//var sW = ele.firstChild.offsetWidth+ss._p.x;
// stop momentum
if(d._st[eId]){
// get computed styles from transforms
var swcs = {};
swcs[A5.u.css.properties.transformDOM] = '';
if(typeof window.getComputedStyle != 'undefined') swcs = window.getComputedStyle(ele.firstChild);
else if(ele.currentStyle) swcs = ele.firstChild.currentStyle;
var transform = {e : 0, f : 0};
if(A5.flags.isFireFox || A5.flags.isOpera){
var mRE = /matrix\(\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*\,\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*\)/;
var mREM = swcs[A5.u.css.properties.transformDOM].match(mRE);
if(mREM){
transform.e = mREM[1];
transform.f = mREM[2];
}
} else if(A5.flags.isWebKit){
transform = new WebKitCSSMatrix(swcs[A5.u.css.properties.transformDOM]);
} else{
transform = new MSCSSMatrix(swcs[A5.u.css.properties.transformDOM]);
}
cSX = Math.round(transform.e)*-1;
cSY = Math.round(transform.f)*-1;
// removed because causing issues with scroll growth overshoot
// load old size if more then calced new size - if momentum would not have changed from first scroll
//sW = sW > d._st[eId].w ? sW : d._st[eId].w;
//sH = sH > d._st[eId].h ? sH : d._st[eId].h;
sW = d._st[eId].w;
sH = d._st[eId].h;
clearInterval(d._st[eId].inter);
delete d._st[eId];
ele.firstChild.style[A5.u.css.properties.transitionDOM] = '';
ele.firstChild.style[A5.u.css.properties.transformDOM] = A5.u.css.transform2D((cSX*-1),(cSY*-1));
}
// setup scroll info
i._s = {
id: eId,
iX: false,
iY: false,
x: false,
y: false,
vX: cSX,
vY: cSY,
cX: cSX,
cY: cSY,
sW: sW,
sH: sH,
mX: sW-ele.clientWidth,
mY: sH-ele.clientHeight,
p: ss.pull,
oP: ss.onPull.constructor == Function,
oPE: ss.onPullEnd.constructor == Function,
oPF: ss.onPull,
oPEF: ss.onPullEnd,
b: ss.bounce.allow,
pX: ele.offsetWidth/2,
pY: ele.offsetHeight/2,
pXP: 0,
pYP: 0,
oW: ele.offsetWidth,
oH: ele.offsetHeight,
xIBEle: false,
yIBEle: false
};
if((ss.axis == 'x' || ss.axis == 'both') && !i._cX && (ele.clientWidth+4 < i._s.sW || ss.pull.x == 'always')){
i._s.x = true;
if(ss.indicator.show && ss.indicator.h.show){
var sIEle = $(ele.id+'.SCROLLINDICATOR.X');
if(!sIEle){
sIEle = document.createElement('div');
sIEle.id = ele.id+'.SCROLLINDICATOR.X';
sIEle.className = ss.indicator.h.className;
ele.appendChild(sIEle);
$ss(sIEle,'display: none; position: absolute; overflow: hidden; left: '+ss.indicator.h.left+'; right: '+ss.indicator.h.right+'; width: auto; '+ss.indicator.h.location+': '+ss.indicator.h.offset+';');
sIEle.innerHTML = '<div class="'+ss.indicator.h.barClassName+'" style="position: absolute; top: 0px; left: 0px; font: 0px; width: 5px; height: 5px;"></div>';
}
sIEle.style.display = 'none';
var sIBEle = sIEle.firstChild;
sIBEle.style.left = ((i._s.vX/i._s.sW)*100)+'%';
sIBEle.style.width = Math.max(5,(ele.clientWidth/i._s.sW)*100)+'%';
sIBEle.style.minWidth = '10px';
sIBEle.style[A5.u.css.properties.transitionDOM] = '';
i._s.xIBEle = sIBEle;
}
}
if((ss.axis == 'y' || ss.axis == 'both') && !i._cY && (ele.clientHeight+4 < i._s.sH || ss.pull.y == 'always')){
i._s.y = true;
if(ss.indicator.show && ss.indicator.v.show){
var sIEle = $(ele.id+'.SCROLLINDICATOR.Y');
if(!sIEle){
sIEle = document.createElement('div');
sIEle.id = ele.id+'.SCROLLINDICATOR.Y';
sIEle.className = ss.indicator.v.className;
ele.appendChild(sIEle);
$ss(sIEle,'display: none; position: absolute; overflow: hidden; top: '+ss.indicator.v.top+'; bottom: '+ss.indicator.v.bottom+'; height: auto; '+ss.indicator.v.location+': '+ss.indicator.v.offset+';');
sIEle.innerHTML = '<div class="'+ss.indicator.v.barClassName+'" style="position: absolute; top: 0px; left: 0px; font: 0px; width: 5px; height: 5px;"></div>';
}
sIEle.style.display = 'none';
var sIBEle = sIEle.firstChild;
sIBEle.style.top = ((i._s.vY/i._s.sH)*100)+'%';
sIBEle.style.height = ((ele.clientHeight/i._s.sH)*100)+'%';
sIBEle.style.minHeight = '10px';
sIBEle.style[A5.u.css.properties.transitionDOM] = '';
i._s.yIBEle = sIBEle;
}
}
if(ss.stopPropagation){
if(!i._cX && i._s.x) i._cX = true;
if(!i._cY && i._s.y) i._cY = true;
}
}
// dragging
if(d._w[eId].c && !d._w[eId].c.disabled){
if(d._w[eId].c.axis == 'x' && !i._cX) i._cX = {id: eId, l: false, a: false, f: i._s == false};
else if(d._w[eId].c.axis == 'y' && !i._cY) i._cY= {id: eId, l: false, a: false, f: i._s == false};
else{
if(!i._cX) i._cX = {id: eId, l: false, a: false, f: i._s == false};
if(!i._cY) i._cY = {id: eId, l: false, a: false, f: i._s == false};
}
if(i._cX != false && i._cY != false) break;
}
}
}
ele = ele.parentNode;
}
// fix drag vars
if(i._cX == true) i._cX = false;
if(i._cY == true) i._cY = false;
if(!i._cX) i._cX = {id: false, a: false, l: false, f: false};
if(!i._cY) i._cY = {id: false, a: false, l: false, f: false};
// detect is drag occurs
if(i._cX.id && i._cY.id){
if(i._cX.id == i._cY.id) i._cB = true;
}
if(i._s || i._cX.id || i._cY.id){
d._da = true;
var imd = false;
if(i._cX.id){
if(d._w[i._cX.id].c.tolerance == -1) imd = true;
}
if(i._cY.id){
if(d._w[i._cY.id].c.tolerance == -1) imd = true;
}
if(imd) d._move(e);
} else{
i._a = false;
//if(stopEvent) $e.stopEvent(e);
//else $e.preventDefault(e);
//$e.stopPropagation(e);
//$e.preventDefault(e);
if(stopEvent){
// stop parent nodes from adding drag
i._a = true;
setTimeout(function(){A5.u.drag._i._a = false},0);
}
}
//return false;
}
%longString%
Comment