Modal question (last question today, I promise)

[David Gifford]

Hi all

Any way to add a link to the tiddler after the title of the tiddler in a modal? Or render the title as a link?

I would like to make more use of modals, but I know some users will want to click on a link in the modal to open up the actual tiddler, so they can print, drag, edit, etc.

I know it's as simple as copying the title and putting it in the search window, but some people will not pick up on that...

[David Gifford]

Wow, a week and not one reply to this question...Anybody out there that can help me? I just want to make it easier to open modals as tiddlers, for me, to edit them, and for users, to print them...a simple link to open the tiddler from the modal...

[Mark S.]

Since the only way out of a modal is through the close button, it's probably not so simple.

It sounds like you need a popup, rather than a modal. So you can click, close, and navigate all in one.

[David Gifford]

Oh, good to know. Bummer that modals are more restricted in functionality than popups. I will look into it.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/UMRpPMVuHNY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e614b20f-f1c1-45ed-8d8d-049867ee0500o%40googlegroups.com.

[TiddlyTweeter]

Mark S. wrote:

Since the only way out of a modal is through the close button

BINGO.

The modal as is in standard is wooden---likely teak.

There have been many fallen knights in its environs attempting to save its maiden.

TT

[David Gifford]

Am going with the Appear plugin, sticky popup.

[Eric Shulman]

On Thursday, November 5, 2020 at 7:23:45 AM UTC-8, David Gifford wrote:

I just want to make it easier to open modals as tiddlers, for me, to edit them, and for users, to print them...a simple link to open the tiddler from the modal...

It's sort of a hack, but here's an example, using $action-listops to directly modify the $:/StoryList!!list field contents:

<$button> open modal
   <$action-setfield $tiddler="$:/temp/modal"
      subtitle="Demo Modal"
      text="Message goes here"
      footer="""
         <$button message="tm-close-tiddler"> close
            <$action-deletetiddler $tiddler="$:/temp/modal"/>
         </$button>
         <$button message="tm-close-tiddler"> view
            <$action-listops $tiddler="$:/StoryList" $subfilter="[[$:/temp/modal]]" />
         </$button>
         <$button message="tm-close-tiddler"> edit
            <$navigator>
            <$action-sendmessage $message="tm-edit-tiddler" $param="$:/temp/modal" />
            <$action-listops $tiddler="$:/StoryList" $subfilter="[[Draft of '$:/temp/modal']]" />
            </$navigator>
         </$button>
      """ />
   <$action-sendmessage $message="tm-modal" $param="$:/temp/modal" />
</$button>

Notes:

1) The $action-listops puts the tiddler at the end of the $:/StoryList!!list

2) To move the tiddler to the start of the $:/StoryList!!list, you can use: $subfilter="[[$:/temp/modal]] +[putfirst[]]"

3) In either case, modifying the $:/StoryList!!list *does not scroll the tiddler into view*.

enjoy,

-e

[David Gifford]

Eric you never cease to amaze me. Thank you for that. I like the button options in this approach. Question: since the whole point in my case is to transclude existing tiddlers in modals, I would need to replace all existing instances of $:/temp/modal in this snippet with the title of my tiddler? And maybe delete the text="" part?

On a related note, below is a simple version I did with the appear plugin. Works nice. I will just need to adjust the CSS so it appears more like a modal does, centered and a certain % of the width, and maybe add scrolling. I think I can figure that out.

`<$appear type="popup"><$list filter="[[Tiddler title]]"><$link><h1><$view field="title"/></h1></$link><$transclude field="text" mode="block"/></$list></$appear>`

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/UMRpPMVuHNY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/863490ca-20c0-4c8b-939a-32c58783e15eo%40googlegroups.com.

[David Gifford]

Hmmm I spoke too soon, the appear plugin makes the popup appear to the right of the button. That's only fine if the button is all the way to the left. If all the way to the right of tiddler, the popup is squished...This will take more work, too...

[Eric Shulman]

On Thursday, November 5, 2020 at 12:32:48 PM UTC-8, David Gifford wrote:

Eric you never cease to amaze me. Thank you for that. I like the button options in this approach. Question: since the whole point in my case is to transclude existing tiddlers in modals, I would need to replace all existing instances of $:/temp/modal in this snippet with the title of my tiddler? And maybe delete the text="" part?

Try this:

\define showModal(tid)
<$button> open modal: <$text text="$tid$" />
   <$action-setfield $tiddler="$:/temp/modal/$tid$"
      subtitle="$tid$"

      text="{{$tid$}}"

      footer="""
         <$button message="tm-close-tiddler"> close
            <$action-deletetiddler $tiddler="$:/temp/modal/$tid$"/>
         </$button>
         <$button message="tm-close-tiddler"> view
            <$action-listops $tiddler="$:/StoryList" $subfilter="[[$tid$]]" />
            <$action-deletetiddler $tiddler="$:/temp/modal/$tid$"/>
         </$button>

         <$button message="tm-close-tiddler"> edit
            <$navigator>

            <$action-sendmessage $message="tm-edit-tiddler" $param="$tid$" />
            <$action-listops $tiddler="$:/StoryList" $subfilter="[[Draft of '$tid$']]" />
            <$action-deletetiddler $tiddler="$:/temp/modal/$tid$"/>
            </$navigator>
         </$button>
      """ />
   <$action-sendmessage $message="tm-modal" $param="$:/temp/modal/$tid$" />
</$button>
\end

Notes:

* In addition to the "text" field, the modal tiddler needs to have a "subtitle" and "footer" field.

* Rather than modifying the actual tiddler, the macro creates $:/temp/modal/NameOfTiddler

* Each of the buttons, in addition to performing the desired actions, also cleans up after itself by deleting the $:/temp/modal/... tiddler

* You can tag the above with $:/tags/Macro, and then invoke it using <<showModal "NameOfTiddler">>

enjoy,

-e

[David Gifford]

Hi Eric

This is working great, except for the view button. It closes the modal but does not open the tiddler. Is something missing?

[Eric Shulman]

On Thursday, November 5, 2020 at 2:28:47 PM UTC-8, David Gifford wrote:

This is working great, except for the view button. It closes the modal but does not open the tiddler. Is something missing?

One limitation of directly editing the $:/StoryList!!list is that the tiddler is shown at the bottom of the Story River...

and it *does not automatically scroll into view* when opened.  Thus, it might be that the tiddler *is* being opened,

but you don't see it unless you scroll to the bottom.

-e

[Mark S.]

You could close the other tiddlers. Not optimal, but one solution.

[TW Tones]

David,

I did something recently similar. I will try and find it, but the key is you can pass variables and create actions like the close button that does what you want.

Have you considered open in new window instead?

Tones

[David Gifford]

Thanks Tones,

I think with Eric's solution I am good. I can very easily generate modals, and open in edit mode from the modal. Users can copy and paste the tiddler title from the modal into the search bar. Quite good enough for me!

[Eric Shulman]

Updates:

* added $navigator and $action-navigate widgets to make "scroll into view" work

* remove the viewed tiddler from the StoryList before opening for edit (prevents display of two instances of the same tiddler!)

\define showModal(tid)

<$button> open modal: <$text text="$tid$" />

   <$action-setfield $tiddler="$:/temp/modal/$tid$"

      subtitle="$tid$"

      text="{{$tid$}}"

      footer="""

         <$button message="tm-close-tiddler"> close

            <$action-deletetiddler $tiddler="$:/temp/modal/$tid$"/>

         </$button>

         <$button message="tm-close-tiddler"> view

            <$navigator>

            <$action-listops $tiddler="$:/StoryList" $subfilter="[[$tid$]]" />

            <$action-navigate $to="$tid$" $scroll="yes"/>

            <$action-deletetiddler $tiddler="$:/temp/modal/$tid$"/>

            </$navigator>

         </$button>

         <$button message="tm-close-tiddler"> edit

            <$navigator>

            <$action-sendmessage $message="tm-edit-tiddler" $param="$tid$" />

            <$action-listops $tiddler="$:/StoryList" $subfilter="-[[$tid$]] [[Draft of '$tid$']]" />

            <$action-navigate $to="Draft of '$tid$'" $scroll="yes"/>

            <$action-deletetiddler $tiddler="$:/temp/modal/$tid$"/>

            </$navigator>

         </$button>

      """ />

   <$action-sendmessage $message="tm-modal" $param="$:/temp/modal/$tid$" />

</$button>

\end

enjoy,

-e

[David Gifford]

Thanks Eric! Will try it out this morning. Blessings.

[Atronoush]

Hi Eric,

 Your solution works excellent. My question is : links do not work in modal, how one can gray out them?

--Atro

[Eric Shulman]

On Saturday, November 7, 2020 at 12:40:39 AM UTC-8, Atronoush wrote:

 Your solution works excellent. My question is : links do not work in modal, how one can gray out them?

Add this style declaration as the first line of the macro definition:

<style> .tc-modal-body a { color:inherit; text-decoration:none; cursor:default; } </style>

Alternatively, you can put the above CSS in a tiddler tagged with $:/tags/Stylesheet (omit the <style> and </style> tags).

enjoy,

-e

[David Gifford]

I have been playing around with Eric's "hack" today. And I created an editortoolbar button to insert the macro.

Used in conjunction with the Freelinks plugin, this appears to be a really great way to create and read content:

1. Create an article with minimal content, and add subordinate content that can be viewed in modals without leaving the originating tiddler. This is helpful since closing a target tiddler in some situations/view modes in TiddlyWiki does not take you back to the originating tiddler.

2. By inserting the macro with a button, and inputting the title, you create a 'link' that shows the tiddler in the modal if it exists, and you have a button in the modal to create the tiddler in edit mode if it does not.

3. If you want links also without doing two separate steps, you can use the Freelinks plugin.

Now if only the comptext plugin gave you autocomplete suggestions for this macro as it does for links...but even so, it is a great process for writing articles uncluttered by all the details, but giving instant access to those details without leaving the context of the article.

Thanks again, Eric!

On Thursday, October 29, 2020 at 6:06:18 PM UTC-6 David Gifford wrote:

[Atronoush]

Thank you Eric! It works great!

[David Gifford]

Here is what it looks like in practice. Click "Golden Rule, the" from the articles tab. https://giffmex.org/experiments/asterisk.modal.nt1.html

[Ste]

Ah! Have looked! Very nice. Like a posher version of Jed's help 

Button macro! (it's somewhere from inmysocks). 

[Ste]

I may be way off here, I didn't really understand the queston, but here 

Is Jeds code for the help button which is what your link reminded me of. 

\define HelpButton(label, ButtonText:?)

^^(<$button popup="""$:/temp/popup/$(currentTiddler)$/$label$""" class='tc-btn-invisible tc-tiddlylink'>$ButtonText$</$button>)<$reveal type='popup' state="""$:/temp/popup/$(currentTiddler)$/$label$"""><div class='tc-drop-down' style='width:150px;max-width:75vw;white-space:pre-wrap;padding:10px;text-align:left;font-size:1.3em;border-radus:0.5em;'><$transclude field="""$label$"""/></div></$reveal>^^

\end

[jtech108]

Hello there all,

@David': 

Enjoying your modal here....however...

It looks like your modal doesn't play too nicely when it comes to images.

Would it be possible to tweak this modal to work with images? or

Was it only meant for text content?

Or...maybe it's the way I'm using the syntax?

<<showModal "img_avatar.png">>

img_avatar.png being the name of the image tiddler.

At your leisure no worries. Thanks in advance. 

Best wishes,

Julio

[David Gifford]

Hi Julio

Probably not what you are looking for, since it involves a mediating tiddler, but if you create a tiddler Avatarimg and add [img width="50%" [img_avatar.png]], adjusting the width to your liking, <<showModal "Avatarimg">> it works fine. Also lets you set the width, since an image could be too big and make the modal have scrollbars, which is no fun. - Dave

[jtech108]

Hey Dave...worked like a charm!  

It's a little more work, but it works...cool.

Muchas gracias amigo. 👍

[David Gifford]

¡Muchas de nadas!

[Jeronimo Minino]

Hi, David.

I saw this PDF TiddlyWiki manual:

https://my-tw-notes.droppages.com/TheBook.pdf

and could not find it in your "TiddlyWiki Toolmap".
I think it would be useful to include it there.

Have a nice day.

[David Gifford]

Thanks Jeronimo, I had not seen that. I mean, I knew he was working on it, and saw early versions. But I had not seen the finished product. I have added it to the general ref and tutorials section. Thanks for alerting me to that!

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/UMRpPMVuHNY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c8a4f79f-a355-4ac5-83af-ffe99e5d382cn%40googlegroups.com.

[Alfonso Arciniega]

Jero and David,

"TheBook" in my DropPages is just an early version of a manual that I put there just as an example that you can share any type of file at DropPages, not just TiddlyWiki documents. As it is an early draft, it should not be in TiddlyWiki Toolmap. I am interested to see if TheBook has been updated or completed.

Cheers,

Alfonso

[David Gifford]

Okay I deleted it from the toolmap.

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/UMRpPMVuHNY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/2be183c4-3559-45d3-9e9e-ffdb609ec9afn%40googlegroups.com.