code_sync 0.6.7

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

@@ -0,0 +1,176 @@
+CodeSync.plugins.DocumentTabs = Backbone.View.extend
+
+  views: {}
+
+  events:
+    "click .document-tab.selectable" : "onDocumentTabSelection"
+    "click .document-tab.closable .close-anchor" : "closeTab"
+    "click .document-tab.new-document" : "createDocument"
+    "click .document-tab.save-document" : "saveDocument"
+    "click .document-tab.open-document": "toggleAssetSelector"
+
+    "dblclick .document-tab.editable" : "onDoubleClickTab"
+
+    "blur .document-tab.editable .contents" : "onEditableTabBlur"
+    "keydown .document-tab.editable .contents" : "onEditableTabKeyPress"
+
+  initialize: (options={})->
+    @editor = options.editor
+
+    @$el.append "<div class='document-tabs-container' />"
+
+    @openDocuments = new CodeSync.Documents()
+    @openDocuments.on "add", @renderTabs, @
+    @openDocuments.on "remove", @renderTabs, @
+    @openDocuments.on "change:display", @renderTabs, @
+
+    @projectAssets = new CodeSync.ProjectAssets()
+
+    @state = new Backbone.Model
+      currentDocument: undefined
+
+    @state.on "change:currentDocument", @highlightActiveDocumentTab, @
+
+    @on "editor:hidden", ()=>
+      @$('.document-tab.hideable').hide()
+
+    @on "editor:visible", ()=>
+      @$('.document-tab.hideable').show()
+
+    @views.assetSelector = new CodeSync.AssetSelector
+      collection: @projectAssets
+      documents: @openDocuments
+      editor: @editor
+
+    @views.assetSelector.on "asset:selected", @onAssetSelection, @
+
+  documentInTab: (tabElement)->
+    tabElement = tabElement.parents('.document-tab').eq(0) unless tabElement.is('.document-tab')
+
+    if cid = tabElement.data('document-cid')
+      doc = @openDocuments.detect (model)->
+        model.cid == cid
+
+  renderTabs: ()->
+    container = @$('.document-tabs-container').empty()
+    tmpl = JST["code_sync/editor/templates/document_manager_tab"]
+
+    # Render each document into a tab
+    @openDocuments.each (doc,index)-> container.append tmpl(doc: doc, index: index)
+
+    if @allowNew is true
+      container.append tmpl(display:"New",cls:"new-document")
+
+    if @allowOpen is true
+      container.append tmpl(display:"Open",cls:"open-document")
+
+  onAssetSelection: (path)->
+    @openDocuments.findOrCreateForPath path, (doc)=>
+      @openDocument(doc)
+
+  onEditableTabKeyPress: (e)->
+    target = @$(e.target).closest('.document-tab')
+    contents = target.children('.contents')
+
+    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)
+
+      @editor.codeMirror.focus()
+
+  onEditableTabBlur: (e)->
+    target = @$(e.target).closest('.document-tab')
+    contents = target.children('.contents')
+
+    console.log "On Editable Tab Blur", @documentInTab(target)?.cid
+    if doc = @documentInTab(target)
+      doc.set('name', contents.html() )
+      contents.attr('contenteditable', false)
+
+  onDoubleClickTab: (e)->
+    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)
+
+    @setCurrentDocument(doc)
+
+  closeTab: (e)->
+    target = @$(e.target)
+    doc = @documentInTab(target)
+
+    index = @openDocuments.indexOf(doc)
+    @openDocuments.remove(doc)
+
+    @setCurrentDocument( @openDocuments.at(index - 1) || @openDocuments.at(0) )
+
+  getCurrentDocument: ()->
+    @currentDocument
+
+  openDocument: (doc)->
+    @openDocuments.add(doc)
+    @setCurrentDocument(doc)
+
+  setCurrentDocument: (@currentDocument)->
+    @editor.loadDocument(@currentDocument)
+
+  saveDocument: ()->
+    if CodeSync.get("disableAssetSave")
+      @editor.showStatusMessage(type: "error", message: "Saving is disabled in this demo.")
+    else
+      @currentDocument.saveToDisk()
+
+  createDocument: ()->
+    @openDocuments.add
+      name: "untitled"
+      display: "Untitled"
+      mode: CodeSync.get("defaultFileType")
+      extension: CodeSync.Modes.guessExtensionFor(CodeSync.get("defaultFileType"))
+
+    doc = @openDocuments.last()
+
+    @openDocument(doc)
+
+  toggleAssetSelector: ()->
+    @views.assetSelector.toggle()
+
+  render: ()->
+    @$el.append( @views.assetSelector.render().el )
+
+    @
+
+CodeSync.plugins.DocumentTabs.setup = (editor)->
+  dm = @views.DocumentTabs = new CodeSync.plugins.DocumentTabs(editor: @)
+
+  _.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
+
+  CodeSync.AssetEditor::loadDefaultDocument = ()->
+    defaultDocument = editor.getDefaultDocument()
+    dm.openDocument(defaultDocument)

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

@@ -0,0 +1,37 @@
+CodeSync.plugins.KeymapSelector = Backbone.View.extend
+  className: "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)
+
+  render: ()->
+    options = ""
+
+    for mode in ["default","vim"]
+      options += "<option value='#{ mode }'>#{ mode }</option>"
+
+    @$el.html("<select>#{ options }</select>")
+
+    @
+
+
+CodeSync.plugins.KeymapSelector.setup = (editor)->
+  v = @views.keymapSelector = new CodeSync.plugins.KeymapSelector({editor})
+
+  editor.$('.codesync-asset-editor').append v.render().el
+

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

@@ -0,0 +1,47 @@
+CodeSync.plugins.ModeSelector = Backbone.View.extend
+  className: "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)
+
+  render: ()->
+    options = ""
+
+    for mode in @modes.models
+      options += "<option value='#{ mode.id }'>#{ mode.get('name') }</option>"
+
+    @$el.html("<select>#{ options }</select>")
+
+    @
+
+
+CodeSync.plugins.ModeSelector.setup = (editor)->
+  v = @views.modeSelector = new CodeSync.plugins.ModeSelector({editor})
+
+  editor.$('.codesync-asset-editor').append v.render().el
+
+  editor.on "document:loaded", (doc)->
+    v.setValue(doc.get('mode'))
+
+

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

@@ -0,0 +1,4 @@
+#= require ../vendor/keylauncher
+#= require ./config
+#= require ./client
+#= require ./editor

data/lib/assets/javascripts/code_sync/reloader.coffee

@@ -0,0 +1,2 @@
+#= require ./config
+#= require ./client

data/lib/assets/javascripts/code_sync_basic.coffee

@@ -0,0 +1 @@
+#= require ./code_sync/index

data/lib/assets/javascripts/demos.coffee

@@ -0,0 +1,48 @@
+#= require_tree ./demos
+#= require_self
+
+window.defaultContentFor = (mode)->
+  window["#{ mode }Default"]
+
+window.setupEditors = _.once ()->
+  for mode, index in ["scss","skim","coffeescript"]
+
+    window["#{ mode }Editor"] ||= new CodeSync.AssetEditor
+      hideable: false
+      autoRender: true
+      appendTo: ".editor-container"
+      renderVisible: true
+      startMode: mode
+      name: "panel-#{ index + 1 }"
+      position: "static"
+      document:
+        content: "shit"
+        contents: defaultContentFor(mode)
+
+      plugins:[
+        "ModeSelector"
+        "KeymapSelector"
+      ]
+
+  scssEditor.addPlugin("ColorPicker")
+
+
+setupEditors()
+
+window.layoutSelector ||= new LayoutSelector()
+$('body').append( layoutSelector.render().el ) unless $('#layout-selector').length > 0
+
+CodeSync.onScriptChange ||= (changeObject)->
+  if changeObject.mode is "skim" and changeObject.name is "codesync"
+    $(".canvas-container").html JST["codesync"]()
+    window.coffeeScriptEditor.currentDocument.trigger "change:contents"
+
+_.delay ()->
+    window.skimEditor.currentDocument.trigger "change:contents"
+    window.scssEditor.currentDocument.trigger "change:contents"
+, 600
+
+_.delay ()->
+  window.coffeescriptEditor.currentDocument.trigger "change:contents"
+  window.enableGlobalEditor()
+, 1800

data/lib/assets/javascripts/demos/default-content.coffee

@@ -0,0 +1,72 @@
+window.coffeescriptDefault = """
+# This coffeescript content will be automatically evaluated any time you
+# change some stuff.
+CodeSync.onScriptChange ||= (changeObject)->
+  if changeObject.mode is "skim" and changeObject.name is "codesync"
+    $(".canvas-container").html JST["codesync"]()
+
+(CodeSync.tour ||= {}).step = 0
+CodeSync.enableTour(restart: true)
+"""
+
+window.skimDefault = """
+.editor-demos
+  h1 CodeSync Editor Demos
+  p
+    | You can embed as many CodeSync.AssetEditor as you want in any configuration you want, and they will hook right up to the asset pipeline in your project and allow you to use your assets to create a little front end development canvas.
+  p
+    | In this example here, I am using a CodeSync.onScriptChange hook to wire up the automatic rendering of a template file whenever it changes, to display the contents of that template as it would be styled in my project.
+
+  h2.tour-button Click Here to take a tour son
+"""
+
+window.scssDefault = """
+/* scss */
+
+@import url(http://fonts.googleapis.com/css?family=Lobster|Raleway);
+
+body {
+  font-family: "Raleway";
+  background: #656892;
+  color: #ffffff;
+}
+
+.bubble {
+  width: 250px;
+  background-color: rgba(30,30,30,0.75);
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 0 6px #000000;
+  h4 {
+    font-family: "Lobster";
+    text-align: center;
+  }
+
+  a.next {
+    font-family: "Lobster";
+  display: block;
+    text-align: right;
+    cursor: pointer;
+  }
+}
+
+.editor-demos {
+  padding-left: 20px;
+  p {
+    max-width: 600px;
+  }
+  h1,h2 {
+    font-family: "Lobster";
+    text-shadow: 3px 6px #333333;
+    font-weight: 400;
+  }
+  h1 {
+    font-size: 88px;
+  }
+  h2 {
+    font-size: 48px;
+    cursor: pointer;
+    text-shadow: 2px 4px #333333;
+  }
+}
+"""