Skip to content
Permalink
Browse files
refactored ui
  • Loading branch information
AndiDittrich committed Mar 24, 2019
1 parent 6c375fb commit 1a9f730bd10874a712927d65f4af8e331c2bd974
Show file tree
Hide file tree
Showing 20 changed files with 5,536 additions and 102 deletions.
@@ -4,6 +4,7 @@
"react"
],
"rules": {
"react/jsx-key": 0
"react/jsx-key": 0,
"react/prop-types": 0
}
}

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -60,7 +60,7 @@ _gulp.task('library', ['es6-transpile'], function(){
return _gulp.src(['.tmp/enlighterjs.js', 'src/browser/jquery.js'])

// minify
.pipe(_uglify())
//.pipe(_uglify())
.pipe(_concat('enlighterjs.min.js'))

// add license header
@@ -16,7 +16,7 @@ import * as _languages from '../lang/index';
import _languageAliases from './alias';

// Container of Views/Layouts
import * as _views from '../views/index';
import * as _views from '../ui/views/index';

// helper function to process aliases
function getLanguage(lang){
@@ -87,12 +87,19 @@ export function toggleClass(element, name){
}

// create a new dom element with given attributes / text / dom nodes
export function createElement(name, attributes, ...content){
export function createElement(element, attributes, ...content){

// is function ? passthrough
if (typeof element === 'function'){
return element(attributes || {}, ...content);
}

// create new dom element
const el = _document.createElement(name);
const el = _document.createElement(element);

// inner content set ?
if (content.length > 0){

// push nodes to parent element
_foreach(content, function (node){
// valid element ?
@@ -8,6 +8,7 @@

@import "fonts.less";
@import "selectors.less";
@import "tooltip.less";

/* Object Wrapper - ALL
----------------------------------------------------------------------------------- */
@@ -88,6 +89,16 @@
display: none !important;
}

// invisble clipboard copy container
.enlighter-clipboard{
position: absolute;
left: 0px;
bottom: 0px;
width: 1px;
height: 1px;
overflow: hidden;
}

/* Object Wrapper - layout::INLINE
----------------------------------------------------------------------------------- */
.VIEW_INLINE({
@@ -157,6 +157,14 @@
}
}

// tooltip style
.STYLE_TOOLTIP(@rules){
.enlighter-tooltip{
@rules();
}
}


// match theme name
.THEME(@name, @rules){
.enlighter-t-@{name}{
@@ -0,0 +1,15 @@
// ----------------------------------------------------------------------
// 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-2019 Andi Dittrich <https://andidittrich.de>
// ----------------------------------------------------------------------

@import "fonts.less";
@import "selectors.less";

.STYLE_TOOLTIP({
z-index: 100;

});
@@ -6,15 +6,24 @@
// Copyright 2016-2018 Andi Dittrich <https://andidittrich.de>
// ----------------------------------------------------------------------

// Renderer
import _domInlineRenderer from '../renderer/dom-inline.jsx';

// Internal "ReactDOM"
import * as React from '../lib/dom';
import * as React from '../../lib/dom';

export function Button(props){

// button css classes
const classes = ['enlighter-btn'];

export function inline(dataset){
return <div className={'enlighter-default enlighter-v-inline enlighter-t-' + dataset[0].params.theme}>
{_domInlineRenderer(dataset[0].tokens, dataset[0].params)}
</div>;
}
// name set ?
if (props.name){
classes.push('enlighter-btn-' + props.name);
}

// create button
return <div
className={classes.join(' ')}
onClick={props.onClick}
>
{props.text||null}
</div>
}
@@ -0,0 +1,52 @@
// ----------------------------------------------------------------------
// 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-2018 Andi Dittrich <https://andidittrich.de>
// ----------------------------------------------------------------------

// Internal "ReactDOM"
import * as React from '../../lib/dom';

import {Container} from './container.jsx';
import {Button} from './button.jsx';

export function CodegroupSwitch(props){

// index of currently active button
let activeButton = 0;

// buttons
let buttons = [];

function click(i){
// unlight old button
React.removeClass(buttons[activeButton], 'enlighter-active');

// highlight button
React.addClass(buttons[i], 'enlighter-active');

// store active button
activeButton = i;

// propagate event
props.onChange(i);
}

// generate buttons
buttons = props.dataset.map((d, i) => {
return <Button
onClick={() => click(i)}
text={d.params.title||d.params.language}
/>
});

// first button is active
React.addClass(buttons[0], 'enlighter-active');

// generate wrapper
return <Container name="codegroup-switch">
{buttons}
</Container>;
}
@@ -0,0 +1,37 @@
// ----------------------------------------------------------------------
// 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-2019 Andi Dittrich <https://andidittrich.de>
// ----------------------------------------------------------------------

// Internal "ReactDOM"
import * as React from '../../lib/dom';

// wrap child elements into div container
export function Container(props, ...children){

// css classes
const classes = [];

// name set ?
if (props.name){
classes.push('enlighter-' + props.name);
}

// additional classnames set ?
if (props.className){
// string input ?
if (typeof props.className === 'string'){
classes.push(props.className);

// array input
}else{
classes.push(...props.className);
}
}

// use createElement directly to expand the children!
return React.createElement('div', {className: classes.join(' ')}, ...children);
}
@@ -0,0 +1,19 @@
// ----------------------------------------------------------------------
// 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-2019 Andi Dittrich <https://andidittrich.de>
// ----------------------------------------------------------------------

// Internal "ReactDOM"
import * as React from '../../lib/dom';

// wrap child elements into raw container
export function RawCode(props, content){

// just some sugar..
return <pre className="enlighter-raw">
{content}
</pre>;
}
@@ -7,9 +7,14 @@
// ----------------------------------------------------------------------

// Internal "ReactDOM"
import * as React from '../lib/dom';
import * as React from '../../lib/dom';

export default function toolbar(options){
import {Container} from './container.jsx';
import {Button} from './button.jsx';

import * as _clipboard from '../../lib/clipboard';

export function Toolbar(props){

// optimization
const _window = React.getWindow();
@@ -21,7 +26,7 @@ export default function toolbar(options){
const w = _window.open('', '', 'width=' + (_window.screen.width/2) + ', height=' + (_window.screen.height/2) + ', menubar=no, titlebar=no, toolbar=no, top=100, left=100, scrollbars=yes, status=no');

// escape code
const code = options.getRawCode().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
const code = props.getRawCode().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

// insert code
w.document.body.innerHTML = '<pre>' + code + '</pre>';
@@ -33,11 +38,17 @@ export default function toolbar(options){
_window.open('https://enlighterjs.org');
}

// trigger clipboard copy
function copyToClipboard(){
// try to copy to clipboard
_clipboard.copy(props.getRawCode());
}

// generate wrapper
return <div className={'enlighter-toolbar'}>
<div className="enlighter-btn enlighter-btn-raw" onClick={options.toggleRawCode} title="Toggle RAW code"></div>
<div className="enlighter-btn enlighter-btn-copy" onClick={options.copyCode} title="Copy to clipboard"></div>
<div className="enlighter-btn enlighter-btn-window" onClick={openCodeWindow} title="Open code in new window"></div>
<div className="enlighter-btn enlighter-btn-website" onClick={openEnlighterLink} title="EnlighterJS 3 Syntax Highlighter"></div>
</div>;
return <Container name="toolbar">
<Button name="raw" tooltip="Toggle RAW code" onClick={props.toggleRawCode}></Button>
<Button name="copy" tooltip="Copy to clipboard" onClick={copyToClipboard}></Button>
<Button name="window" tooltip="Open code in new window" onClick={openCodeWindow}></Button>
<Button name="website" tooltip="EnlighterJS 3 Syntax Highlighter" onClick={openEnlighterLink}></Button>
</Container>;
}
@@ -8,11 +8,11 @@


// Internal "ReactDOM"
import * as React from '../lib/dom';
import * as React from '../../lib/dom';

import {getSpecialLines} from '../engine/special-lines';
import {getSpecialLines} from '../../engine/special-lines';

export default function DomBlockRenderer(tokens, options = {}){
export function DomBlockRenderer({tokens, options}){

// check if the current line is special (should highlighted)
const isSpecialLine = getSpecialLines(options.highlight, options.lineoffset);
@@ -7,9 +7,9 @@
// ----------------------------------------------------------------------

// Internal "ReactDOM"
import * as React from '../lib/dom';
import * as React from '../../lib/dom';

export default function DomInlineRenderer(tokens){
export function DomInlineRenderer({tokens}){
return <span className="enlighter">
{tokens.map(token => {
return <span className={'enlighter-' + token.type}>{token.text}</span>

0 comments on commit 1a9f730

Please sign in to comment.