Refactor GitHub-fork-ribbon plugin for better compatibility (#8075)
This commit is contained in:
Mario Pietsch
GitHub
parent
2d92a6fd78
commit
f1e707bff4
|
|
@ -4,8 +4,6 @@ This plugin provides a diagonal ribbon across the corner of the window. It resem
|
|||
|
||||
The ribbon can be positioned over any corner, and can incorporate user defined text, colours and a link.
|
||||
|
||||
The CSS stylesheet is adapted from work by Simon Whitaker:
|
||||
The CSS stylesheet is adapted from work by [[Simon Whitaker|https://github.com/simonwhitaker/github-fork-ribbon-css/]]
|
||||
|
||||
https://github.com/simonwhitaker/github-fork-ribbon-css/
|
||||
|
||||
[[Source code|https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/github-fork-ribbon]]
|
||||
[[Plugin source code|https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/github-fork-ribbon]]
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
title: $:/plugins/tiddlywiki/github-fork-ribbon/styles
|
||||
tags: [[$:/tags/Stylesheet]]
|
||||
|
||||
/* Left will inherit from right (so we don't need to duplicate code */
|
||||
.github-fork-ribbon {
|
||||
|
|
@ -10,7 +9,7 @@ tags: [[$:/tags/Stylesheet]]
|
|||
padding: 2px 0;
|
||||
|
||||
/* Set the base colour */
|
||||
background-color: #a00;
|
||||
background-color: <<color>>;
|
||||
|
||||
/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.15)));
|
||||
|
|
@ -25,7 +24,7 @@ tags: [[$:/tags/Stylesheet]]
|
|||
-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
|
||||
z-index: 999;
|
||||
z-index: 700;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
|
@ -61,8 +60,8 @@ tags: [[$:/tags/Stylesheet]]
|
|||
height: 150px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
top: <<top>>;
|
||||
z-index: 700;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -71,25 +70,25 @@ tags: [[$:/tags/Stylesheet]]
|
|||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.left {
|
||||
left: 0;
|
||||
left: <<left>>;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.right {
|
||||
right: 0;
|
||||
right: <<right>>;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.left-bottom {
|
||||
position: fixed;
|
||||
top: inherit;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
bottom: <<bottom>>;
|
||||
left: <<left>>;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.right-bottom {
|
||||
position: fixed;
|
||||
top: inherit;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
bottom: <<bottom>>;
|
||||
right: <<right>>;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.right .github-fork-ribbon {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
title: $:/plugins/tiddlywiki/github-fork-ribbon/template
|
||||
|
||||
<!-- Parameters:
|
||||
position: "right", "left", "right-bottom" and "left-bottom"
|
||||
url: link target
|
||||
text: ribbon text
|
||||
color: defaults to "#aa0000" - dark red
|
||||
top: offset from the top in px - eg: "30px"
|
||||
bottom: offset from the bottom in px - No ;
|
||||
left: offset from left in px - No ;
|
||||
right: offset from right in px - No ;
|
||||
fixed: "fixed" .. If ribbon is at the top, it can be "fixed". Bottom is always fixed
|
||||
-->
|
||||
\parameters (position:"right", url:"https://github.com/Jermolene/TiddlyWiki5", text:"Fork me on ~GitHub" color:"#aa0000" top:"0" bottom:"0" left:"0" right:"0" fixed:"")
|
||||
|
||||
<style>
|
||||
{{$:/plugins/tiddlywiki/github-fork-ribbon/styles}}
|
||||
</style>
|
||||
|
||||
<div class={{{ github-fork-ribbon-wrapper [<position>] [<fixed>] +[join[ ]] }}}>
|
||||
<div class="github-fork-ribbon">
|
||||
<a href=<<url>>>
|
||||
<<text>>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,26 +1,81 @@
|
|||
title: $:/plugins/tiddlywiki/github-fork-ribbon/usage
|
||||
|
||||
Copy appropriate chunks on a new tiddler and tag it `$:/tags/PageControls`. Name of the new tiddler does not matter. Only the tag matters.
|
||||
\procedure ribbonCode()
|
||||
\whitespace trim
|
||||
<$transclude $tiddler="$:/plugins/tiddlywiki/github-fork-ribbon/template" top="30px" fixed=fixed color="green"/>
|
||||
\end
|
||||
|
||||
```
|
||||
<!-- TOP RIGHT RIBBON: START COPYING HERE -->
|
||||
<div class="github-fork-ribbon-wrapper right"><div class="github-fork-ribbon"><a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on ~GitHub</a></div>
|
||||
</div>
|
||||
<!-- TOP RIGHT RIBBON: END COPYING HERE -->
|
||||
\procedure ribbonCreateActions()
|
||||
<% if [[$:/github-ribbon]!is[tiddler]] %>
|
||||
<$action-setfield $tiddler="$:/github-ribbon" $field="text" $value=<<ribbonCode>>
|
||||
tags="$:/tags/PageTemplate"
|
||||
code-body="yes" />
|
||||
<% endif %>
|
||||
<$action-navigate $to="$:/github-ribbon" />
|
||||
\end
|
||||
|
||||
<!-- TOP LEFT RIBBON: START COPYING HERE -->
|
||||
<div class="github-fork-ribbon-wrapper left"><div class="github-fork-ribbon"><a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on ~GitHub</a></div>
|
||||
</div>
|
||||
<!-- TOP LEFT RIBBON: END COPYING HERE -->
|
||||
\procedure createRibbon()
|
||||
<$button actions=<<ribbonCreateActions>> >
|
||||
<%if [[$:/github-ribbon]!is[tiddler]] %>
|
||||
Create
|
||||
<% else %>
|
||||
Show
|
||||
<% endif %> ~$:/github-ribbon
|
||||
</$button>
|
||||
\end
|
||||
|
||||
\procedure ribbonToggleTagActions()
|
||||
<$action-listops $tiddler="$:/github-ribbon" $field="tags" $subfilter="+[toggle[$:/tags/PageTemplate]]" />
|
||||
\end
|
||||
|
||||
\procedure ribbonToggleTag() <$button actions=<<ribbonToggleTagActions>> >Toggle Tag</$button>
|
||||
|
||||
|
||||
<!-- BOTTOM RIGHT RIBBON: START COPYING HERE -->
|
||||
<div class="github-fork-ribbon-wrapper right-bottom"><div class="github-fork-ribbon"><a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on ~GitHub</a></div>
|
||||
</div>
|
||||
<!-- BOTTOM RIGHT RIBBON: END COPYING HERE -->
|
||||
`$:/plugins/tiddlywiki/github-fork-ribbon/template` is a template tiddler, that can be used with a transclusion and parameters.
|
||||
|
||||
<!-- BOTTOM LEFT RIBBON: START COPYING HERE -->
|
||||
<div class="github-fork-ribbon-wrapper left-bottom"><div class="github-fork-ribbon"><a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on ~GitHub</a></div>
|
||||
</div>
|
||||
<!-- BOTTOM LEFT RIBBON: END COPYING HERE -->
|
||||
```
|
||||
!! Usage
|
||||
|
||||
* Create a new tiddler eg: $:/github-ribbon
|
||||
* Tag it `$:/tags/PageTemplate`
|
||||
* Copy the code below
|
||||
|
||||
<pre><$text text=<<ribbonCode>>/></pre>
|
||||
|
||||
<<createRibbon>> <<ribbonToggleTag>>
|
||||
|
||||
!! Parameters
|
||||
|
||||
; position
|
||||
: "right" (default), "left", "right-bottom" and "left-bottom"
|
||||
|
||||
; url
|
||||
: Target URL, default: https://github.com/Jermolene/TiddlyWiki5
|
||||
|
||||
; text
|
||||
: Ribbon text. default: `Fork me on ~GitHub`
|
||||
|
||||
; color
|
||||
: Ribbon background color: default: `#aa0000`
|
||||
|
||||
; top
|
||||
: Offset from the top if postion is top. default: `0` eg: `30px`, if the menu-toolbar plugin is installed
|
||||
|
||||
; bottom
|
||||
: Offset from the bottom in px
|
||||
|
||||
; left
|
||||
: Offset from the left in px
|
||||
|
||||
; right
|
||||
: Offset from the right in px
|
||||
|
||||
; fixed
|
||||
: If position is ''top'', the ribbon will scroll out of the viewport by default
|
||||
: If the parameter `fixed="fixed"` it will be fixed
|
||||
|
||||
!! Remove the Ribbon
|
||||
|
||||
* Disable the plugin
|
||||
* ''Remove the tag'' from $:/github-ribbon tiddler
|
||||
* Delete the $:/github-ribbon tiddler
|
||||
* <<ribbonToggleTag>>
|
||||
Loading…
Reference in New Issue