I'm working on a Magento extension, all based on JavaScript and I need to integrate a widget from WordPress.
I have the event.js from view /widgets:
/* links events */
var eventLinks = function() {
var $loginBtn = my.html.find('.att-login'),
$signupBtn = my.html.find('.att-signup');
/* login btn event */
$loginBtn.on('click', function() {
BYND.widgets.log('[INFO]', '[LANDING PAGE] - Login button clicked');
BYND.Auth.Login(function() {
window.location.href = 'collections.html?page=my_collections';
});
return false;
});
/* signup btn event */
$signupBtn.on('click', function() {
BYND.widgets.log('[INFO]', '[LANDING PAGE] - Signup button clicked');
BYND.Auth.Signup(function() {
window.location.href = 'collections.html?page=my_collections';
});
return false;
});
},
And I need to make some callbacks for login/signup functions so my login box (already made in WP) pops up.
Any help?
I suppose function you are looking for (callback for signup) is here:
BYND.Auth.Signup(function() {
// replace that line with your code
window.location.href = 'collections.html?page=my_collections';
});
If you would like to show that page as a popup you could use another window, or iframe...
Related
I'm using oAuth to login or sign up using gmail account and decided to use popup window to do it. I found a snippet here which describes the process. But I can't understand how I'll be able to get the values or code if the user logged in with his email.
I can open the modal by this:
//Authorization popup window code
$.oauthpopup = function(options)
{
options.windowName = options.windowName || 'ConnectWithOAuth'; // should not include space for IE
options.windowOptions = options.windowOptions || 'location=0,status=0,width=800,height=400';
options.callback = options.callback || function(){ window.location.reload(); };
var that = this;
log(options.path);
that._oauthWindow = window.open(options.path, options.windowName, options.windowOptions);
that._oauthInterval = window.setInterval(function(){
if (that._oauthWindow.closed) {
window.clearInterval(that._oauthInterval);
options.callback();
}
}, 1000);
};
And use that as follows:
$.oauthpopup({
path: urltoopen,
callback: function()
{
log('callback');
//do callback stuff
}
});
But now, I'm wondering how to auto close the popup and pass parameters from popup window to the main window.
Beforeinstallprompt triggers on every load.
I have used the code here: https://developers.google.com/web/fundamentals/app-install-banners/
I am not using the The mini-info bar which i have dissabled by calling e.preventDefault();
The problem is that the showAddToHomeScreen(); is called on every load if the user does not click addToHomeScreen.
I want the showAddToHomeScreen(); function to be called only every month or so by storing information about the last "canceled" click in sessions or something similar. Isn't google suppose to do this on it's own?
This i found on the following link:
https://developers.google.com/web/updates/2018/06/a2hs-updates
You can only call prompt() on the deferred event once, if the user clicks cancel on the dialog, you'll need to wait until the beforeinstallprompt event is fired on the next page navigation. Unlike traditional permission requests, clicking cancel will not block future calls to prompt() because it call must be called within a user gesture.
window.addEventListener('beforeinstallprompt', function (e) {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
showAddToHomeScreen();
});
function showAddToHomeScreen() {
var prompt = document.querySelector(".a2hs-prompt");
prompt.style.display = "flex";
var open = document.querySelector(".a2hsBtn");
open.addEventListener("click", addToHomeScreen);
var close = document.querySelector(".a2hsBtn-close");
close.addEventListener("click", function() {
prompt.style.display = "none";
});
}
function addToHomeScreen() {
var prompt = document.querySelector(".a2hs-prompt");
// hide our user interface that shows our A2HS button
prompt.style.display = 'none';
if (deferredPrompt) {
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then(
function (choiceResult) {
if (choiceResult.outcome === 'accepted') {
show_ad2hs_success_message();
}
deferredPrompt = null;
});
}
}
You have to define your own session and add expire date. This is simple with ajax. This is how i did:
Javascript:
$(document).ready(function() {
$.ajax({
url: '/update_session_addtohomescreen',
success: function (session_expired) {
if(session_expired=='True'){
showAddToHomeScreen();
}
},
error: function () {
alert("it didn't work");
}
});
});
This is wrapping the showAddToHomeScreen(); function
View
#csrf_exempt
def update_session_addtohomescreen(request):
if request.is_ajax():
number_of_days_till_expire = 1
now_in_secs = time.time()
if not 'last_session_coockie' in request.session or now_in_secs > request.session['last_session_coockie']+60:#number_of_days_till_expire*86400:
session_expired = True
request.session['last_session_coockie'] = now_in_secs
else:
session_expired = False
return HttpResponse(session_expired)
return None
You should though include csrf token in your request and also add the url to urls.py
I am using IntelXDK to develop an android app in HTML5, CSS3 and JavaScript, the app is a one page app which works fine while switching views with HTML buttons but when pressing the back button on a mobile device the app exits, however I want to capture this event and display the home screen.
The event works in a simulator but not on a physical device
This is what I have done to capture the backbutton click event but the app just closes:
$(document).ready(function () {
var animTime = 300,
clickPolice = false;
$(document).on('click', '.acc-btn', function () {
if (!clickPolice) {
clickPolice = true;
var currIndex = $(this).index('.acc-btn');
$('.acc-content').stop().animate({ height: 0 }, animTime);
$('.acc-content').eq(currIndex).stop().animate({ height: 108 }, animTime);
setTimeout(function () { clickPolice = false; }, animTime);
}
});
//Back button event
document.addEventListener('backbutton', function () {
if ($('#front').hasClass('hidden')) {
ShowPage('front');
return false;
}
else {
navigator.app.exitApp();
}
}, false);
});
//Show page function etc.....
I know the ShowPage function works fine as it is used elsewhere
Any help is appreciated
Check out the following link for Android - https://software.intel.com/en-us/node/493108
You have to capture the back button and add a virtual page to prevent the app from exiting
document.addEventListener("intel.xdk.device.hardware.back", function() {
//continue to grab the back button
intel.xdk.device.addVirtualPage();
}, false);
Try to remove the boolean parameter from your addEventListener so
//Back button event
document.addEventListener('backbutton', function () {
if ($('#front').hasClass('hidden')) {
ShowPage('front');
return false;
}
else {
navigator.app.exitApp();
}
});
I want that when a user clicks on any external link (identified by either particular id or class) on my site then he should get a popup with a counter of 10 seconds, after 10 seconds the popup should close and the user should be able to access the external URL. How can this be done? I'm able to show a warning like below but I don't know how to add timeout to it, also this is a confirm box, not a popup where I can add some div and more stuff for user to see until the counter stops.
$(document).ready(function(){
var root = new RegExp(location.host);
$('a').each(function(){
if(root.test($(this).attr('href'))){
$(this).addClass('local');
}
else{
// a link that does not contain the current host
var url = $(this).attr('href');
if(url.length > 1)
{
$(this).addClass('external');
}
}
});
$('a.external').live('click', function(e){
e.preventDefault();
var answer = confirm("You are about to leave the website and view the content of an external website. We cannot be held responsible for the content of external websites.");
if (answer){
window.location = $(this).attr('href');
}
});
});
PS: Is there any free plugin for this?
I've put together a little demo to help you out. First thing to be aware of is your going to need to make use of the setTimeout function in JavaScript. Secondly, the confirmation boxes and alert windows will not give you the flexibility you need. So here's my HTML first I show a simple link and then created a popup div that will be hidden from the users view.
<a href='http://www.google.com'>Google</a>
<div id='popUp' style='display:none; border:1px solid black;'>
<span>You will be redirected in</span>
<span class='counter'>10</span>
<span>Seconds</span>
<button class='cancel'>Cancel</button>
</div>
Next I created an object that controls how the popup is displayed, and related events are handled within your popup. This mostly is done to keep my popup code in one place and all events centrally located within the object.
$('a').live('click', function(e){
e.preventDefault();
popUp.start(this);
});
$('.cancel').click(function()
{
popUp.cancel();
});
var popUp = (function()
{
var count = 10; //number of seconds to pause
var cancelled = false;
var start = function(caller)
{
$('#popUp').show();
timer(caller);
};
var timer = function(caller)
{
if(cancelled != true)
{
if(count == 0)
{
finished(caller);
}
else
{
count--;
$('.counter').html(count);
setTimeout(function()
{
timer(caller);
}, 1000);
}
}
};
var cancel = function()
{
cancelled = true;
$('#popUp').hide();
}
var finished = function(caller)
{
alert('Open window to ' + caller.href);
};
return {
start : start,
cancel: cancel
};
}());
If you run, you will see the popup is displayed and the countdown is properly counting down. There's still some tweaks of course that it needs, but you should be able to see the overall idea of whats being accomplished. Hope it helps!
JS Fiddle Sample: http://jsfiddle.net/u39cV/
You cannot using a confirm native dialog box as this kind of dialog, as alert(), is blocking all script execution. You have to use a cutomized dialog box non-blocking.
You can use for example: jquery UI dialog
Even this has modal option, this is not UI blocking.
Consdier using the javascript setTimeout function to execute an action after a given delay
if (answer){
setTimeOut(function(){
//action executed after the delay
window.location = $(this).attr('href');
}, 10000); //delay in ms
}
I have a site, now what I want is when user switch to some external site, then an Ad should be popped up, and also when user close the browser window, the Ad should get popup, I have used onunload, but it shows the message on clicking every link, and also I used on beforeunload, it does almost everything, but it do the same as onunload...
Please anyone have some idea how should I achieve this?
This doesn't prevent popup appearing on page refresh, but does this job as requested:
<script>
var isLinkClicked = false;
// Either plain JS solution:
var links = document.getElementsByTagName('a');
var l=links.length;
while (l--) {
links[l].addEventListener("click", function() {
isLinkClicked = true;
}, false);
}
// Or jQuery solution:
$("a").live("click", function() {
isLinkClicked = true;
});
// And then Unload event listener:
window.addEventListener("unload", function(evt) {
if (isLinkClicked) {
isLinkClicked = false;
return false;
}
// here comes the rest of the code
}, false);
</script>