Modifying Spotlight Search Prompt

Questions & Suggestions
1

Continuing the discussion from MACRO: Spotlight Search Prompt:

@DanThomas, let me say again, this is a fantastic macro! :thumbsup:
And, you have gone the extra mile, no, make that 100 miles, to make it easy to customize.

So, I have easily made my own macro that uses Spotlight Search Prompt, and it works very well.
However, I'd like to improve the readability of the data in the prompt.

Is it possible to use a formatted table layout?

  • If so, how hard would it be?
  • Can you give me any pointers to get started?

###Here's what I have now:

###Here is what I'd like to have:

I'm sure you can see how much easier it is to read/scan my custom mock-up.
It really makes a huge difference when I show more choices, like 25.

Doable?

2

Not re[quote=“JMichaelTX, post:1, topic:6184”]
Doable?
[/quote]

Probably not, at least for my [limited] skillset. The problem is that I’m using an HTML “select” element, and “select” doesn’t support tables. The reason I chose to use a “select” element is because it supports the concept of a selected item. Tables don’t have that.

Someone who is more proficient with HTML might know how to do it, but not me.

3

OK, thanks for the quick reply. Not what wanted to hear, but at least I know how to proceed.

So, instead of a real table, I'm thinking about using a fixed-width font with vertical bars as cell boundaries. In fact, this makes it more readable:

Pasted image727×171 25.2 KB

How do I make the HTML Select element font name and size be a "sspOption" ?

It doesn't work with the current font:

Also, it does like the use of a vertical bar ("|"). It treats it as a CR.

Thanks for your help.

4

Honestly, I don’t have a lot of time to spend on it right now.

If memory serves, there’s a .pkg file, right? Inside the package is a file called “Spotlight Search Prompt.html”, and this is what you’d need to change. Back everything up, of course.

Try adding a font specification to the style for “#divPickList”, and see if you get lucky and that works.

As for the vertical bars, I probably use that as a delimiter. Look around and see if there’s another character that looks similar to that, and see if that works.

5

OK, thanks. That worked.

However, when I replace spaces with "%nbsp;" so that the HTML does not remove them, the prompt actually shows the "%nbsp;".
How do I fix this?

Example:

6

Did you try regular spaces?

7

Of course. That was my starting point.
But you do know that standard HTML will remove all contiguous spaces, except 1, right?

I'm guessing that you are HTML encoding the source text somewhere.

###Regular Spaces

9

@DanThomas,

OK, nevermind all of the above questions. I have a workable solution for now:

Pasted image700×353 28.6 KB

To make this work, I had to:

  • Replace all spaces with OPT-SPACE
  • Use the "DIVIDES" character "∣", Unicode U+2223, instead of the Vertical bar.

This did require a change to the HTML file, which affects ALL Spotlight Searches, so when you have a chance, if you could let me know how to set the font-family and font-size as an option in "sspOptions" that would be great.

Here's the change I made in the HTML file:

// Starting at Line #55
      #divPickList {
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
        font-family: "Consolas";  // ADD by JMichaelTX
        font-size: 12px;          // ADD by JMichaelTX
      }

Thanks again for such a great tool!
I am totally amazed at all of the complex code in the HTML file.


Oh, one more question when you have time to get to it.

For each of my handlers, I ofen have detailed comments at the top like below, which I would like to optionally display from the Spotlight Prompt (probably as a popup) when a "More Info" button is pressed.

###Example Comments
(this is one of the larger set of comments)

```applescript
  (*
  VER:   2.0    LAST UPDATE:   2016-06-13
  
    • This version moves the repeat loop inside of the if-test for filter type

  RETURNS:  List filtered by the requested pMatchAction
  
  PARAMETERS:
    • pList      : Source List of text items
    • pMatch      : Can be String, or List of two text items
                • Use String to search List for all pMatchActions, except:
                • Use List of {"MatchStr", "ReplaceStr"} for "replace" action
                
    • pMatchAction   : Action to perform on found items
      Must be one of these strings:
      • starts with      -- returns only items that start with pMatch
      • ends with        -- returns only items that end with pMatch
      • contains        -- returns only items that contain pMatch
      • replace          -- returns all items, but replace items that 
                      exactly match item 1 of pMatch with item 2 of pMatch
      • remove          -- returns only items that do not match pMatch
      • remove dups      -- returns all items, except dups of item 
                      that matches pMatch
      • remove all dups    -- returns all items, except removes dups of all items 
                      regardless of match.


  AUTHOR:    JMichaelTX (with help from friends at ASUL)

  Since lists don't support "whose" or "where" clauses,
  have to roll my own.
  –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  *)

```

If you can help me make this work, I'll really owe you big-time!
You don't have to code the whole thing, just point me in the right direction, and show me where to make the hooks into your code.
10

Um, sure, yeah, I knew that. :rolling_eyes:

This did require a change to the HTML file, which affects ALL Spotlight Searches, so when you have a chance, if you could let me know how to set the font-family and font-size as an option in "sspOptions" that would be great.

Not a simple change, but it can certainly be done. Pick one of the existing options, search for where it's referenced, and duplicate it for the new option.

As for actually changing the font, instead of adding the font info to "#devPickList", make a separate class for "fixed font". Then you can duplicate the code for Node.prototype.toggleVisibility, for example, to toggle your new class.

Regarding the Headers, look at example macro #7. Hopefully that will get you going.

I'm impressed with your ingenuity and willingness to get your hands dirty. :slight_smile:

11

Or, you could take the easy way out:

  1. Keep two .html files in the .pkg, one with a fixed font, and one without.
  2. Duplicate the Spotlight macro, and change it to open use the second .html file instead of the first.

I think this is probably much easier.

12

@JMichaelTX - No promises here, but I got to thinking. With everything I’ve learned over the past few months, I think I can make a version of the Spotlight Search Prompt that doesn’t need a “.pkg” file.

So, if I ever feel like refactoring this, do you have any suggestions for improvements or features? Again, no promises I’ll ever do it, but I thought I’d ask, since it’s fresh in your mind.

Thanks.

13

Thanks. I looked at that, and maybe I'm missing something, but I don't see anything that helps with display of my Header Comments (which vary for each handler), when the item is selected, and the user clicks a button.

Ideally I'd like a button to display "More Info" window, which would show the Header Comments for the selected Handler. Then, if the user kept the window open, selecting a new Handler would refresh the window with the new Header Comments.

Actually I've decided that I Iike the Consolas Fixed Font for all my Spotlight Searches. So the hard code changes I made will work fine.

Some ideas, including the one I mentioned above:

  • Button/Window to Display More Info, refreshed when item is changed
  • Display my Column Titles at the top of the Select List
  • more to come . . .

Thanks for asking.

14

Ah, I understand. Well, you could modify the HTML file. Change the function "customButtonClicked" to do what you want. You could call "window.KeyboardMaestro.Trigger( macro, value )" to trigger a macro that displays the info. That way, it wouldn't close the prompt, and you can do the rest of the work in a normal KM macro.

15

@DanThomas, some more questions, when you have a moment.

  1. Is there a easy way to build a JSON string from a RegEx match with capture groups? Like for (1) Name, (2) Parameters, (3) Tags, (4) Comment from the below:
    .
    .
    Pasted image818×233 30.1 KB

    .
  • I would have an array of matches, one for each handler in my script lib
  • I'm thinking I could use this to populate the sspData variable, right?
    .
  1. What would be the best way to handle storage and display of the Comments item?
  • It is only shown on demand (when the user clicks a button)
  • It can be large, like 20 lines (example shown here)
  • My Handler list is small, one line/handler, < 100 handlers
  • But adding the Comments item increases the data greatly
  • Is it better to include Comments in the sspData JSON, and pull from that when I need to display it
    OR
  • Store the Comments in a separate file (or files), and pull from that when needed?

Any thoughts or guidance you can provide will be greatly appreciated.

16

I'm tying this freehand, but the general idea is correct:

var matches = [];
loop.. {
    matches.push[{
        name: match[1],
        parameters: match[2],
        ...
    }];
}

var json = JSON.stringify(matches, null, "\t");

Let me know if this doesn't make sense - I know this isn't very detailed.

As for what's the best way to actually get the comments, to me it depends on what you're doing. If you're actually reading files to build the sspData, then I think I'd just pull the comments when you need to display them. But I think it really is just whatever you find the easiest.

As for how to display it, the first thing I'd try is to execute a macro from inside the HTML code, then display the comments using a Display as Text action.

1 Like