# Droplet config editor dropletConfig = ace.edit 'droplet-config' dropletConfig.setTheme 'ace/theme/chrome' dropletConfig.getSession().setMode 'ace/mode/json' dropletConfig.setValue localStorage.getItem('config') ? ''' { "mode": "html", "palette": [ { "name": "Metadata", "color": "lightblue", "blocks": [ { "block":"", "title":"Defines document type" }, { "block":"\\n \\n", "title":"Root of an HTML document" }, { "block":"\\n \\n", "title":"Represents a collection of metadata" }, { "block":"", "title":"Document's title or name" }, { "block":"", "title":"Base URL/target for all relative URLs in a document" }, { "block":"", "title":"Link between a document and an external resource" }, { "block":"", "title":"Metadata about the HTML document" }, { "block":"", "title":"Define style information" }, { "block":"", "title":"Define a client-side script, such as a JavaScript" } ] }, { "name": "Sections", "color": "orange", "blocks": [ { "block":"\\n \\n", "title":"Main content of the document" }, { "block":"
\\n \\n
", "title":"Independent, self-contained content" }, { "block":"
\\n \\n
", "title":"Generic section of a document or application" }, { "block":"", "title":"Set of navigation links" }, { "block":"", "title":"Content aside from the content it is placed in" }, { "block":"

", "title":"Heading for its section - Can use h1..h6 for different sizes" }, { "block":"
\\n \\n
", "title":"Group of headings h1-h6" }, { "block":"
\\n \\n
", "title":"Group of introductory or navigational aids" }, { "block":"", "title":"Footer for a document or section" }, { "block":"
\\n \\n
", "title":"Contact information for the author/owner" } ] }, { "name": "Grouping", "color": "purple", "blocks": [ { "block":"

\\n \\n

", "title":"Represents a paragraph" }, { "block":"
", "title":"Paragraph-level thematic break" }, { "block":"
\\n  \\n
", "title":"Block of preformatted text" }, { "block":"
\\n \\n
", "title":"Section that is quoted from another source" }, { "block":"
    \\n \\n
", "title":"Ordered list" }, { "block":"", "title":"Unordered list" }, { "block":"
  • ", "title":"List item" }, { "block":"
    \\n \\n
    ", "title":"Description list" }, { "block":"
    ", "title":"Term/name in a description list" }, { "block":"
    ", "title":"Description of a term" }, { "block":"
    \\n \\n
    ", "title":"Self-contained content, like illustrations, diagrams, photos, code listings, etc" }, { "block":"
    ", "title":"Defines a caption for a
    element" }, { "block":"
    \\n \\n
    ", "title":"Container for the dominant contents of another element" }, { "block":"
    \\n \\n
    ", "title":"Defines a division" } ] }, { "name": "Text", "color": "lightgreen", "blocks": [ { "block":"", "title":"Defines a hyperlink, which is used to link from one page to another" }, { "block":"", "title":"Stress emphasis of its contents" }, { "block":"", "title":"Strong importance, seriousness, or urgency for its contents" }, { "block":"", "title":"Side comments such as small print" }, { "block":"", "title":"Contents that are no longer accurate/relevant" }, { "block":"", "title":"Title of a work" }, { "block":"", "title":"Short quotation" }, { "block":"", "title":"Defining instance of a term" }, { "block":"", "title":"Abbreviation or acronym, optionally with its expansion" }, { "block":"\\n \\n", "title":"Ruby annotation(small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters)" }, { "block":"", "title":"Marks the ruby text component of a ruby annotation" }, { "block":"", "title":"Provide parentheses or other content around a ruby text" }, { "block":"", "title":"Represents its contents, along with a machine-readable form of those contents in the value attribute" }, { "block":"", "title":"Human-readable date/time" }, { "block":"", "title":"Fragment of computer code" }, { "block":"", "title":"Variable" }, { "block":"", "title":"Sample or quoted output from another program" }, { "block":"", "title":"User input (typically keyboard input)" }, { "block":"", "title":"Subscript" }, { "block":"", "title":"Superscript" }, { "block":"", "title":"Italic" }, { "block":"", "title":"Bold" }, { "block":"", "title":"Underline" }, { "block":"", "title":"Marked text" }, { "block":"", "title":"Bi-directional Isolation" }, { "block":"\\n \\n", "title":"Bi-Directional Override" }, { "block":"", "title":"Group inline-elements" }, { "block":"
    ", "title":"Line break" }, { "block":"", "title":"Line break opportunity" }, { "block":"text", "title":"Text content" } ] }, { "name": "Other", "color": "pink", "blocks": [ { "block":"", "title":"Addition to the document" }, { "block":"", "title":"Removal from a document" }, { "block":"
    \\n \\n
    ", "title":"Additional details that the user can view or hide on demand" }, { "block":"", "title":"Visible Heading of a
    element" }, { "block":"\\n \\n", "title":"List/menu of commands" }, { "block":"", "title":"Command/menuitem inside a menu" }, { "block":"", "title":"Dialog box or window" }, { "block":"", "title":"Alternate content for users that have disabled scripts" }, { "block":"", "title":"Declare fragments of HTML that can be cloned and inserted in the document by script" }, { "block":"", "title":"Draw graphics, on the fly, via scripting" }, { "block":"\\n \\n", "title":"Define graphics for the Web" }, { "block":"\\n \\n", "title":"Holds one or more elements each of which contains a separate document" } ] }, { "name": "Embedded", "color": "teal", "blocks": [ { "block":"\\"\\"", "title":"Image" }, { "block":"", "title":"Nested browsing context" }, { "block":"", "title":"Integration point for an external (typically non-HTML) application or interactive content" }, { "block":"\\n \\n", "title":"Embedded object within an HTML document" }, { "block":"", "title":"Parameters for plugins invoked by elements" }, { "block":"", "title":"Playing videos or movies, and audio files with captions" }, { "block":"", "title":"Sound or audio stream" }, { "block":"", "title":"Specify multiple alternative media resources for media elements" }, { "block":"", "title":"Explicit external timed text tracks for media elements" }, { "block":"\\n \\n", "title":"Define a client-side image-map(image with clickable areas)" }, { "block":"", "title":"Area inside an image-map" } ] }, { "name": "Table", "color": "indigo", "blocks": [ { "block":"\\n \\n
    ", "title":"Defines a table" }, { "block":"", "title":"Table Caption" }, { "block":"\\n \\n", "title":"Group of 1 or more columns" }, { "block":"", "title":"Column properties for a single column" }, { "block":"\\n \\n", "title":"Body of a table" }, { "block":"\\n \\n", "title":"Table header" }, { "block":"\\n \\n", "title":"Table footer" }, { "block":"\\n \\n", "title":"Row in a table" }, { "block":"", "title":"Standard cell inside a table row" }, { "block":"", "title":"Header cell inside a table row" } ] }, { "name": "Form", "color": "deeporange", "blocks": [ { "block":"
    \\n \\n
    ", "title":"Create an HTML form" }, { "block":"", "title":"Input field where user can enter data" }, { "block":"", "title":"Label for an element" }, { "block":"", "title":"Clickable button" }, { "block":"", "title":"Drop-down list" }, { "block":"", "title":"Option in a list" }, { "block":"\\n \\n", "title":"Pre-defined list of inputs for element with autocomplete" }, { "block":"", "title":"Multi-line text input" }, { "block":"", "title":"Key-pair generator field" }, { "block":"", "title":"Results of a calculation" }, { "block":"", "title":"Progress of a task" }, { "block":"", "title":"Scalar measurement within a known range, or a fractional value" }, { "block":"
    \\n \\n
    ", "title":"Group related items in a form" }, { "block":"", "title":"Caption for a
    element" } ] } ] } ''' editor = null # Droplet itself createEditor = (options) -> $('#droplet-editor').html '' editor = new droplet.Editor $('#droplet-editor')[0], options editor.setEditorState localStorage.getItem('blocks') is 'yes' editor.aceEditor.getSession().setUseWrapMode true # Initialize to starting text editor.setValue localStorage.getItem('text') ? '' editor.on 'change', -> localStorage.setItem 'text', editor.getValue() window.editor = editor createEditor JSON.parse dropletConfig.getValue() $('#toggle').on 'click', -> editor.toggleBlocks() localStorage.setItem 'blocks', (if editor.currentlyUsingBlocks then 'yes' else 'no') # Stuff for testing convenience $('#update').on 'click', -> localStorage.setItem 'config', dropletConfig.getValue() createEditor JSON.parse dropletConfig.getValue() configCurrentlyOut = localStorage.getItem('configOut') is 'yes' updateConfigDrawerState = -> if configCurrentlyOut $('#left-panel').css 'left', '0px' $('#right-panel').css 'left', '525px' else $('#left-panel').css 'left', '-500px' $('#right-panel').css 'left', '25px' editor.resize() localStorage.setItem 'configOut', (if configCurrentlyOut then 'yes' else 'no') $('#close').on 'click', -> configCurrentlyOut = not configCurrentlyOut updateConfigDrawerState() updateConfigDrawerState()