Show pointer and use underline dashed for click trigger (#1111)

Fix a regression from #1033. Let's add back the two styles of triggers: - click: show mouse pointer to signal that it is clickable and use underline dashed - not click: no special cursor, and use underline dotted
MarkBind · Mar 28, 2020 · 4bc3edb · 4bc3edb
1 parent 7617c71
commit 4bc3edb
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 12 deletions.
diff --git a/asset/css/markbind.css b/asset/css/markbind.css
@@ -385,6 +385,11 @@ li.footnote-item:target {
     text-decoration: underline dotted;
 }
 
+.trigger-click {
+    cursor: pointer;
+    text-decoration: underline dashed;
+}
+
 .modal.mb-zoom {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);

diff --git a/docs/userGuide/syntax/popovers.mbdf b/docs/userGuide/syntax/popovers.mbdf
@@ -36,8 +36,8 @@
   <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
     <button class="btn btn-secondary">Mouseenter</button>
   </popover>
-  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
-    <button class="btn btn-secondary">Contextmenu (right click)</button>
+  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
+    <button class="btn btn-secondary">Click</button>
   </popover>
 </p>
 <h4 class="no-index">Markdown</h4>

diff --git a/docs/userGuide/syntax/tooltips.mbdf b/docs/userGuide/syntax/tooltips.mbdf
@@ -22,9 +22,6 @@ Trigger
   <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
     <button class="btn btn-secondary">Click</button>
   </tooltip>
-  <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
-    <button class="btn btn-secondary">Contextmenu (right click)</button>
-  </tooltip>
   <br />
   <br />
   <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="focus">

diff --git a/src/lib/markbind/src/parsers/componentParser.js b/src/lib/markbind/src/parsers/componentParser.js
@@ -188,6 +188,11 @@ function _warnDeprecatedAttributes(node, attributeNamePairs) {
  * For modals, we make it attempt to show the modal if it exists.
  */
 
+function addTriggerClass(node, trigger) {
+  const triggerClass = trigger === 'click' ? 'trigger-click' : 'trigger';
+  node.attribs.class = node.attribs.class ? `${node.attribs.class} ${triggerClass}` : triggerClass;
+}
+
 function _parseTrigger(node) {
   node.name = 'span';
   const trigger = node.attribs.trigger || 'hover';
@@ -198,7 +203,7 @@ function _parseTrigger(node) {
     = 'tooltipContentGetter';
   const convertedTrigger = trigger === 'hover' ? 'mouseover' : trigger;
   node.attribs[`v-on:${convertedTrigger}`] = `$refs['${node.attribs.for}'].show()`;
-  node.attribs.class = node.attribs.class ? `${node.attribs.class} trigger` : 'trigger';
+  addTriggerClass(node, convertedTrigger);
 }
 
 /*
@@ -222,7 +227,7 @@ function _parsePopover(node) {
   node.attribs['data-mb-component-type'] = 'popover';
   node.attribs[`v-b-popover.${trigger}.${placement}.html`]
     = 'popoverInnerGenerator';
-  node.attribs.class = node.attribs.class ? `${node.attribs.class} trigger` : 'trigger';
+  addTriggerClass(node, trigger);
   _transformSlottedComponents(node);
 }
 
@@ -267,7 +272,7 @@ function _parseTooltip(node) {
   node.attribs['data-mb-component-type'] = 'tooltip';
   node.attribs[`v-b-tooltip.${trigger}.${placement}.html`]
     = 'tooltipInnerContentGetter';
-  node.attribs.class = node.attribs.class ? `${node.attribs.class} trigger` : 'trigger';
+  addTriggerClass(node, trigger);
   _transformSlottedComponents(node);
 }
 

diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
@@ -39,7 +39,7 @@
           <p><a href="https://github.com/MarkBind/markbind/issues/49">Issue #49</a></p>
           <p>Repro:</p>
           <p><span for="pop:xp-user-stories" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:xp-user-stories'].show()" class="trigger">Establishing Requirements</span></p>
-          <span id="pop:xp-user-stories" trigger="click" data-mb-component-type="popover" v-b-popover.click.top.html="popoverInnerGenerator" class="trigger">
+          <span id="pop:xp-user-stories" trigger="click" data-mb-component-type="popover" v-b-popover.click.top.html="popoverInnerGenerator" class="trigger-click">
   <div data-mb-html-for="content">
     <div>
 <p>Requirements gathering, requirements elicitation, requirements analysis,
@@ -49,7 +49,7 @@
           <p><a href="https://github.com/MarkBind/markbind/issues/107">Issue #107</a></p>
           <p>Repro:</p>
           <div>
-            <p>This is to reproduce <span trigger="click" for="modal:bugRepro" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:bugRepro'].show()" class="trigger">multiple inclusions of a modal bug</span></p>
+            <p>This is to reproduce <span trigger="click" for="modal:bugRepro" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:bugRepro'].show()" class="trigger-click">multiple inclusions of a modal bug</span></p>
             <b-modal id="modal:bugRepro" hide-footer="" size="lg" modal-class="mb-zoom" ref="modal:bugRepro"><template slot="modal-title">Establishing Requirements</template>
               <div>
                 <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
@@ -59,7 +59,7 @@
             </b-modal>
           </div>
           <div>
-            <p>This is to reproduce <span trigger="click" for="modal:bugRepro" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:bugRepro'].show()" class="trigger">multiple inclusions of a modal bug</span></p>
+            <p>This is to reproduce <span trigger="click" for="modal:bugRepro" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:bugRepro'].show()" class="trigger-click">multiple inclusions of a modal bug</span></p>
             <b-modal id="modal:bugRepro" hide-footer="" size="lg" modal-class="mb-zoom" ref="modal:bugRepro"><template slot="modal-title">Establishing Requirements</template>
               <div>
                 <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should

diff --git a/test/functional/test_site/expected/markbind/css/markbind.css b/test/functional/test_site/expected/markbind/css/markbind.css
@@ -385,6 +385,11 @@ li.footnote-item:target {
     text-decoration: underline dotted;
 }
 
+.trigger-click {
+    cursor: pointer;
+    text-decoration: underline dashed;
+}
+
 .modal.mb-zoom {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);

diff --git a/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css b/test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
@@ -385,6 +385,11 @@ li.footnote-item:target {
     text-decoration: underline dotted;
 }
 
+.trigger-click {
+    cursor: pointer;
+    text-decoration: underline dashed;
+}
+
 .modal.mb-zoom {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);

diff --git a/test/functional/test_site_convert/expected/markbind/css/markbind.css b/test/functional/test_site_convert/expected/markbind/css/markbind.css
@@ -385,6 +385,11 @@ li.footnote-item:target {
     text-decoration: underline dotted;
 }
 
+.trigger-click {
+    cursor: pointer;
+    text-decoration: underline dashed;
+}
+
 .modal.mb-zoom {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);

diff --git a/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css b/test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
@@ -385,6 +385,11 @@ li.footnote-item:target {
     text-decoration: underline dotted;
 }
 
+.trigger-click {
+    cursor: pointer;
+    text-decoration: underline dashed;
+}
+
 .modal.mb-zoom {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);

diff --git a/test/functional/test_site_special_tags/expected/markbind/css/markbind.css b/test/functional/test_site_special_tags/expected/markbind/css/markbind.css
@@ -385,6 +385,11 @@ li.footnote-item:target {
     text-decoration: underline dotted;
 }
 
+.trigger-click {
+    cursor: pointer;
+    text-decoration: underline dashed;
+}
+
 .modal.mb-zoom {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);

diff --git a/test/functional/test_site_templates/test_default/expected/index.html b/test/functional/test_site_templates/test_default/expected/index.html
@@ -90,7 +90,7 @@ <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1"></a></h1>
         <pre><code class="hljs html"><span><span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span></span><span>  <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span></span><span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span></span></code></pre>
         <h2 id="sub-heading-1-1">Sub Heading 1.1<a class="fa fa-anchor" href="#sub-heading-1-1"></a></h2>
         <p>A <span effect="scale" placement="top" trigger="hover" data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-html-for="_content">❗️ some <strong>important explanation</strong></span>tooltip</span>,
-          a <span for="modal:modalinfo" trigger="click" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:modalinfo'].show()" class="trigger">modal</span>, a <a href="https://markbind.org/">link</a>,
+          a <span for="modal:modalinfo" trigger="click" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:modalinfo'].show()" class="trigger-click">modal</span>, a <a href="https://markbind.org/">link</a>,
           a <span class="badge badge-danger">badge</span>, another <span class="badge badge-warning">badge</span>.</p>
         <b-modal id="modal:modalinfo" hide-footer="" size="" modal-class="mb-zoom" ref="modal:modalinfo"><template slot="modal-title">Modal Title</template> Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text
           some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.

diff --git a/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
@@ -385,6 +385,11 @@ li.footnote-item:target {
     text-decoration: underline dotted;
 }
 
+.trigger-click {
+    cursor: pointer;
+    text-decoration: underline dashed;
+}
+
 .modal.mb-zoom {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);

diff --git a/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css b/test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
@@ -385,6 +385,11 @@ li.footnote-item:target {
     text-decoration: underline dotted;
 }
 
+.trigger-click {
+    cursor: pointer;
+    text-decoration: underline dashed;
+}
+
 .modal.mb-zoom {
     -webkit-transform: scale(0.1);
     -moz-transform: scale(0.1);