CKEDITOR.disableAutoInline = true jQuery ($)-> $.unsavedChanges = false window.onbeforeunload = -> return "Are you sure you want to leave this page? Your unsaved changes will not be stored!" if $.unsavedChanges $(document).ready -> # Find blocks fetch_blocks = => $(".polyblock[contenteditable='true']").not('.polyblock-condensed') blocks = fetch_blocks() return unless blocks.length # Find switches pb_switch = $('.polyblock-switch') has_switch = pb_switch.is('*') initialize = -> # Clone each block and instanciate CKeditor on the original blockclones = {} instanciateCKEditor = (id)-> editor = CKEDITOR.inline id, on: contentDom: => editor.document.on 'keydown', (e)=> if (e.data.$.ctrlKey or e.data.$.metaKey) and e.data.$.keyCode == 83 try e.data.$.preventDefault() editor.focusManager.blur true $('*:focus').blur() console.log("Before: " + $.unsavedChanges) if verbose saveChanges => #$.unsavedChanges = false console.log("After: " + $.unsavedChanges) if verbose false focus: (e)-> editorModeOn() startListening(id) blur: (e)-> stopListening() blocks.each -> id = $(@).attr('id') blockclones[id] = $(@).clone() instanciateCKEditor(id) unless $.map(CKEDITOR.instances, (inst, key)-> key).indexOf(id) > -1 # Wait for changes verbose = false changeChecker = null indicator = $('.pb-change-indicator') changeText = $('.pb-change-text') startListening = (which)-> stopListening() console.log("I'm listening...") if verbose buffer = CKEDITOR.instances[which].getData() changeChecker = setInterval -> console.log("Checking for changes...") if verbose reading = CKEDITOR.instances[which].getData() if reading!=buffer and !$.unsavedChanges then showUnsavedChanges() else if reading==buffer and $.unsavedChanges then showSavedChanges() , 1000 stopListening = -> return unless changeChecker? console.log("I'm no longer listening.") if verbose clearInterval(changeChecker) changeChecker = null showUnsavedChanges = => indicator.transition({rotate:"-30deg",color:"red"}) changeText.html("You have unsaved changes.").transition({color:"red"}) $.unsavedChanges = true showSavedChanges = -> indicator.transition({rotate:"0deg",color:"green"}) changeText.html("All changes saved.").transition({color:"green"}) # console.log "In function: " + $.unsavedChanges $.unsavedChanges = false # console.log "In function: " + $.unsavedChanges showSavingChanges = => indicator.transition({rotate:"30deg",color:"yellow"}) changeText.html("Saving changes...").transition({color:"yellow"}) # Editor functionality toggles initialBodyPadding = $('body').css("padding-bottom") editorModeOn = (pb)-> $('#pb_bar').show "slide", {direction:"down"}, 250, -> $('body').css("padding-bottom",$("#pb_bar").height() + 20) pb?() editorModeOff = (pb)-> $('#pb_bar').hide "slide", {direction:"down"}, 250, -> $('body').css("padding-bottom",initialBodyPadding) pb?() # Change storage saveChanges = (cb)-> stopListening() showSavingChanges() original_scroll = x: window.scrollX, y: window.scrollY pbs = $.map blocks, (block_element, i)-> block = $(block_element) pbid = block.attr('data-pbid') pbname = block.attr('data-pbname') editor = CKEDITOR.instances[block.attr('id')] editor.focus() content = editor.getData() editor.focusManager.blur true $('*:focus').blur() { id: pbid, name: pbname, content: content } setTimeout (-> window.scrollTo original_scroll.x, original_scroll.y), 1 $.post "/polyblock/update", {pbs: pbs}, (data)-> showSavedChanges() editorModeOff -> alertify.success("Your changes have been saved.") if alertify? cb?() revertChanges = (pb)-> return unless confirm("Are you sure you want to discard your changes?") editorModeOff -> blocks.each -> $(@).replaceWith(blockclones[$(@).attr("id")]) alertify.success("Your changes have been discarded.") if alertify? # Modes # currentMode = previousMode = "WYSIWYG" # convertToTextarea = (block,content=null,tab="\t")-> # tabchars = tab.replace(/\\/,"").length # previous_textarea = $("textarea[data-pbid=#{block.attr("data-pbid")}]") # content ?= if previous_textarea.is("*") then previous_textarea.val() else block.html() # textarea = $('<textarea />') # .addClass("form-control") # .attr("data-pbid",block.attr("data-pbid")) # .val(content) # .css("font-family": 'Monaco, Menlo, Consolas, "Courier New", monospace') # .on "keydown", (e)-> # keycode = e.keyCode or e.which # return unless keycode == 9 or keycode == 8 or keycode == 46 # start = $(@).get(0).selectionStart # end = $(@).get(0).selectionEnd # if keycode == 9 # e.preventDefault() # $(@).val("#{$(@).val().substring(0,start)}#{tab}#{$(@).val().substring(end)}") # $(@).get(0).selectionStart = $(@).get(0).selectionEnd = start + tabchars # else if keycode == 8 # return unless currentMode=="HAML" and $(@).val().substring(start-tabchars,start) == tab # e.preventDefault() # $(@).val("#{$(@).val().substring(0,start-tabchars)}#{$(@).val().substring(end)}") # $(@).get(0).selectionStart = $(@).get(0).selectionEnd = start-tabchars # else if keycode == 46 # return unless currentMode=="HAML" and $(@).val().substring(start,start+tabchars) == tab # e.preventDefault() # $(@).val("#{$(@).val().substring(0,start)}#{$(@).val().substring(end+tabchars)}") # $(@).get(0).selectionStart = $(@).get(0).selectionEnd = start # replaceIt = (html)=> # if !previous_textarea.is("*") then block.replaceWith(textarea) # else previous_textarea.replaceWith(textarea) # textarea.autosize().focus() # if previousMode != "HAML" then replaceIt(content) # else $.post "/convert_haml_to_html", {haml: content}, (data)=> replaceIt(data) # convertFromTextarea = (block)-> # textarea = $("textarea[data-pbid=#{block.attr("data-pbid")}]") # replaceIt = (html)=> # console.log "Replacing with html: #{html}" # textarea.replaceWith(block) # block.html(html) # if previousMode != "HAML" then replaceIt(textarea.text()) # else $.post "/convert_haml_to_html", {haml: textarea.val()}, (data)=> replaceIt(data) # # $('#pb_bar_format_buttons button').click (e)-> # e.preventDefault() # return if $(@).hasClass("active") # previousMode = currentMode # currentMode = $(@).html() # changeModes = (block)=> # textarea = $("textarea[data-pbid=#{block.attr("data-pbid")}]") # content = if textarea.is("*") then textarea.val() else block.html() # switch currentMode # when "WYSIWYG" then convertFromTextarea block # when "HTML" then convertToTextarea block, html_beautify(content) # when "HAML" then $.post "/convert_html_to_haml", {html: content}, (data)=> convertToTextarea(block,data," ") # when "Markdown" then convertToTextarea block, html_beautify(content) # blocks = fetch_blocks() if previousMode == "WYSIWYG" # blocks.each -> changeModes $(@) # $(@).siblings().removeClass("active").end().addClass("active") # Button handlers $('#pb_bar_revert').click (e)-> e.preventDefault() revertChanges() $('#pb_bar_save').click (e)-> e.preventDefault() saveChanges() if has_switch pb_switch.click (e)-> e.preventDefault() if $(@).hasClass("active") $(@).removeClass("active") window.location.reload() else $(@).addClass("active") initialize() else initialize()