24 | Open this page by clicking the Render HTML button. 25 |
26 |
23 |
27 |
28 |
29 |
30 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/frame/custom_node_modules/node-sumbasic/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Vincent Utomo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/frame/custom_node_modules/node-sumbasic/README.md:
--------------------------------------------------------------------------------
1 | # node-sumbasic
2 | Implementation of SumBasic on NodeJS.
3 |
4 | Sumbasic is a popular baseline method for document summarization. The explanation could be read from the original paper: Nenkova, A. and Vanderwende, L., 2005. The impact of frequency on summarization. Microsoft Research, Redmond, Washington, Tech. Rep. MSR-TR-2005, 101.
5 |
6 | Here, the SumBasic are created as module inside `./src/index.js`.
7 |
8 | ### NPM package ###
9 | - Run `npm install node-sumbasic --save`
10 | - Require it in your project `const sumBasic = require('node-sumbasic')`
11 | - Call it `sumBasic(documents, target_summary_length, minimum_sentence_length_considered [optional])`
12 | - Example `sumBasic(documents, 100)`
13 |
14 | ### Demo run in project folder ###
15 | - Make sure to install the npm modules first `npm install`
16 | - In the project, run `node ./src/demo.js`
17 |
18 | ### What's new ###
19 |
20 | 0.1.7
21 | - Change dependencies from natural to stemmer
22 | - Add minimum sentence length to the optional parameter
23 |
24 |
25 |
--------------------------------------------------------------------------------
/frame/custom_node_modules/node-sumbasic/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "_from": "node-sumbasic",
3 | "_id": "node-sumbasic@0.1.7",
4 | "_inBundle": false,
5 | "_integrity": "sha512-xHMmNpIz55Ptj7rOTj2vSBBt6vPLfENsRuNVKhhPpOcm+2+77/GLGkEpSIVJ4Qd2m0WhQdZlyHnMOPM1ATxTYg==",
6 | "_location": "/node-sumbasic",
7 | "_phantomChildren": {},
8 | "_requested": {
9 | "type": "tag",
10 | "registry": true,
11 | "raw": "node-sumbasic",
12 | "name": "node-sumbasic",
13 | "escapedName": "node-sumbasic",
14 | "rawSpec": "",
15 | "saveSpec": null,
16 | "fetchSpec": "latest"
17 | },
18 | "_requiredBy": [
19 | "#USER",
20 | "/"
21 | ],
22 | "_resolved": "https://registry.npmjs.org/node-sumbasic/-/node-sumbasic-0.1.7.tgz",
23 | "_shasum": "379a068cda43c49b33b55c930dc0ff00dfc84e86",
24 | "_spec": "node-sumbasic",
25 | "_where": "C:\\Users\\JD\\Documents\\Git\\frame\\frame",
26 | "author": {
27 | "name": "MSVCode",
28 | "email": "msvcode@gmail.com"
29 | },
30 | "bugs": {
31 | "url": "https://github.com/MSVCode/node-sumbasic/issues"
32 | },
33 | "bundleDependencies": false,
34 | "dependencies": {
35 | "stemmer": "^1.0.2"
36 | },
37 | "deprecated": false,
38 | "description": "NodeJS implementation of popular baseline document summarizer 'SumBasic'.",
39 | "homepage": "https://github.com/MSVCode/node-sumbasic",
40 | "keywords": [
41 | "summarizer",
42 | "sumbasic",
43 | "summarization",
44 | "document"
45 | ],
46 | "license": "MIT",
47 | "main": ".\\src\\index.js",
48 | "name": "node-sumbasic",
49 | "repository": {
50 | "type": "git",
51 | "url": "git+https://github.com/MSVCode/node-sumbasic.git"
52 | },
53 | "version": "0.1.7"
54 | }
55 |
--------------------------------------------------------------------------------
/frame/custom_node_modules/node-sumbasic/src/demo.js:
--------------------------------------------------------------------------------
1 | var titles = [
2 | "Google is urging more manufacturers to enable a new security feature in Android Oreo that detects if a device has been downgraded to an earlier version of the OS. Known as rollback protection, the measure adds another layer of security in the event a device is lost or stolen, and the attacker rolls it back to an older Android firmware with known vulnerabilities. Google revealed some details about rollback protection in September, which caught the attention of Android enthusiasts who like the freedom to downgrade Android as they see fit, even though it could be a security risk. While the security feature is part of Oreo, it's not available on every Android device that runs Oreo. According to Google, rollback protection works in tandem with Project Treble, the major redesign of Android in Oreo that separates the Android platform from vendor code. The modular design aims to help Android OEMs deliver new versions of Android to end-users faster. However, Project Treble is only supported on new devices that ship with Android, rather than devices that get upgraded to Oreo. So new handsets like the Pixel 2 and Sony Xperia XZ1 are Treble-compatible, while the Nokia 8 isn't.",
3 | 'Security has long been a sore point for enterprise Android users, but Google has taken steps to improve security in the OS with Android Oreo. In a Wednesday blog post, the firm detailed a feature called rollback protection, which prevents a device from starting up if it has been downgraded to an older OS version that may contain security vulnerabilities. This means that if your business phone is stolen, it will be more difficult for a hacker to leverage security flaws found in a previous version of the OS and access your data. This could add piece of mind for IT professionals managing Android devices in the workplace. While rollback protection is part of Android Oreo, it is up to the individual manufacturers of Android devices to enable the feature, as noted by our sister site ZDNet. Rollback protection is part of Andriod Verified Boot 2.0 (AVB), designed to stop devices from starting up with software that has been altered by hackers, according to the blog post from security team member Gian G. Spicuzza. AVB runs with Project Treble, a "major re-architect" of the Android OS framework meant to make it easier for manufacturers to update to new versions of the OS.',
4 | "Since Android Oreo was made available to Pixel and Nexus devices, Google has been working to harden the security of the mobile platform. Today, the company announced some of the improvements they made in the security department throughout the last few months. Some of these security features have already been implemented like making it safer to get apps and dropping insecure network protocol, while others may be released in the not so distant future. Google confirmed that it's expanding support for hardware security, which means they have added a reference implementation for Verified Boot running with Project Treble. Verified Boot is a special security feature that's been designed to prevent devices from booting up with software that has been tampered with. The improved security implementation is called Android Verified Boot 2.0 (AVB) and offers some nifty features that should allow for easier updates and more security, including rollback protection. The latter will prevent a device to boot if downgraded to an older OS version that might be vulnerable to an exploit. Then, Android Oreo now features the new OEM Lock Hardware Abstraction Layer (HAL), which should offer device manufacturers more flexibility for how they protect in case a device is locked, unlocked, or unlockable. There are many other under the hood security improvements Google implemented into Android Oreo, so make sure to hit the source link for the full list."
5 | ];
6 |
7 | var summary = require('./index');
8 | console.log(summary(titles,50));
9 | var i=0;
--------------------------------------------------------------------------------
/frame/public/electron.js:
--------------------------------------------------------------------------------
1 | const electron = require('electron');
2 | const app = electron.app;
3 | const BrowserWindow = electron.BrowserWindow;
4 |
5 | const path = require('path');
6 | const url = require('url');
7 | const isDev = require('electron-is-dev');
8 |
9 | let mainWindow;
10 |
11 | function createWindow() {
12 | mainWindow = new BrowserWindow({width: 1920, height: 1280});
13 | mainWindow.loadURL(`file://${path.join(__dirname, '../output/webpack/production/index.html')}`);
14 | // mainWindow.webContents.openDevTools();
15 | mainWindow.on('closed', () => mainWindow = null);
16 | }
17 |
18 | app.on('ready', createWindow);
19 |
20 | app.on('window-all-closed', () => {
21 | if (process.platform !== 'darwin') {
22 | app.quit();
23 | }
24 | });
25 |
26 | app.on('activate', () => {
27 | if (mainWindow === null) {
28 | createWindow();
29 | }
30 | });
31 |
32 | // mainWindow.once('ready-to-show', () => {
33 | // mainWindow.show();
34 | // // Open the DevTools automatically if developing
35 | // mainWindow.webContents.openDevTools();
36 | // });
37 |
38 |
--------------------------------------------------------------------------------
/frame/src/assets/css/brands.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.6.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @font-face {
6 | font-family: 'Font Awesome 5 Brands';
7 | font-style: normal;
8 | font-weight: normal;
9 | src: url("../webfonts/fa-brands-400.eot");
10 | src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
11 |
12 | .fab {
13 | font-family: 'Font Awesome 5 Brands'; }
14 |
--------------------------------------------------------------------------------
/frame/src/assets/css/brands.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.6.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}
--------------------------------------------------------------------------------
/frame/src/assets/css/regular.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.6.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @font-face {
6 | font-family: 'Font Awesome 5 Free';
7 | font-style: normal;
8 | font-weight: 400;
9 | src: url("../webfonts/fa-regular-400.eot");
10 | src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
11 |
12 | .far {
13 | font-family: 'Font Awesome 5 Free';
14 | font-weight: 400; }
15 |
--------------------------------------------------------------------------------
/frame/src/assets/css/regular.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.6.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}
--------------------------------------------------------------------------------
/frame/src/assets/css/solid.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.6.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @font-face {
6 | font-family: 'Font Awesome 5 Free';
7 | font-style: normal;
8 | font-weight: 900;
9 | src: url("../webfonts/fa-solid-900.eot");
10 | src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
11 |
12 | .fa,
13 | .fas {
14 | font-family: 'Font Awesome 5 Free';
15 | font-weight: 900; }
16 |
--------------------------------------------------------------------------------
/frame/src/assets/css/solid.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.6.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:"Font Awesome 5 Free";font-weight:900}
--------------------------------------------------------------------------------
/frame/src/assets/electron.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/electron.png
--------------------------------------------------------------------------------
/frame/src/assets/flow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/flow.png
--------------------------------------------------------------------------------
/frame/src/assets/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/github.png
--------------------------------------------------------------------------------
/frame/src/assets/redux.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frame/src/assets/semantic-ui-react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/semantic-ui-react.png
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-brands-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-brands-400.eot
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-brands-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-brands-400.ttf
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-brands-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-brands-400.woff
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-brands-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-brands-400.woff2
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-regular-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-regular-400.eot
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-regular-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-regular-400.ttf
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-regular-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-regular-400.woff
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-regular-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-regular-400.woff2
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-solid-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-solid-900.eot
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-solid-900.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-solid-900.ttf
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-solid-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-solid-900.woff
--------------------------------------------------------------------------------
/frame/src/assets/webfonts/fa-solid-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/assets/webfonts/fa-solid-900.woff2
--------------------------------------------------------------------------------
/frame/src/assets/webpack.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frame/src/components/Ask/Ask.scss:
--------------------------------------------------------------------------------
1 | .askWrapper {
2 | margin: 0px !important;
3 | padding: 0px !important;
4 | height: 100% !important;
5 | margin-left: auto !important;
6 | margin-right: auto !important;
7 | max-width: calc(65% - 20px) !important;
8 | padding-left: 100px !important;
9 | }
10 |
11 | .questionTextInput {
12 | z-index: 1000 !important;
13 | width: calc(60% - 20px) !important;
14 | height: 50px !important;
15 | margin-top: 18px !important;
16 | margin-left: auto !important;
17 | margin-right: auto !important;
18 | margin-left: 90px !important;
19 | }
20 |
21 | .passageTextDisabled {
22 | width: calc(55% - 20px) !important;
23 | height: 80px !important;
24 | display: none !important;
25 | margin-left: auto !important;
26 | margin-right: auto !important;
27 | }
28 |
29 | .floatingAskButton {
30 | width: calc(60% - 20px) !important;
31 | z-index: 1000 !important;
32 | text-align: center !important;
33 | margin-left: auto !important;
34 | margin-right: auto !important;
35 | margin-left: 90px !important;
36 | // position: sticky !important;
37 | // text-align: center !important;
38 | }
39 |
40 | .smallDetailText {
41 | width: calc(60% - 20px) !important;
42 | // margin-right: auto !important;
43 | // margin-left: auto !important;
44 | margin-left: auto !important;
45 | margin-right: auto !important;
46 | margin-left: 85px !important;
47 | text-align: center !important;
48 | font-size: 1.05vmax !important;
49 | margin-top: 8px !important;
50 | letter-spacing: 1px !important;
51 | // text-align: center !important;
52 | }
53 |
54 | .answerText {
55 | width: calc(60% - 20px) !important;
56 | // margin-right: auto !important;
57 | // margin-left: auto !important;
58 | // margin-left: 100px !important;
59 | margin-left: auto !important;
60 | margin-right: auto !important;
61 | text-align: center !important;
62 | font-size: 1.05vmax !important;
63 | margin-top: 8px !important;
64 | letter-spacing: 1px !important;
65 | color: rgba(204, 204, 204, .8) !important;
66 | // text-align: center !important;
67 | }
68 |
--------------------------------------------------------------------------------
/frame/src/components/AskMain/AskMain.scss:
--------------------------------------------------------------------------------
1 | .askWrapperMain {
2 | margin: 0px !important;
3 | padding: 0px !important;
4 | height: 100% !important;
5 | }
6 |
7 | .questionTextInputMain {
8 | margin: 0px !important;
9 | padding: 0px !important;
10 | z-index: 1000 !important;
11 | height: 50px !important;
12 | margin-top: 18px !important;
13 | text-align: center !important;
14 | width: calc(70% - 20px) !important;
15 | margin-left: auto !important;
16 | margin-right: auto !important;
17 | }
18 |
19 | .passageTextDisabled {
20 | height: 80px !important;
21 | display: none !important;
22 | }
23 |
24 | .floatingAskButtonMain {
25 | margin: 0px !important;
26 | padding: 0px !important;
27 | z-index: 1000 !important;
28 | text-align: center !important;
29 | width: calc(70% - 20px) !important;
30 | margin-left: auto !important;
31 | margin-right: auto !important;
32 | // text-align: center !important;
33 | }
34 |
35 | .smallDetailTextAskMain {
36 | margin-right: auto !important;
37 | margin-left: auto !important;
38 | color: rgba(88, 88, 88, 1.0) !important;
39 | font-size: 1.05em !important;
40 | margin-top: 8px !important;
41 | letter-spacing: 1px !important;
42 | width: calc(70% - 20px) !important;
43 | margin-left: auto !important;
44 | margin-right: auto !important;
45 | text-align: center !important;
46 | // text-align: center !important;
47 | }
48 |
49 |
50 | .answerTextAskMain {
51 | margin-right: auto !important;
52 | margin-left: auto !important;
53 | width: calc(70% - 20px) !important;
54 | margin: 0px !important;
55 | padding: 0px !important;
56 | font-size: 1.25em !important;
57 | margin-top: 8px !important;
58 | margin-left: auto !important;
59 | margin-right: auto !important;
60 | letter-spacing: 1px !important;
61 | color: rgba(204, 204, 204, .8) !important;
62 | text-align: center !important;
63 | margin-bottom: 15px !important;
64 | // text-align: center !important;
65 | }
66 |
67 |
--------------------------------------------------------------------------------
/frame/src/components/Brand/Brand.jsx:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | import React, { Component } from 'react';
3 | import styles from './Brand.scss';
4 |
5 | export default class Brand extends Component {
6 | componentDidMount() {
7 | const options = { onChange: this.props.onChange };
8 | this._container = document.getElementById('jsonEditor');
9 | }
10 |
11 | render() {
12 | return (
13 |
14 |
18 | );
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/frame/src/components/Brand/Brand.scss:
--------------------------------------------------------------------------------
1 | .brandContainer {
2 | width: 100%;
3 | height: 100%;
4 | margin-top: 1px;
5 | padding-right: 5px;
6 | padding-left: 5px;
7 | padding-top: 10px;
8 | padding-bottom: 10px;
9 | max-height: 53px;
10 | overflow: hidden;
11 | }
12 |
13 | .brandContainer:hover {
14 | // -moz-box-shadow: 0 0 4px rgb(208, 255, 0);
15 | // -webkit-box-shadow: 0 4 6px rgb(208, 255, 0);
16 | // box-shadow: 0px 0px 4px rgb(208, 255, 0);
17 | cursor: pointer;
18 | }
19 |
20 | /*
21 | .brandContainer:hover .brandTitle {
22 | color: rgb(255,223,0) !important;
23 | text-shadow: 1px 1px 1px rgb(84, 97, 91) !important;
24 | }
25 | */
26 |
27 | .brandContainer h4{
28 | letter-spacing: 3px;
29 | font-weight: lighter;
30 | font-size: 1.6em;
31 | color: rgba(240, 240, 240, .95);
32 | text-shadow: 1px 2px 1px rgba(50,20,50,0.05);
33 | }
34 |
35 | .brandContainer p {
36 | letter-spacing: 1px;
37 | font-weight: lighter;
38 | font-size: .6em;
39 | color: rgba(240, 240, 240, .85);
40 | text-shadow: 1px 2px 1px rgba(50,20,50,0.05);
41 | }
42 |
43 | /* Neon glow effect from here: http://enjoycss.com/gallery/text_effects/39 */
44 |
45 | .brandTitle {
46 | -webkit-box-sizing: border-box;
47 | -moz-box-sizing: border-box;
48 | box-sizing: border-box;
49 | border: none;
50 | color: rgba(255,255,255,1);
51 | text-decoration: normal;
52 | text-align: center;
53 | -o-text-overflow: clip;
54 | text-overflow: clip;
55 | white-space: pre;
56 | text-shadow: 0 0 10px rgba(255,255,255,.75) , 0 0 20px rgba(255,255,255,.75) , 0 0 30px rgba(255,255,255,.75) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff !important;
57 |
58 | -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) !important;
59 | -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) !important;
60 | -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) !important;
61 | transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) !important;
62 | display: inline-block;
63 | margin: 0;
64 | margin-left: auto;
65 | margin-right: auto;
66 | text-align: center;
67 | }
68 |
69 | .brandTitle:hover {
70 | text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 20px #ff00de , 0 0 40px #ff00de , 0 0 60px #ff00de , 0 0 80px #ff00de !important;
71 |
72 | }
73 |
74 | .brandSubtitle {
75 | margin-left: 20px;
76 | display: inline-block;
77 | text-shadow: 0 0 10px rgba(255,255,255,.3) , 0 0 20px rgba(255,255,255,.3) , 0 0 30px rgba(255,255,255,.3) , 0 0 20px #ff00de , 0 0 40px #ff00de , 0 0 60px #ff00de , 0 0 80px #ff00de !important;
78 | -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) !important;
79 | -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) !important;
80 | -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) !important;
81 | transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) !important;
82 | }
--------------------------------------------------------------------------------
/frame/src/components/EntryCreate/EntryCreate.scss:
--------------------------------------------------------------------------------
1 | .entryCreateContainer {
2 | display: inline !important;
3 | }
4 |
5 | .formDisabled p {
6 | color: grey !important;
7 | }
8 |
9 | .ant-form-item {
10 | margin: 5px !important;
11 | }
12 |
13 |
14 | .ant-modal-content {
15 | border-radius: 3px !important;
16 | background: rgba(238, 238, 238, .93) !important; /* fallback for old browsers */
17 | box-shadow: 0 0 0 1px rgba(204, 209, 212, 0.2);
18 | }
19 |
20 | .ant-modal-header {
21 | box-shadow: 0 0 0 1px rgba(204, 209, 212, 0.2);
22 | border-radius: 3px !important;
23 | background: rgba(238, 238, 238, .93) !important; /* fallback for old browsers */
24 | }
25 |
26 | .ant-modal-title {
27 | font-size: 1.4em;
28 | height: 40px !important;
29 | }
30 |
31 | .entryTimestampBlock {
32 | top: 0 !important;
33 | left: 0 !important;
34 | color: rgba(65, 65, 65, 0.65);
35 | margin-left: 23px !important;
36 | margin-top: 40px !important;
37 | position: absolute !important;
38 | display: inline !important;
39 | }
40 |
41 | .modalFooterBlock {
42 | position: absolute;
43 | bottom: 0;
44 | left: 0;
45 | margin-bottom: 10px;
46 | margin-left: 10px;
47 | }
--------------------------------------------------------------------------------
/frame/src/components/EntryEditForm/EntryEditForm.scss:
--------------------------------------------------------------------------------
1 | .entryCreateContainer {
2 | display: inline !important;
3 | }
4 |
5 | .formDisabled p {
6 | color: grey !important;
7 | }
8 |
9 | .ant-form-item {
10 | margin: 5px !important;
11 | }
12 |
13 |
14 | .ant-modal-content {
15 | border-radius: 3px !important;
16 | background: rgba(238, 238, 238, .93) !important; /* fallback for old browsers */
17 | box-shadow: 0 0 0 1px rgba(204, 209, 212, 0.2);
18 | }
19 |
20 | .ant-modal-header {
21 | box-shadow: 0 0 0 1px rgba(204, 209, 212, 0.2);
22 | border-radius: 3px !important;
23 | background: rgba(238, 238, 238, .93) !important; /* fallback for old browsers */
24 | }
25 |
26 | .ant-modal-title {
27 | font-size: 1.4em;
28 | height: 40px !important;
29 | }
30 |
31 | .entryTimestampBlock {
32 | top: 0 !important;
33 | left: 0 !important;
34 | color: rgba(65, 65, 65, 0.65);
35 | margin-left: 23px !important;
36 | margin-top: 40px !important;
37 | position: absolute !important;
38 | display: inline !important;
39 | }
40 |
41 | .modalFooterBlock {
42 | position: absolute;
43 | bottom: 0;
44 | left: 0;
45 | margin-bottom: 10px;
46 | margin-left: 10px;
47 | }
--------------------------------------------------------------------------------
/frame/src/components/FJSONEditor/FJSONEditor.jsx:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | import React, { Component } from 'react';
3 | import JSONEditor from 'jsoneditor';
4 | import 'jsoneditor/dist/jsoneditor.css';
5 | import styles from './FJSONEditor.scss';
6 |
7 | export default class FJSONEditor extends Component {
8 | constructor(props) {
9 | super(props);
10 | }
11 |
12 | componentDidMount() {
13 | const options = { onChange: this.props.onChange };
14 | this._container = document.getElementById('jsonEditor');
15 | this._editor = new JSONEditor(this._container, options);
16 | this.props.editorRef(this._editor);
17 | this._editor.set(this.props.json);
18 | }
19 |
20 | componentWillReceiveProps(nextProps) {
21 | this._editor.set(nextProps.json);
22 | }
23 |
24 | render() {
25 | // console.log(this.props.json);
26 | return ;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/frame/src/components/FJSONEditor/FJSONEditor.scss:
--------------------------------------------------------------------------------
1 | .editor {
2 | height: 100%;
3 | width: 100%;
4 | overflow: auto !important;
5 | }
6 |
7 | .jsoneditor {
8 | border-radius: 3px;
9 | margin-top: 8px;
10 | font-size: .75em !important;
11 | border: none !important;
12 | overflow: auto !important;
13 |
14 | }
15 |
16 | #jsonEditor {
17 | border: none !important;
18 | box-shadow: none !important;
19 | border-radius: 3px !important;
20 | box-shadow: 1px 2px 2px 1px rgba(39, 39, 39, 0.85) !important;
21 | background: rgb(238, 238, 238) !important; /* fallback for old browsers */
22 | min-height: 250px;
23 | max-height: 450px;
24 | overflow: auto !important;
25 | }
26 |
27 | .jsoneditor-menu {
28 | margin-top: 2px !important;
29 | border-radius: 3px;
30 | border-color: rgba(79, 176, 255, .85) !important;
31 | background-color: rgba(79, 176, 255, .85) !important;
32 | }
33 |
34 | .nav-bar-empty {
35 | display: none !important;
36 | }
--------------------------------------------------------------------------------
/frame/src/components/Home/Home.scss:
--------------------------------------------------------------------------------
1 | .homeWrapper {
2 | margin: 0 !important;
3 | padding: 0 !important;
4 | width: 100% !important;
5 | height: 100% !important;
6 | background-color: rgba(250, 250, 250, 1.0) !important;
7 | overflow: auto !important;
8 | }
9 |
10 | .ant-collapse-item, .ant-collapse-item-active {
11 | background-color: transparent !important;
12 | }
13 |
14 | .datetime {
15 | top: 0 !important;
16 | right: 0 !important;
17 | margin: 25px !important;
18 | margin-right: 45px !important;
19 | margin-top: 10px !important;
20 | position: absolute !important;
21 | z-index: 100 !important;
22 | letter-spacing: 1px !important;
23 | }
24 |
25 |
26 | .libraryOverview {
27 | background-color: transparent !important;
28 | padding: 0 !important;
29 | margin: 0 !important;
30 | margin: 20px !important;
31 | // margin: 40px !important;
32 | }
33 |
34 | .libraryOverviewText {
35 | letter-spacing: 1px !important;
36 | font-weight: lighter !important;
37 | font-size: 1.5em !important;
38 | color: rgba(66, 66, 66, 0.9);
39 | text-align: center !important;
40 | }
41 |
42 | .askInput {
43 | background-color: transparent !important;
44 | padding: 0 !important;
45 | margin: 0 !important;
46 | margin: 20px !important;
47 | // margin: 40px !important;
48 | }
49 |
50 | .collapseTransparent {
51 | background-color: transparent !important;
52 | }
53 |
54 | .entriesChart {
55 | background-color: transparent !important;
56 | margin: 20px !important;
57 | // margin-right: -150px !important;
58 | }
59 |
60 | .tagsText {
61 | display: inline !important;
62 | }
63 |
64 | .titleText {
65 | display: inline !important;
66 | }
67 |
68 | .entriesVisualizedText {
69 | margin: 40px !important;
70 | font-weight: lighter !important;
71 | margin-right: 65px !important;
72 | font-size: 1.6em !important;
73 | letter-spacing: 1px !important;
74 | color: rgba(44, 44, 44, 0.9);
75 | text-align: center !important;
76 | }
--------------------------------------------------------------------------------
/frame/src/components/SearchLibrary/SearchLibrary.scss:
--------------------------------------------------------------------------------
1 | .homeWrapper {
2 | margin: 0 !important;
3 | padding: 0 !important;
4 | width: 100% !important;
5 | height: 100% !important;
6 | background-color: rgba(250, 250, 250, 1.0) !important;
7 | overflow: auto !important;
8 | }
9 |
10 | .ant-collapse-item, .ant-collapse-item-active {
11 | background-color: transparent !important;
12 | }
13 |
14 | .datetime {
15 | top: 0 !important;
16 | right: 0 !important;
17 | margin: 25px !important;
18 | margin-right: 45px !important;
19 | margin-top: 10px !important;
20 | position: absolute !important;
21 | z-index: 100 !important;
22 | letter-spacing: 1px !important;
23 | }
24 |
25 | .askInput {
26 | background-color: transparent !important;
27 | padding: 0 !important;
28 | margin: 0 !important;
29 | margin: 20px !important;
30 | text-align: center !important;
31 | // margin: 40px !important;
32 | }
33 |
34 | .titleTextP {
35 | margin: 20px !important;
36 | letter-spacing: 1px !important;
37 | color: rgba(88, 88, 88, 1.0) !important;
38 | font-size: 1.25em !important;
39 | }
40 |
41 | .tagsHolder {
42 | text-align: center !important;
43 | width: calc(70% - 20px) !important;
44 | margin: 20px !important;
45 | margin-left: auto !important;
46 | margin-right: auto !important;
47 | // margin-left: 150px !important;
48 | }
49 |
50 | .collapseTransparent {
51 | background-color: transparent !important;
52 | }
53 |
54 | .entriesChart {
55 | background-color: transparent !important;
56 | margin: 20px !important;
57 | // margin-right: -150px !important;
58 | }
59 |
60 | .tagsText {
61 | display: inline !important;
62 | }
63 |
64 | .titleText {
65 | display: inline !important;
66 | }
67 |
68 | .entriesVisualizedText {
69 | margin: 40px !important;
70 | font-weight: lighter !important;
71 | margin-right: 65px !important;
72 | font-size: 1.6em !important;
73 | letter-spacing: 1px !important;
74 | color: rgba(44, 44, 44, 0.9);
75 | text-align: center !important;
76 | }
--------------------------------------------------------------------------------
/frame/src/components/Settings/Settings.jsx:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | import config from '../../data/config.json';
3 | import React, { Component } from "react";
4 | import PropTypes, { shape } from 'prop-types';
5 | import {setState, getState} from '../../utils/session-state';
6 | import {
7 | Row, Col, Layout, Menu, Breadcrumb,
8 | Icon, Button, Switch, Dropdown, message,
9 | Tooltip, Select, Drawer, Radio, Collapse, List,
10 | Divider, Form, Input
11 | } from 'antd';
12 |
13 | /**
14 | * TODO: Eventually separate out the summarizer too and other analysis components,
15 | * since this class is getting massive.
16 | */
17 |
18 | import { Wrapper, Tab, TabList, TabPanel} from 'react-aria-tabpanel';
19 |
20 | import ReactJson from 'react-json-view';
21 |
22 | import saveToDB from '../../utils/save-db';
23 | import getFromDB from '../../utils/load-db';
24 | import openDB from '../../utils/create-db';
25 | import traverseEntriesById from '../../utils/entries-traversal';
26 | import replaceEntry from '../../utils/replace-entry';
27 |
28 | import './Settings.scss';
29 |
30 | const RadioGroup = Radio.Group;
31 | const Panel = Collapse.Panel;
32 |
33 | /** Data library / source vars */
34 | const savedSettings = config.savedSettings;
35 | const defaultFLib = savedSettings.defaultLibrary;
36 |
37 | export default class Settings extends Component {
38 |
39 | constructor(props) {
40 | super(props);
41 | this.state = {
42 | _isMounted: false,
43 | };
44 | }
45 |
46 | componentDidMount() {
47 | this.setState({_isMounted: true});
48 | }
49 |
50 | componentWillUnount() {
51 | this.setState({_isMounted: false});
52 | }
53 |
54 | render() {
55 | return (
56 |
15 |
17 | F R A M E
v 0.1.0
16 |
57 | {/* Settingsssss */}
58 |
59 | );
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/frame/src/components/Settings/Settings.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jddunn/frame/a002056b22d9986ec41d0a07dff3641c3582c6f4/frame/src/components/Settings/Settings.scss
--------------------------------------------------------------------------------
/frame/src/components/VisualizeLibrary/VisualizeLibrary.scss:
--------------------------------------------------------------------------------
1 | .homeWrapper {
2 | margin: 0 !important;
3 | padding: 0 !important;
4 | width: 100% !important;
5 | height: 100% !important;
6 | background-color: rgba(250, 250, 250, 1.0) !important;
7 | overflow: auto !important;
8 | }
9 |
10 | .ant-collapse-item, .ant-collapse-item-active {
11 | background-color: transparent !important;
12 | }
13 |
14 | .datetime {
15 | top: 0 !important;
16 | right: 0 !important;
17 | margin: 25px !important;
18 | margin-right: 45px !important;
19 | margin-top: 10px !important;
20 | position: absolute !important;
21 | z-index: 100 !important;
22 | letter-spacing: 1px !important;
23 | }
24 |
25 | .askInput {
26 | background-color: transparent !important;
27 | padding: 0 !important;
28 | margin: 0 !important;
29 | margin: 20px !important;
30 | // margin: 40px !important;
31 | }
32 |
33 | .collapseTransparent {
34 | background-color: transparent !important;
35 | }
36 |
37 | .entriesChart {
38 | background-color: transparent !important;
39 | margin: 20px !important;
40 | // margin-right: -150px !important;
41 | }
42 |
43 | .tagsText {
44 | display: inline !important;
45 | }
46 |
47 | .titleText {
48 | display: inline !important;
49 | }
50 |
51 | .entriesVisualizedText {
52 | margin: 40px !important;
53 | font-weight: lighter !important;
54 | margin-right: 65px !important;
55 | font-size: 1.6em !important;
56 | letter-spacing: 1px !important;
57 | color: rgba(44, 44, 44, 0.9);
58 | text-align: center !important;
59 | }
--------------------------------------------------------------------------------
/frame/src/components/Visualizer/Visualizer.scss:
--------------------------------------------------------------------------------
1 | .FancyTabs-tabTextSmall {
2 | margin: 0 !important;
3 | padding: 0 !important;
4 | letter-spacing: 1px !important;
5 | font-size: 1.05vmax !important;
6 | margin-top: -10px !important;
7 | }
8 |
9 | .FancyTabs-tablistItemSmall {
10 | height: 32px !important;
11 | box-shadow: 0 1px 1px 0 rgba(53, 53, 53, 0.1) !important;
12 | margin-top: -18px !important;
13 | background-color: rgba(239, 244, 248, 0.923) !important;
14 | }
15 |
16 | .leftViz {
17 | top: 0 !important;
18 | left: 0 !important;
19 | float: left !important;
20 | margin: 0 !important;
21 | padding: 0 !important;
22 | margin-left: 150px !important;
23 | margin-right: 50px !important;
24 | padding: 0 !important;
25 | max-width: calc(55% - 20px) !important;
26 | max-height: calc(75% - 20px) !important;
27 | text-align: center !important;
28 | }
29 |
30 | .rightViz {
31 | top: 0 !important;
32 | right: 0 !important;
33 | margin: 0 !important;
34 | float: right !important;
35 | margin-right: 150px !important;
36 | padding: 0 !important;
37 | max-width: calc(55% - 20px) !important;
38 | max-height: calc(75% - 20px) !important;
39 | text-align: center !important;
40 | }
41 |
42 | .centerViz {
43 | margin: 0 !important;
44 | padding: 0 !important;
45 | text-align: center !important;
46 | margin-left: auto !important;
47 | margin-right: auto !important;
48 | max-width: calc(65% - 20px) !important;
49 | // max-height: calc(80% - 20px) !important;
50 | }
51 |
52 | .leftViz tspan {
53 | font-size: .9vmax !important;
54 | }
55 |
56 | .rightViz tspan {
57 | font-size: .9vmax !important;
58 | }
59 |
60 | .centerViz tspan {
61 | font-size: .9vmax !important;
62 | }
63 |
64 | .innerContentTextCenter {
65 | text-align: center !important;
66 | margin: 0 !important;
67 | padding: 0 !important;
68 | margin-left: auto !important;
69 | margin-right: auto !important;
70 | letter-spacing: 1px !important;
71 | font-size: 1.0vmax !important;
72 | }
73 |
74 |
75 | .FancyTabs-tablistHigher {
76 | list-style-type: none;
77 | margin: 0;
78 | padding: 0;
79 | margin-top: -20px !important;
80 | margin-left: auto !important;
81 | margin-right: auto !important;
82 | text-align: center !important;
83 | width: 100% !important;
84 | }
--------------------------------------------------------------------------------
/frame/src/components/vendor/basic.scss:
--------------------------------------------------------------------------------
1 | .md-block-header-one {
2 | font-size: 2em;
3 | }
4 | .md-block-header-two {
5 | font-size: 1.7em;
6 | }
7 | .md-block-header-three {
8 | font-size: 1.3em;
9 | }
10 | .md-block-header-four {
11 | font-size: 1em;
12 | }
13 | .md-block-header-five {
14 | font-size: 0.8em;
15 | }
16 | .md-block-header-six {
17 | font-size: 0.7em;
18 | }
19 |
20 | .md-block-header-one,
21 | .md-block-header-two,
22 | .md-block-header-three,
23 | .md-block-header-four,
24 | .md-block-header-five,
25 | .md-block-header-six {
26 | margin-bottom: 5px;
27 | }
28 |
29 | .md-block-blockquote {
30 | margin: 0;
31 | padding-left: 15px;
32 | border-left: 5px solid #4CA8DE;
33 | padding: 10px 0 10px 20px;
34 | background-color: #E2F2FF;
35 | font-size: 1.1em;
36 | }
37 |
38 | .md-block-image {
39 | margin: 0 0 10px 0;
40 |
41 | img {
42 | width: 100%;
43 | }
44 |
45 | figcaption {
46 | text-align: center;
47 | font-size: 0.9em;
48 | }
49 | }
50 |
51 | .md-block-todo {
52 | margin: 10px 0 10px 0;
53 |
54 | input[type=checkbox] {
55 | float: left;
56 | position: relative;
57 | top: 0px;
58 | left: -2px;
59 | }
60 | p {
61 | margin-left: 18px;
62 | }
63 | }
64 |
65 | .md-block-unordered-list-item, .md-block-ordered-list-item {
66 | padding-left: 20px;
67 |
68 | li {
69 | margin-bottom: 5px;
70 | }
71 | }
72 |
73 | .md-block-atomic-embed {
74 | margin: 10px 0;
75 | }
76 |
77 | .md-block-atomic-break {
78 | hr {
79 | max-width: 100px;
80 | border: 2px solid #ccc;
81 | }
82 | }
83 |
84 | .md-inline-code {
85 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
86 | margin: 4px 0px;
87 | font-size: 0.9em;
88 | padding: 1px 3px;
89 | color: rgb(85, 85, 85);
90 | background-color: rgb(252, 252, 252);
91 | border-width: 1px;
92 | border-style: solid;
93 | border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(187, 187, 187);
94 | border-image: initial;
95 | border-radius: 3px;
96 | box-shadow: rgb(187, 187, 187) 0px -1px 0px inset;
97 | }
98 |
99 |
100 | .md-inline-link {
101 | color: #08c;
102 |
103 | &:visited {
104 | color: #08c;
105 | }
106 | }
107 |
108 | .md-inline-highlight {
109 | background: yellow;
110 | display: inline;
111 | padding: 2px 4px;
112 | }
113 |
114 | p {
115 | &.md-block-block-quote-caption {
116 |
117 | &::before {
118 | content: '\2013';
119 | color: #999;
120 | float: left;
121 | font-weight: bold;
122 | display: inline;
123 | margin-right: 10px;
124 | }
125 | margin-top: 0;
126 | font-size: 0.8em;
127 | padding-top: 5px;
128 | padding-bottom: 5px;
129 | padding-left: 10px;
130 | background: #fafafa;
131 | }
132 | }
133 |
134 | .md-block-code-container {
135 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
136 | white-space: pre;
137 | word-spacing: normal;
138 | word-break: normal;
139 | word-wrap: normal;
140 | background-color: rgba(0, 0, 0, 0.05);
141 | font-size: 16px;
142 | padding: 20px;
143 | margin: 1em 0px;
144 |
145 | > pre {
146 | margin-top: 0;
147 | padding-top: 0;
148 | }
149 | }
150 |
151 | .md-block-code-block {
152 | white-space: pre-wrap;
153 | word-wrap: break-word;
154 | }
155 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/LinkEditComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { getVisibleSelectionRect } from 'draft-js';
4 |
5 | const getRelativeParent = (element) => {
6 | if (!element) {
7 | return null;
8 | }
9 |
10 | const position = window.getComputedStyle(element).getPropertyValue('position');
11 | if (position !== 'static') {
12 | return element;
13 | }
14 |
15 | return getRelativeParent(element.parentElement);
16 | };
17 |
18 | export default class LinkEditComponent extends React.Component {
19 |
20 | static propTypes = {
21 | editorState: PropTypes.object.isRequired,
22 | url: PropTypes.string.isRequired,
23 | blockKey: PropTypes.string.isRequired,
24 | entityKey: PropTypes.string.isRequired,
25 | removeLink: PropTypes.func.isRequired,
26 | editLink: PropTypes.func.isRequired,
27 | };
28 |
29 | constructor(props) {
30 | super(props);
31 |
32 | this.state = {
33 | position: {},
34 | };
35 | this.renderedOnce = false;
36 | }
37 |
38 | componentDidMount() {
39 | setTimeout(this.calculatePosition, 0);
40 | }
41 |
42 | shouldComponentUpdate(nextProps, nextState) {
43 | if (this.renderedOnce) {
44 | const { blockKey, entityKey } = this.props;
45 | const ret = !this.hasPosition(nextState.position) || blockKey !== nextProps.blockKey || entityKey !== nextProps.entityKey;
46 | if (ret) {
47 | this.renderedOnce = false;
48 | }
49 | return ret;
50 | }
51 | this.renderedOnce = true;
52 | return true;
53 | }
54 |
55 | componentDidUpdate() {
56 | setTimeout(this.calculatePosition, 0);
57 | }
58 |
59 | hasPosition = (position) => {
60 | if (Object.keys(this.state.position).length === 0) {
61 | return false;
62 | }
63 | const { top, left } = this.state.position;
64 | return position.top === top && position.left === left;
65 | };
66 |
67 | calculatePosition = () => {
68 | if (!this.toolbar) {
69 | return;
70 | }
71 | const relativeParent = getRelativeParent(this.toolbar.parentElement);
72 | const relativeRect = relativeParent ? relativeParent.getBoundingClientRect() : window.document.body.getBoundingClientRect();
73 | const selectionRect = getVisibleSelectionRect(window);
74 | if (!selectionRect) {
75 | return;
76 | }
77 | const position = {
78 | top: (selectionRect.top - relativeRect.top) + 35,
79 | left: (selectionRect.left - relativeRect.left) + (selectionRect.width / 2),
80 | transform: 'translate(-50%) scale(1)',
81 | };
82 | this.setState({ position });
83 | };
84 |
85 | removeLink = (e) => {
86 | e.preventDefault();
87 | e.stopPropagation();
88 | this.props.removeLink(this.props.blockKey, this.props.entityKey);
89 | };
90 |
91 | editLink = (e) => {
92 | e.preventDefault();
93 | e.stopPropagation();
94 | this.props.editLink(this.props.blockKey, this.props.entityKey);
95 | };
96 |
97 | render() {
98 | let url = this.props.url;
99 | if (url.length > 30) {
100 | url = `${url.slice(0, 30)}...`;
101 | }
102 | return (
103 | {
107 | this.toolbar = element;
108 | }}
109 | >
110 | {url}
111 |
112 |
113 |
114 | );
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/addbutton.scss:
--------------------------------------------------------------------------------
1 | $add-btn-width: 30px;
2 |
3 |
4 | .md-side-toolbar {
5 | display: flex;
6 | position: absolute;
7 | z-index: 1;
8 | left: -35px;
9 | top: 0;
10 | transition: all 0.2s ease;
11 | }
12 |
13 | .md-sb-button {
14 | background: none;
15 | border: 1px solid #5b5b5b;
16 | color: #6D6D6D;
17 | cursor: pointer;
18 | height: $add-btn-width;
19 | width: $add-btn-width;
20 | border-radius: $add-btn-width/2;
21 | font-weight: bold;
22 | font-size: 20px;
23 | margin-right: 2px;
24 | text-align: center;
25 | transition: all 0.2s ease;
26 |
27 | &:focus {
28 | outline: none;
29 | border-color: #08c;
30 | color: #08c;
31 | }
32 |
33 | &:hover {
34 | color: green;
35 | }
36 |
37 | &.md-sb-img-button {
38 | background: none;
39 | background-color: white;
40 | }
41 |
42 | svg path {
43 | stroke-width: 0;
44 | fill: #545454;
45 | }
46 | }
47 |
48 | .md-add-button {
49 | &.md-open-button {
50 | transform: rotate(45deg);
51 | }
52 | }
53 |
54 | .md-add-btn-anim-appear {
55 | transform: translate3d(-38px, 0px, 0px);
56 | opacity: 0;
57 | }
58 |
59 | .md-add-btn-anim-appear.md-add-btn-anim-appear-active {
60 | transform: translate3d(0px, 0px, 0px);
61 | opacity: 1;
62 | transition: all .5s ease-in;
63 | }
64 |
65 | .md-add-btn-anim-enter {
66 | transform: translate3d(-38px, 0px, 0px);
67 | opacity: 0;
68 | }
69 |
70 | .md-add-btn-anim-enter.md-add-btn-anim-enter-active {
71 | opacity: 1;
72 | transform: translate3d(0px, 0px, 0px);
73 | transition: all 500ms ease-in;
74 | }
75 |
76 | .md-add-btn-anim-exit {
77 | opacity: 1;
78 | }
79 |
80 | .md-add-btn-anim-exit.md-add-btn-anim-exit-active {
81 | opacity: 0.01;
82 | transition: opacity 300ms ease-in;
83 | }
84 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/blocks/atomic.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // import './atomic.scss';
3 |
4 | import React from 'react';
5 |
6 | const AtomicBlock = (props) => {
7 | const content = props.getEditorState().getCurrentContent();
8 | const entity = content.getEntity(props.block.getEntityAt(0));
9 | const data = entity.getData();
10 | const type = entity.getType();
11 | if (type === 'image') {
12 | return (
13 |
14 | 
15 |
19 | );
20 | }
21 | return
16 |
17 |
18 | No supported block for {type}
; 22 | }; 23 | 24 | AtomicBlock.propTypes = { 25 | block: PropTypes.object, 26 | getEditorState: PropTypes.func, 27 | }; 28 | 29 | export default AtomicBlock; 30 | -------------------------------------------------------------------------------- /frame/src/components/vendor/components/blocks/atomic.scss: -------------------------------------------------------------------------------- 1 | $control-btn-width: 22px; 2 | 3 | .md-block-atomic { 4 | margin: 0; 5 | img { 6 | width: 100%; 7 | border: 1px solid #eee; 8 | box-sizing: border-box; 9 | } 10 | } 11 | 12 | .md-block-atomic-wrapper { 13 | position: relative; 14 | } 15 | 16 | .md-block-atomic-controls { 17 | display: none; 18 | position: absolute; 19 | top: 0; 20 | right: 0; 21 | transition: all 0.2s ease; 22 | 23 | button { 24 | display: inline-block; 25 | background-color: #EAEAEA; 26 | border: none; 27 | color: #6D6D6D; 28 | cursor: pointer; 29 | height: $control-btn-width; 30 | width: $control-btn-width; 31 | border-radius: $control-btn-width/2; 32 | position: absolute; 33 | z-index: 1; 34 | left: -27px; 35 | font-weight: bold; 36 | text-align: center; 37 | transition: all 0.2s ease; 38 | 39 | &:focus { 40 | outline: none; 41 | border-color: #08c; 42 | color: #08c; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /frame/src/components/vendor/components/blocks/blockquotecaption.js: -------------------------------------------------------------------------------- 1 | // import './blockquotecaption.scss'; 2 | 3 | import React from 'react'; 4 | import { EditorBlock } from 'draft-js'; 5 | 6 | export default (props) => ( 7 | 8 |5 | ); 6 | -------------------------------------------------------------------------------- /frame/src/components/vendor/components/blocks/caption.js: -------------------------------------------------------------------------------- 1 | // import './caption.scss'; 2 | 3 | import React from 'react'; 4 | import { EditorBlock } from 'draft-js'; 5 | 6 | export default (props) => ( 7 |
40 |
44 |
46 |
47 | );
48 | }
49 | return
41 | 
42 |
43 |
29 |
30 |
31 |
32 |
34 | );
35 | }
36 | }
37 |
38 |
39 | TodoBlock.propTypes = {
40 | block: PropTypes.object,
41 | blockProps: PropTypes.object,
42 | };
43 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/blocks/todo.scss:
--------------------------------------------------------------------------------
1 | .md-block-todo {
2 |
3 | input[type=checkbox] {
4 | cursor: pointer;
5 | float: left;
6 | position: relative;
7 | top: 4px;
8 | left: -4px;
9 | }
10 |
11 | .public-DraftStyleDefault-block {
12 | margin-left: 18px;
13 | }
14 |
15 | .md-block-todo-completed {
16 | color: #949494;
17 | text-decoration: line-through;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/blocktoolbar.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 | import { RichUtils } from 'draft-js';
4 |
5 | import StyleButton from './stylebutton';
6 |
7 |
8 | const BlockToolbar = (props) => {
9 | if (props.buttons.length < 1) {
10 | return null;
11 | }
12 | const { editorState } = props;
13 | const blockType = RichUtils.getCurrentBlockType(editorState);
14 | return (
15 |
16 | {props.buttons.map((type) => {
17 | const iconLabel = {};
18 | iconLabel.label = type.label;
19 | return (
20 |
31 | );
32 | };
33 |
34 | BlockToolbar.propTypes = {
35 | buttons: PropTypes.array,
36 | editorState: PropTypes.object.isRequired,
37 | onToggle: PropTypes.func,
38 | };
39 |
40 | export default BlockToolbar;
41 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/customrenderer.js:
--------------------------------------------------------------------------------
1 | import QuoteCaptionBlock from './blocks/blockquotecaption';
2 | import CaptionBlock from './blocks/caption';
3 | import AtomicBlock from './blocks/atomic';
4 | import TodoBlock from './blocks/todo';
5 | import ImageBlock from './blocks/image';
6 | import BreakBlock from './blocks/break';
7 |
8 | import { Block } from '../util/constants';
9 |
10 | export default (setEditorState, getEditorState) => (contentBlock) => {
11 | // console.log(editorState, onChange);
12 | const type = contentBlock.getType();
13 | switch (type) {
14 | case Block.BLOCKQUOTE_CAPTION: return {
15 | component: QuoteCaptionBlock,
16 | };
17 | case Block.CAPTION: return {
18 | component: CaptionBlock,
19 | };
20 | case Block.ATOMIC: return {
21 | component: AtomicBlock,
22 | editable: false,
23 | props: {
24 | getEditorState,
25 | },
26 | };
27 | case Block.TODO: return {
28 | component: TodoBlock,
29 | props: {
30 | setEditorState,
31 | getEditorState,
32 | },
33 | };
34 | case Block.IMAGE: return {
35 | component: ImageBlock,
36 | props: {
37 | setEditorState,
38 | getEditorState,
39 | },
40 | };
41 | case Block.BREAK: return {
42 | component: BreakBlock,
43 | editable: false,
44 | };
45 | default: return null;
46 | }
47 | };
48 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/entities/link.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | import { Entity } from '../../util/constants';
5 |
6 |
7 | export const findLinkEntities = (contentBlock, callback, contentState) => {
8 | contentBlock.findEntityRanges(
9 | (character) => {
10 | const entityKey = character.getEntity();
11 | return (
12 | entityKey !== null &&
13 | contentState.getEntity(entityKey).getType() === Entity.LINK
14 | );
15 | },
16 | callback
17 | );
18 | };
19 |
20 | const Link = (props) => {
21 | const { contentState, entityKey } = props;
22 | const { url } = contentState.getEntity(entityKey).getData();
23 | return (
24 | {props.children}
31 | );
32 | };
33 |
34 | Link.propTypes = {
35 | children: PropTypes.node,
36 | entityKey: PropTypes.string,
37 | contentState: PropTypes.object.isRequired,
38 | };
39 |
40 | export default Link;
41 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/inlinetoolbar.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | import StyleButton from './stylebutton';
5 |
6 |
7 | const InlineToolbar = (props) => {
8 | if (props.buttons.length < 1) {
9 | return null;
10 | }
11 | const currentStyle = props.editorState.getCurrentInlineStyle();
12 | return (
13 |
14 | {props.buttons.map(type => {
15 | const iconLabel = {};
16 | iconLabel.label = type.label;
17 | return (
18 |
29 | );
30 | };
31 |
32 | InlineToolbar.propTypes = {
33 | buttons: PropTypes.array,
34 | editorState: PropTypes.object.isRequired,
35 | onToggle: PropTypes.func,
36 | };
37 |
38 | export default InlineToolbar;
39 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/sides/break.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | import { addNewBlock } from '../../model';
5 | import { Block } from '../../util/constants';
6 |
7 | export default class BreakButton extends React.Component {
8 |
9 | constructor(props) {
10 | super(props);
11 |
12 | this.onClick = this.onClick.bind(this);
13 | }
14 |
15 | onClick() {
16 | this.props.setEditorState(addNewBlock(
17 | this.props.getEditorState(),
18 | Block.BREAK
19 | ));
20 | }
21 |
22 | render() {
23 | return (
24 |
27 | );
28 | }
29 | }
30 |
31 | BreakButton.propTypes = {
32 | setEditorState: PropTypes.func,
33 | getEditorState: PropTypes.func,
34 | close: PropTypes.func,
35 | };
36 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/sides/image.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | import { addNewBlock } from '../../model';
5 | import { Block } from '../../util/constants';
6 |
7 | export default class ImageButton extends React.Component {
8 |
9 | static propTypes = {
10 | setEditorState: PropTypes.func,
11 | getEditorState: PropTypes.func,
12 | close: PropTypes.func,
13 | };
14 |
15 | constructor(props) {
16 | super(props);
17 |
18 | this.onClick = this.onClick.bind(this);
19 | this.onChange = this.onChange.bind(this);
20 | }
21 |
22 | onClick() {
23 | this.input.value = null;
24 | this.input.click();
25 | }
26 |
27 |
28 | /*
29 | This is an example of how an image button can be added
30 | on the side control. This Button handles the image addition locally
31 | by creating an object url. You can override this method to upload
32 | images to your server first, then get the image url in return and then
33 | add to the editor.
34 | */
35 | onChange(e) {
36 | // e.preventDefault();
37 | const file = e.target.files[0];
38 | if (file.type.indexOf('image/') === 0) {
39 | // console.log(this.props.getEditorState());
40 | // eslint-disable-next-line no-undef
41 | const src = URL.createObjectURL(file);
42 | this.props.setEditorState(addNewBlock(
43 | this.props.getEditorState(),
44 | Block.IMAGE, {
45 | src,
46 | }
47 | ));
48 | }
49 | this.props.close();
50 | }
51 |
52 | render() {
53 | return (
54 |
69 | );
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/components/stylebutton.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | import { HYPERLINK } from '../util/constants.js';
5 |
6 | export default class StyleButton extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.onToggle = (e) => {
10 | e.preventDefault();
11 | this.props.onToggle(this.props.style);
12 | };
13 | }
14 |
15 | render() {
16 | if (this.props.style === HYPERLINK) {
17 | return null;
18 | }
19 | let className = 'md-RichEditor-styleButton';
20 | if (this.props.active) {
21 | className += ' md-RichEditor-activeButton';
22 | }
23 | className += ` md-RichEditor-styleButton-${this.props.style.toLowerCase()}`;
24 | return (
25 |
30 | {this.props.icon ? : this.props.label}
31 |
32 | );
33 | }
34 | }
35 |
36 |
37 | StyleButton.propTypes = {
38 | onToggle: PropTypes.func,
39 | style: PropTypes.string,
40 | active: PropTypes.bool,
41 | icon: PropTypes.string,
42 | label: PropTypes.oneOfType([
43 | PropTypes.string,
44 | PropTypes.element,
45 | PropTypes.object,
46 | ]),
47 | description: PropTypes.string,
48 | };
49 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/index.js:
--------------------------------------------------------------------------------
1 | import Editor from './editor';
2 |
3 | import beforeInput, { StringToTypeMap } from './util/beforeinput';
4 | import RenderMap from './util/rendermap';
5 | import Link, { findLinkEntities } from './components/entities/link';
6 | import keyBindingFn from './util/keybinding';
7 | import rendererFn from './components/customrenderer';
8 | import customStyleMap from './util/customstylemap';
9 | import createEditorState from './model/content';
10 |
11 | import QuoteCaptionBlock from './components/blocks/blockquotecaption';
12 | import CaptionBlock from './components/blocks/caption';
13 | import AtomicBlock from './components/blocks/atomic';
14 | import TodoBlock from './components/blocks/todo';
15 | import ImageBlock from './components/blocks/image';
16 | import BreakBlock from './components/blocks/break';
17 |
18 | import ImageSideButton from './components/sides/image';
19 | import BreakSideButton from './components/sides/break';
20 |
21 | export { Block, Inline, Entity, HANDLED, NOT_HANDLED } from './util/constants';
22 | export { BLOCK_BUTTONS, INLINE_BUTTONS } from './components/toolbar';
23 |
24 | export {
25 | getDefaultBlockData,
26 | getCurrentBlock,
27 | addNewBlock,
28 | resetBlockWithType,
29 | updateDataOfBlock,
30 | addNewBlockAt,
31 | } from './model';
32 |
33 | // eslint-disable-next-line no-undef
34 | // export const _version = __VERSION__;
35 |
36 | export {
37 | Editor,
38 | createEditorState,
39 | StringToTypeMap,
40 | RenderMap,
41 | Link,
42 | findLinkEntities,
43 | beforeInput,
44 | customStyleMap,
45 | keyBindingFn,
46 | rendererFn,
47 | QuoteCaptionBlock,
48 | CaptionBlock,
49 | AtomicBlock,
50 | TodoBlock,
51 | ImageBlock,
52 | BreakBlock,
53 | ImageSideButton,
54 | BreakSideButton,
55 | };
56 |
57 | export default Editor;
58 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/index.scss:
--------------------------------------------------------------------------------
1 | .md-RichEditor-root {
2 | background: #fff;
3 | box-sizing: border-box;
4 | //font-family: 'Georgia', serif;
5 | padding: 15px 30px;
6 | position: relative;
7 | line-height: 1.4em;
8 | }
9 |
10 |
11 | .md-RichEditor-editor {
12 | cursor: text;
13 | margin-top: 10px;
14 | position: relative;
15 | margin: 0 auto;
16 |
17 | h3 {
18 | font-size: 1.3em;
19 | margin: 1.2em 0;
20 | }
21 | }
22 |
23 | .md-RichEditor-editor .public-DraftEditorPlaceholder-root,
24 | .md-RichEditor-editor .public-DraftEditor-content {
25 | margin: 0px -15px -15px;
26 | padding: 15px;
27 | }
28 |
29 | .md-RichEditor-editor .public-DraftEditor-content {
30 | min-height: 100px;
31 | }
32 |
33 | .md-RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
34 | display: none;
35 | }
36 |
37 | .md-RichEditor-editor .md-RichEditor-blockquote {
38 | border-left: 5px solid #4CA8DE;
39 | color: #555;
40 | //font-family: 'Hoefler Text', 'Georgia', serif;
41 | font-size: 1.2em;
42 | margin: 0;
43 | padding: 10px 0 10px 20px;
44 | background-color: #E2F2FF;
45 | }
46 |
47 | .md-RichEditor-blockquote {
48 | a {
49 | text-decoration: underline;
50 | }
51 | }
52 |
53 | .public-DraftEditor-content {
54 | .md-block:first-child {
55 | margin-top: 0;
56 | padding-top: 0;
57 | }
58 | }
59 |
60 | .md-RichEditor-editor .public-DraftStyleDefault-pre {
61 | background-color: rgba(0, 0, 0, 0.05);
62 | //font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
63 | font-size: 16px;
64 | padding: 20px;
65 | }
66 |
67 | .public-DraftStyleDefault-unorderedListItem,
68 | .public-DraftStyleDefault-orderedListItem {
69 | margin-bottom: 10px;
70 | }
71 |
72 | .md-editor-action {
73 | position: fixed;
74 | top: 5px;
75 | left: 5px;
76 |
77 | button {
78 | display: block;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/model/content.js:
--------------------------------------------------------------------------------
1 | import {
2 | EditorState,
3 | convertFromRaw,
4 | CompositeDecorator,
5 | ContentState,
6 | } from 'draft-js';
7 |
8 | import Link, { findLinkEntities } from '../components/entities/link';
9 |
10 |
11 | const defaultDecorators = new CompositeDecorator([
12 | {
13 | strategy: findLinkEntities,
14 | component: Link,
15 | },
16 | ]);
17 |
18 |
19 | const createEditorState = (content = null, decorators = defaultDecorators) => {
20 | if (content === null) {
21 | return EditorState.createEmpty(decorators);
22 | }
23 | let contentState = null;
24 | if (typeof content === 'string') {
25 | contentState = ContentState.createFromText(content);
26 | } else {
27 | contentState = convertFromRaw(content);
28 | }
29 | return EditorState.createWithContent(contentState, decorators);
30 | };
31 |
32 | export default createEditorState;
33 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/model/content.spec.js:
--------------------------------------------------------------------------------
1 | import { convertToRaw, CompositeDecorator } from 'draft-js';
2 | import createEditorState from './content';
3 | import { Block } from '../util/constants';
4 |
5 | import preData from '../../docs/data.json';
6 | import Link, { findLinkEntities } from '../components/entities/link';
7 |
8 | describe('createEditorState', () => {
9 | const es = createEditorState();
10 |
11 | it('creates empty editorState when no argument or null is passed', () => {
12 | const raw = convertToRaw(es.getCurrentContent());
13 | expect(raw.blocks).to.be.instanceof(Array);
14 | expect(raw.blocks[0].type).to.equal(Block.UNSTYLED);
15 | expect(raw.blocks[0].text).to.equal('');
16 | expect(raw.blocks[0]).to.include.keys('data', 'key');
17 | });
18 |
19 | it('adds link decorator by default in CompositeDecorator', () => {
20 | expect(es.getDecorator()).to.be.instanceof(CompositeDecorator);
21 | expect(es.getDecorator()._decorators.length).to.equal(1);
22 | expect(es.getDecorator()._decorators[0]).to.deep.equal({
23 | strategy: findLinkEntities,
24 | component: Link,
25 | });
26 | });
27 |
28 | const esContent = createEditorState(preData);
29 |
30 | it('fills data from provided json', () => {
31 | const blocks = esContent.getCurrentContent().getBlockMap();
32 | expect(blocks.size).to.be.above(1);
33 |
34 | expect(esContent.getDecorator()).to.be.instanceof(CompositeDecorator);
35 | expect(esContent.getDecorator()._decorators.length).to.equal(1);
36 | expect(esContent.getDecorator()._decorators[0]).to.deep.equal({
37 | strategy: findLinkEntities,
38 | component: Link,
39 | });
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/beforeinput.js:
--------------------------------------------------------------------------------
1 | import { resetBlockWithType, getCurrentBlock } from '../model';
2 | import { Block, HANDLED, NOT_HANDLED } from './constants';
3 |
4 |
5 | /*
6 | This is a key value pair where the key is the string that is input while typing.
7 | While typing in an empty block, if the entered text matches any of the keys in
8 | this dictionary, that particular block's type will be changed to the value
9 | associated with that key.
10 | */
11 | export const StringToTypeMap = {
12 | '--': `${Block.BLOCKQUOTE}:${Block.BLOCKQUOTE_CAPTION}:${Block.CAPTION}`,
13 | '> ': Block.BLOCKQUOTE,
14 | '*.': Block.UL,
15 | '* ': Block.UL,
16 | '- ': Block.UL,
17 | '1.': Block.OL,
18 | '# ': Block.H1,
19 | '##': Block.H2,
20 | '==': Block.UNSTYLED,
21 | '[]': Block.TODO,
22 | };
23 |
24 |
25 | /*
26 | This function is called before text is input in a block in `draft-js`. It checks
27 | whether the input string (first 2 cahracters only) is present in the `StringToTypeMap`
28 | mapping or not. If present, it converts the current block's type and called the `editor`'s
29 | `onChange` function. Otherwise, does nothing. By defualt, the above key-value mapping
30 | is passed. In custom implementation, users can pass their own mapping or extend
31 | the current one.
32 | */
33 | const beforeInput = (editorState, inputString, onChange, mapping = StringToTypeMap) => {
34 | const selection = editorState.getSelection();
35 | const block = getCurrentBlock(editorState);
36 | const blockType = block.getType();
37 | if (blockType.indexOf(Block.ATOMIC) === 0) {
38 | return NOT_HANDLED;
39 | }
40 | const blockLength = block.getLength();
41 | if (selection.getAnchorOffset() > 1 || blockLength > 1) {
42 | return NOT_HANDLED;
43 | }
44 | const blockTo = mapping[block.getText()[0] + inputString];
45 | if (!blockTo) {
46 | return NOT_HANDLED;
47 | }
48 | const finalType = blockTo.split(':');
49 | if (finalType.length < 1 || finalType.length > 3) {
50 | return NOT_HANDLED;
51 | }
52 | let fType = finalType[0];
53 | if (finalType.length === 1) {
54 | if (blockType === finalType[0]) {
55 | return NOT_HANDLED;
56 | }
57 | } else if (finalType.length === 2) {
58 | if (blockType === finalType[1]) {
59 | return NOT_HANDLED;
60 | }
61 | if (blockType === finalType[0]) {
62 | fType = finalType[1];
63 | }
64 | } else if (finalType.length === 3) {
65 | if (blockType === finalType[2]) {
66 | return NOT_HANDLED;
67 | }
68 | if (blockType === finalType[0]) {
69 | fType = finalType[1];
70 | } else {
71 | fType = finalType[2];
72 | }
73 | }
74 | onChange(resetBlockWithType(editorState, fType, {
75 | text: '',
76 | }));
77 | return HANDLED;
78 | };
79 |
80 |
81 | export default beforeInput;
82 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/beforeinput.spec.js:
--------------------------------------------------------------------------------
1 | import createEditorState from '../model/content';
2 |
3 | import { Block, /* HANDLED,*/ NOT_HANDLED } from './constants';
4 | import beforeInput from './beforeinput';
5 |
6 | describe('beforeInput()', () => {
7 | it('returns NOT_HANDLED for atomic like blocks', () => {
8 | const dummyData = {
9 | entityMap: {},
10 | blocks: [{
11 | key: 'etee',
12 | text: 'E',
13 | type: 'atomic',
14 | depth: 0,
15 | inlineStyleRanges: [],
16 | entityRanges: [
17 | {
18 | offset: 0,
19 | length: 1,
20 | key: 3,
21 | },
22 | ],
23 | data: {},
24 | }],
25 | };
26 | let es = createEditorState(dummyData);
27 | expect(beforeInput(es)).to.equal(NOT_HANDLED);
28 | dummyData.blocks[0].type = Block.IMAGE;
29 | es = createEditorState(dummyData);
30 | expect(beforeInput(es)).to.equal(NOT_HANDLED);
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/blockStyleFn.js:
--------------------------------------------------------------------------------
1 | import { Block } from './constants';
2 |
3 | /*
4 | Get custom classnames for each of the different block types supported.
5 | */
6 |
7 | const BASE_BLOCK_CLASS = 'md-block';
8 |
9 | export default (block) => {
10 | switch (block.getType()) {
11 | case Block.BLOCKQUOTE:
12 | return `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-quote md-RichEditor-blockquote`;
13 | case Block.UNSTYLED:
14 | return `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-paragraph`;
15 | case Block.ATOMIC:
16 | return `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-atomic`;
17 | case Block.CAPTION:
18 | return `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-caption`;
19 | case Block.TODO: {
20 | const data = block.getData();
21 | const checkedClass = data.get('checked') === true ?
22 | `${BASE_BLOCK_CLASS}-todo-checked` : `${BASE_BLOCK_CLASS}-todo-unchecked`;
23 | let finalClass = `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-paragraph `;
24 | finalClass += `${BASE_BLOCK_CLASS}-todo ${checkedClass}`;
25 | return finalClass;
26 | }
27 | case Block.IMAGE:
28 | return `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-image`;
29 | case Block.BLOCKQUOTE_CAPTION: {
30 | const cls = `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-quote`;
31 | return `${cls} md-RichEditor-blockquote ${BASE_BLOCK_CLASS}-quote-caption`;
32 | }
33 | case Block.CODE:
34 | return `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-code-block`;
35 | default: return BASE_BLOCK_CLASS;
36 | }
37 | };
38 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/blockStyleFn.spec.js:
--------------------------------------------------------------------------------
1 | import { Map } from 'immutable';
2 | import { ContentBlock } from 'draft-js';
3 | import blockStyleFn from './blockStyleFn';
4 | import { Block } from './constants';
5 |
6 | const BASE_BLOCK_CLASS = 'md-block';
7 |
8 | describe('blockStyleFn()', () => {
9 | it('should return block class for UNKNOWN', () => {
10 | const normalBlock = new ContentBlock({
11 | type: 'some-unknown-type',
12 | });
13 | expect(blockStyleFn(normalBlock)).to.equal(BASE_BLOCK_CLASS);
14 | });
15 |
16 | it('should return block class for UNSTYLED', () => {
17 | const normalBlock = new ContentBlock({
18 | type: Block.UNSTYLED,
19 | });
20 | expect(blockStyleFn(normalBlock)).to.equal(`${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-paragraph`);
21 | });
22 |
23 | it('should return block class for CAPTION', () => {
24 | const normalBlock = new ContentBlock({
25 | type: Block.CAPTION,
26 | });
27 | expect(blockStyleFn(normalBlock)).to.equal(`${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-caption`);
28 | });
29 |
30 | it('should return block class for BLOCKQUOTE_CAPTION', () => {
31 | const normalBlock = new ContentBlock({
32 | type: Block.BLOCKQUOTE_CAPTION,
33 | });
34 | const cls = `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-quote`;
35 | expect(blockStyleFn(normalBlock)).to.equal(
36 | `${cls} md-RichEditor-blockquote ${BASE_BLOCK_CLASS}-quote-caption`);
37 | });
38 |
39 | it('should return block class for BLOCKQUOTE', () => {
40 | const normalBlock = new ContentBlock({
41 | type: Block.BLOCKQUOTE,
42 | });
43 | expect(blockStyleFn(normalBlock)).to.equal(
44 | `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-quote md-RichEditor-blockquote`);
45 | });
46 |
47 | it('should return block class for ATOMIC', () => {
48 | const normalBlock = new ContentBlock({
49 | type: Block.ATOMIC,
50 | });
51 | expect(blockStyleFn(normalBlock)).to.equal(
52 | `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-atomic`);
53 | });
54 |
55 | it('should return block class for IMAGE', () => {
56 | const normalBlock = new ContentBlock({
57 | type: Block.IMAGE,
58 | });
59 | expect(blockStyleFn(normalBlock)).to.equal(
60 | `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-image`);
61 | });
62 |
63 | it('should return block class for TODO', () => {
64 | const todoBlock = new ContentBlock({
65 | type: Block.TODO,
66 | });
67 | const todoBlockChecked = new ContentBlock({
68 | type: Block.TODO,
69 | data: Map({
70 | checked: true,
71 | }),
72 | });
73 |
74 | const baseTodoClass = `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-paragraph`;
75 |
76 | expect(blockStyleFn(todoBlock)).to.equal(
77 | `${baseTodoClass} ${BASE_BLOCK_CLASS}-todo ${BASE_BLOCK_CLASS}-todo-unchecked`);
78 | expect(blockStyleFn(todoBlockChecked)).to.equal(
79 | `${baseTodoClass} ${BASE_BLOCK_CLASS}-todo ${BASE_BLOCK_CLASS}-todo-checked`);
80 | });
81 |
82 | it('should return block class for CODE', () => {
83 | const normalBlock = new ContentBlock({
84 | type: Block.CODE,
85 | });
86 | expect(blockStyleFn(normalBlock)).to.equal(
87 | `${BASE_BLOCK_CLASS} ${BASE_BLOCK_CLASS}-code-block`);
88 | });
89 | });
90 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | Some of the constants which are used throughout this project instead of
3 | directly using string.
4 | */
5 |
6 | export const Block = {
7 | UNSTYLED: 'unstyled',
8 | PARAGRAPH: 'unstyled',
9 | OL: 'ordered-list-item',
10 | UL: 'unordered-list-item',
11 | H1: 'header-one',
12 | H2: 'header-two',
13 | H3: 'header-three',
14 | H4: 'header-four',
15 | H5: 'header-five',
16 | H6: 'header-six',
17 | CODE: 'code-block',
18 | BLOCKQUOTE: 'blockquote',
19 | PULLQUOTE: 'pullquote',
20 | ATOMIC: 'atomic',
21 | BLOCKQUOTE_CAPTION: 'block-quote-caption',
22 | CAPTION: 'caption',
23 | TODO: 'todo',
24 | IMAGE: 'atomic:image',
25 | BREAK: 'atomic:break',
26 | };
27 |
28 | export const Inline = {
29 | BOLD: 'BOLD',
30 | CODE: 'CODE',
31 | ITALIC: 'ITALIC',
32 | STRIKETHROUGH: 'STRIKETHROUGH',
33 | UNDERLINE: 'UNDERLINE',
34 | HIGHLIGHT: 'HIGHLIGHT',
35 | };
36 |
37 | export const Entity = {
38 | LINK: 'LINK',
39 | };
40 |
41 | export const HYPERLINK = 'hyperlink';
42 | export const HANDLED = 'handled';
43 | export const NOT_HANDLED = 'not_handled';
44 |
45 | export const KEY_COMMANDS = {
46 | addNewBlock: () => 'add-new-block',
47 | changeType: (type = '') => `changetype:${type}`,
48 | showLinkInput: () => 'showlinkinput',
49 | unlink: () => 'unlink',
50 | toggleInline: (type = '') => `toggleinline:${type}`,
51 | deleteBlock: () => 'delete-block',
52 | };
53 |
54 | export default {
55 | Block,
56 | Inline,
57 | Entity,
58 | };
59 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/constants.spec.js:
--------------------------------------------------------------------------------
1 | import { KEY_COMMANDS, Block, Inline } from './constants';
2 |
3 | describe('constants', () => {
4 | it('changeType should return appended with block type', () => {
5 | expect(KEY_COMMANDS.changeType()).to.equal('changetype:');
6 | expect(KEY_COMMANDS.changeType('')).to.equal('changetype:');
7 | expect(KEY_COMMANDS.changeType(Block.ATOMIC)).to.equal(`changetype:${Block.ATOMIC}`);
8 | expect(KEY_COMMANDS.changeType(Block.IMAGE)).to.equal(`changetype:${Block.IMAGE}`);
9 | });
10 |
11 | it('toggleInline should return appended with inline type', () => {
12 | expect(KEY_COMMANDS.toggleInline()).to.equal('toggleinline:');
13 | expect(KEY_COMMANDS.toggleInline('')).to.equal('toggleinline:');
14 | expect(KEY_COMMANDS.toggleInline(Inline.BOLD)).to.equal(`toggleinline:${Inline.BOLD}`);
15 | expect(KEY_COMMANDS.toggleInline(Inline.ITALIC)).to.equal(`toggleinline:${Inline.ITALIC}`);
16 | });
17 |
18 | it('showLinkInput', () => {
19 | expect(KEY_COMMANDS.showLinkInput()).to.equal('showlinkinput');
20 | });
21 |
22 | it('addNewBlock', () => {
23 | expect(KEY_COMMANDS.addNewBlock()).to.equal('add-new-block');
24 | });
25 |
26 | it('deleteBlock', () => {
27 | expect(KEY_COMMANDS.deleteBlock()).to.equal('delete-block');
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/customstylemap.js:
--------------------------------------------------------------------------------
1 | import { Inline } from './constants';
2 |
3 | /*
4 | Custom style map for custom entities like Hihglight.
5 | */
6 | const customStyleMap = {
7 | [Inline.HIGHLIGHT]: {
8 | backgroundColor: 'yellow',
9 | },
10 | [Inline.CODE]: {
11 | fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
12 | margin: '4px 0',
13 | fontSize: '0.9em',
14 | padding: '1px 3px',
15 | color: '#555',
16 | backgroundColor: '#fcfcfc',
17 | border: '1px solid #ccc',
18 | borderBottomColor: '#bbb',
19 | borderRadius: 3,
20 | boxShadow: 'inset 0 -1px 0 #bbb',
21 | },
22 | };
23 |
24 | export default customStyleMap;
25 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Returns the `boundingClientRect` of the passed selection.
3 | */
4 | export const getSelectionRect = (selected) => {
5 | const _rect = selected.getRangeAt(0).getBoundingClientRect();
6 | // selected.getRangeAt(0).getBoundingClientRect()
7 | let rect = _rect && _rect.top ? _rect : selected.getRangeAt(0).getClientRects()[0];
8 | if (!rect) {
9 | if (selected.anchorNode && selected.anchorNode.getBoundingClientRect) {
10 | rect = selected.anchorNode.getBoundingClientRect();
11 | rect.isEmptyline = true;
12 | } else {
13 | return null;
14 | }
15 | }
16 | return rect;
17 | };
18 |
19 | /*
20 | Returns the native selection node.
21 | */
22 | export const getSelection = (root) => {
23 | let t = null;
24 | if (root.getSelection) {
25 | t = root.getSelection();
26 | } else if (root.document.getSelection) {
27 | t = root.document.getSelection();
28 | } else if (root.document.selection) {
29 | t = root.document.selection.createRange().text;
30 | }
31 | return t;
32 | };
33 |
34 | /*
35 | Recursively finds the DOM Element of the block where the cursor is currently present.
36 | If not found, returns null.
37 | */
38 | export const getSelectedBlockNode = (root) => {
39 | const selection = root.getSelection();
40 | if (selection.rangeCount === 0) {
41 | return null;
42 | }
43 | let node = selection.getRangeAt(0).startContainer;
44 | // console.log(node);
45 | do {
46 | if (node.getAttribute && node.getAttribute('data-block') === 'true') {
47 | return node;
48 | }
49 | node = node.parentNode;
50 | // console.log(node);
51 | } while (node !== null);
52 | return null;
53 | };
54 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/keybinding.js:
--------------------------------------------------------------------------------
1 | import { getDefaultKeyBinding, KeyBindingUtil } from 'draft-js';
2 |
3 | import { KEY_COMMANDS } from './constants';
4 |
5 | const { changeType, showLinkInput, unlink } = KEY_COMMANDS;
6 |
7 | /*
8 | Emits various key commands to be used by `handleKeyCommand` in `Editor` based
9 | on various key combos.
10 | */
11 | export default (e) => {
12 | if (KeyBindingUtil.hasCommandModifier(e) && e.which === 75) {
13 | if (e.shiftKey) {
14 | return unlink();
15 | }
16 | return showLinkInput();
17 | }
18 | if (e.altKey === true && !e.ctrlKey) {
19 | if (e.shiftKey === true) {
20 | switch (e.which) {
21 | // Alt + Shift + A
22 | // case 65: return addNewBlock();
23 | default: return getDefaultKeyBinding(e);
24 | }
25 | }
26 | switch (e.which) {
27 | // 1
28 | case 49: return changeType('ordered-list-item');
29 | // @
30 | case 50: return showLinkInput();
31 | // #
32 | case 51: return changeType('header-three');
33 | // *
34 | case 56: return changeType('unordered-list-item');
35 | // <
36 | case 188: return changeType('caption');
37 | // // -
38 | // case 189: return 'changetype:caption';
39 | // >
40 | case 190: return changeType('unstyled');
41 | // "
42 | case 222: return changeType('blockquote');
43 | default: return getDefaultKeyBinding(e);
44 | }
45 | }
46 | // if (e.keyCode === 46 && !e.ctrlKey) {
47 | // return KEY_COMMANDS.deleteBlock();
48 | // }
49 | return getDefaultKeyBinding(e);
50 | };
51 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/rendermap.js:
--------------------------------------------------------------------------------
1 | import { Map } from 'immutable';
2 | import { DefaultDraftBlockRenderMap } from 'draft-js';
3 |
4 | import { Block } from './constants';
5 |
6 | /*
7 | Mapping that returns containers for the various block types.
8 | */
9 | const RenderMap = Map({
10 | [Block.CAPTION]: {
11 | element: 'cite',
12 | },
13 | [Block.BLOCKQUOTE_CAPTION]: {
14 | element: 'blockquote',
15 | },
16 | [Block.TODO]: {
17 | element: 'div',
18 | },
19 | [Block.IMAGE]: {
20 | element: 'figure',
21 | },
22 | [Block.BREAK]: {
23 | element: 'div',
24 | },
25 | }).merge(DefaultDraftBlockRenderMap);
26 |
27 |
28 | export default RenderMap;
29 |
--------------------------------------------------------------------------------
/frame/src/components/vendor/util/rendermap.spec.js:
--------------------------------------------------------------------------------
1 | import renderMap from './rendermap';
2 | import { Block } from './constants';
3 |
4 | describe('rendermap', () => {
5 | it('returns cite for CAPTION', () => {
6 | expect(renderMap.get(Block.CAPTION)).to.deep.equal({
7 | element: 'cite',
8 | });
9 | });
10 |
11 | it('returns blockquote for BLOCKQUOTE_CAPTION', () => {
12 | expect(renderMap.get(Block.BLOCKQUOTE_CAPTION)).to.deep.equal({
13 | element: 'blockquote',
14 | });
15 | });
16 |
17 | it('returns div for TODO', () => {
18 | expect(renderMap.get(Block.TODO)).to.deep.equal({
19 | element: 'div',
20 | });
21 | });
22 |
23 | it('returns figure for IMAGE', () => {
24 | expect(renderMap.get(Block.IMAGE)).to.deep.equal({
25 | element: 'figure',
26 | });
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/frame/src/data/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "savedSettings": {
3 | "online": false,
4 | "NLPServer": "http://localhost:80/",
5 | "activeTheme": "ocean",
6 | "loadedThemes": [
7 | "light",
8 | "dark",
9 | "clean",
10 | "black",
11 | "ocean",
12 | "dim",
13 | "neon",
14 | "night",
15 | "paper",
16 | "present"
17 | ],
18 | "librariesPath": "src/data/libraries_collections",
19 | "defaultLibrary": "default"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/frame/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './components/App/App'
4 |
5 | import './assets/css/all.css';
6 | import './assets/js/all';
7 | // import registerServiceWorker from "./registerServiceWorker";
8 |
9 | // Create root element in DOM
10 | const root = document.createElement('div');
11 | root.id = "app";
12 | document.body.appendChild( root );
13 | document.title = "Frame - notebook that insights";
14 |
15 | const appEl = document.getElementById('app');
16 |
17 | function render() {
18 | ReactDOM.render(
19 | {} } className={styles.node + (this.state.highlight ? ` ${styles.highlight}` : '') + (dropType ? ` ${styles[dropType]}` : '')}>
58 |
71 | );
72 | }
73 | }
74 | MinimalThemeTreeNodeRenderer.defaultProps = {
75 | swapFrom: null,
76 | swapDepth: null,
77 | swapLength: null,
78 | canDrop: false,
79 | draggedNode: null,
80 | rowDirection: 'ltr'
81 | };
82 |
83 | MinimalThemeTreeNodeRenderer.propTypes = {
84 | treeIndex: PropTypes.number.isRequired,
85 | swapFrom: PropTypes.number,
86 | swapDepth: PropTypes.number,
87 | swapLength: PropTypes.number,
88 | scaffoldBlockPxWidth: PropTypes.number.isRequired,
89 | lowerSiblingCounts: PropTypes.arrayOf(PropTypes.number).isRequired,
90 | treeId: PropTypes.string.isRequired,
91 | listIndex: PropTypes.number.isRequired,
92 | rowDirection: PropTypes.string,
93 | children: PropTypes.node.isRequired,
94 |
95 | // Drop target
96 | connectDropTarget: PropTypes.func.isRequired,
97 | isOver: PropTypes.bool.isRequired,
98 | canDrop: PropTypes.bool,
99 | draggedNode: PropTypes.shape({}),
100 |
101 | // used in dndManager
102 | getPrevRow: PropTypes.func.isRequired,
103 | node: PropTypes.shape({}).isRequired,
104 | path: PropTypes.arrayOf(
105 | PropTypes.oneOfType([PropTypes.string, PropTypes.number])
106 | ).isRequired
107 | };
108 |
109 | export default MinimalThemeTreeNodeRenderer;
110 |
--------------------------------------------------------------------------------
/frame/src/lib/custom-vendor/tree-node-renderer.scss:
--------------------------------------------------------------------------------
1 | .node {
2 | width: 50%;
3 | white-space: nowrap;
4 | position: relative;
5 | text-align: left;
6 | min-width: 100%;
7 | overflow: hidden;
8 | }
9 |
10 | .nodeContent {
11 | position: absolute;
12 | top: 0;
13 | bottom: 0;
14 | width: 80%;
15 | }
16 |
17 | .validDrop {
18 | background: #26C281;
19 | }
20 |
21 | .invalidDrop {
22 | background: #C0392B;
23 | }
24 |
25 | .highlight {
26 | background: rgba(240, 240, 240, 0.7);
27 | height: 100%;
28 | cursor: pointer;
29 | }
--------------------------------------------------------------------------------
/frame/src/utils/create-db.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 |
3 | import localforage from 'localforage';
4 |
5 |
6 | export default function openDB(key) {
7 | const store = localforage.createInstance({name: "default"});
8 | return store;
9 | }
--------------------------------------------------------------------------------
/frame/src/utils/generate-uuid.js:
--------------------------------------------------------------------------------
1 | // https://gist.github.com/jed/982883
2 | export default function generateUUID() {
3 | return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
4 | (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) // eslint-disable-line no-bitwise
5 | )
6 | }
7 |
--------------------------------------------------------------------------------
/frame/src/utils/get-timestamp.js:
--------------------------------------------------------------------------------
1 | export default function getTimestamp(date, locale) {
2 | const event = (date===undefined) ? new Date() : new Date(date);
3 | return `${event.toLocaleDateString(locale)} ${event.toLocaleTimeString(locale)}`
4 | };
--------------------------------------------------------------------------------
/frame/src/utils/load-db.js:
--------------------------------------------------------------------------------
1 | /* eslint prefer-arrow-callback: 0 */
2 | /* eslint func-names: 0 */
3 | /* eslint no-unused-vars: 0 */
4 | /* eslint no-var: 0 */
5 | /* eslint no-console: 0 */
6 | /* eslint consistent-return: 0 */
7 | /* eslint no-alert: 0 */
8 |
9 | import localforage from "localforage";
10 |
11 | // Load from LocalForage (default offline storage option)
12 | export default function getFromDB (key) {
13 | localforage.getItem(key, function(err, value) {
14 | if (err) {
15 | console.error(err);
16 | alert(err);
17 | return null;
18 | }
19 | // console.log("Getting item from ", key, value);
20 | return value;
21 | });
22 | }
--------------------------------------------------------------------------------
/frame/src/utils/replace-entry.js:
--------------------------------------------------------------------------------
1 | /* eslint prefer-arrow-callback: 0 */
2 | /* eslint func-names: 0 */
3 | /* eslint no-unused-vars: 0 */
4 | /* eslint no-var: 0 */
5 | /* eslint no-console: 0 */
6 | /* eslint no-plusplus: 0 */
7 | /* eslint no-empty: 0 */
8 |
9 | export default function replaceEntry(entry, Entries) {
10 | const newEntries = Entries;
11 | for (let i=0; i
62 | {Children.map(children, child =>
63 | cloneElement(child, {
64 | isOver,
65 | canDrop,
66 | draggedNode,
67 | })
68 | )}
69 |
70 |