I'm working on a kiosk app with a webview to display a Google Slides presentation. Basic mechanics are all working fine, but I need for the webview to refresh periodically to reflect changes made to the Slides.
Watched Chromium bug 406437 to clear webview cache (yay!), and am attempting to implement the webview.cleardata and webview.reload, but doesn't seem to work. Console log shows "Cannot read property 'reload' of null"
Am I on the right track? Is there something simple I'm overlooking, or is there a design flaw in my logic?
Contents of my browser.js (at least the first part)...
// NOTE: Refresh timing is on line 26 - in milliseconds
// 5 min: 5 x 60 (sec) x 1000 (ms)
window.onresize = doLayout;
var isLoading = false;
// Define the function
function refreshWebView() {
var webview = document.querySelector('webview');
// https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js
// Set up the clear data variable
var clearDataType = {
appcache: true,
cookies: true,
fileSystems: true,
indexedDB: true,
localStorage: true,
webSQL: true,
cache: true
}
webview.clearData({since: 0}, clearDataType, function() { webview.reload(true); });
webview.reload(true);
setTimeout(function() { refreshWebView(); }, 60*1000);
}
// Kick off the refresh (with the delay defined above)
console.log('starting refreshWebView...');
refreshWebView();
onload = function() {
var webview = document.querySelector('webview');
doLayout();
document.querySelector('#back').onclick = function() {
webview.back();
};
... remaining code removed for brevity...
Related
UI automation testing
I have toast message all around my app, sometimes I get multiple toasts, which blocks clicking on other parts of the app. meaning I have to close them before I can interact with other buttons.
I wrote an if else statement to close them. when there is only one it works. when there are more than 2 toasts it fails.
I am using JS and Node js
Using Webdriverio and Mocha
This is the toastr library https://github.com/CodeSeven/toastr
Can someone tell me what am I missing?
closeToastMessage() {
let close_toast = $$('.toast-close-button');
const closeToasts = $$('.toast-close-button');
let toast_exist = browser.waitForExist('.toast', 5000);
if (close_toast.value) {
close_toast.click();
browser.waitUntil(function() {
return close_toast.waitForExist(5000, true);
}, 5000, 'expecte toast to disappear');
} else if (closeToasts.length) {
for (let i = 0; i < closeToasts.length; i++) {
closeToasts[i].click();
browser.waitUntil(() => {
return !closeToasts[i].isVisible();
}, 5000, `Close toast ${i} still visible after 5 s`, 1000);
} else {
throw new Error('Oops! toast did NOT disappear');
}
}
}
There is a preventDuplicates option. Try setting it to true.
Other options to check out.
toastr.options = {
"closeButton": true, // Allow force-closing
"newestOnTop": false, // Keep the oldest one up-front
"preventDuplicates": true, // Do not allow duplicates to appear
"showDuration": 300, // Time it take to show up, 0.3 sec default
"hideDuration": 1000, // Time it take to hide, 1 sec default
"timeOut": 5000, // Duration it is displayed, 5 sec default
"extendedTimeOut": 1000 // Time it takes to hide if hovered, 1 sec default
}
Checkout their demo.
I am using QRTEngine in qualtrics. I have a problem with hiding the Init and the Exit part, here is what I have tried to do so far:
Init:
QRTE.Init({
// should correspond with Embedded Data field names
blockData: ‘${e://Field/QRTE_blockData}’,
idData: ‘${e://Field/QRTE_idData}’,
columnData: ‘${e://Field/QRTE_columns}’,
exitQuestions: ‘${e://Field/QRTE_exitQuestions}’,
exitItemTag: ‘ExitQ’, // DO NOT FORGET TO CHANGE FOR NEW BLOCKS
blockId: ‘Deafult Question Block’, // DO NOT FORGET TO CHANGE FOR NEW BLOCKS
onLoadFn: function() {
// set trial configuration for the screens
QRTE.setConfig(‘Smiley’, ‘duration’, 2000);
QRTE.setConfig(‘StroopItem’, ‘duration’, 6000);
QRTE.setConfig(‘StroopItem’, ‘allowable’, ‘xm’);
QRTE.setConfig(‘StroopItem’, ‘EndAction’, ‘TERMINATE’);
// save trial configurations for later analysis
QRTE.setTrialData(‘StimulusSimely’, ‘${lm://Field/1}’);
QRTE.setTrialData(‘Piconright’, ‘${lm://Field/2}’);
QRTE.setTrialData(‘Piconleft’, ‘${lm://Field/3}’);
this.questionContainer.style.display = ‘none';
},
interTrialDelay: [1000] // set interTrialDelay
});
onLoadFn: (function()
{
this.questionContainer.style.display = ‘none';
});
Exit:
QRTE.Exit();
Qualtrics.SurveyEngine.addOnload(function()
{
this.questionContainer.style.display = ‘none';
});
My goal would be to prevent the engine from displaying these questions.
I have tried to set the intertrialdelay to 0, but in that case the whole experiment became a mess.
Hello I am trying to use skrollr on a responsive site, and I just want to turn it off for mobile and then back on for table / desktop. I keep getting this error:
Uncaught TypeError: Object # has no method 'destroy'. A point in the right direction would be helpful as I wasn't able to find an example that is using the destroy call for skrollr.
Below is the code that I am using:
var s = skrollr.init(
{
forceHeight: false,
constants:
{
box: '50p'
}
});
// set breakpoints
$(window).setBreakpoints(
{
// use only largest available vs use all available
distinct: true,
// array of widths in pixels where breakpoints
breakpoints:
[
480,
768
]
});
$(window).bind('enterBreakpoint480',function()
{
console.log("this is now 480");
s.destroy();
});
$(window).bind('enterBreakpoint768',function()
{
console.log("this is now 768");
s = skrollr.get();
});
I am aiming to do a phone gap-android project.
I want to implement the swipe view (as in android with page-controller) in phone gap but preferably using Java script.
I saw there are many options such as
hammer,zepto,jquerysloution,quo & iScroll.
Which is the best one out of these or anything else that better to implement?(preferably in java script )
I also notice that for all these we need to give the no of contents for the swipes such as page 1, page 2....etc.
**How to create a swipe view based on the no of contents in the database?
i have tried implementing using iscroll...
this the scroll.js code..
document.addEventListener("orientationchange", updateLayout);
// The wrapperWidth before orientationChange. Used to identify the current page number in updateLayout();
wrapperWidth = 0;
var myScroll = new iScroll("pageWrapper", {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
lockDirection: true});
updateLayout();
function updateLayout() {
var currentPage = 0;
if (wrapperWidth > 0) {
currentPage = - Math.ceil( $("#swipe_body").position().left / wrapperWidth);
}
wrapperWidth = $("#pageWrapper").width();
$("#swipe_body").css("width", wrapperWidth * 4);
$(".page").css("width", wrapperWidth - 40);
myScroll.refresh();
myScroll.scrollToPage(currentPage, 0, 0);
}
page3Scroll = new iScroll("wrapper", {hScrollbar: false, vScrollbar: false, lockDirection: true });
and i copied the iscroll.js from here
when i run the program i get an error as
04-22 18:26:01.892: E/Web Console(2453): TypeError: Result of expression 'that.wrapper' [null] is not an object. at file:///android_asset/www/iscroll.js:57
As,i was facing errors, i tried implementing it with SwipeView.js from [here] (https://github.com/cubiq/SwipeView/blob/master/src/swipeview.js) it goes in to the loop..the page controller is displayed but.the following things are missing
the page controller is been seen vertically and not horizontally
the images set for the swipe view are not visible.
the page moves vertically and not horizontally
i also, find a WARNING as Miss a drag as we are waiting for WebCore's response for touch down.
i tried adding the following code...there is no change
document.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) {
touchEvent.preventDefault();
}
}
Any remedy or solution for this??
I am working on a web app that uses Extjs components, PHP, and MySQL.
I want to correctly display my apps on iPad. Are there special CSS rules or meta tags?
Your question is fairly vague. Here are some tips for developing a web application on iOS:
For fixed width sites, use a <meta> tag to tell mobile Safari what the width of your site should be, similar to:
<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
You can get a list of other <meta> tags supported by mobile Safari here.
Mobile Safari adds new events to the JavaScript DOM in order to support touch and orientation change. Here is the Apple reference to them.
Here's a useful overview of how to make a web app suitable for use on iPad.
Finally, try a Google search.
I haven't gotten a chance to test it yet, but I wrote this script to fire the contextmenu event on an element after a long press of 1.5 seconds or more. Try it out.
UPDATE: finally got a chance to test it, it works as intended. I lowered the delay from 1500 ms to 1200 ms since the delay seemed too long for my taste.
(function() {
var EM = Ext.EventManager,
body = document.body,
activeTouches = {},
onTouchStart = function(e, t) {
var be = e.browserEvent;
Ext.id(t);
if(be.touches.length === 1) {
activeTouches[t.id] = fireContextMenu.defer(1200, null, [e, t]);
} else {
cancelContextMenu(e, t);
}
},
fireContextMenu = function(e, t) {
var touch = e.browserEvent.touches[0];
var me = document.createEvent("MouseEvents");
me.initMouseEvent("contextmenu", true, true, window,
1, // detail
touch.screenX,
touch.screenY,
touch.clientX,
touch.clientY,
false, false, false, false, // key modifiers
2, // button
null // relatedTarget
);
t.dispatchEvent(me);
},
cancelContextMenu = function(e, t) {
clearTimeout(activeTouches[t.id]);
};
if(navigator.userAgent.match(/iPad/i) != null) {
Ext.onReady(function() {
EM.on(body, "touchstart", onTouchStart);
EM.on(body, "touchmove", cancelContextMenu);
EM.on(body, "touchend", cancelContextMenu);
});
}
})();