Pass empty values from JSON?

I'm using Github Gists to save my code here. However if the editor is empty it can't save so I'm using a ternary/conditional operator to check if it has a value; if it does save it as a gist and if it doesn't move to the next value.

Unfortunately the console came back with:

Uncaught SyntaxError: Unexpected token (

How am I suppose to save the editors that have a value as a gist and those that don't to skip?

$("[data-action=save]").click(function() {
  data = {
    "description": "sample description",
    "public": true,
    "files": {
      ( !htmlEditor.getValue() ) ? "" : "index.html" : { "content": htmlEditor.getValue() },
      ( !cssEditor.getValue() )  ? "" : "index.css"  : { "content": cssEditor.getValue() },
      ( !jsEditor.getValue() )   ? "" : "index.js"   : { "content": jsEditor.getValue() },
      "README.md"       : { "content": "# readme sample" }
    }
  }

  // Post on Github via JQuery Ajax
  $.ajax({
    url: "https://api.github.com/gists",
    type: "POST",
    dataType: "json",
    data: JSON.stringify(data)
  }).success(function(e) {
    $("[data-action=saved]").text(e.html_url)
    $("[data-action=saved]").attr("href", e.html_url).attr("target", "_blank")

    // Let user view gist
    console.log("Your weave is saved!")
  }).error(function(e) {
    console.warn("Error: Could not save weave!", e)
  })
})

var delay

// Initialize CodeMirror editor
var htmlEditor = CodeMirror.fromTextArea(document.getElementById("htmlEditor"), {
  mode: "text/html",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
var cssEditor = CodeMirror.fromTextArea(document.getElementById("cssEditor"), {
  mode: "text/css",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
var jsEditor = CodeMirror.fromTextArea(document.getElementById("jsEditor"), {
  mode: "text/javascript",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})

// Live preview
function updatePreview() {
  var previewFrame = document.getElementById("preview")
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document
  preview.open()
  var htmlContent = "<st"+"yle>" + cssEditor.getValue() + "</st"+"yle>" + htmlEditor.getValue() + "<scr"+"ipt>" + jsEditor.getValue() + "</scr"+"ipt>"
  preview.write(htmlContent)
  preview.close()
}
setTimeout(updatePreview, 300)

// Call live preview when code changes
htmlEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})
cssEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})
jsEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})

// Setup Grid
$("#splitContainer, #leftSplitter, #rightSplitter").jqxSplitter({ theme: "metro" })
$("#splitContainer").jqxSplitter({
  height: "auto",
  width: "100%",
  orientation: "horizontal",
  showSplitBar: true,
  panels: [
    {
      size: "50%",
      collapsible: false
    },
    { size: "50%" }
  ]
})
$("#leftSplitter").jqxSplitter({
  height: "100%",
  width: "100%",
  orientation: "vertical",
  showSplitBar: true,
  panels: [
    {
      size: "50%",
      collapsible: false
    },
    { size: "50%" }
  ]
})
$("#rightSplitter").jqxSplitter({
  height: "100%",
  width: "100%",
  orientation: "vertical",
  showSplitBar: true,
  panels: [
    { size: "50%" },
    {
      size: "50%",
      collapsible: false
    }
  ]
})
body {
  overflow: hidden;
}

header {
  position: absolute;
  left: 0;
  right: 0;
  padding: 8px 5px;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.save {
  padding: 11px;
}

#splitContainer {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}

.CodeMirror {
  font-family: monospace;
  font-size: 14px;
  font-weight: normal;
  display: block;
  width: 100%;
  background: transparent;
  height: 100% !important;
}

.CodeMirror-gutters {
  height: 100% !important;
}

.lint-error {
  font-family: arial;
  font-size: 70%;
  background: #ffa;
  color: #a00;
  padding: 2px 5px 3px;
}

.lint-error-icon {
  color: white;
  background-color: red;
  font-weight: bold;
  border-radius: 50%;
  padding: 0 3px;
  margin-right: 7px;
}

.editor-container {
  width: 100%;
  height: 100%;
  background: #fff;
}
.editor-container > * {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  resize: none;
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.0.0/normalize.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.metro.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>

<header>
  <a href="javascript:void(0)" data-action="save" class="save">save</a>
  <a data-action="saved"></a>
</header>
<form class="fill">
  <div id="splitContainer">
    <div>
      <div id="leftSplitter">
        <div>
          <textarea id="htmlEditor"><!-- sample html --></textarea>
        </div>
        <div>
          <textarea id="cssEditor"></textarea>
        </div>
      </div>
    </div>
    <div>
      <div id="rightSplitter">
        <div>
          <textarea id="jsEditor">// sample js</textarea>
        </div>
        <div>
          <iframe id="preview" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
        </div>
      </div>
    </div>
  </div>
</form>

Answers 1

  • Here's what I did!

    I put it all in a JSON; checked if it had a value, if it did I set it as a file to be saved, and if it didn't have a value the file wouldn't exist, thus not be saved.

    $("[data-action=save]").click(function() {
      var files = {}
      if (htmlEditor.getValue()) {
        files["index.html"] = htmlEditor.getValue() ? { content: htmlEditor.getValue() } : null
      }
      if (cssEditor.getValue()) {
        files["index.css"] = cssEditor.getValue() ? { content: cssEditor.getValue() } : null
      }
      if (jsEditor.getValue()) {
        files["index.js"] = jsEditor.getValue() ? { content: jsEditor.getValue() } : null
      }
    
      data = {
        "description": "sample description",
        "public": true,
        "files": files
      }
    
      // Post on Github via JQuery Ajax
      $.ajax({
        url: "https://api.github.com/gists",
        type: "POST",
        dataType: "json",
        data: JSON.stringify(data)
      }).success(function(e) {
        $("[data-action=saved]").text(e.html_url)
        $("[data-action=saved]").attr("href", e.html_url).attr("target", "_blank")
    
        // Let user view gist
        console.log("Your weave is saved!")
      }).error(function(e) {
        console.warn("Error: Could not save weave!", e)
      })
    })
    
    var delay
    
    // Initialize CodeMirror editor
    var htmlEditor = CodeMirror.fromTextArea(document.getElementById("htmlEditor"), {
      mode: "text/html",
      tabMode: "indent",
      styleActiveLine: true,
      lineNumbers: true,
      lineWrapping: true,
      autoCloseTags: true,
      foldGutter: true,
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    })
    var cssEditor = CodeMirror.fromTextArea(document.getElementById("cssEditor"), {
      mode: "text/css",
      tabMode: "indent",
      styleActiveLine: true,
      lineNumbers: true,
      lineWrapping: true,
      autoCloseTags: true,
      foldGutter: true,
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    })
    var jsEditor = CodeMirror.fromTextArea(document.getElementById("jsEditor"), {
      mode: "text/javascript",
      tabMode: "indent",
      styleActiveLine: true,
      lineNumbers: true,
      lineWrapping: true,
      autoCloseTags: true,
      foldGutter: true,
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    })
    
    // Live preview
    function updatePreview() {
      var previewFrame = document.getElementById("preview")
      var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document
      preview.open()
      var htmlContent = "<st"+"yle>" + cssEditor.getValue() + "</st"+"yle>" + htmlEditor.getValue() + "<scr"+"ipt>" + jsEditor.getValue() + "</scr"+"ipt>"
      preview.write(htmlContent)
      preview.close()
    }
    setTimeout(updatePreview, 300)
    
    // Call live preview when code changes
    htmlEditor.on("change", function() {
      clearTimeout(delay)
      delay = setTimeout(updatePreview, 300)
    })
    cssEditor.on("change", function() {
      clearTimeout(delay)
      delay = setTimeout(updatePreview, 300)
    })
    jsEditor.on("change", function() {
      clearTimeout(delay)
      delay = setTimeout(updatePreview, 300)
    })
    
    // Setup Grid
    $("#splitContainer, #leftSplitter, #rightSplitter").jqxSplitter({ theme: "metro" })
    $("#splitContainer").jqxSplitter({
      height: "auto",
      width: "100%",
      orientation: "horizontal",
      showSplitBar: true,
      panels: [
        {
          size: "50%",
          collapsible: false
        },
        { size: "50%" }
      ]
    })
    $("#leftSplitter").jqxSplitter({
      height: "100%",
      width: "100%",
      orientation: "vertical",
      showSplitBar: true,
      panels: [
        {
          size: "50%",
          collapsible: false
        },
        { size: "50%" }
      ]
    })
    $("#rightSplitter").jqxSplitter({
      height: "100%",
      width: "100%",
      orientation: "vertical",
      showSplitBar: true,
      panels: [
        { size: "50%" },
        {
          size: "50%",
          collapsible: false
        }
      ]
    })
    body {
      overflow: hidden;
    }
    
    header {
      position: absolute;
      left: 0;
      right: 0;
      padding: 8px 5px;
      overflow: hidden;
    }
    
    .fl {
      float: left;
    }
    
    .fr {
      float: right;
    }
    
    .save {
      padding: 11px;
    }
    
    #splitContainer {
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
    }
    
    .CodeMirror {
      font-family: monospace;
      font-size: 14px;
      font-weight: normal;
      display: block;
      width: 100%;
      background: transparent;
      height: 100% !important;
    }
    
    .CodeMirror-gutters {
      height: 100% !important;
    }
    
    .lint-error {
      font-family: arial;
      font-size: 70%;
      background: #ffa;
      color: #a00;
      padding: 2px 5px 3px;
    }
    
    .lint-error-icon {
      color: white;
      background-color: red;
      font-weight: bold;
      border-radius: 50%;
      padding: 0 3px;
      margin-right: 7px;
    }
    
    .editor-container {
      width: 100%;
      height: 100%;
      background: #fff;
    }
    .editor-container > * {
      width: 100%;
      height: 100%;
      border: 0;
      outline: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      resize: none;
    }
    
    iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }
    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.0.0/normalize.css">
    <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
    <link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css">
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.metro.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://codemirror.net/lib/codemirror.js"></script>
    <script src="http://codemirror.net/mode/javascript/javascript.js"></script>
    <script src="http://codemirror.net/mode/xml/xml.js"></script>
    <script src="http://codemirror.net/mode/css/css.js"></script>
    <script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
    <script src="http://codemirror.net/addon/edit/closetag.js"></script>
    <script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
    <script src="http://codemirror.net/addon/selection/active-line.js"></script>
    <script src="http://codemirror.net/addon/fold/foldcode.js"></script>
    <script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
    <script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
    <script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
    <script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>
    
    <header>
      <a href="javascript:void(0)" data-action="save" class="save">save</a>
      <a data-action="saved"></a>
    </header>
    <form class="fill">
      <div id="splitContainer">
        <div>
          <div id="leftSplitter">
            <div>
              <textarea id="htmlEditor"><!-- sample html --></textarea>
            </div>
            <div>
              <textarea id="cssEditor"></textarea>
            </div>
          </div>
        </div>
        <div>
          <div id="rightSplitter">
            <div>
              <textarea id="jsEditor">// sample js</textarea>
            </div>
            <div>
              <iframe id="preview" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
            </div>
          </div>
        </div>
      </div>
    </form>


Related Articles