PIXIJS transition from one application to another - pixi.js

I can't understand in any way.
I need my old application to be cleared.
That is, when I clicked and followed the ajax, some textures that have the same name remain the previous ones, as well as all the properties and others from the previous loading.
if (Object.keys(loader.resources).length) {
// for (var texture in PIXI.utils.TextureCache) {
// var tmp = PIXI.Texture.removeFromCache(texture);
// tmp.destroy(true);
// }
// for (var texture in PIXI.utils.BaseTextureCache) {
// PIXI.utils.BaseTextureCache[texture].destroy(true);
// }
PIXI.utils.BaseTextureCache = PIXI.utils.TextureCache = loader.resources = {};
loader.reset();
app.destroy({
children: true,
texture: true,
baseTexture: true
});
}
Will it be possible to complete the ajax transition application in order to launch a new one with new textures of the same name?
In the download, I tried to add "?Number" to the image address:
let add = function (arr) {
while (!loader.loading) {
for (var i in arr) {
loader.add(i, arr[i] + '?' + new Date().getTime());
}
break;
}
};
But still nothing comes out.
I make the transition through:
$.get(href, function (data) {
//code
});
Everything loads and works fine, except for the pictures.
They hang, and after the transitions, they do not change, but only everything mixes and sometimes we observe it from the previous ones.
Of course, after reloading the page at the current address, everything works as it should, it doesn’t work only on ajax, for some reason the cache is not discarded.

The issue is resolved, everything works, I just forgot to update the variable with resources.
Due to the fact that at the first initialization:
let resource = PIXI.loader.resources;
Which I had in the global area.
Due to the fact that I did not update it, I could not change the textures.
Now, after all the removal and new filling, I substitute again:
resource = PIXI.loader.resources;
And everything began to work as it should.

Related

RemoveHandler in OpenSeadragon

I have problems to remove a handler from the viewer.
viewer.addHandler('viewport-change', function() {
// do stuff works
});
viewer.addHandler('zoom', function() {
if (viewer.viewport.getZoom() > threshold) {
viewer.removeHandler('viewport-change', function() {
console.log("removed");
});
console.log("Zoom:" + viewer.viewport.getZoom());
}
});
I can see the output with the zoom factor, but I never saw the "removed" output.
Also just adding and removing the "viewport-change"-handler did not worked. removeAllHandlers seems to work, but I fail with removing only one handler.
What I really try to do is something like a swipe effect. If the image is not zoomed in and the left edge hits the viewer border i want to show next image. Maybe there is a better way to do that.
Thanks in advance
In order to make removeHandler work, it needs to be the exact same function that you used with addHandler, like so:
var viewportChangeHandler = function() {
// do stuff works
};
viewer.addHandler('viewport-change', viewportChangeHandler);
viewer.addHandler('zoom', function() {
if (viewer.viewport.getZoom() > threshold) {
viewer.removeHandler('viewport-change', viewportChangeHandler);
console.log("Zoom:" + viewer.viewport.getZoom());
}
});
That said, if all you want to do is detect swipes, just a handler on canvas-drag (plus some additional logic of your own writing) should be sufficient.

instagram embed doesn't work at first when dynamically appending into a page, but then works after refresh

Go to:
http://staging2.ju.blog.kylebaker.io/
click hamburger
click 'timeline'
instagram embeds show only the gray logo and don't load fully. embed.js doesn't seem to load when watching in the network tab.
Now, click refresh.
Now, everything loads. embed.js is there.
:/
You can notice that an older version on http://staging.ju.blog.kylebaker.io works fine--this seems to obviously be because it's an entirely new page load (which I want to avoid).
Some potentially relevant code this theme relies on to load this page "into" the page:
L: function(url, f, err) {
if (url == xhrUrl) {
return false;
}
xhrUrl = url;
if (xhr) {
xhr.abort();
}
xhr = $.ajax({
type: 'GET',
url: url,
timeout: 10000,
success: function(data) {
f(data);
xhrUrl = '';
},
error: function(a, b, c) {
if (b == 'abort') {
err && err()
} else {
window.location.href = url;
}
xhrUrl = '';
}
});
},
HS: function(tag, flag) {
var id = tag.data('id') || 0,
url = tag.attr('href'),
title = tag.attr('title') + " - " + $("#config-title").text();
if (!$('#preview').length || !(window.history && history.pushState)) location.href = url;
Diaspora.loading()
var state = {d: id, t: title, u: url};
Diaspora.L(url, function(data) {
if (!$(data).filter('#single').length) {
location.href = url;
return
}
switch (flag) {
case 'push':
history.pushState(state, title, url)
break;
case 'replace':
history.replaceState(state, title, url)
break;
}
document.title = title;
$('#preview').html($(data).filter('#single'))
switch (flag) {
case 'push':
Diaspora.preview()
break;
case 'replace':
window.scrollTo(0, 0)
Diaspora.loaded()
break;
}
setTimeout(function() {
Diaspora.player();
$('#top').show();
comment = $("#gitalk-container");
if (comment.data('ae') == true){
comment.click();
}
}, 0)
})
},
preview: function() {
// preview toggle
$("#preview").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
var previewVisible = $('#preview').hasClass('show');
if (!!previewVisible) {
$('#container').hide();
}else{
$('#container').show();
}
Diaspora.loaded();
});
setTimeout(function() {
$('#preview').addClass('show');
$('#container').data('scroll', window.scrollY);
setTimeout(function() {
$('#preview').css({
'position': 'static',
'overflow-y': 'auto'
});
}, 500);
}, 0);
},
(for full file, see: https://github.com/Fechin/hexo-theme-diaspora/blob/master/source/js/diaspora.js)
I see the script tag loaded in the DOM; why isn't it loading? Feels like it must be something simple I'm missing... It's 4am and I've been working non-stop.
(please ignore the dust, this is a small side-project work-in-progress with many small things broken.)
Things I've tried:
adding the code to load embed.js manually in the page. (no change--I then see embed.js is loaded, but it doesn't have an impact on the result)
editing the URL to include "http:" before the "//insta..." url (as
recommended in some answers elsewhere for some people) (no change)
window.instgrm.Embeds.process() it seems the instgrm object no longer exists. (no change)
Seems to be related to however this is being injected via jquery, but I'm a little confused as to specifics, figured I'd ask the world and make a space for the answer to exist for the next poor soul.
Note that because of what I've tried, the answers here do not seem to be helpful or relevant, though maybe it's just me blanking at 4am.
The problem was, indeed, the things I had already addressed, I just missed some rendering details of getting changes to stick. jQuery executing and stripping the script tags seems to have been the source the problem, and calling window.instgrm.Embeds.process() at the appropriate time, after making sure that the embeds.js script was requested in the right place/at the right time, was enough to fix the issue seen above. Part of the confusion was using hexo, which uses ejs in node, which doesn't really seem to allow client-executing inline JS in ejs template files themselves, silently.

Aurelia popup when refreshing the page not working

As we know, we can put a pop up asking if we are sure about refreshing the page when we click the refresh button on the browser. Usually it is done by adding an event listener on onbeforeunload.
However, in my Aurelia application, I try to do that but it's not working.
let's say this is my app.js ( root ModelView )
export class App {
this.refreshClicked = () =>{ return "Are you sure you want to exit?"; };
attached(){
window.addEventListener("onbeforeunload", this.refreshClicked);
}
But it is not working, however, if we replace the return statement to console.log("clicked") I can see that the listener works without any problem.
Any help?
First of all, if you are adding event handler through window.addEventListener, you don't use on prefix in that case. So it's either:
attached() {
window.addEventListener('beforeunload', this.refreshClicked);
}
or an older, not recommended, syntax:
attached() {
window.onbeforeunload(this.refreshClicked);
}
Second, you'll need to set the returnValue property on Event object and also return the same string value to support more browsers. To learn more about this event (and various browser quirks), check out its MDN page.
Your refreshClicked should look like this:
this.refreshClicked = e => {
const confirmation = 'Are you sure you want to exit?';
e.returnValue = confirmation;
return confirmation;
};

Intern and Leadfoot conditional wait until

If there a way to perform .click() after the element become visible.
My function chain is built like that:
this.remote.findByXpath("//div[#data-index='blockContainer']/button[text()='Create new']").then(function(element) {
return element.click().end();
})
Sometimes I got error says 'the element is not visible', is it possible to perform click after the element displayed in browser? I know Leadfoot supplies pollUntil to do similar thing but I don't want to execute xpath at browser side, instead of I want to do until at running server side.
To solve my problem I tried following two ways but doesn't help:
I tried to pass Leadfoot Element to browser side script and check if it is visible. But it seems browser side code doesn't recognize leadfoot/element object.
command.find(...).then(function(element) {
return command.then(pollUntil(
function(element) {
if (element.style.display == 'none') return null;
return true;
}, [element], 60000, 500)).then(function(el){
});
}).click().end();
Also tried to customize pollUntil myself but doesn't work as well
function pollVisible(element, timeout) {
var dfd = new Deferred();
var endTime = Number(new Date()) + timeout;
(function poll() {
element.isDisplayed().then(function (displayed) {
if (displayed) {
dfd.resolve();
}
else if (Number(new Date()) < endTime) {
setTimeout(poll, 500);
}
else {
var error = new Error('timed out; final url is ' + url);
dfd.reject(error);
}
});
})();
return dfd.promise;
}
You've probably had an answer to this by now but here's my solution to this just in case you're still unsure or if anyone else comes across this issue.
I'm not sure why you are polling until an element is visible here. What I would do is set the find timeout of your leadfoot/Session as follows:
this.remote.setFindTimeout(60000)
Then when you invoke the this.remote.findByXPath method, it will automatically search for your element for a maximum of 1 minute (in the case of my above example). If it finds the element within that time, it will then proceed to the next step in your code. If it doesn't find the element within that time, the test case will time out.
You can then simplify your code to (for example):
this.remote
.setFindTimeout(60000)
.findByXpath("//div[#data-index='blockContainer']/button[text()='Create new']")
.click()
.end();
Of course there's no need to set the find timeout every time you wish to find an element in the UI. You can set it once somewhere more appropriate (ie. at the beginning of your test) and it will remain in place for the duration of your test. I'm just doing it here as a means of documenting a full example for you.
Hope this helps!

Dynamically update stored chrome extension config/global data, not in prefs?

I'd like my extension to have stored "config" or "meta/global" Constant data, and have the extension update this config data daily from my web server. Things like class names, patterns to match, identifiers, etc.
I can store this data in prefs, but they are async and won't be available when the extension starts up. I need them to be available immediately so the extension can act on them.
Right now I store this data in my extension source itself, so it cannot be updated. But it is available immediately, not async.
Is there a better fix that would allow my extension to update its internal data?
In extensions, you can still have localStorage access in non-content scripts, which is synchonous.
However, what's wrong with async chrome.storage? It's not going to take a long time to read, you just need to restructure your program to wait for this quite fast initialization.
If you do not want massive restructuring, you could make a synchronous "cache" for it in the script.
// Old:
var settings = { /* hard-coded values*/ }
doSomething(settings[key]);
settings[key] = value;
// New:
function updateCache(changes, area){
if(area != "local") return;
for(key in changes){
settings[key] = changes[key].newValue;
}
}
function setOption(key, value){
settings[key] = value; // Synchronous cache update
var update = {};
update[key] = value;
chrome.storage.local.set(update);
}
var settings = { /* set defaults here */ };
chrome.storage.local.get(settings, function(data){
for(key in data) settings[key] = data[key];
chrome.storage.onChanged(updateCache);
/* Old top level code here */
});
doSomething(settings[key]); // Still synchronous
setOption(key, value);

Resources