feature/Add checkbox controller and public/private toggle

Author: LewisYoul

app/assets/stylesheets/helpers.scss

@@ -6,6 +6,7 @@
 .inline-flex { display: inline-flex; }
 .flex-column { flex-direction: column; }
 .v-center { align-items: center; }
+.v-bottom { align-items: baseline; }
 .h-center { justify-content: center; }
 .flex-end { justify-content: flex-end; }
 

app/assets/stylesheets/snippets.scss

@@ -141,7 +141,7 @@
 
 .create-snippet--options-wrapper {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   margin-top: 16px;
 }
 

app/javascript/controllers/checkbox_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  static targets = ['text', 'icon', 'value']
+  static values = {
+    checkedText: String,
+    uncheckedText: String,
+    checkedIcon: String,
+    uncheckedIcon: String
+  }
+
+  toggle() {
+    this.toggleText();
+    this.toggleIcon();
+  }
+
+  toggleText() {
+    console.log()
+  }
+
+  toggleIcon() {
+    if (this.isChecked) {
+      this.textTarget.innerHTML = this.uncheckedTextValue
+      this.iconTarget.setAttribute('src', this.uncheckedIconValue)
+      this.valueTarget.value = false
+    } else {
+      this.textTarget.innerHTML = this.checkedTextValue
+      this.iconTarget.setAttribute('src', this.checkedIconValue)
+      this.valueTarget.value = true
+    }
+  }
+
+  get isChecked() {
+    return this.currentText === this.checkedTextValue
+  }
+
+  get currentText() {
+    return this.textTarget.innerHTML
+  }
+}

app/javascript/controllers/highlight_controller.js

@@ -2,11 +2,9 @@ import { Controller } from 'stimulus';
 import marked from 'marked';
 
 export default class extends Controller {
-  static targets = ["code", "languages", "highlightedBody", "description"];
+  static targets = ["code", "highlightedBody", "description"];
 
   connect() {
-    this.addLanguagesToSelect()
-
     marked.setOptions({
       highlight: function(code, lang) {
         if (lang && lang !== '') {
@@ -24,22 +22,11 @@ export default class extends Controller {
     this.descriptionTarget.innerHTML = event.target.value
   }
 
-  //  TODO: Pass in the selected language!!!
   highlight(event) {
     const rawCode = event.currentTarget.value
     const highlightedCode = marked(rawCode)
 
     this.codeTarget.innerHTML = highlightedCode
     this.highlightedBodyTarget.value = highlightedCode
   }
-
-  addLanguagesToSelect() {
-    hljs.listLanguages().forEach(language => {
-      const option = document.createElement('option')
-      option.text = language
-      option.value = language
-
-      this.languagesTarget.add(option)
-    })
-  }
 }

app/views/modals/snippets/new.html.erb

@@ -30,8 +30,22 @@
       </div>
 
       <div class="create-snippet--options-wrapper">
-        <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, params[:folder_id]), prompt: 'Select folder...' %>
-        <%= f.submit 'SAVE', class: "margin-left button--cta-new" %>
+        <div class="flex v-center" style="cursor: pointer;"
+          data-controller="checkbox"
+          data-action="click->checkbox#toggle"
+          data-checkbox-checked-text-value="Public"
+          data-checkbox-checked-icon-value="icons/lock-open.svg"
+          data-checkbox-unchecked-text-value="Private"
+          data-checkbox-unchecked-icon-value="icons/lock-closed.svg"
+        >
+          <span data-checkbox-target="text">Public</span>
+          <img data-checkbox-target="icon" src="icons/lock-open.svg" width="20">
+          <%= f.hidden_field :public, value: true, data: { checkbox_target: 'value' } %>
+        </div>
+        <div class="flex">
+          <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, params[:folder_id]), prompt: 'Select folder...' %>
+          <%= f.submit 'SAVE', class: "margin-left button--cta-new" %>
+        </div>
       </div>
     <% end %>