v1.1.50 released

README.md

@@ -10,7 +10,7 @@ If you've ever used jsfiddle, jsbin, dabblet, liveweave, codepen, cssdeck, cssde
 Version
 -------------
 
-1.1.42
+1.1.50
 
 License
 -------------
@@ -25,7 +25,7 @@ kodeWeave uses a number of open source projects to work properly:
 * [Codemirror v6](http://codemirror.net/) - Awesome web-based text editor
 * [Emmet](http://emmet.io/) - Codemirror Plugin for Zen Coding
 * [Font Awesome v5](https://fontawesome.com/) - Beautiful icon library and toolkit
-* [Pico.css](https://picocss.com/) - Pico.css is a minimal css framework for semantic html
+* [daisyUI](https://daisyui.com/) - A Tailwind CSS Component Library (used for the toggle switch)
 * [Tailwind CSS](https://tailwindcss.com/) - A low-level CSS framework that's entirely utility-first and provides users with low-level CSS classes in PostCSS that can be used to define components and designs independently.
 * [JSZip](https://stuk.github.io/jszip/) - Package zip files locally in javascript
 * [FileSaver.js](https://github.com/eligrey/FileSaver.js/) - JSZip comes prebuilt with this. Allows us to save files locally in Javascript

demo.json

@@ -1 +1,18 @@
-{"version":"1.1.43","settings":{"theme":false,"fontSize":"16","autoupdate":true,"console":true,"scratchpad":""},"pages":[{"name":"index","title":"An attractive title","description":"The most attractive description ever!","libraries":["https://cdnjs.cloudflare.com/ajax/libs/picocss/1.5.7/pico.classless.min.css","https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.css","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"],"html":"<main class=\"py-0 absolute inset-0 grid place-items-center\">\n  <article class=\"my-0\">\n    <textarea id=\"input\" placeholder=\"Paste here\" onfocus=\"this.select(true)\" class=\"h-40 resize-none\"></textarea>\n\n    <nav class=\"gap-2\">\n      <input id=\"look\" type=\"text\" placeholder=\"String to search for..\" onfocus=\"this.select(true)\">\n      <input id=\"replace\" type=\"text\" placeholder=\"String to replace with..\" onfocus=\"this.select(true)\">\n    </nav>\n\n    <label for=\"switch\" class=\"mb-4\">\n      <input type=\"checkbox\" id=\"switch\" name=\"switch\" role=\"switch\">\n      Remove all lines containing string\n    </label>\n\n    <button id=\"convert\">\n      Convert\n    </button>\n\n    <div class=\"text-center\">\n      Made with ❤️ and ☕️ by <a href=\"http://michaelsboost.github.io/\" target=\"_blank\"><u>Michael Schwartz</u></a>\n    </div>\n  </article>\n</main>\n\n<button id=\"icon\" class=\"fixed bottom-0 right-0 m-4 inline-block w-auto cursor-pointer bg-transparent border-none text-3xl\">🌙</button>\n\n<article id=\"notification\" class=\"fixed bottom-0 right-6 inline-block w-auto hidden\">copied to clipboard</article>","css":"","javascript":"// project json\nlet appJSON = {\n  theme: true\n};\n\n// check if user can copy images in js\nif (!window.navigator || !window.navigator.clipboard) {\n  assets.innerHTML = 'Clipboard API not supported!';\n}\n\n// toggle switch\ndocument.getElementById('switch').onchange = () => {\n  // if switch is checked\n  if (document.getElementById('switch').checked) {\n    document.querySelector('nav span').style.display = 'none';\n    replace.style.display = 'none';\n    return false;\n  }\n\n  // if switch is not checked\n  document.querySelector('nav span').style.display = 'block';\n  replace.style.display = 'block';\n};\n\n// convert button click\nconvert.onclick = () => {\n  // remove lines that contain string if switch is checked\n  if (document.getElementById('switch').checked) {\n    let str = input.value;\n    let lines = str.split('\\n');\n    let result = '';\n    for (let i in lines) {\n      let line = lines[i];\n      if (line.indexOf(look.value) > -1) {\n        // ignore lines containing the string you're looking for\n      } else {\n        result += line + \"\\n\";\n      }\n    }\n    input.value = result.trim();\n\n    return false;\n  }\n\n  // remove only words containing the string with whatever word user chooses\n  input.value = input.value.toString().split(look.value).join(replace.value);\n\n  // copy convertion to clipboard\n  navigator.clipboard.writeText(input.value);\n\n  // notify user change is copied to clipboard\n  notification.style.display = 'block';\n  setTimeout(() => {\n    notification.style.display = 'none';\n  }, 1000);\n};\n\n// toggle theme\npickTheme = val => {\n  val = val.toString().toLowerCase();\n  const elm = document.querySelector('[data-theme]');\n\n  if (val === 'light') {\n    elm.setAttribute('data-theme', val);\n    icon.textContent = '🌙';\n    appJSON.theme = true;\n  }\n  if (val === 'dark') {\n    elm.setAttribute('data-theme', val);\n    icon.textContent = '🌞';\n    appJSON.theme = false;\n  }\n\n  // remember theme in localStorage\n  localStorage.setItem('JSStringReplacer', JSON.stringify(appJSON));\n};\n\nicon.onclick = () => { (appJSON.theme) ? pickTheme('dark') : pickTheme('light'); };\n\n// check localStorage\nif (localStorage.getItem('JSStringReplacer')) {\n  appJSON = JSON.parse(localStorage.getItem('JSStringReplacer'));\n  (appJSON.theme) ? pickTheme('light') : pickTheme('dark');\n}"},{"name":"hello","title":"An attractive title","description":"The most attractive description ever!","libraries":["https://cdnjs.cloudflare.com/ajax/libs/picocss/1.5.7/pico.classless.min.css","https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.css","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"],"html":"<main>\n  <article>\n    <hgroup>\n      <h1>my awesome title</h1>\n      <h2>my awesome sub title</h2>\n    </hgroup>\n    \n    <p>\n      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde qui voluptas fugit assumenda exercitationem rerum excepturi earum facere dignissimos praesentium ullam quidem ipsam dolores, eveniet alias minus? Laboriosam, amet enim?\n    </p>\n  </article>\n</main>","css":"","javascript":""},{"name":"notepad","title":"An attractive title","description":"The most attractive description ever!","libraries":["https://cdnjs.cloudflare.com/ajax/libs/picocss/1.5.7/pico.classless.min.css","https://michaelsboost.com/TailwindCSSMod/tailwind-mod.min.css","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"],"html":"<button class=\"absolute bottom-0 right-0 z-10 m-4 inline-block w-auto border-0 rounded-full\" onclick=\"addtodo()\">\n  <i class=\"fa fa-plus\"></i>\n</button>\n\n<div id=\"output\" class=\"absolute inset-0 overflow-auto p-10\"></div> ","css":"","javascript":"document.querySelector('html').setAttribute('data-theme', 'light')\n\n// variables\nconst code = `<article class=\"max-w-4xl mx-auto mb-8 relative pt-4 pb-4\">\n  <button class=\"absolute top-0 right-0 -m-4 inline-block w-auto bg-red-500 border-0 rounded-full\" onclick=\"this.closest('article').remove();\">\n    <i class=\"fa fa-times\"></i>\n  </button>\n  \n  <h2 class=\"mb-0\">\n    <span contenteditable>An Attractive Title</span>\n    <hr>\n  </h2>\n\n  <p class=\"m-0\" contenteditable>\n    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut et fugit odio vitae quisquam accusamus, dolor ipsa voluptatem perspiciatis! Dicta possimus culpa tempora repellendus accusamus, doloribus corporis harum accusantium. \n  </p>\n</article>`\n\naddtodo = () => {\n  output.insertAdjacentHTML(\"afterbegin\", code)\n}"}]}
+{
+  "version": "1.1.50",
+  "settings": {
+    "autoupdate": true,
+    "console": true,
+    "fontSize": "16"
+  },
+  "title": "TradingView Widget",
+  "description": "A sample TradingView Widget",
+  "meta": "",
+  "libraries": [
+    "https://cdnjs.cloudflare.com/ajax/libs/picocss/2.0.6/pico.min.css"
+  ],
+  "markdown": "",
+  "html": "<!-- TradingView Widget BEGIN -->\n<div class=\"tradingview-widget-container\">\n  <script type=\"text/javascript\" src=\"https://s3.tradingview.com/tv.js\"></script>\n</div>\n<!-- TradingView Widget END -->",
+  "css": "",
+  "javascript": "new TradingView.widget({\n  \"width\": \"100%\",\n  \"height\": window.innerHeight,\n  \"symbol\": \"COINBASE:BTCUSD\",\n  \"interval\": \"1\",\n  \"timezone\": \"Etc/UTC\",\n  \"theme\": \"dark\",\n  \"style\": \"1\",\n  \"locale\": \"en\",\n  \"toolbar_bg\": \"#f1f3f6\",\n  \"enable_publishing\": false,\n  \"hide_side_toolbar\": false,\n  \"allow_symbol_change\": true,\n  \"details\": true,\n  \"studies\": [\n    \"BB@tv-basicstudies\",\n    \"Volume@tv-basicstudies\",\n    \"VWAP@tv-basicstudies\"\n  ],\n  \"container_id\": \"tradingview_0b60e\"\n});"
+}

go/app.js

@@ -1,8 +1,10 @@
 importJS = url => {
-  let script = document.createElement('script')
-  script.src = url
-  script.setAttribute('defer', '')
-  document.head.appendChild(script)
-}
-importJS('js/libraries.js')
-importJS('bundle.js')
+  let script = document.createElement("script");
+  script.src = url;
+  script.setAttribute("defer", "");
+  document.head.appendChild(script);
+};
+importJS("js/libraries.js");
+importJS("libraries/tailwind/tailwind.min.js");
+// setTimeout(() => importJS("script.js"), 100);
+setTimeout(() => importJS("bundle.js"), 100);