added css tooltips + copy message; DOM structure changes

CHANGES.md

@@ -2,8 +2,13 @@
 
 **Re-Created from Scratch - The whole systems architecture has been changed**
 
-### Version 3.5.1 ###
+### Version 3.6.0 ###
 
+* Added: css tooltips to the toolbar
+* Added: copy-to-clipboard success/error message via tooltip
+* Changed: DOM structure has changed: each raw+highlighted code elements are wrapper into `enlighter-code` container
+* Changed: DOM structure has changed: removed `enlighter-codegroup-wrapper`
+* Changed: toolbar position is now persistent and not affected by horizontal/vertical scrolling
 * Bugfix: `bash` pound style comment regex also matched variable substituions and special cases - thanks to [maidentaiwan on GitHub](https://github.com/EnlighterJS/EnlighterJS/issues/200)
 * Bugfix: `bash` single quoted strings not highlighted
 

src/themes/core/base.less

@@ -16,7 +16,6 @@
     font-family: @font_SourceCodePro;
     font-size: 12px;
     line-height: 1.35em;
-    overflow: hidden;
     white-space: pre-wrap;
     word-wrap: break-word;
     margin: 0px 0px 20px 0px;
@@ -61,6 +60,11 @@
         background-color: #f0f0f0;
         cursor: pointer;
         font-family: inherit;
+
+        // show toolbar on over
+        &:hover .enlighter-tooltip{
+            visibility: visible;
+        }
     });
 
     // buttons
@@ -84,6 +88,11 @@
 /* Utility
 ----------------------------------------------------------------------------------- */
 
+// enlighter code container (code+raw)
+.STYLE_CODE_WRAPPER({
+    overflow: hidden;
+});
+
 // hide original codeblock (pre container marked to highlight)
 .enlighter-origin{
     display: none !important;
@@ -127,6 +136,16 @@
     .enlighter-codegroup-switch{
 
     }
+
+    // hide all code containers by default
+    .STYLE_CODE_WRAPPER({
+        display: none;
+    });
+
+    // moved toolbar into code area
+    .STYLE_TOOLBAR({
+        top: 44px;
+    });
 });
 
 /* Highlighted Object (Block Style)
@@ -257,27 +276,14 @@
 ----------------------------------------------------------------------------------- */
 .enlighter-overflow-scroll{
 
-    // default layout - single codeblock
-    &.@{VIEW_STANDARD}{
-
-        // scrollbar on x axis
-        overflow-x: auto;
-        word-wrap: normal !important;
-    }
-
-    // tabbed layout - use inner container a scroll wrapper!
+    &.@{VIEW_STANDARD},
     &.@{VIEW_CODEGROUP}{
-
-        // scroll wrap
-        .enlighter-codegroup-wrapper{
+        .STYLE_CODE_WRAPPER({
             // scrollbar on x axis
             overflow-x: auto;
             word-wrap: normal !important;
-        }
-    }
+        });
 
-    &.@{VIEW_STANDARD},
-    &.@{VIEW_CODEGROUP}{
         // code container
         .STYLE_CODE_CONTAINER({
 
@@ -294,38 +300,28 @@
             white-space: pre !important;
         });
     }
-
-    &.enlighter-show-rawcode{
-
-    }
 }
 
 /* Enlighter collapse
 ----------------------------------------------------------------------------------- */
 .enlighter-collapse{
 
-    // default layout - single codeblock
-    &.@{VIEW_STANDARD}{
-
-        // scrollbar on y axis
-        overflow-y: auto;
-        max-height: 500px;
-    }
-
     // tabbed layout - use inner container a scroll wrapper!
+    &.@{VIEW_STANDARD},
     &.@{VIEW_CODEGROUP}{
 
-        // scroll wrap
-        .enlighter-codegroup-wrapper{
-            // scrollbar on y axis
+        // scrollbar on y axis
+        .STYLE_CODE_WRAPPER({
             overflow-y: auto;
             max-height: 500px;
-        }
+        });
     }
 
     // override in case the full sourcecode should be displayed
     &.enlighter-collapse-full.@{VIEW_STANDARD}{
-        max-height: none;
+        .STYLE_CODE_WRAPPER({
+            max-height: none;
+        });
     }
     &.enlighter-collapse-full.@{VIEW_CODEGROUP} .enlighter-codegroup-wrapper{
         max-height: none;

src/themes/core/selectors.less

@@ -19,6 +19,14 @@
     }
 }
 
+// code+raw wrapper container
+.STYLE_CODE_WRAPPER(@rules){
+    .enlighter-code{
+        @rules();
+    }
+}
+
+
 // block code container
 .STYLE_CODE_CONTAINER_BLOCK(@rules){
     div.enlighter{

src/themes/core/tooltip.less

@@ -10,6 +10,26 @@
 @import "selectors.less";
 
 .STYLE_TOOLTIP({
-    z-index: 100;
+    visibility: hidden;
+    width: 140px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    padding: 8px 0;
+    border-radius: 5px;
+    position: absolute;
+    z-index: 10;
+    bottom: 30px;
+    transform: translateX(-42%);
 
+    &::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: black transparent transparent transparent;
+    }
 });

src/ui/components/buttons/button.jsx

@@ -8,6 +8,7 @@
 
 // Internal "ReactDOM"
 import * as React from 'dom-magic';
+import {Tooltip} from './tooltip.jsx';
 
 export function Button(props){
 
@@ -23,8 +24,8 @@ export function Button(props){
     return <div 
             className={classes.join(' ')} 
             onClick={props.onClick}
-            title={props.tooltip}
         >
             {props.text||null}
+            { typeof props.tooltip == 'string' ? <Tooltip text={props.tooltip}/> : props.tooltip }
         </div>
 }

src/ui/components/buttons/copy.jsx

@@ -11,13 +11,31 @@ import * as React from 'dom-magic';
 
 import * as _clipboard from '../../../lib/clipboard';
 import {Button} from './button.jsx';
+import {Tooltip} from './tooltip.jsx';
+
+const text = {
+    'error': 'Error: unable to copy to clipboard',
+    'success': 'Code copied!',
+    'label': 'Copy to clipboard'
+}
 
 export function copy(props){
+
+    // tooltip element
+    const tootltipElement = <Tooltip text={text.label}/>
+
     // trigger clipboard copy
     function copyToClipboard(){
         // try to copy to clipboard
-        _clipboard.copy(props.getRawCode());
+        const success = _clipboard.copy(props.getRawCode());
+
+        tootltipElement.innerText = (success ? text.success : text.error);
+
+        // restore label after 2s 
+        setTimeout(function(){
+            tootltipElement.innerText = text.label
+        }, 2000);
     }
 
-    return <Button name="copy" tooltip="Copy to clipboard" onClick={copyToClipboard}></Button>
-}
+    return <Button name="copy" tooltip={tootltipElement} onClick={copyToClipboard}></Button>
+}

src/ui/components/buttons/tooltip.jsx

@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+// --
+// Copyright 2016-2022 Andi Dittrich <https://andidittrich.com>
+// ----------------------------------------------------------------------
+
+// Internal "ReactDOM"
+import * as React from 'dom-magic';
+
+export function Tooltip(props){
+    return <div className="enlighter-tooltip">
+        {props.text}
+    </div>;
+}

src/ui/views/codegroup.jsx

@@ -87,10 +87,10 @@ export function codegroup(dataset){
     // list of tabs
     tabs = dataset.map(d => {
         // create container
-        return <div style="display:none">
+        return <Container className="enlighter-code" style="display:none">
             <DomBlockRenderer tokens={d.tokens} options={d.params} />
             <RawCode>{d.code}</RawCode>
-        </div>;
+        </Container>;
     });
 
     // highlight first button
@@ -99,12 +99,9 @@ export function codegroup(dataset){
     // create wrapper
     wrapper =   <Container className={cssClasses}>
                     <CodegroupSwitch onChange={i => showtab(i)} dataset={dataset} />
-
-                    <Container name="codegroup-wrapper">
-                        <Toolbar name="top" layout={options.toolbarTop} toggleClass={toggleClass} getRawCode={getRawCode} />
-                        {tabs}
-                        <Toolbar name="bottom" layout={options.toolbarBottom} toggleClass={toggleClass} getRawCode={getRawCode} />
-                    </Container>
+                    <Toolbar name="top" layout={options.toolbarTop} toggleClass={toggleClass} getRawCode={getRawCode} />
+                    {tabs}
+                    <Toolbar name="bottom" layout={options.toolbarBottom} toggleClass={toggleClass} getRawCode={getRawCode} />
                 </Container>;
 
     // dbclick event ?

src/ui/views/standard.jsx

@@ -67,8 +67,10 @@ export function standard(dataset){
     // generate wrapper
     wrapper =   <Container className={cssClasses}>
                     <Toolbar name="top" layout={options.toolbarTop} toggleClass={toggleClass} getRawCode={getRawCode} />
-                    <DomBlockRenderer tokens={dataset[0].tokens} options={dataset[0].params} />
-                    <RawCode>{dataset[0].code}</RawCode>
+                    <Container className="enlighter-code">
+                        <DomBlockRenderer tokens={dataset[0].tokens} options={dataset[0].params} />
+                        <RawCode>{dataset[0].code}</RawCode>
+                    </Container>
                     <Toolbar name="bottom" layout={options.toolbarBottom} toggleClass={toggleClass} getRawCode={getRawCode} />
                 </Container>;