", "style": { "height": "100" }, "action": { "type": "$default" } } ] } ] } }}); var iPhone = /iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; toastr.options = { "positionClass": "toast-bottom-right" }; var code; var isDirty = false; var QRComponent = { $cell: true, id: 'qr', style: { margin: "10px" }, _qr: null, $init: function() { this._qr = new QRCode(this, "http://web.jasonette.com/items/386.json"); } } var PreviewComponent = { $cell: true, id: 'preview', _update: function(node, form) { var self = this; if (isDirty) { if (!node || node.classList.contains('hidden')) { // hidden. don't generate preview var previewNode = document.querySelector("#item_preview"); previewNode.value = null; form.submit(); } else { html2canvas(node, {proxy: "http://159.89.138.184", useCORS: true}).then(function(canvas) { // update preview var dataUrl = canvas.toDataURL("image/jpeg"); document.querySelector("#item_preview").value = dataUrl; form.submit(); }); } } else { var previewNode = document.querySelector("#item_preview"); previewNode.value = null; form.submit(); } }, /* $components: [{ $type: "img", src: "//s3.amazonaws.com/jsonfm/items/previews/000/000/386/original/data?1528760437", onerror: "this.style.display = 'none';" }] */ } $(function(){ $(".topbar").headroom(); $(".topbar").addClass("headroom"); var codeEditor = document.getElementsByName("item[content]")[0]; code = $("#item_content").val(); if(code.length > 0){ var c = JSON.parse(code); $("#item_content").val(JSON.stringify(c, null, 2)); } var lintError; var options = { mode: "application/json", lineNumbers: false, lineWrapping: true, lint: { onUpdateLinting: function(lintErrorWarnings){ if(lintErrorWarnings.length > 0){ lintErrorWarnings.forEach(function(warning){ $(".CodeMirror-line:eq("+warning["from"]["line"]+")").css("background", "rgba(200,0,0,0.3)"); }); } lintError = lintErrorWarnings; } }, showCursorWhenSelecting: true, autoCloseBrackets: true, styleActiveLine: true, //theme: "ambiance", //theme: "elegant", //theme: "solarized light", //theme: "neat", //theme: "xq-light", //theme: "neo", theme: "railscasts", autoCloseBrackets: true, viewportMargin: Infinity /* gutters: ["CodeMirror-lint-markers"] */ }; if(!iPhone){ options["gutters"] = ["CodeMirror-lint-markers"]; options["lineNumbers"] = true; options["lineWrapping"] = true; } var editor_mode = localStorage.getItem("editor_mode"); if(editor_mode && editor_mode == "vim"){ options["keyMap"] = "vim"; $("#editor").addClass("active"); } doc = CodeMirror.fromTextArea(codeEditor, options); // $(".openin").css("width", $(".left").width()); //$(".left textarea").textareaAutoSize(); //doc.setSize("100%", $(".right").height()); doc.setSize("100%", $(window).height()); var onchange = function(cm, change){ var b = cm.getValue(); doc.value = b; document.querySelector("#jason")._update(JSON.parse(b)); isDirty = true; $("input.save").removeClass("disabled") }; var lazyOnchange = _.debounce(onchange, 300); doc.on("change", lazyOnchange) $(".item-info-form input, .item-info-form textarea").on("input", function(e) { $("input.save").removeClass("disabled") }) $(document).on("click", "a#like", function(e){ e.preventDefault(); $("form#submitlike").submit(); }) $(document).on("click", "a#edit", function(e){ $(this).addClass("hidden"); $(".item-info-form").removeClass("hidden"); $(".item-info").addClass("hidden"); return false; }); $(document).on("click", "#editor", function(e){ var editor_mode = localStorage.getItem("editor_mode"); if(editor_mode && editor_mode == "vim"){ editor_mode = "default"; $(this).removeClass("active"); toastr.success('Vim mode off') } else { editor_mode = "vim"; $(this).addClass("active"); toastr.success('Vim mode on') } doc.setOption("keyMap", editor_mode); localStorage.setItem("editor_mode", editor_mode); return false; }); $("form.edit_item").on("submit", function(e){ if(lintError.length > 0){ toastr.warning('Malformed JSON') return false; } else { if (e.originalEvent !== undefined) { // submit button clicked $("input.save").addClass("disabled") var $code = $("[name='item[content]']"); var content = $code.val(); $code.val(JSON.stringify(JSON.parse(content))); document.querySelector("#preview")._update(document.querySelector("#jason"), this) return false; } else { // triggered asynchronously after HTML2Canvas finished => This is the real submit // do nothing } } }); if($("p#notice").text().length > 0){ toastr.success($("p#notice").text()) } if($("#error_explanation").length > 0){ toastr.error($("#error_explanation").text()) } });