code_sync 0.6.7

data/lib/assets/javascripts/code_sync/editor/plugins/keymap_selector.coffee

@@ -0,0 +1,44 @@
+CodeSync.plugins.KeymapSelector = Backbone.View.extend
+  className: "config-select keymap-selector"
+
+  events:
+    "change select" : "onSelect"
+
+  initialize: (options={})->
+    @editor = options.editor
+
+    @editor.on "change:keymap",  (keyMap)=>
+      @setValue(keyMap)
+
+    Backbone.View::initialize.apply(@, arguments)
+
+  onSelect: ()->
+    selected = @$('select').val()
+    @editor.setKeyMap(selected)
+
+  setValue: (val)->
+    @$('select').val(val)
+
+  hideLabel: ()->
+    @$('label').hide()
+
+  showLabel: ()->
+    @$('label').show()
+
+  render: ()->
+    options = ""
+
+    for mode in ["default","vim"]
+      options += "<option value='#{ mode }'>#{ mode }</option>"
+
+    @$el.html("<label>Keymap</label> <select>#{ options }</select>")
+
+    @hideLabel() unless @visibleLabel
+
+    @
+
+
+CodeSync.plugins.KeymapSelector.setup = (editor)->
+  v = @views.keymapSelector = new CodeSync.plugins.KeymapSelector({editor})
+  @$('.toolbar-wrapper').append( v.render().el )
+

data/lib/assets/javascripts/code_sync/editor/plugins/mode_selector.coffee

@@ -0,0 +1,53 @@
+CodeSync.plugins.ModeSelector = Backbone.View.extend
+  className: "config-select mode-selector"
+
+  events:
+    "change select" : "onSelect"
+
+  initialize: (options={})->
+    @editor = options.editor
+
+    @modes = @editor.modes
+
+    @modes.on "reset", @render, @
+
+    @editor.on "change:mode", (modeModel, modeId)=>
+      @setValue(modeId)
+
+    Backbone.View::initialize.apply(@, arguments)
+
+  onSelect: ()->
+    selected = @$('select').val()
+    mode = @modes.get(selected)
+
+    @editor.setMode(mode)
+
+  setValue: (val)->
+    @$('select').val(val)
+
+  hideLabel: ()->
+    @$('label').hide()
+
+  showLabel: ()->
+    @$('label').show()
+
+  render: ()->
+    options = ""
+
+    for mode in @modes.models
+      options += "<option value='#{ mode.id }'>#{ mode.get('name') }</option>"
+
+    @$el.html("<label>Language:</label> <select>#{ options }</select>")
+
+    @hideLabel() unless @visibleLabel
+
+    @
+
+
+CodeSync.plugins.ModeSelector.setup = (editor)->
+  v = @views.modeSelector = new CodeSync.plugins.ModeSelector({editor})
+  @$('.toolbar-wrapper').append v.render().el
+
+  editor.on "document:loaded", (doc)-> v.setValue(doc.get('mode'))
+
+

data/lib/assets/javascripts/code_sync/editor/plugins/name_input.coffee

@@ -0,0 +1,44 @@
+CodeSync.NameInput = Backbone.View.extend
+  className: "asset-name-input"
+
+  events:
+    "change input" : "updateEditor"
+    "keyup input": "updateEditor"
+    "blur input": "toggle"
+
+  initialize: (options={})->
+    @editor = options.editor
+
+    _.bindAll(@,"_updateEditor","updateEditor","toggle")
+    @_updateEditor = _.debounce(CodeSync.NameInput::_updateEditor, 300)
+
+    Backbone.View::initialize.apply(@, arguments)
+
+  render: ()->
+    @$el.append("<input type='text' placeholder='Enter the name of the asset' />")
+    @$el.hide()
+    @
+
+  updateEditor: ()->
+    @_updateEditor()
+
+  _updateEditor: ()->
+    assetName = @$('input').val()
+
+    if assetName.match(/\./)
+      @editor.currentName = assetName
+
+      mode = @editor.determineModeFor(assetName)
+
+  setValue: (value)->
+    @$('input').val value
+
+  getValue: ()->
+    @$('input').val()
+
+  toggle: ()->
+    if @getValue()?.length is 0
+      @editor.setDefaultExtension()
+      @editor.currentName = @editor.currentPath = undefined
+
+    @$el.toggle()

data/lib/assets/javascripts/code_sync/editor/plugins/preferences.coffee

@@ -0,0 +1,71 @@
+CodeSync.plugins.PreferencesPanel = Backbone.View.extend
+  className: "preferences-panel"
+
+  events:
+    "change select,input" : ()->
+      @trigger "update:preferences"
+
+  renderHidden: true
+
+  initialize: (options)->
+    @editor = options.editor
+
+    @$el.html JST["code_sync/editor/templates/preferences_panel"]()
+
+    Backbone.View::initialize.apply(@, arguments)
+
+  values: ()->
+    values = {}
+
+    for el in @$('input,select')
+      input = $(el)
+      values[input.attr('name')] = input.val()
+
+    values
+
+  toggle: ()->
+    @syncWithEditorOptions()
+    @$el.toggle()
+
+  syncWithEditorOptions: ()->
+    @$('select[name="theme"]').val @editor.codeMirror.getOption('theme')
+    @$('select[name="keyMap"]').val @editor.codeMirror.getOption('keyMap')
+    @$('input[name="asset_endpoint"]').val CodeSync.get("assetCompilationEndpoint")
+    @$('input[name="editor_hotkey"]').val CodeSync.get("editorToggleHotKey")
+
+  render: ()->
+    @$el.hide() if @renderHidden is true
+    @
+
+
+CodeSync.plugins.PreferencesPanel.setup = (editor)->
+  panel = new CodeSync.plugins.PreferencesPanel(editor: @)
+
+  @$('.toolbar-wrapper').append "<div class='button toggle-preferences'>Preferences</div>"
+
+  @events["click .toggle-preferences"] = ()=> panel.toggle()
+
+  @$el.append panel.render().el
+
+  panel.on "update:preferences", ()=>
+    values = panel.values()
+
+    editor.setTheme(values.theme)
+    editor.setKeyMap(values.keyMap)
+
+    CodeSync.set("assetCompilationEndpoint", values.asset_endpoint)
+
+    CodeSync.AssetEditor.setHotKey(values.editor_hotkey)
+
+  editor.on "codemirror:setup", (cm)->
+    cm.on "focus", ()->
+      panel.$el.hide()
+
+  panel.on "update:preferences", ()=>
+    values = panel.values()
+    if editor.position isnt values.position
+      editor.setPosition(values.position)
+
+
+
+

data/lib/assets/javascripts/code_sync/editor/templates/asset_editor.jst.skim

@@ -0,0 +1,2 @@
+.toolbar-wrapper
+.codesync-asset-editor

data/lib/assets/javascripts/code_sync/editor/templates/asset_selector.jst.skim

@@ -0,0 +1,5 @@
+.asset-selector-wrapper
+  .search-input
+    input placeholder="Type the name of an asset to open it" type="text"
+  .search-results-wrapper
+    .search-results

data/lib/assets/javascripts/code_sync/editor/templates/document_manager_tab.jst.skim

@@ -0,0 +1,15 @@
+- displayValue  = @display || @doc.get("display") || @doc.get("name")
+
+- classes = ["document-tab"]
+- classes.push @cls if @cls?
+- classes.push("selectable") if @doc?
+- classes.push("closable") if @closable and !@doc?.isSticky()
+- classes.push("hideable") unless @index is 0
+- classes.push("editable") if @doc? && !@doc?.isSticky()
+
+div class="#{ classes.join(' ') }" data-document-cid="#{ @doc?.cid }"
+  span.contents
+    = displayValue
+
+  small.close-anchor x
+

data/lib/assets/javascripts/code_sync/editor/templates/element_sync.jst.skim

@@ -0,0 +1,19 @@
+.element-sync-panel
+  .row
+    .span9
+      input name="css-selector" placeholder="Enter a CSS selector to sync with"
+    .span3
+      select name="action"
+        option value="html" Replace
+        option value="before" Before
+        option value="before" After
+  .row
+    .span9
+      .element-sync-status
+      input.done-button type="button" value="Done"
+      input.hide-panel-button type="button" value="Hide"
+
+
+
+
+

data/lib/assets/javascripts/code_sync/editor/templates/preferences_panel.jst.skim

@@ -0,0 +1,38 @@
+form
+  .control-group
+    label
+      | KeyBindings
+    .controls
+      select name="keyMap"
+        option value="default" Default
+        option value="vim" Vim
+
+  .control-group
+    label
+      | Theme
+    .controls
+      select name="theme"
+        option value="ambiance" Ambiance
+        option value="lesser-dark" Lesser Dark
+        option value="monokai" Monokai
+        option value="xq-light" XQ Light
+
+  .control-group
+    label
+      | Asset Compiler Endpoint
+    .controls
+      input type="text" name="asset_endpoint" value="#{ CodeSync.get('assetCompilationEndpoint') }"
+
+  .control-group
+    label
+      | Hotkey
+    .controls
+      input type="text" name="editor_hotkey" value="#{ CodeSync.get('editorToggleHotkey') }"
+
+  .control-group
+    label
+      | Position
+    .controls
+      select name="position"
+        option value="top" Top
+        option value="bottom" Bottom

data/lib/assets/javascripts/code_sync/editor/views/asset_selector.coffee

@@ -0,0 +1,106 @@
+CodeSync.AssetSelector = Backbone.View.extend
+  className: "codesync-asset-selector"
+
+  events:
+    "keyup input": "keyHandler"
+    "click .search-result": "selectSearchResult"
+
+  initialize:(options={})->
+    Backbone.View::initialize.apply(@, arguments)
+
+    @editor = options.editor
+
+    _.bindAll(@,"keyHandler","loadAsset")
+
+    @selected = new Backbone.Model(index: -1)
+
+    @selected.on "change:index", (model,value)=>
+      @$('.search-result').removeClass('active')
+      @$('.search-result').eq(value).addClass('active')
+
+  keyHandler: (e)->
+    switch e.keyCode
+      when 13
+        @openCurrentSearchResult()
+      when 27
+        @hide()
+      when 38
+        @previousSearchResult()
+      when 40
+        @nextSearchResult()
+      else
+        @filterAssetsBy @$('input').val()
+
+  openCurrentSearchResult: ()->
+    {index} = @selected.attributes
+
+    if asset = @searchResults[index]
+      @selected.set('index',0,silent:true)
+
+      _.delay ()=>
+        @loadAsset @searchResults[index].get('path')
+      , 10
+      @hide()
+
+  previousSearchResult: ()->
+    {index} = @selected.attributes
+    index -= 1
+    index = 0 if index < 0
+    @selected.set {index}
+
+  nextSearchResult: ()->
+    {index} = @selected.attributes
+    index += 1
+    index = 0 if index > @searchResults.length
+    @selected.set {index}
+
+  selectSearchResult: (e)->
+    @loadAsset $(e.target)?.data('path')
+
+  loadAsset: (path)->
+    @trigger "asset:selected", path
+
+  filterAssetsBy: (value)->
+    return if value.length <= 1
+
+    wrapper = @showSearchResults()
+    wrapper.empty()
+
+    @selected.set('index',-1, silent: true)
+
+    @searchResults = @collection.select (model)->
+      regex = new RegExp("#{value}")
+      model.get("description")?.match(regex) || model.get("path")?.match(regex)
+
+    @searchResults = @searchResults.slice(0,5)
+
+    for model,index in @searchResults
+      wrapper.append "<div data-path='#{ model.get('path') }' class='search-result'>#{ model.get('description') }</div>"
+
+    wrapper.height( @searchResults.length * 40 )
+
+  showSearchResults: ()->
+    @wrapper.show()
+
+  hideSearchResults: ()->
+    @wrapper.hide()
+
+  toggle: ()->
+    if @visible then @hide() else @show()
+
+  show: ()->
+    @wrapper.empty()
+    @visible = true
+    @$el.show()
+    @hideSearchResults()
+    @$('input').val('').focus()
+
+  hide: ()->
+    @$el.hide()
+    @visible = false
+    @editor.codeMirror.focus()
+
+  render: ()->
+    @$el.html JST["code_sync/editor/templates/asset_selector"]()
+    @wrapper ||= @$('.search-results-wrapper')
+    @

data/lib/assets/javascripts/code_sync/editor/views/color_picker.coffee

@@ -0,0 +1,76 @@
+CodeSync.plugins.ColorPicker = Backbone.View.extend
+  className: "codesync-color-picker"
+
+  spectrumOptions:
+    showAlpha: false
+    preferredFormat: "hex6"
+    flat: true
+    showInput: true
+    chooseText: "Choose"
+
+  initialize: (@options={})->
+    _.extend(@,@options)
+
+    @$el.append "<input type='color' class='color-picker-widget' />"
+
+    @widget = @$('.color-picker-widget')
+
+  remove: ()->
+    @widget.spectrum("destroy")
+    @$el.remove()
+
+  hide: ()->
+    @widget.spectrum("hide")
+    @$el.hide()
+
+    @off "color:change"
+
+  show: ()->
+    @widget.spectrum("show")
+    @$el.show()
+
+  syncWithToken: (token, cursor)->
+
+    cm = @editor.codeMirror
+
+    cm.addWidget(cursor, @el)
+
+    @show()
+
+    line = cm.getLine(cursor.line)
+
+    startch = token.start
+    endch = token.end
+
+    @widget.spectrum("set",token.string)
+
+    @on "color:change", _.debounce (colorObject, hexValue)=>
+      cm.replaceRange("#"+hexValue, {line:cursor.line,ch:startch}, {line:cursor.line,ch:endch})
+      @editor.currentDocument?.trigger("change:contents")
+
+  render: ()->
+    opts = _.extend @spectrumOptions,
+      move: _.debounce((color)=>
+        @trigger "color:change", color, color.toHex()
+      ,200)
+
+    @widget.spectrum(@spectrumOptions)
+
+    @
+
+CodeSync.plugins.ColorPicker.setup = (editor)->
+  @colorPicker = new CodeSync.plugins.ColorPicker(editor: editor)
+
+  @$el.append( editor.colorPicker.render().el )
+  @colorPicker.hide()
+
+  cm = editor.codeMirror
+
+  cm.on "cursorActivity", ->
+    cursor = cm.getCursor()
+    token = cm.getTokenAt(cursor)
+
+    if token.string?.match(/#[a-fA-F0-9]{3,6}/g) and token.string?.length >= 6
+      editor.colorPicker.syncWithToken(token, cursor)
+    else
+      editor.colorPicker.hide()