spreefinery_themes 1.0

data/app/assets/javascripts/code_mirror_manager.coffee

@@ -0,0 +1,105 @@
+#= require codemirror/codemirror
+#= require codemirror/util/simple-hint
+#= require codemirror/util/dialog
+#= require codemirror/util/searchcursor
+#= require codemirror/util/search
+#= require codemirror/util/javascript-hint
+#= require codemirror/util/overlay
+#= require codemirror/util/formatting
+#= require codemirror/util/closetag
+#= require codemirror/mode/css/css
+#= require codemirror/mode/xml/xml
+#= require codemirror/mode/liquid/liquid
+#= require codemirror/mode/javascript/javascript
+#= require codemirror/mode/yaml/yaml
+#= require codemirror/mode/htmlmixed/htmlmixed
+#= require codemirror/mode/htmlembedded/htmlembedded
+# require codemirror/mode/scheme/scheme
+
+#= require_self
+
+class @CodeMirrorManager
+  constructor: (@text_area_id, @mode) ->
+    @editor = CodeMirror.fromTextArea(document.getElementById(@text_area_id),
+      lineNumbers: true
+      extraKeys:
+        F11: (cm) ->
+          setFullScreen cm, not isFullScreen(cm)
+        Esc: (cm) ->
+          setFullScreen cm, false  if isFullScreen(cm)
+        "Ctrl-Space": "autocomplete"
+      mode: @mode
+      tabMode: "indent"
+      autoCloseTags: true
+    )
+    #@editor.on "change", =>
+      #$('#file_content').val(CodeMirrorManager.editor.getValue())
+      #clearTimeout delay
+      #delay = setTimeout(@updatePreview, 300)
+
+    #setTimeout @updatePreview, 300
+
+    CodeMirror.commands.autocomplete = (cm) ->
+      CodeMirror.simpleHint cm, CodeMirror.javascriptHint
+
+    CodeMirror.on window, "resize", ->
+      showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0]
+      return  unless showing
+      showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px"
+
+    CodeMirrorManager.editor = @editor
+
+
+#TODO auto-detect the language
+# function looksLikeScheme(code) {
+#   return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code);
+# }
+  updatePreview: =>
+    #TODO auto-detect the language
+    # @editor.setOption("mode", looksLikeScheme(@editor.getValue()) ? "scheme" : "javascript");
+    previewFrame = document.getElementById('preview')
+    preview = previewFrame.contentDocument or previewFrame.contentWindow.document
+    preview.open()
+    preview.write @editor.getValue()
+    preview.close()
+
+  @selectTheme: ->
+    input = document.getElementById('select')
+    theme = input.options[input.selectedIndex].innerHTML
+    @editor.setOption "theme", theme
+    choice = document.location.search and decodeURIComponent(document.location.search.slice(1))
+    if choice
+      input.value = choice
+      @editor.setOption "theme", choice
+
+  @getSelectedRange: ->
+    from: @editor.getCursor(true)
+    to: @editor.getCursor(false)
+
+  @autoFormatSelection: ->
+    range = @getSelectedRange()
+    @editor.autoFormatRange range.from, range.to
+
+  @commentSelection: (isComment) ->
+    range = @getSelectedRange()
+    @editor.commentRange isComment, range.from, range.to
+
+  isFullScreen: (cm) ->
+    /\bCodeMirror-fullscreen\b/.test cm.getWrapperElement().className
+
+  winHeight: ->
+    window.innerHeight or (document.documentElement or document.body).clientHeight
+
+  @setFullScreen: (cm, full) ->
+    wrap = cm.getWrapperElement()
+    if full
+      wrap.className += " CodeMirror-fullscreen"
+      wrap.style.height = winHeight() + "px"
+      document.documentElement.style.overflow = "hidden"
+    else
+      wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "")
+      wrap.style.height = ""
+      document.documentElement.style.overflow = ""
+    cm.refresh()
+
+

data/app/assets/javascripts/editor.coffee

@@ -0,0 +1,3 @@
+$ ->
+  jstreeManager = new JstreeManager()
+  filesManager =  new FilesManager()

data/app/assets/javascripts/files_manager.coffee

@@ -0,0 +1,41 @@
+class @FilesManager
+  constructor: ->
+    $(".mmenu input").click ->
+      switch @id
+        when "add_default", "add_folder"
+          $("#jsTree").jstree "create", null, "last",
+            attr:
+              rel: @id.toString().replace("add_", "")
+        when "search"
+          $("#jsTree").jstree "search", document.getElementById("text").value
+        when "refresh"
+          $("#code").html('')
+          $('#jsTree').jstree('refresh',-1);
+        else
+          $("#jsTree").jstree @id
+
+  @initHandlers = ->
+    $("#file_submit").click ->
+      $("#form_for_file").submit()
+
+    $("#form_for_file").submit ->
+      $('#file_content').val(CodeMirrorManager.editor.getValue())
+      FilesManager.saveFile()
+      false
+
+
+  @saveFile = ->
+    $.ajax
+      url: "/refinery/themes/editor/save_file"
+      type: "POST"
+      beforeSend: (request) ->
+        $("#spinner").show()
+        $("#file_submit").hide()
+
+      data: $.param($("#form_for_file").serializeArray())
+      dataType: "html"
+      success: (D) ->
+        $("#code").html(D)
+        FilesManager.initHandlers()
+        $.jGrowl "File successfully saved!",
+          life: 5000

data/app/assets/javascripts/jstree_manager.coffee

@@ -0,0 +1,177 @@
+#= require jstree/jquery.jstree
+
+class @JstreeManager
+  constructor: ->
+    @tree = $("#jsTree")
+    @buildTree()
+    @tree
+
+  uploadFile = (obj) ->
+    iframe = $("<iframe id='dialog_iframe' frameborder='0' marginheight='0' marginwidth='0' border='0'></iframe>")
+    iframe.corner "8px"  unless $.browser.msie
+    iframe.dialog
+      title: "Upload New File"
+      modal: true
+      resizable: false
+      autoOpen: true
+      open: onOpenDialog
+      close: onCloseDialog
+    iframe.attr "src", "/refinery/themes/editor/upload_file?app_dialog=true&dialog=true&path="+obj.attr("fullpath")
+
+  buildTree: ->
+    @tree.jstree(
+      plugins: ["themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "contextmenu"]
+      contextmenu:
+        items:
+          upload:
+            label: "Upload File"
+            action: (obj) -> uploadFile obj
+            _class: "upload_file"
+          create:
+            separator_before: false
+            separator_after: true
+            label: "Create"
+            action: false
+            submenu:
+              create_file:
+                seperator_before: false
+                seperator_after: false
+                label: "File"
+                action: (obj) -> this.create(obj, "last", {"attr" : {"rel" : "default"}})
+              create_folder:
+                seperator_before: false
+                seperator_after: false
+                label: "Folder"
+                action: (obj) -> this.create(obj, "last", {"attr" : { "rel" : "folder"}})
+      themes:
+        url: "/assets/jstree/themes/apple/style.css"
+      json_data:
+        ajax:
+          url: "/refinery/themes/editor/list"
+          type: "POST"
+          data: (n) ->
+            fullpath: (if n.attr then n.attr("fullpath") else "")
+      search:
+        ajax:
+          url: "/refinery/themes/editor/search"
+          data: (str) ->
+            search_str: str
+      types:
+        max_depth: -2
+        max_children: -2
+        valid_children: ["drive"]
+        types:
+          default:
+            valid_children: "none"
+            icon:
+              image: "/assets/jstree/file.png"
+          folder:
+            valid_children: ["default", "folder"]
+            icon:
+              image: "/assets/jstree/folder.png"
+          drive:
+            valid_children: ["default", "folder"]
+            icon:
+              image: "/assets/jstree/root.png"
+            start_drag: false
+            move_node: false
+            delete_node: false
+            remove: false
+    ).bind("select_node.jstree", (e, data) ->
+      if data.rslt.obj.attr("rel") is "default"
+        $.ajax
+          async: false
+          type: "POST"
+          url: "/refinery/themes/editor/file"
+          beforeSend: (request) ->
+            return true
+          data:
+            fullpath: data.rslt.obj.attr("fullpath")
+          success: (result) ->
+            if result
+              $("#code").html result
+              FilesManager.initHandlers()
+              $.jGrowl data.rslt.obj.attr("fullpath") + " was loaded.",
+                life: 5000
+            else
+              $.jGrowl result.notice,
+                life: 5000
+
+    ).bind("create.jstree", (e, data) ->
+      $.post "/refinery/themes/editor/add",
+        fullpath: data.rslt.parent.attr("fullpath")
+        title: data.rslt.name
+        type: data.rslt.obj.attr("rel"),
+        (result) ->
+          if result.status
+            $(data.rslt.obj).attr "fullpath", result.fullpath
+            $("#jsTree").jstree "rename_node", $(data.rslt.obj), result.node_name
+            $.jGrowl result.notice,
+              life: 5000
+          else
+            $.jstree.rollback data.rlbk
+            $.jGrowl result.notice,
+              life: 5000
+
+    ).bind("remove.jstree", (e, data) ->
+      if (confirm("Are you sure?"))
+        $.ajax
+          async: false
+          type: "POST"
+          url: "/refinery/themes/editor/delete"
+          data:
+            fullpath: data.rslt.obj.attr("fullpath")
+            type: data.rslt.obj.attr("rel")
+
+          success: (result) ->
+            if result.status
+              data.inst.refresh()
+              $.jGrowl result.notice,
+                life: 5000
+            else
+              $.jstree.rollback data.rlbk
+              $.jGrowl result.notice,
+                life: 5000
+      else
+        $.jstree.rollback data.rlbk
+
+    ).bind("rename.jstree", (e, data) ->
+      $.ajax
+        async: true
+        type: "POST"
+        url: "/refinery/themes/editor/rename"
+        data:
+          fullpath: data.rslt.obj.attr("fullpath")
+          new_name: data.rslt.new_name
+          type: data.rslt.obj.attr("rel")
+
+        success: (result) ->
+          if result.status
+            $(data.rslt.obj).attr "fullpath", result.fullpath
+            $("#jsTree").jstree "rename_node", $(data.rslt.obj), result.node_name
+            $.jGrowl result.notice,
+              life: 5000
+
+          else
+            $.jstree.rollback data.rlbk
+            $.jGrowl result.notice,
+              life: 5000
+
+    ).bind "move_node.jstree", (e, data) ->
+      data.rslt.o.each (i) ->
+        $.ajax
+          async: false
+          type: "POST"
+          url: "/refinery/themes/editor/move"
+          data:
+            fullpath: $(this).attr("fullpath")
+            ref: data.rslt.np.attr("fullpath")
+            title: data.rslt.name
+            copy: (if data.rslt.cy then 1 else 0)
+
+          success: (result) ->
+            unless result.status
+              $.jstree.rollback data.rlbk
+            else
+              $(data.rslt.oc).attr "fullpath", "node_" + result.fullpath
+              data.inst.refresh data.inst._get_parent(data.rslt.oc)  if data.rslt.cy and $(data.rslt.oc).children("UL").length

data/app/assets/javascripts/themes.coffee

@@ -0,0 +1,21 @@
+#= require jquery.cookie
+# require jquery.hotkeys
+#= require jquery.jgrowl_minimized
+#= require fancybox/jquery.fancybox
+#= require jstree_manager
+#= require files_manager
+#= require code_mirror_manager
+#= require_self
+
+class @Themes
+  @resetToDefaultTheme = (url) ->
+    if (confirm("Are you sure?"))
+      window.location = url
+
+$ ->
+  $(".fancybox").fancybox
+    openEffect: "elastic"
+    closeEffect: "elastic"
+    helpers:
+      title:
+        type: "inside"

data/app/assets/stylesheets/editor.css

@@ -0,0 +1,40 @@
+#jsTree li a {
+    background: none;
+    border: none;
+    display: inline;
+    padding: 0;
+}
+
+#jsTree li {
+    margin-top: 0;
+}
+
+#jsTree ul {
+    margin: 0;
+    padding: 0;
+}
+
+iframe#preview {
+    width: 100%;
+    margin-top: 20px;
+    height: 400px;
+}
+
+.cm-liquid-tag {
+    color: #32273f;
+    background: #ead9ff;
+}
+
+.cm-liquid-variable {
+    color: #29739b;
+    background: #c2e0f0;
+}
+
+.CodeMirror-fullscreen {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+}

data/app/assets/stylesheets/themes.css

@@ -0,0 +1,50 @@
+/*
+ *= require fancybox/jquery.fancybox
+ *= require jquery.jgrowl
+ *= require codemirror/codemirror
+ *= require codemirror/util/simple-hint
+ *= require codemirror/util/dialog.css
+ *= require codemirror/theme/neat
+ *= require codemirror/theme/elegant
+ *= require codemirror/theme/erlang-dark
+ *= require codemirror/theme/night
+ *= require codemirror/theme/monokai
+ *= require codemirror/theme/cobalt
+ *= require codemirror/theme/eclipse
+ *= require codemirror/theme/rubyblue
+ *= require codemirror/theme/lesser-dark
+ *= require codemirror/theme/xq-dark
+ *= require codemirror/theme/ambiance
+ *= require codemirror/theme/blackboard
+ *= require codemirror/theme/vibrant-ink
+ *= require codemirror/theme/solarized
+ *= require codemirror/theme/twilight
+ *= require_self
+*/
+
+#records table tr td {
+    padding-top: 20px;
+}
+
+a.fancybox {
+    text-align: center;
+    border-bottom: none !important;
+}
+
+a.fancybox-close {
+    border-bottom: none !important;
+}
+
+.screenshot {
+    width: 100%;
+}
+
+.fullwidth {
+    width: 98%;
+}
+
+.theme-info {
+    display: inline-block;
+    vertical-align: top;
+    padding-left: 20px;
+}