code_sync 0.6.7

data/lib/assets/javascripts/code_sync/editor/plugins/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/plugins/color_picker.coffee

@@ -0,0 +1,83 @@
+CodeSync.plugins.ColorPicker = Backbone.View.extend
+  className: "codesync-color-picker"
+
+  widget: false
+
+  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.addClass('anchored') unless @widget
+    @$el.show()
+
+  syncWithToken: (token, cursor)->
+
+    cm = @editor.codeMirror
+
+    if @widget is true
+      @$el.removeClass('anchored')
+      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})
+    , 1200
+
+
+  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()

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

@@ -0,0 +1,55 @@
+CodeSync.DocumentManager = Backbone.Model.extend
+  initialize: (@attributes={})->
+    @editor = @attributes.editor
+    delete @attributes.editor
+
+    @openDocuments = new CodeSync.Documents()
+
+    for trigger in ["add","remove","change:display","change:sticky"]
+      @openDocuments.on(trigger, @notify, @)
+
+    Backbone.Model::initialize.apply(@,arguments)
+
+  # In multiple setups with multiple editors
+  # the DocumentManager can act as a singleton
+  # and route documents to multiple editors
+  getEditor: ()->
+    @editor || _(CodeSync.AssetEditor.instances).values()[0]
+
+  detect: (iterator)->
+    @openDocuments.each(iterator)
+
+  each: (iterator)->
+    @openDocuments.each(iterator)
+
+  notify: ()->
+    @trigger "document:change"
+
+  openDocument: (doc, editor)->
+    editor ||= @getEditor()
+
+    @openDocuments.add(doc)
+    @setCurrentDocument(doc, editor)
+
+  setCurrentDocument: (@currentDocument, editor)->
+    editor ||= @editor
+    editor.loadDocument(@currentDocument)
+
+  saveDocument: ()->
+    if CodeSync.get("disableAssetSave")
+      @getEditor().showError("Saving is disabled.")
+    else
+      @currentDocument.saveToDisk()
+
+  createDocument: (editor)->
+    editor      ||= @getEditor()
+    mode        = editor.mode?.id || CodeSync.get("defaultFileType")
+    extension   = CodeSync.Modes.guessExtensionFor(mode)
+
+    doc = new CodeSync.Document
+      name: "untitled"
+      display: "Untitled"
+      mode: mode
+      extension: extension
+
+    @openDocument(doc,editor)

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

@@ -0,0 +1,178 @@
+CodeSync.plugins.DocumentTabs = Backbone.View.extend
+
+  # Save, Open, New tabs
+  includeActionTabs: true
+
+  allowNew: true
+
+  allowOpen: true
+
+  allowSave: (CodeSync.get("allowSaving") is true)
+
+  events:
+    "click .selectable" :             "onDocumentTabSelection"
+    "click .closable .close-anchor":  "closeTab"
+    "click .new-document" :           "createDocument"
+    "click .save-document" :          "saveDocument"
+    "click .open-document":           "toggleAssetSelector"
+    "dblclick .editable":             "onDoubleClickTab"
+    "blur .editable .contents":       "onEditableTabBlur"
+    "keydown .editable .contents":    "onEditableTabKeyPress"
+
+
+  tabTemplate: JST["code_sync/editor/templates/document_manager_tab"]
+
+  views: {}
+
+  initialize: (@options={})->
+    _.extend(@, options)
+
+    @editor     = options.editor
+    @manager    = @editor.documentManager
+    @docs       = @manager.openDocuments
+
+    @manager.on "document:change", @renderTabs, @
+
+    @projectAssets = new CodeSync.ProjectAssets()
+
+    @on "editor:hidden", ()=>
+      @$('.document-tab.hideable').hide()
+
+    @on "editor:visible", ()=>
+      @$('.document-tab.hideable').show()
+
+    @views.assetSelector = new CodeSync.AssetSelector
+      collection: @projectAssets
+      documents: @docs
+      editor: @editor
+
+    @views.assetSelector.on "asset:selected", @onAssetSelection, @
+
+    Backbone.View::initialize.apply(@, arguments)
+
+  tabsContainer: ()->
+    el = @$('.document-tabs-container')
+
+  documentInTab: (tabElement)->
+    tabElement = tabElement.parents('.document-tab').eq(0) unless tabElement.is('.document-tab')
+
+    if cid = tabElement.data('document-cid')
+      doc = @docs.detect (model)->
+        model.cid == cid
+
+  renderTabs: ()->
+    container = @tabsContainer().empty()
+
+    tmpl = @tabTemplate
+
+    @docs.each (doc,index)=>
+      unless @skipTabForDefault is true and index is 0
+        container.append tmpl(doc: doc, index: index, closable: !!(index > 0))
+
+    if @includeActionTabs
+      @addOpenDocumentTab() if @allowOpen
+      @addNewDocumentTab() if @allowNew
+
+  addOpenDocumentTab: ()->
+    @tabsContainer().append @tabTemplate(display:"Open",cls:"open-document")
+
+  addNewDocumentTab: ()->
+    @tabsContainer().append @tabTemplate(display:"New",cls:"new-document")
+
+  addSaveDocumentTab: ()->
+    @tabsContainer().append @tabTemplate(display:"Save",cls:"save-document")
+
+  onAssetSelection: (path)->
+    @docs.findOrCreateForPath path, (doc)=>
+      @manager.openDocument(doc, @editor)
+
+  onEditableTabKeyPress: (e)->
+    target = @$(e.target).closest('.document-tab')
+    contents = target.children('.contents')
+
+    console.log "On Editable Tab Keypress", e.keyCode, e.which
+
+    if e.keyCode is 13 or e.keyCode is 27
+      e.preventDefault()
+
+      contents.attr('contenteditable', false)
+
+      if doc = @documentInTab(target)
+        if e.keyCode is 13
+          doc.set('name', contents.html() )
+
+        if e.keyCode is 27 and original = target.attr('data-original-value')
+          contents.html(original)
+
+      @restoreFocus()
+
+  restoreFocus: ()->
+    @editor.codeMirror.focus()
+
+  onEditableTabBlur: (e)->
+    console.log "On Editable Tab Blur"
+
+    target = @$(e.target).closest('.document-tab')
+    contents = target.children('.contents')
+
+    if doc = @documentInTab(target)
+      doc.set('name', contents.html() )
+      contents.attr('contenteditable', false)
+
+  onDoubleClickTab: (e)->
+    console.log "On Double Click Tab"
+
+    target = @$(e.target).closest('.document-tab')
+    contents = target.children('.contents')
+
+    target.attr('data-original-value', contents.html())
+    contents.attr('contenteditable',true)
+
+  onDocumentTabSelection: (e)->
+    @trigger "tab:click"
+    target = @$(e.target).closest('.document-tab')
+    doc = @documentInTab(target)
+
+    @manager.setCurrentDocument(doc, @editor)
+
+  closeTab: (e)->
+    target = @$(e.target)
+    doc = @documentInTab(target)
+
+    index = @docs.indexOf(doc)
+    @docs.remove(doc)
+
+    @manager.setCurrentDocument( @docs.at(index - 1) || @docs.at(0), @editor )
+
+  createDocument: ()->
+    @manager.createDocument()
+
+  toggleAssetSelector: ()->
+    @views.assetSelector.toggle()
+
+  render: ()->
+    @$el.append "<div class='document-tabs-container' />"
+    @$el.append( @views.assetSelector.render().el )
+
+    @
+
+
+CodeSync.plugins.DocumentTabs.setup = (editor, options={})->
+  options.editor = editor
+
+  dm = @views.documentTabs = new CodeSync.plugins.DocumentTabs(options)
+
+  # _.extend editor.codeMirrorKeyBindings,
+  #   "Ctrl-T": ()->
+  #     dm.toggleAssetSelector()
+
+  #   "Ctrl-S": ()->
+  #     dm.getCurrentDocument().save()
+
+  #   "Ctrl-N": ()->
+  #     dm.createDocument()
+
+  @$el.append(dm.render().el)
+
+  dm.on "tab:click", ()=>
+    @show() if @visible is false

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

@@ -0,0 +1,111 @@
+CodeSync.plugins.ElementSync = Backbone.View.extend
+
+  className : "codesync-element-sync toggleable-input"
+
+  action: "html"
+
+  events:
+    "keyup input" : ()->
+      @bindToSelector()
+
+    "change select": (e)->
+      @action = @$(e.target).val()
+
+    "click .hide-panel-button" : ()->
+      @hide()
+
+    "click .done-button" : ()->
+      @clear()
+
+  initialize: (@options={})->
+    _.extend(@,@options)
+
+    @bindToSelector = _.debounce ()=>
+      @selector        = @getValue()
+      @$elementSync    = $(@selector)
+      @status()
+    , 500
+
+
+    @editor.on "code:sync:template", @syncWithElement, @
+
+    @editor.on "change:mode", (mode)=>
+      if mode.isTemplate()
+        @toggleButton(true)
+      else
+        @hide()
+        @toggleButton(false)
+
+    @visible = false
+    @$el.hide()
+    @toggleButton(false)
+
+  syncWithElement: (doc, templateFn)->
+    @selector && @$elementSync?[@action || "html"]?(templateFn())
+
+  getSelectorContents: ()->
+    @$(@selector).html()
+
+  getValue: ()->
+    @$('input[name="css-selector"]').val()
+
+  clear: ()->
+    @$('input[name="css-selector"]').val('')
+    @$elementSync = undefined
+    @selector = ''
+    @$('.element-sync-status').html("")
+
+  existsInDocument: ()->
+    @$elementSync?.length > 0
+
+  status: ()->
+    length = @$elementSync?.length
+
+    msg = if length is 0 && @getValue().length > 0
+      "CSS Selector not found"
+    else if length is 1
+      "1 total element"
+    else if length > 0
+      "#{ length } total elements"
+    else
+      ""
+
+    @$('.element-sync-status').html(msg)
+
+  render: ()->
+    @$el.html JST["code_sync/editor/templates/element_sync"]()
+    @status()
+
+    @
+
+  show: ()->
+    @visible = true
+    @$el.show()
+
+  hide: ()->
+    @visible = false
+    @$el.hide()
+
+  toggle:()->
+    if @visible then @hide() else @show()
+
+  toggleButton: (show=true)->
+    if show
+      @editor.$('.toggle-element-sync').show()
+    else
+      @editor.$('.toggle-element-sync').hide()
+
+
+CodeSync.plugins.ElementSync.setup = (editor)->
+  @$('.toolbar-wrapper').append "<div class='button toggle-element-sync'>Sync w/ Element</div>"
+
+  view = new CodeSync.plugins.ElementSync({editor})
+
+  editor.views.elementSync = view
+
+  @events["click .toggle-element-sync"] = ()=>
+    view.toggle()
+
+  @$el.append view.render().el
+
+