diff --git a/dist/index2.html b/dist/index2.html new file mode 100644 index 0000000..b91b0bd --- /dev/null +++ b/dist/index2.html @@ -0,0 +1,64 @@ + + + + + + Imp Fiddle + + + + + + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html index 31edb4e..fb3ea40 100644 --- a/docs/index.html +++ b/docs/index.html @@ -132,6 +132,11 @@ color: gray; text-align: center; } + +.indented{ + width: calc(100% + 16px); + margin-left: -8px; +} @@ -141,9 +146,9 @@

👿🎻
Imp Fiddle

-

Imp Fiddle is a JSFiddle-like, but local tool. This page is an Imp Fiddle itself. You may open it in edit mode to see Imp Fiddle in action. Scroll down to see more...

+

Imp Fiddle is a JSFiddle-like, but local tool. This page is an Imp Fiddle itself. You may open it in edit mode to see Imp Fiddle in action. Scroll down to see more.

-

+

Features

+
+

Attached Data

+ +
+ ${Object.keys( this.state.data ).map(e=>html`<${DataBlock} name=${e} + delFunction=${this.removeData} + />`)} +
+ uploadData(this.addData)} + > + +
` } @@ -169,6 +211,21 @@ export class Fiddler extends Component{ return f; } + + addData(name, data){ + const d = Object.assign({} , this.state.data); + d[name] = data; + this.setState({data:d}); + } + + removeData(name){ + if(this.state.data[name]){ + const d = Object.assign({}, this.state.data); + delete(d[name]); + this.setState({data: d}) + } + } + componentDidUpdate(){ this.modified = true; if(this.props.settings.autoRun()) @@ -193,7 +250,9 @@ export class Fiddler extends Component{ this.renderPreview(); } renderPreview(){ - this.preview.current.srcdoc = `${this.props.settings.headHTML()} + this.preview.current.srcdoc = ` + + ${this.props.settings.headHTML()} ${this.state.html || ""}` diff --git a/src/fiddler.scss b/src/fiddler.scss index d1b3872..228570b 100644 --- a/src/fiddler.scss +++ b/src/fiddler.scss @@ -8,6 +8,10 @@ body, html{ box-sizing: border-box; } } + .activeTab{ +background-color: rgba(249,234,125); + color: black; + } .Fiddler{ width: 100%; @@ -16,16 +20,60 @@ body, html{ display: flex; flex-direction: column; + input[type=button]{ + height: 32px; + padding-left: 16px; + padding-right: 16px; + border: none; + outline: none; + border-radius: 4px; + &.modified{ + background-color: orangered; + } + } + + .tab{ + background-color: #888; + color: white; + + } + &.settings{ #mainContainer{ display: none; } + #dataContainer{ + display: none; + } + .tab.settings{ + @extend .activeTab; + + } } &.main{ #settingsContainer{ display: none; } + #dataContainer{ + display: none; + } + .tab.main{ + @extend .activeTab; + } + } + + &.data{ + #settingsContainer{ + display: none; + } + #mainContainer{ + display: none; + } + .tab.data{ + @extend .activeTab; + } + } #mainContainer , #editors{ @@ -40,10 +88,43 @@ body, html{ height: 60%; } } - #settingsContainer{ + #settingsContainer , #dataContainer{ padding: 16px; } + .dataList{ + + } + .addDataButton{ + background-color: #666; + border-radius: 4px; + display: inline-block; + padding: 8px 16px; + } + + .DataBlock{ + display: flex; + flex-direction: row; + margin-bottom: 1rem; + border-radius: 4px; + overflow: hidden; + .dataName{ + padding: 8px 16px; + background-color: gray; + } + .dataVar{ + padding: 8px 16px; + font-family: monospace; + background-color: #1f1f1c; + color: hsl(350deg, 40%, 70%); + } + .deleteData{ + padding: 8px; + background-color: gold; + border-radius: 0 4px 4px 0; + } + } + } #editors{ @@ -78,17 +159,6 @@ body, html{ display: flex; flex-direction: row; justify-content: space-between; - input[type=button]{ - height: 32px; - padding-left: 16px; - padding-right: 16px; - border: none; - outline: none; - border-radius: 4px; - &.modified{ - background-color: orangered; - } - } } .settingsPanel{ diff --git a/src/fileops.js b/src/fileops.js index 32e20bd..82bc1ba 100644 --- a/src/fileops.js +++ b/src/fileops.js @@ -1,10 +1,12 @@ +import { csvParse } from "d3-dsv"; import { escapeTags } from "./util"; export function toHTML( settings, html, css, - js + js, + data ){ const tpl = ` @@ -18,6 +20,7 @@ export function toHTML( + ${settings.headHTML()} +