Filter objects using Tagsort

Using JavaScript with Hype
1

I’ve a pull down with 6 check boxes in three categories. They do working as a multiple filter on 25 containers on my canvas.
On click these containers (each is a symbol) fade in and out based on what was choosen.
Doing this for only one category was easy via separate timelines. But now they should be working as multiple filter.
Since there where so many cases i was looking for a better solution using javascript or jquery.
I’ve found tagsort and it looks great. But how hard would it be to control my symbols with that script?

see here: http://wch.io/projects/tagsort/

This plugin is using tags to categorized div-containers. is there a way to give symbols this information?
Any ideas?

2

I imagine it would be pretty easy to use this script with Hype. You can attach classes to elements from the Identity inspector. They use a custom attribute; you could either put these items in the inner html of an element, or perhaps more easier write code that attaches this. You’d run it on scene load; it would look something like:

hypeDocument.getElementById("item-to-tag-identifier").setAttribute("data-item-tags", "tag1,tag3,tag4");

On a side note, a long time ago I wrote a similar interface for my japan trip. The tags moved around so it was easy to filter and such; check it out:

http://jmfd.me/Trips/Japan2009/Album.html

(sadly it isn’t a general purpose library)

3

I have been playing with this for the last hour. :scream:

tagSort.hype.zip (166.2 KB)

Here is what I got so far… my main issue is reseting the symbols and selection on a scene load.

And it has been a long day so I am not sure I have you intentions right ?

But any way @jonathan idea of adding the attribute may be a better way. Because you could remove the attribute when needed.

4

I’m surprised there’s not some sort of general reset function or button that could be called. Was there a reason you wanted to use persistent symbols instead of regular divs?

5

Regular divs works fine and was the first thing I did but the symbols are only because @Olof mentioned symbols so I was trying a worst case scenario. :smile:

6

I worked out a simple reset.

If for any other reason you may need to reset the tag selection programmatically .

You can simulate clicking them.

For the case of using persistent symbols ( and I am not sure its a good idea to use those with this, or makes sense)

You can add the clicking function to the on unload scene.

The reset code is :smile:

var tagsortActive = $('span.tagsort-active')
	
	$.each( tagsortActive, function( index, item ){
     
      
   $(tagsortActive).click();
  
 			});

tagSort.hypetemplate.zip (167.5 KB)

1 Like
7

Ha, that’s a clever technique!

1 Like
8

yer,

it’s one of those ones that is staring you in the face and smirking at you two hours later when you finally see it.

1 Like
9

dear mark and dear jonathan,

i used symbols because of a more or less complex flip action. so the reason was just to save time when i build the whole thing together.

the solution you came up was very helpful. i was surprised how productive you guys was over the weekend. love it.

many thanks

Olof

1 Like
10

Cheers Mate,

Did you see

Filter Elements

I have a reset option that I will post later…

11

Yeah, i saw it and had a little issue first using it.
i send my example a little later…

12

Ok. Hopefully I can sort it

13

Hey, sorry to reply so late. I wrote that plugin and if it might still be helpful, I just added in a reset option that allows you to specify any element that will reset all the tags and redisplay elements when clicked.

Probably not still relevant, but thought it was worth mentioning.

1 Like