Clickable tag about pixi-multistyle-text HOT 13 CLOSED

Sorry for the delay - had no internet for a while there :)

I really like this feature idea! I share the same semantic concerns with having the onClick handler be in the tag style, since it's not really a style. It also seems weird to have an event listener be applied without going through the usual methods for doing so.

One option would be to extend the event classes for any events we want to handle and include additional information about the tag that was clicked on. In this case, we might also want to allow the addition of user-defined properties on tags a-la HTML; I could see this being useful for a Pixi approximation of links:

let content = `Click on the links to navigate:
    <link href="home">Home</link>
    <link href="about">About</link>
    <link href="shop">Shop</link>`;

let pmt = new PixiMultistyleText(content, {
    link: {
        color: "#4466ff",
        fontStyle: "italic"
    }
});

pmt.on("click", (event) => {
    console.log(event.targetTag);
    // For a click on the "about" link, { name: "link", properties: { href: "about" } }
});

Thoughts?

from pixi-multistyle-text.

PR Filed: #53. It's not particularly thoroughly-tested, but if you want to use this version now, you can grab a copy of the updated source from branch iss52 of my fork and build it.

from pixi-multistyle-text.

This should generate a built copy (in <working path>/pixi-multistyle-text/dist/pixi-multistyle-test.js) and launch the demo, though requires that you have TypeScript and Browserify installed globally:

git clone https://github.com/bluepichu/pixi-multistyle-text.git
cd pixi-multistyle-text
git checkout iss52
npm install
npm run demo

I can push a prebuilt copy to another branch if this doesn't work for some reason.

from pixi-multistyle-text.

That worked great, thanks a bunch! Couple of things I noticed:

1. The inside quotes for the link element require a double quote - doesn't work for a single quote
2. The property 'targetTag' contains 'undefined'

But the event is generated and the handler is called.

from pixi-multistyle-text.

That was missing an undefined check, but was otherwise correct. Good catch :)

from pixi-multistyle-text.

@bluepichu This sounds like an interesting feature.
We could handle a onClick property inside the tag descriptor style... Unless you have a better idea, since a click event is not a style...?

from pixi-multistyle-text.

@bluepichu

ZOMG, yes! That would be brilliant! I could really use clickable links in my Pixi app so that users can click on the text and go to another link (e.g., page). My Pixi site is at:

http://arronferguson.com/

And the projects section will need clickable links.

from pixi-multistyle-text.

@bluepichu I like your approach!

from pixi-multistyle-text.

I forgot how to download the finished compiled version in JavaScript from branch iss52. You have another link?

from pixi-multistyle-text.

I've fixed the former issue in the above commit, but I'm not sure what (if anything) can or should be done about the latter. Any interaction events that don't overlap any tag will currently result in targetTag being undefined, and that behavior seems consistent with the rest of the implementation to me. That said, if there's a good reason why it shouldn't be undefined in that case - and a good suggestion for what it should be instead - I'm definitely open to changing this behavior.

from pixi-multistyle-text.

@bluepichu

Hi, Matthew, that's great thanks for fixing the former. The latter was because I was looking at the example demo which has the following code:

interaction.on("pointerdown", (e) => {
	if (e.targetTag.name === "link") {
		alert(`You clicked on the link for "${e.targetTag.properties.name}"!`);
	}
});

Or is this not how to get the actual link value that was posted in the name attribute of the link element?

Again thank you so much for your time.

from pixi-multistyle-text.

Ha ha, nice, thanks!

from pixi-multistyle-text.

This has been released as v0.7.0-rc.1, and will be made into a release version once we can get more thorough testing done on it. Please let us know if you find any more bugs. Thanks!

from pixi-multistyle-text.