code_sync 0.6.7

data/lib/assets/javascripts/code_sync/editor/datasources/gist_loader.coffee

@@ -0,0 +1,7 @@
+CodeSync.Gist = Backbone.Model.extend
+  initialize: (@attributes={})->
+
+  url: ()->
+
+  toDocuments:()->
+

data/lib/assets/javascripts/code_sync/editor/datasources/modes.coffee

@@ -0,0 +1,117 @@
+CodeSync.Modes = Backbone.Collection.extend
+  model: Backbone.Model.extend
+    isTemplate: ()->
+      @get("template") is true
+
+  initialize: (models=[], options={})->
+    models = for key, value of modes
+      attributes =
+        id: key
+        name: value.name || key
+        codeMirrorMode: value.codeMirrorMode || key
+        extension: value.extension
+        extensionRegex: new RegExp("#{ value.extension }")
+        template: (value.template is true || key is "skim" || value.extension?.match(/jst/))
+        defaultContent: value.defaultContent
+
+    Backbone.Collection::initialize.apply(@, arguments)
+
+    @reset(models, silent: true)
+
+  findModeFor: (pathOrFilename="")->
+    pathOrFilename = ".#{ pathOrFilename }" unless pathOrFilename.match(/\./)
+
+    mode = @detect (model)=>
+      regex = model.get("extensionRegex")
+      regex.exec(pathOrFilename)
+
+    mode?.get("codeMirrorMode")
+
+  findExtensionFor: (mode)->
+    mode = @detect (model)->
+      model.get('codeMirrorMode') is mode || model.get('id') is mode
+
+    mode?.get("extension")
+
+  defaultMode: ()->
+    @get(CodeSync.get("defaultFileType")) || @first()
+
+
+CodeSync.Modes.getMode = (id)->
+  CodeSync.Modes.get().get(id)
+
+CodeSync.Modes.guessModeFor = (pathOrFilename)->
+  CodeSync.Modes.get().findModeFor(pathOrFilename)
+
+CodeSync.Modes.guessExtensionFor = (mode)->
+  CodeSync.Modes.get().findExtensionFor(mode)
+
+CodeSync.Modes.get = ()->
+  CodeSync.Modes.singleton ||= new CodeSync.Modes()
+
+CodeSync.Modes.defaultMode = ()->
+  CodeSync.Modes.get().defaultMode()
+
+modes =
+  coffeescript:
+    extension: ".coffee"
+    codeMirrorOptions:
+      indentUnit: 2
+      smartIndent: true
+      tabSize: 2
+      indentWithTabs: false
+
+    defaultContent:  """
+    # You are currently in Coffeescript Mode
+    #
+    # Any coffeescript you type in here will be evaluated.
+    #
+    # defining this function will allow you to respond
+    # to code and template changes that happen in this editor.
+    #
+    #
+    # CodeSync.onScriptChange = (changeObject)->
+    #   console.log "Detected new code from CodeSync", changeObject
+    #
+    #
+    """
+
+  sass:
+    name: "Sass"
+    extension: ".css.sass"
+    defaultContent: "// You are currently in Sass mode."
+
+    codeMirrorOptions:
+      indentUnit: 2
+      smartIndent: true
+      tabSize: 2
+      indentWithTabs: false
+
+  scss:
+    codeMirrorMode: "css"
+    extension: ".css.scss"
+    name: "SCSS"
+    defaultContent: "/* You are currently in SCSS mode. */"
+
+  skim:
+    extension: ".jst.skim"
+    defaultContent: "// You are currently in Skim mode.\n// The contents of this template will be available on the JST object."
+    template: true
+    codeMirrorOptions:
+      indentUnit: 2
+      smartIndent: true
+      tabSize: 2
+      indentWithTabs: false
+
+  css:
+    name: "CSS"
+    extension: ".css"
+    defaultContent: "/* You are currently in raw CSS mode. */"
+
+  javascript:
+    name: "Javascript"
+    extension: ".js"
+    defaultContent: "/* You are currently in raw JS mode. */"
+
+
+

data/lib/assets/javascripts/code_sync/editor/datasources/project_assets.coffee

@@ -0,0 +1,14 @@
+CodeSync.ProjectAssets = Backbone.Collection.extend
+  url: ()->
+    CodeSync.get("serverInfoEndpoint")
+
+  parse: (response)->
+    models = for path in _.uniq(response.project_assets)
+      description = path.replace(response.root,'')
+      {path,description}
+
+    models
+
+  initialize: ()->
+    @fetch()
+    Backbone.Collection::initialize.apply(@, arguments)

data/lib/assets/javascripts/code_sync/editor/index.coffee

@@ -0,0 +1,415 @@
+#= require skim
+#= require_tree ./templates
+#= require_tree ./datasources
+#= require_tree ./plugins
+#= require_self
+
+CodeSync.AssetEditor = Backbone.View.extend
+  name: "code_sync"
+  className: "codesync-editor"
+
+  # Valid options are top, bottom, static
+  position: "top"
+
+  # Controls whether or not a toolbar element
+  # should be displayed.  Certain plugins will
+  # render their buttons etc in the toolbar
+  enableToolbar: true
+
+  # Valid options are: true, "all", "success", "error"
+  enableStatusMessages: true
+
+  autoRender: true
+  autoAppend: true
+  appendTo: "body"
+
+  renderVisible: true
+
+  effect: "slide"
+  effectDuration: 400
+
+  editorChangeThrottle: 800
+
+  visible: false
+  showVisibleTab: true
+  hideable: true
+
+  startMode: "scss"
+  theme: "ambiance"
+
+  keyBindings: ""
+
+  events:
+    "click .status-message" : "removeStatusMessages"
+    "click .hide-button" : "hide"
+
+  plugins:[
+    "DocumentTabs"
+    "ModeSelector"
+    "PreferencesPanel"
+    "ElementSync"
+    "KeymapSelector"
+  ]
+
+  pluginOptions: {}
+
+  views: {}
+
+  initialize: (@options={})->
+    _.extend(@, @options)
+
+    Backbone.View::initialize.apply(@, arguments)
+
+    console.log "Creatin Instance", @name, @cid, @
+
+    CodeSync.AssetEditor.instances[@name || @cid] = @
+
+    _.bindAll(@, "editorChangeHandler")
+
+    @modes            = CodeSync.Modes.get()
+    @documentManager  = new CodeSync.DocumentManager(editor: @)
+
+    @startMode        = @modes.get(@startMode) || CodeSync.Modes.defaultMode()
+
+
+    @on "editor:change", _.debounce(@editorChangeHandler, @editorChangeThrottle), @
+
+    @on "codemirror:setup", ()=> @loadDefaultDocument()
+
+    @$el.html JST["code_sync/editor/templates/asset_editor"]()
+
+    @$el.attr('data-codesync', @name) if @name?
+
+    @loadPlugins()
+
+    @setPosition(@position, false)
+
+    @render() unless @autoRender is false
+
+  addPlugin: (plugin)->
+    CodeSync.plugins[plugin]?.setup.call(@,@)
+
+  loadPlugins: ()->
+    for plugin in @plugins when CodeSync.plugins[plugin]?
+      options = @pluginOptions[plugin] || {}
+      PluginClass = CodeSync.plugins[plugin]
+
+      PluginClass.setup.call(@,@,options)
+
+  render: ()->
+    return @ if @rendered is true
+
+    @setupToolbar()
+
+    @delegateEvents()
+
+    @rendered = true
+
+    if @autoAppend is true
+      $(@appendTo).prepend(@el)
+
+    if @renderHidden is true
+      @show()
+
+      setTimeout ()=>
+        @hide()
+      , 900
+
+    if @renderVisible is true
+      @show()
+
+    @
+
+  setupCodeMirror: ()->
+    return if @codeMirror?
+
+    @height ||= @$el.height()
+    @codeMirror = CodeMirror(@$('.codesync-asset-editor')[0], @getCodeMirrorOptions())
+
+    @on "initial:document:load", ()=>
+      if @startMode
+        @setMode(@startMode)
+
+      if @keyBindings
+        @setKeyMap(@keyBindings)
+
+      if @theme ||= localStorage.getItem("codesync:theme")
+        @setTheme(@theme)
+
+    changeHandler = (changeObj)=>
+      @trigger "editor:change", @codeMirror.getValue(), changeObj
+
+    @codeMirror.on "change", _.debounce(changeHandler, @editorChangeThrottle)
+
+    @trigger "codemirror:setup", @codeMirror
+
+    @
+
+  codeMirrorKeyBindings:
+    "Ctrl+Command+1": ()->
+      CodeSync.get("commandOne")?.call?(@)
+
+    "Ctrl+Command+2": ()->
+      CodeSync.get("commandTwo")?.call?(@)
+
+    "Ctrl+Command+3": ()->
+      CodeSync.get("commandThree")?.call(@)
+
+  getCodeMirrorOptions: ()->
+    passthrough = {}
+
+    for keyCommand, handler of @codeMirrorKeyBindings
+       passthrough[keyCommand] = false
+       key(keyCommand,_.bind(handler, @))
+
+    options =
+      theme: 'lesser-dark'
+      lineNumbers: true
+      mode: (@startMode?.get("codeMirrorMode") || CodeSync.get("defaultFileType"))
+      extraKeys: passthrough
+
+  editorChangeHandler: (editorContents)->
+    @currentDocument.set("contents", editorContents)
+
+  setPosition: (@position="top", show=true)->
+    for available in ["top","bottom","static"] when available isnt @position
+      @$el.removeClass("#{ available }-positioned")
+
+    @$el.addClass("#{ @position }-positioned")
+    @$el.removeAttr('style')
+
+    @show() if show is true
+
+    @
+
+  setKeyMap: (keyMap)->
+    if @keyMap? and keyMap isnt @keyMap
+      @trigger "change:keyMap", keyMap, @keyMap
+      @onKeyMapChange?.call(@,keyMap,@keyMap)
+
+    @codeMirror.setOption 'keyMap', @keyMap = keyMap
+
+  setTheme: (theme)->
+    if @theme? and theme isnt @theme
+      @trigger "change:theme", theme, @theme
+      @onThemeChange?.call(@,theme,@theme)
+
+    @$el.attr("data-codesync-theme", @theme = theme)
+    @codeMirror.setOption 'theme', @theme = theme
+
+  setMode: (newMode)->
+
+    if @mode? and (newMode isnt @mode)
+      @trigger "change:mode", newMode, newMode.id
+      @onModeChange?.call(@,newMode,@mode)
+
+    @mode = newMode
+
+    @$el.attr("data-codesync-mode", @mode.id)
+
+    if @mode?.get?
+      @codeMirror.setOption 'mode', @mode.get("codeMirrorMode")
+      @currentDocument.set('mode', @mode.id)
+      @currentDocument.set('extension', CodeSync.Modes.guessExtensionFor(@mode.id) )
+
+    @
+
+  setCodeMirrorOptions: (options={})->
+    for option,value of options
+      @codeMirror.setOption(option,value)
+
+  setupToolbar: ()->
+    @$('.toolbar-wrapper').hide() unless @enableToolbar
+
+    if @hideable is true
+      @$('.toolbar-wrapper').append "<div class='button hide-button'>Hide</div>"
+
+  getDefaultDocument: ()->
+    defaultOptions =
+      mode: @options.startMode || CodeSync.get("defaultFileType")
+      sticky: true
+      doNotSave: true
+      name: @defaultDocumentName || "codesync"
+      display: "CodeSync"
+
+    options = _.extend(defaultOptions, @document)
+
+    defaultDocument = new CodeSync.Document(options)
+
+  # This is broken apart into separate methods
+  # so that plugins can tap in
+  loadDefaultDocument: ()->
+    @documentManager.openDocument(@getDefaultDocument(), @)
+
+  loadDocument: (doc)->
+    if current = @currentDocument
+      current.off "status", @showStatusMessage
+      current.off "change:compiled", @applyDocumentContentToPage
+      current.off "change:mode", @applyDocumentContentToPage, @
+
+      @previousDocument = current
+    else
+      @trigger "initial:document:load", @currentDocument = doc
+
+    doc.on "status", @showStatusMessage, @
+    doc.on "change:compiled", @applyDocumentContentToPage, @
+    doc.on "change:mode", @syncEditorModeWithDocument, @
+
+    @codeMirror.swapDoc doc.toCodeMirrorDocument()
+    @trigger "document:loaded", doc, @previousDocument
+
+    @setCodeMirrorOptions doc.toCodeMirrorOptions()
+
+    @currentDocument = doc
+
+  syncEditorModeWithDocument: ()->
+    if @currentDocument? && (@currentDocument.toMode() isnt @mode)
+      @setMode @currentDocument.toMode()
+
+  applyDocumentContentToPage: ()->
+    @currentDocument?.loadInPage complete: ()=>
+      if @currentDocument.type() is "script" or @currentDocument.type() is "template"
+        CodeSync.onScriptChange?.call(window, @currentDocument.attributes)
+
+      if @currentDocument.type() is "stylesheet"
+        CodeSync.onStylesheetChange?.call(window, @currentDocument.attributes)
+
+      @trigger "code:sync", @currentDocument
+      @trigger "code:sync:#{ @currentDocument.type() }", @currentDocument, JST?[@currentDocument.nameWithoutExtension()]
+
+  removeStatusMessages: ()->
+    @$('.status-message').remove()
+
+  showError: (message)->
+    @showStatusMessage type:"error", message: message
+
+  showStatusMessage:(options={})->
+    @removeStatusMessages()
+
+    allowedTypes = switch @enableStatusMessages
+      when false
+        []
+      when true, "all"
+        ["success","error","notice"]
+      else
+        [@enableStatusMessages]
+
+    return unless _(allowedTypes).indexOf(options.type) >= 0
+
+    if options.message?.length > 0
+      @$el.prepend "<div class='status-message #{ options.type }'>#{ options.message }</div>"
+
+    if options.type is "success"
+      _.delay ()=>
+        @$('.status-message.success').animate({opacity:0}, duration: 400, complete: ()=> @$('.status-message.success').remove())
+      , 1200
+
+  hintHeight: ()->
+    offset = if @showVisibleTab then @$('.document-tabs-container').height() else 0
+
+  visibleStyleSettings: ()->
+    if @position is "static"
+      settings = {}
+
+    if @position is "top"
+      settings =
+        top: '0px'
+
+    if @position is "bottom"
+      settings =
+        bottom: '0px'
+        height: '400px'
+
+    settings
+
+  hiddenStyleSettings: ()->
+    if @position is "static"
+      settings = {}
+
+    if @position is "top"
+      settings =
+        top: ((@$el.height() + 8) * -1 ) + @hintHeight()
+        bottom: 'auto'
+
+    if @position is "bottom"
+      settings =
+        bottom: '0px'
+        height: "#{ @hintHeight() - 8 }px"
+
+    settings
+
+  hide: (withEffect=true)->
+    console.trace()
+
+    @animating = true
+
+    view.trigger("editor:hidden") for viewName, view of @views
+    @$el.removeAttr('data-visible') if @hideable
+
+    completeFn = _.debounce ()=>
+      @visible = false
+      @animating = false
+    , @effectDuration + 20
+
+    if withEffect isnt false
+      @$el.animate @hiddenStyleSettings(), duration: @effectDuration, complete: completeFn
+      _.delay(completeFn, @effectDuration)
+    else
+      completeFn()
+
+    @
+
+  show: (withEffect=true)->
+    @setupCodeMirror()
+
+    @animating = true
+
+    view.trigger("editor:visible") for viewName, view of @views
+    @$el.attr('data-visible',true) if @hideable
+
+    completeFn = _.debounce ()=>
+      @visible = true
+      @animating = false
+    , @effectDuration
+
+    if withEffect isnt false
+      @$el.removeAttr('style').css('top','').css('bottom','')
+      @$el.animate @visibleStyleSettings(), duration: @effectDuration, complete: completeFn
+      _.delay(completeFn, @effectDuration)
+    else
+      completeFn()
+
+    @
+
+  toggle: ()->
+    return if @animating is true
+
+    if @visible is true
+      @hide(true)
+    else
+      @show(true)
+
+CodeSync.AssetEditor.instances = {}
+
+# Private Helpers
+CodeSync.commands =
+  commandOne: ->
+  commandTwo: ->
+  commandThree: ->
+
+CodeSync.AssetEditor.keyboardShortcutInfo = """
+ctrl+j: toggle editor ctrl+t: open asset
+"""
+
+CodeSync.AssetEditor.toggleEditor = _.debounce (options={})->
+  if window.codeSyncEditor?
+    window.codeSyncEditor.toggle()
+  else
+    window.codeSyncEditor = new CodeSync.AssetEditor(options)
+    $('body').prepend(window.codeSyncEditor.render().el)
+    window.codeSyncEditor.show()
+, 1
+
+CodeSync.AssetEditor.setHotKey = (hotKey, options={})->
+  CodeSync.set("editorToggleHotkey", hotKey)
+  key(hotKey, ()-> CodeSync.AssetEditor.toggleEditor(options))