Merge pull request #35 from SimplyEdit/feature/refactor-styles

rename .sb, --sb classes to simplycode

www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js

@@ -1,25 +1,25 @@
 function(el) {
-  var previewRunners = document.querySelectorAll("iframe.sb-full-preview");
+  var previewRunners = document.querySelectorAll("iframe.simplycode-full-preview");
   previewRunners.forEach(function(previewRunner) {
     previewRunner.contentWindow.document.previewRunner = previewRunner;
     simplyApp.commands.resetPreview(previewRunner)
       .then(function(previewRunner) {
       previewRunner.contentWindow.document.open();
-      previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".sb-preview-code").innerText);
+      previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".simplycode-preview-code").innerText);
       previewRunner.contentWindow.document.close();
     });
   });
 
-  var previewRunners = document.querySelectorAll("iframe.sb-component-preview");
+  var previewRunners = document.querySelectorAll("iframe.simplycode-component-preview");
   previewRunners.forEach(function(previewRunner) {
     previewRunner.contentWindow.document.previewRunner = previewRunner;
     simplyApp.commands.resetPreview(previewRunner)
       .then(function(previewRunner) {
       previewRunner.contentWindow.document.open();
-      previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".sb-preview-code").innerText);
+      previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".simplycode-preview-code").innerText);
       previewRunner.contentWindow.document.close();
       previewRunner.contentWindow.addEventListener("simply-content-loaded", function() {
-        var previewData = previewRunner.parentNode.querySelector(".sb-preview-data").innerText;
+        var previewData = previewRunner.parentNode.querySelector(".simplycode-preview-data").innerText;
         try {
           previewData = JSON.parse(previewData);
         } catch(e) {

www/api/data/base-components/automatic-tests/commands/autoRunTests.js

@@ -1,5 +1,5 @@
 function(el) {
-  var testRunners = document.querySelectorAll(".sb-component[open] iframe.qunit");
+  var testRunners = document.querySelectorAll(".simplycode-component[open] iframe.qunit");
   testRunners.forEach(function(testRunner) {
     testRunner.contentWindow.document.testRunner = testRunner;
     testRunner.contentWindow.document.open();

www/api/data/base-components/codemirror/commands/codeMirrorInit.js

@@ -1,5 +1,5 @@
 function() {
-  var textareas = document.querySelectorAll(".sb-component[open] textarea[data-codemirror-mode]:not([style])");
+  var textareas = document.querySelectorAll(".simplycode-component[open] textarea[data-codemirror-mode]:not([style])");
   textareas.forEach(function(textarea) {
     var mode = "javascript";
     if (textarea.hasAttribute("data-codemirror-mode")) {

www/api/data/components/1-styling/componentCss/style.css

@@ -77,8 +77,8 @@ a:visited {
 
 /* custom styling for custom elements */
 
-.sb-button,
-a.sb-button {
+.simplycode-button,
+a.simplycode-button {
     background: var(--support-background);
     color: var(--support-color);
     padding: 0.3em 0.5em;
@@ -87,13 +87,13 @@ a.sb-button {
     text-decoration: none;
 }
 
-.sb-button:first-child {
+.simplycode-button:first-child {
     margin-left: 0;
 }
-.sb-button:last-child {
+.simplycode-button:last-child {
     margin-right: 0;
 }
-.sb-button.highlight {
+.simplycode-button.highlight {
     background: var(--highlight-background);
     color: var(--highlight-color);
 }
@@ -125,7 +125,7 @@ body > nav {
 body > div.main {
     grid-area: pane;
 }
-nav ul ul .sb-expand {
+nav ul ul .simplycode-expand {
     display: none;
     padding: 0 1.7em;
 }
@@ -146,18 +146,18 @@ nav > ul > li[data-simply-command=expandMenu]::before {
     content: "[+] ";
     font-family: monospace;
 }
-.sb-part {
+.simplycode-part {
     margin-top: 1em;
 }
 
-.sb-part-header {
+.simplycode-part-header {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
-.sb-part-header .sb-options {
+.simplycode-part-header .simplycode-options {
     text-align: right;
 }
-.sb-part .sb-tab {
+.simplycode-part .simplycode-tab {
     padding: 10px 5px;
     margin: 0;
     background-color: #151515;
@@ -166,54 +166,54 @@ nav > ul > li[data-simply-command=expandMenu]::before {
     text-align: center;
     margin-right: 5px;
 }
-.sb-part .sb-tab input[type=radio] {
+.simplycode-part .simplycode-tab input[type=radio] {
     display: none;
 }
-.sb-part .sb-tab input[type=radio]:checked ~ span {
+.simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
     font-weight: bold;
     border-bottom: 2px solid var(--support-background);
 }
-.sb-part .sb-editor-code {
+.simplycode-part .simplycode-editor-code {
     display: grid;
     grid-template-columns: 1fr;
 }
-.sb-part .sb-dual {
+.simplycode-part .simplycode-dual {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
-.sb-part .sb-dual-preview {
+.simplycode-part .simplycode-dual-preview {
     display: grid;
     grid-template-columns: auto 480px;
 }
-.sb-test-header {
+.simplycode-test-header {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
-.sb-test-header .sb-options {
+.simplycode-test-header .simplycode-options {
     text-align: right;
 }
-.sb-component summary {
+.simplycode-component summary {
     font-size: 1.2em;
 }
-.sb-component {
+.simplycode-component {
     margin: 10px 0px;
 }
-.sb-header {
+.simplycode-header {
     display: grid;
     grid-template-columns: 3fr 1fr;
     vertical-align: middle;
 }
-.sb-header .sb-controls {
+.simplycode-header .simplycode-controls {
     text-align: right;
 }
-.sb-header h1 span {
+.simplycode-header h1 span {
     white-space: nowrap;
 }
-.sb-component summary .sb-controls {
+.simplycode-component summary .simplycode-controls {
     display: none;
     margin-left: 1em;
 }
-.sb-component[open] summary .sb-controls {
+.simplycode-component[open] summary .simplycode-controls {
     display: inline-block;
 }
 header {
@@ -231,16 +231,16 @@ header {
 header h1 {
     margin: 0;
 }
-header .sb-controls {
+header .simplycode-controls {
     padding-top: 5px;
     padding-right: 5px;
     text-align: right;
 }
-.sb-editor-code textarea {
+.simplycode-editor-code textarea {
     margin-top: -1px;
 }
 
-ul.sb-components-list {
+ul.simplycode-components-list {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -249,7 +249,7 @@ ul.sb-components-list {
     gap: 10px;
     margin-bottom: 1em;
 }
-ul.sb-components-list li {
+ul.simplycode-components-list li {
     border: 1px solid #555;
     background-color: #2a2a2a;
     padding: 10px;

www/api/data/components/component-actions/componentTemplates/componentActions.html

@@ -1,41 +1,41 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Actions provide the internal API for the app to use. It is called by routes and commands, and makes use of the Data API. Actions should not do any DOM access.">
     <span data-simply-field="count.actions" data-simply-content="attributes" data-simply-attributes="data-count">
       Actions
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addAction">Add action</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addAction">Add action</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.actions">
+  <div class="simplycode-code-method" data-simply-list="component.parts.actions">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="action" placeholder="Action name, eg getItemList">
-            <label class="sb-tab">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="action" placeholder="Action name, eg getItemList">
+            <label class="simplycode-tab">
               <input type="radio" name="actionEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
             </label>
-            <label class="sb-tab">
+            <label class="simplycode-tab">
               <input type="radio" name="actionEditor" value="tests" data-simply-field="editor">
               <span>Tests</span>
             </label>
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-deleted="false" data-simply-command="deleteEntry">Delete action</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-deleted="false" data-simply-command="deleteEntry">Delete action</button>
           </div>
         </div>
-        <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+        <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
           <template data-simply-template="code">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
               <simply-render rel="componentQUnitActionRunner"></simply-render>
             </div>
           </template>
           <template data-simply-template="tests">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <simply-render rel="componentQUnitTests"></simply-render>
             </div>
           </template>

www/api/data/components/component-body-html/componentTemplates/componentBodyHtml.html

@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="These are added to the top of the &lt;body&gt; of the HTML">
     <span data-simply-field="count.bodyHtml" data-simply-content="attributes" data-simply-attributes="data-count">
       Additional body HTML
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addBodyHtml">Add body HTML</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addBodyHtml">Add body HTML</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.bodyHtml">
+  <div class="simplycode-code-method" data-simply-list="component.parts.bodyHtml">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Name">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Name">
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete HTML</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>
             <simply-render rel="componentHtmlValidator"></simply-render>
           </div>

www/api/data/components/component-commands/componentTemplates/componentCommands.html

@@ -1,41 +1,41 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Commands come from user interaction on the DOM, for instance clicking a button. Commands are aware of the DOM, and use actions to execute logic.">
     <span data-simply-field="count.commands" data-simply-content="attributes" data-simply-attributes="data-count">
       Commands
     </span>
-    <span class='sb-controls'>
-      <button class="sb-button" data-simply-command="addCommand">Add command</button>
+    <span class='simplycode-controls'>
+      <button class="simplycode-button" data-simply-command="addCommand">Add command</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.commands">
+  <div class="simplycode-code-method" data-simply-list="component.parts.commands">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="command" placeholder="Command name, eg getItemList">
-            <label class="sb-tab">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="command" placeholder="Command name, eg getItemList">
+            <label class="simplycode-tab">
               <input type="radio" name="commandEditor" checked value="code" data-simply-field="editor">
               <span>Code</span>
             </label>
-            <label class="sb-tab">
+            <label class="simplycode-tab">
               <input type="radio" name="commandEditor" value="tests" data-simply-field="editor">
               <span>Tests</span>
             </label>
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete command</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete command</button>
           </div>
         </div>
-        <div class="sb-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
+        <div class="simplycode-editors" data-simply-field="editor" data-simply-content="template" data-simply-default-template="code">
           <template data-simply-template="code">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>
               <simply-render rel="componentQUnitCommandRunner"></simply-render>
             </div>
           </template>
           <template data-simply-template="tests">
-            <div class="sb-editor-code">
+            <div class="simplycode-editor-code">
               <simply-render rel="componentQUnitTests"></simply-render>
             </div>
           </template>

www/api/data/components/component-component-css/componentTemplates/componentComponentCss.html

@@ -1,26 +1,26 @@
-<details class="sb-component">
+<details class="simplycode-component">
   <summary data-simply-command="initEditors" title="Set component CSS - this CSS is globally available.">
     <span data-simply-field="count.componentCss" data-simply-content="attributes" data-simply-attributes="data-count">
       Component CSS collections
     </span>
-    <span class="sb-controls">
-      <button class="sb-button" data-simply-command="addComponentCss">Add CSS collection</button>
+    <span class="simplycode-controls">
+      <button class="simplycode-button" data-simply-command="addComponentCss">Add CSS collection</button>
     </span>
   </summary>
-  <div class="sb-code-method" data-simply-list="component.parts.componentCss">
+  <div class="simplycode-code-method" data-simply-list="component.parts.componentCss">
     <template>
-      <div class="sb-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
-        <div class="sb-part-header">
-          <div class="sb-tabs">
-            <input class="sb-tab" data-simply-field="name" placeholder="Name this CSS collection">
+      <div class="simplycode-part" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted">
+        <div class="simplycode-part-header">
+          <div class="simplycode-tabs">
+            <input class="simplycode-tab" data-simply-field="name" placeholder="Name this CSS collection">
           </div>
-          <div class="sb-options">
-			<button class="sb-button" draggable="true">Drag to move</button>
-            <button class="sb-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
+          <div class="simplycode-options">
+			<button class="simplycode-button" draggable="true">Drag to move</button>
+            <button class="simplycode-button" data-simply-field="deleted" data-simply-content="attributes" data-simply-attributes="data-deleted" data-simply-command="deleteEntry">Delete CSS</button>
           </div>
         </div>
-        <div class="sb-editors">
-          <div class="sb-editor-code">
+        <div class="simplycode-editors">
+          <div class="simplycode-editor-code">
             <textarea data-codemirror-mode="css" data-simply-field="code" placeholder="div {...}"></textarea>
           </div>
         </div>