mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-18 11:29:55 +00:00
Code Issues Releases Wiki Activity

First commit of new Menu Bar plugin

Browse Source
This commit is contained in:
Jeremy Ruston 2020-02-28 14:33:15 +00:00
parent 4afde5a722
commit ad2d4503e5
22 changed files with 432 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
editions/prerelease/tiddlywiki.info
View File

@ -14,7 +14,8 @@
"tiddlywiki/dynaview",
"tiddlywiki/codemirror",
"tiddlywiki/comments",
"tiddlywiki/browser-storage"
"tiddlywiki/browser-storage",
"tiddlywiki/menubar"
],
"themes": [
"tiddlywiki/vanilla",

6
editions/tw5.com/tiddlers/menubar/gettingstarted.tid Normal file
View File

@ -0,0 +1,6 @@
title: $:/editions/tw5.com/menuitems/gettingstarted
caption: ~GettingStarted
description: Link to ~GettingStarted
tags: $:/tags/MenuBar
target: GettingStarted

2
editions/tw5.com/tiddlers/menubar/tagsMenuBar.tid Normal file
View File

@ -0,0 +1,2 @@
title: $:/tags/MenuBar
list:$:/plugins/tiddlywiki/menubar/items/hamburger $:/plugins/tiddlywiki/menubar/items/topleftbar $:/editions/tw5.com/menuitems/gettingstarted $:/plugins/tiddlywiki/menubar/items/contents $:/plugins/tiddlywiki/menubar/items/search $:/plugins/tiddlywiki/menubar/items/pagecontrols $:/plugins/tiddlywiki/menubar/items/server $:/plugins/tiddlywiki/menubar/items/toprightbar

3
editions/tw5.com/tiddlywiki.info
View File

@ -4,7 +4,8 @@
"tiddlywiki/nodewebkitsaver",
"tiddlywiki/browser-sniff",
"tiddlywiki/railroad",
"tiddlywiki/evernote"
"tiddlywiki/evernote",
"tiddlywiki/menubar"
],
"themes": [
"tiddlywiki/vanilla",

4
plugins/tiddlywiki/menubar/config-DefaultColourMappings.multids Normal file
View File

@ -0,0 +1,4 @@
title: $:/config/DefaultColourMappings/
menubar-foreground: #fff
menubar-background: #5778d8

4
plugins/tiddlywiki/menubar/config-MenuItemsVisibility.multids Normal file
View File

@ -0,0 +1,4 @@
title: $:/config/plugins/menubar/MenuItems/Visibility/$:/plugins/tiddlywiki/menubar/items/
pagecontrols: hide
server: hide

2
plugins/tiddlywiki/menubar/config-breakpoint.tid Normal file
View File

@ -0,0 +1,2 @@
title: $:/config/plugins/menubar/breakpoint
text: 620px

31
plugins/tiddlywiki/menubar/config.tid Normal file
View File

@ -0,0 +1,31 @@
title: $:/plugins/tiddlywiki/menubar/config
tags: $:/tags/ControlPanel/Toolbars
caption: Top Menu Bar
\define config-base() $:/config/plugins/menubar/MenuItems/Visibility/
! Top Menu Configuration
!! Menu Items
Select which menu items will be shown. You can also drag items to reorder them.
<$set name="tv-config-toolbar-icons" value="yes">
<$set name="tv-config-toolbar-text" value="yes">
<$macrocall $name="list-tagged-draggable" tag="$:/tags/MenuBar" itemTemplate="$:/core/ui/ControlPanel/Toolbars/ItemTemplate"/>
</$set>
</$set>
!! Breakpoint Position
The breakpoint position between narrow and wide screens. Should include CSS units (eg. `400px`).
<$edit-text tiddler="$:/config/plugins/menubar/breakpoint" default="" tag="input"/>
!! Menu Bar Colours
To change the colour of the menu bar, define the colours `menubar-foreground` and `menubar-background` in the currently selected palette

11
plugins/tiddlywiki/menubar/items/contents.tid Normal file
View File

@ -0,0 +1,11 @@
title: $:/plugins/tiddlywiki/menubar/items/contents
caption: Contents
description: Table of Contents
is-dropdown: yes
tags: $:/tags/MenuBar
<div class="tc-table-of-contents">
<<toc-selective-expandable 'TableOfContents'>>
</div>

17
plugins/tiddlywiki/menubar/items/hamburger.tid Normal file
View File

@ -0,0 +1,17 @@
title: $:/plugins/tiddlywiki/menubar/items/hamburger
tags: $:/tags/MenuBar
caption: Hamburger
description: Show the full menu bar on a narrow screen
custom-menu-content: {{$:/plugins/tiddlywiki/menubar/items/hamburger}}
show-when: narrow
<$list filter="[[$:/state/popup/menubar/hamburger]get[text]else[no]match[no]]">
<$button set="$:/state/popup/menubar/hamburger" setTo="yes">
{{$:/core/images/menu-button}}
</$button>
</$list>
<$list filter="[[$:/state/popup/menubar/hamburger]get[text]else[no]match[yes]]">
<$button set="$:/state/popup/menubar/hamburger" setTo="no">
{{$:/core/images/close-button}}
</$button>
</$list>

19
plugins/tiddlywiki/menubar/items/pagecontrols.tid Normal file
View File

@ -0,0 +1,19 @@
title: $:/plugins/tiddlywiki/menubar/items/pagecontrols
tags: $:/tags/MenuBar
description: Page controls from the sidebar
caption: Page controls
custom-menu-content: <$transclude tiddler="$:/plugins/tiddlywiki/menubar/items/pagecontrols" mode="inline"/>
\whitespace trim
\define config-title()
$:/config/PageControlButtons/Visibility/$(listItem)$
\end
<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageControls]!has[draft.of]]" variable="listItem">
<$set name="hidden" value=<<config-title>>>
<$list filter="[<hidden>!text[hide]]" storyview="pop" variable="ignore">
<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]">
<$transclude tiddler=<<listItem>> mode="inline"/>
</$set>
</$list>
</$set>
</$list>

33
plugins/tiddlywiki/menubar/items/search.tid Normal file
View File

@ -0,0 +1,33 @@
title: $:/plugins/tiddlywiki/menubar/items/search
custom-menu-content: {{$:/plugins/tiddlywiki/menubar/items/search}}
description: Search
caption: Search
tags: $:/tags/MenuBar
<$set name="searchTiddler" value="$:/temp/topmenusearch">
<span style="margin: 0 0.5em;">
<$edit-text tiddler=<<searchTiddler>> tag="input" type="search" focusPopup="$:/state/popup/menubar-search-dropdown" class="tc-popup-handle tc-menu-show-when-wide" placeholder="Search..." default=""/>
</span>
<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/state/popup/menubar-search-dropdown" type="nomatch" text="" default="">
<div class="tc-block-dropdown tc-search-drop-down">
<$list filter="[<searchTiddler>get[text]minlength[1]]" emptyMessage="""<div class="tc-search-results">Type your search terms</div>""" variable="ignore">
<$list filter="[<searchTiddler>get[text]minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
{{$:/core/ui/SearchResults}}
</$list>
</$list>
</div>
</$reveal>
</$set>

14
plugins/tiddlywiki/menubar/items/server.tid Normal file
View File

@ -0,0 +1,14 @@
title: $:/plugins/tiddlywiki/menubar/items/server
tags: $:/tags/MenuBar
description: Server options
caption: Server
custom-menu-content: <$transclude tiddler="$:/plugins/tiddlywiki/menubar/items/server" mode="inline"/>
<$list filter="[[$:/status/IsLoggedIn]get[text]else[no]match[yes]]" variable="ignore">
<$transclude tiddler="$:/core/ui/Buttons/save-wiki" mode="inline"/>
</$list>
<$list filter="[[$:/status/IsLoggedIn]get[text]else[no]match[no]]" variable="ignore">
<$button message="tm-login">
Login
</$button>
</$list>

11
plugins/tiddlywiki/menubar/items/topleftbar.tid Normal file
View File

@ -0,0 +1,11 @@
title: $:/plugins/tiddlywiki/menubar/items/topleftbar
tags: $:/tags/MenuBar
description: Items from $:/tags/TopLeftBar
caption: Legacy Top Left Bar
custom-menu-content: <$transclude tiddler="$:/plugins/tiddlywiki/menubar/items/topleftbar" mode="inline"/>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/TopLeftBar]!has[draft.of]]" variable="listItem" storyview="pop">
<$transclude tiddler=<<listItem>> mode="inline"/>
</$list>

11
plugins/tiddlywiki/menubar/items/toprightbar.tid Normal file
View File

@ -0,0 +1,11 @@
title: $:/plugins/tiddlywiki/menubar/items/toprightbar
tags: $:/tags/MenuBar
description: Items from $:/tags/TopRightBar
caption: Legacy Top Right Bar
custom-menu-content: <$transclude tiddler="$:/plugins/tiddlywiki/menubar/items/toprightbar" mode="inline"/>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/TopRightBar]!has[draft.of]]" variable="listItem" storyview="pop">
<$transclude tiddler=<<listItem>> mode="inline"/>
</$list>

67
plugins/tiddlywiki/menubar/menu.tid Normal file
View File

@ -0,0 +1,67 @@
title: $:/plugins/tiddlywiki/menubar/menu
tags: $:/tags/PageTemplate
\define menubar-inner(size)
<ul class="tc-menubar-list">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]]">
<$list filter="[<currentTiddler>addprefix[$:/config/plugins/menubar/MenuItems/Visibility/]get[text]] ~show +[match[show]]" variable="ignore">
<$list filter="[[$size$]match[wide]] ~[<currentTiddler>get[show-when]match[$size$]] ~[{$:/state/popup/menubar/hamburger}match[yes]]" variable="ignore">
<li style={{!!custom-menu-styles}} class={{{ [<currentTiddler>get[show-when]addprefix[tc-menubar-]] tc-menubar-item +[join[ ]] }}}>
<$list filter="[<currentTiddler>!is-dropdown[yes]]" variable="listItem" emptyMessage="""
<!-- Dropdown -->
<$set name="dropdown-state" value=<<qualify "$:/state/popup/topmenu/dropdown/">>>
<$set name="dropdown-state" value={{{ [<dropdown-state>addsuffix<currentTiddler>] }}}>
<$button popup=<<dropdown-state>> selectedClass="tc-selected">
<$set name="tv-wikilinks" value="no">
<$transclude field="caption" mode="inline"/>
<$text text=" "/>
<span class="tc-menubar-dropdown-arrow">
<$transclude tiddler="$:/core/images/down-arrow" mode="inline"/>
</span>
</$set>
</$button>
</$set>
</$set>
""">
<$list filter="[<currentTiddler>has[custom-menu-content]]" variable="listItem" emptyMessage="""
<!-- Link -->
<$link to={{!!target}}>
<$set name="tv-wikilinks" value="no">
<$transclude field="caption" mode="inline"/>
</$set>
</$link>
""">
<!-- Custom content -->
<$transclude field="custom-menu-content" mode="inline"/>
</$list>
</$list>
</li>
</$list>
</$list>
</$list>
</ul>
\end
<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]limit[1]]" variable="listItem">
<nav class="tc-menubar tc-adjust-top-of-scroll">
<div class="tc-menubar-narrow">
<<menubar-inner narrow>>
</div>
<div class="tc-menubar-wide">
<<menubar-inner wide>>
</div>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]is-dropdown[yes]]">
<$list filter="[<currentTiddler>addprefix[$:/config/plugins/menubar/MenuItems/Visibility/]get[text]] ~show +[match[show]]" variable="ignore">
<$set name="dropdown-state" value=<<qualify "$:/state/popup/topmenu/dropdown/">>>
<$set name="dropdown-state" value={{{ [<dropdown-state>addsuffix<currentTiddler>] }}}>
<$reveal type="popup" state=<<dropdown-state>> class={{{ [<currentTiddler>get[dropdown]get[class]] }}} tag="div">
<div class="tc-drop-down">
<$transclude/>
</div>
</$reveal>
</$set>
</$set>
</$list>
</$list>
</nav>
</$list>

3
plugins/tiddlywiki/menubar/overrides/core-ui-PageTemplate-topleftbar.tid Normal file
View File

@ -0,0 +1,3 @@
title: $:/core/ui/PageTemplate/topleftbar
<!-- The menubar plugin overrides this tiddler to remove the core top left menu. The menu items that it would include are instead included in the menubar -->

3
plugins/tiddlywiki/menubar/overrides/core-ui-PageTemplate-toprightbar.tid Normal file
View File

@ -0,0 +1,3 @@
title: $:/core/ui/PageTemplate/toprightbar
<!-- The menubar plugin overrides this tiddler to remove the core top right menu. The menu items that it would include are instead included in the menubar -->

6
plugins/tiddlywiki/menubar/plugin.info Normal file
View File

@ -0,0 +1,6 @@
{
"title": "$:/plugins/tiddlywiki/menubar",
"name": "Menu Bar",
"description": "Menu Bar",
"list": "readme config"
}

27
plugins/tiddlywiki/menubar/readme.tid Normal file
View File

@ -0,0 +1,27 @@
title: $:/plugins/tiddlywiki/menubar/readme
!! Introduction
This plugin provides a menu bar with the following features:
* Menu items take the form of simple text links, dropdowns, or entirely custom content
* Menu items can be individually enabled via the control panel
* Responds to reduced screen width by abbreviating the menu items to a "hamburger" dropdown
!! Menu Item Tiddlers
Menu items are tagged <<tag $:/tags/MenuBar>>. The following fields are used by this plugin:
|!Field Name |!Purpose |
|title |Each menu item must have a unique title (not shown to the user) |
|description |Description for use in listings |
|tags |Must contain `$:/tags/MenuBar` |
|caption |The text that is displayed for the menu item. Avoid links, using `~` to suppress CamelCase links if required |
|target |For simple link menu items specifies a tiddler title as the target of the link |
|is-dropdown |Set to `yes` to indicate a dropdown menu item |
|text |For dropdown menu items, specifies the body of the dropdown |
|custom-menu-content |Optional wikitext to be displayed in place of the caption |
|custom-menu-styles |Optional string of styles to be applied to menu item |
Custom menu items should make sure that the clickable link or button is an immediate child, and not wrapped in another element.

155
plugins/tiddlywiki/menubar/styles.tid Normal file
View File

@ -0,0 +1,155 @@
title: $:/plugins/tiddlywiki/menubar/styles
tags: [[$:/tags/Stylesheet]]
\define breakpoint-plus-one()
<$text text={{{ [{$:/config/plugins/menubar/breakpoint}removesuffix[px]add[1]addsuffix[px]] }}} />
\end
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
nav.tc-menubar {
position: fixed;
z-index: 1100;
display: inline-block;
top: 0;
right: 0;
left: 0;
}
nav.tc-menubar ul.tc-menubar-list {
position: relative;
list-style-type: none;
margin: 0;
padding: 0 0 0 42px;
background: <<colour background>>;
background: <<colour menubar-background>>;
<<box-shadow "1px 1px 5px rgba(0, 0, 0, 0.3)">>
}
nav.tc-menubar li.tc-menubar-item {
display: inline-block;
margin: 0;
padding: 0;
}
nav.tc-menubar .tc-menubar-narrow li.tc-menubar-item {
display: block;
}
nav.tc-menubar li.tc-menubar-item > a,
nav.tc-menubar li.tc-menubar-item > button {
display: inline-block;
/* text-transform: uppercase; */
line-height: 1;
font-weight: 700;
color: <<colour foreground>>;
color: <<colour menubar-foreground>>;
fill: <<colour foreground>>;
fill: <<colour menubar-foreground>>;
text-decoration: none;
padding: 0.5em;
margin: 0;
background: none;
border: none;
cursor: pointer;
border-radius: 0;
text-decoration: none;
}
nav.tc-menubar li.tc-menubar-item > a.tc-selected,
nav.tc-menubar li.tc-menubar-item > button.tc-selected {
background: <<colour foreground>>;
background: <<colour menubar-foreground>>;
color: <<colour background>>;
color: <<colour menubar-background>>;
fill: <<colour background>>;
fill: <<colour menubar-background>>;
}
nav.tc-menubar li.tc-menubar-item svg {
transition: none;
width: 1em;
height: 1em;
fill: <<colour foreground>>;
fill: <<colour menubar-foreground>>;
}
nav.tc-menubar li.tc-menubar-item .tc-menubar-dropdown-arrow svg {
width: 0.5em;
height: 0.5em;
}
nav.tc-menubar li.tc-menubar-item > a.tc-selected svg,
nav.tc-menubar li.tc-menubar-item > button.tc-selected svg {
fill: <<colour background>>;
fill: <<colour menubar-background>>;
}
nav.tc-menubar li.tc-menubar-item > a:hover,
nav.tc-menubar li.tc-menubar-item > button:hover svg,
nav.tc-menubar li.tc-menubar-item > button:hover {
background: <<colour foreground>>;
background: <<colour menubar-foreground>>;
color: <<colour background>>;
color: <<colour menubar-background>>;
fill: <<colour background>>;
fill: <<colour menubar-background>>;
border-radius: 0;
text-decoration: none;
}
nav.tc-menubar li.tc-menubar-item > a:active,
nav.tc-menubar li.tc-menubar-item > button:active svg,
nav.tc-menubar li.tc-menubar-item > button:active {
background: <<colour foreground>>;
background: <<colour menubar-foreground>>;
color: <<colour background>>;
color: <<colour menubar-background>>;
fill: <<colour background>>;
fill: <<colour menubar-background>>;
border-radius: 0;
text-decoration: none;
}
nav.tc-menubar .tc-drop-down,
nav.tc-menubar .tc-block-dropdown {
max-width: 70vw;
max-height: 70vh;
overflow: auto;
}
nav.tc-menubar .tc-drop-down a {
text-decoration: none;
}
nav.tc-menubar .tc-drop-down .tc-table-of-contents button {
display: inline-block;
width: auto;
}
nav.tc-menubar .tc-drop-down ol {
margin: 0;
}
@media (max-width: {{$:/config/plugins/menubar/breakpoint}}) {
.tc-menubar-wide {
display: none;
}
html nav.tc-menubar ul.tc-menubar-list {
padding: 0 0 0 8px;
}
}
@media (min-width: <<breakpoint-plus-one>>) {
nav.tc-menubar li.tc-menubar-item.tc-menubar-narrow,
.tc-menubar-narrow {
display: none;
}
}

2
plugins/tiddlywiki/menubar/tags-MenuBar.tid Normal file
View File

@ -0,0 +1,2 @@
title: $:/tags/MenuBar
list: $:/plugins/tiddlywiki/menubar/items/hamburger $:/plugins/tiddlywiki/menubar/items/topleftbar $:/plugins/tiddlywiki/menubar/items/contents $:/plugins/tiddlywiki/menubar/items/search $:/plugins/tiddlywiki/menubar/items/pagecontrols $:/plugins/tiddlywiki/menubar/items/server $:/plugins/tiddlywiki/menubar/items/toprightbar