Fancy Mac-Like HTML Prompts Library

Macro Library
1

Here's a library with three Custom HTML prompts with some styling and JS to make them feel Mac-like. There are three in here - one for a simple alert, one for selecting multiple checkboxes from a "pick list," and another to select an item from a list with auto-complete (like a combo-box).

You'll need to put the html-elements folder in ~/Library/Application Support/Keyboard Maestro/ so that the dialogs can access them. If you'd like to put them somewhere else, just update the variable in macros accordingly.

Download from blog.nik.me
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

UPDATE: 2016-06-21 -- See updated macro below:

I've updated the three sample prompts in this file to use the appropriate attribute. The markup to include it is as follows:

<script> document.write('<base href="' + window.KeyboardMaestro.GetVariable('htmlAssetsFolder') + '">'); </script>

Fancy HTML Prompts.kmmacros (8.6 KB)

2 Likes
2

Nik, thanks for sharing this. I can't wait to try the auto-complete.

Unfortunately your instructions.txt file is empty. Can you please post here?
Thanks.

3

Edited above.

4

@iNik, thanks for sharing.

Unfortunately, it looks like your HTML code does NOT use the KM Variable htmlAssetsFolder. The href link is hard coded in the HTML code for the prompt:

<html>
<head>
<base href="/Users/nftbockhorst/Library/Application%20Support/Keyboard%20Maestro/html-elements/">
<title>Dialog Box</title>
  <script src="js/jquery.js"></script>
  <script src="js/jquery-ui.js"></script>
 <link rel="stylesheet" href="css/jqueryui.css">

  <link rel="stylesheet" href="css/macdialog.css">
<!-- your other code here -->
</head>
</html>
5

Looks like I only updated it for one of the prompts. Perfection, as always, is unattainable. :crying_cat_face:

6

You could just post the relevant HTML/Javascript code here, and then users could do their own updates.

7

[quote=“JMichaelTX, post:4, topic:3361”]
… use the KM Variable htmlAssetsFolder.[/quote]

I stumbled across this while looking for something else. What is this “htmlAssetsFolder” KM Variable? I did a couple of searches, and I didn’t find any references to this. Can you tell me more about it?

8

Dan, it is just an ordinary KM Variable that Nik used/referenced, but unfortunately did not carry through with.

As I said above:

9

Dang! I was hoping there was such a thing.

I was going to ask about whether there was a way we could standardize where HTML assets should go, and how to get them there, so sharing a macro with HTML stuff in it would be easier.

10

I guess you forgot about this:

where I suggested

11

Well, yes and no.

So, if we upload a macro that has HTML stuff in it, we have to zip the html stuff and tell people to unzip the files and put them somewhere specific?

I was kind of hoping we could come up with a more, I don’t know, easier way to do this. Perhaps I’m dreaming.

But that does give me an idea…

12

May I suggest if we are going to have any futher discussion about organizing KM related data, then let's do it at:

13

Hey Dan, some of the prompt examples use that variable to set a base url. One of them doesn’t. Just an oversight on my part. Look at the others and if you can’t find how it’s used within the html head, let me know and I’ll paste up a snippet.

1 Like
14

I don't think that variable is used in any of the examples I have. Not sure if I modified them or not - I don't think so - I re-downloaded your library and inspected it and I don't see any actual references to that variable.

So I'd love to know how you used it. Thanks.

15

@iNik

What do I have to change to the keyboard maestro script if I want a @start(YYYY-MM-DD Weekday) format input, say @start(2016-06-27 Mon) or @start(2016-07-10 Sun)

Please enlighten on this.

16

Could you supply a little more information about what you’re trying to do? The macros in this library don’t have any date fields, as best as I can tell.

17

I've updated the three sample prompts in this file to use the appropriate attribute. The markup to include it is as follows:

<script> document.write('<base href="' + window.KeyboardMaestro.GetVariable('htmlAssetsFolder') + '">'); </script>

Fancy HTML Prompts.kmmacros (8.6 KB)

18

“document.write”. Of course. Sometimes I make things harder than they need to be. :slight_smile:

1 Like
19

Hi Dan

Thanks for the quick reply.

What I want to achieve is really simple. As shown in picture below. My
habit of tagging todo with @due is to not only add the date(YYYY-MM-DD) but
also the weekday(Mon, Tue, Wed, Thu… etc.) of that date, so I could
easily see which weekday a certain todo is due, this practice gives me more
information on the rearranging my todos yet to do at a later time.
[image: pasted2]
As shown above, the first two todos are tagged manually by my according to
my preferred tagging habit, while when tagging the 3rd todo, I used the
keyboard maestro based date picker macro which is great time and hassle
saver, but it does NOT add weekday of the date picked, so I still have to
insert the weekday(Tue in this case) myself which slows me down.

So I wondered if the js script part of the date picker macro could be
tweaked to add some code to automatically add both date and weekday of the
date picked into the @start or @due tag, so I do not have to do it each
time manually myself.

Hope this described my demand clearly. And look forward to your kind
assistance.

20

re previous post，it is posted via gmail but the embedded picture is lost somehow. So here I would like to repost with picture this time as follows.

What I want to achieve is really simple. As shown in picture below. My habit of tagging todo with @due is to not only add the date(YYYY-MM-DD) but also the weekday(Mon, Tue, Wed, Thu... etc.) of that date, so I could easily see which weekday a certain todo is due, this practice gives me more information on the rearranging my todos yet to do at a later time.

Screen Shot 2016-06-22 at 8.54.28 AM.png892Ă—338 24.4 KB

As shown above, the first two todos are tagged manually by my according to my preferred tagging habit, while when tagging the 3rd todo, I used the keyboard maestro based date picker macro which is great time and hassle saver, but it does NOT add weekday of the date picked, so I still have to insert the weekday(Tue in this case) myself which slows me down.

So I wondered if the js script part of the date picker macro could be tweaked to add some code to automatically add both date and weekday of the date picked into the @start or @due tag, so I do not have to do it each time manually myself.

Hope this described my demand clearly. And look forward to your kind assistance.