Alap Demo

Daniel Smith - JavaJoint@gmail.com
21 May 2021

Hello! This is a quick demo page for alap. Alap enables attaching menus to links. It is traditional to point at links, one at a time. I can say "Here is the Github Repo for Alap, and I wrote an article on dev.to: alap - Menus For Links"

With alap, I can say (click on the next link...) "Here is where to find out more".

We can say "here are some of my favorite YouTube creators"

Alap gives you a flexible, powerful way to attach menus to HTML anchors - and more, as I'll show you.

I like cars, beer, and cities. There is so much to say about any of those topics, but where to put all of the links for them? ...

Imagine I have a chunk of data (a JSON file that gets converted to a JavaScript object) about links. Each bit of it contains:

Here is a an example of a couple of entries:

             
vwbug: {
  label: "VW Bug",
  url: "http://en.wikipedia.org/wiki/Volkswagen_Beetle",
  tags: ["vw", "car", "germany"]
},

sierranevada: {
  label: "Sierra Nevada",
  url: "http://www.sierranevada.com/",
  tags: ["beer", "ale"]
}
            
          

another example: here are some things you should check out in San Francisco

Did I just say San Francisco? ... I can attach a menu to this image...

We can make menus that are images, as well

So far, so good. We can build up a list of links by using the ids of properties that are available in our JSON configuration object. I use a "data-alap-linkitems" attribute to store the references for what I want from the JSON data:

<a id="cars1" class="alap" data-alap-linkitems="bmwe36, vwbug">cars</a>

To be clear, one can think of the properties in the JSON object as IDs for each possible target.

Tags, and combining them

Referring to items is a good start. If you know about CSS, you are familiar with classes. Same idea here: let's talk about Tags.

Here is a basic tag: "NYC". It simply gathers all of the links that have a tag that matches "nyc". It looks like this:

<a id="nyctag1" class="alap" data-alap-linkitems=".nyc">nyc</a>

Ok, so we can refer to a few of them, and build up quite a list. Let's try Sydney, NYC, and London. (that element is "#nycsydlon")

What we know so far...

Expressions with Tags: And, OR, and Without

If we stopped with the combinations of using item ids and tags, that would be a lot of functionality. It gets better though, with simple expressions that let us do AND, OR, and WITHOUT operations.

As you can guess, building up groups of tags can yield some pretty large lists. We really want more control. Let's go for that!

Expression Recap

You can say:

Alap will look through these expressions from left to right. So you could say something like "Show me the links for all of the bridges you know of, but toss out the ones from NYC and London":
".bridges - .nyc - .london"


Photo Credits

Photo by Andreas Selter on Unsplash
Photo by Hannes Richter on Unsplash
Photo by Joshua Hoehne on Unsplash
Photo by Ross Joyner on Unsplash