Add section elements

2015-03-01 12:57:20 +01:00
parent 832f80e20e
commit 275b4524bc
62 changed files with 10388 additions and 124 deletions
@@ -1,6 +1,12 @@
-#= require jquery
-#= require jquery_ujs
-#= require foundation
+# require jquery
+# require jquery_ujs
+# require foundation
+#= require coffee-script
+#= require snap.svg.js
+#= require ace/ace
+#= require ace/theme-monokai
+#= require ace/mode-coffee
+#= require_tree .
 #= require_self
-$ ->
-  $(document).foundation()
+#$ ->
+#  $(document).foundation()
@@ -0,0 +1,91 @@
+class SvgElementClass
+  setup: (container)->
+    if container
+      @text_field = container.find('.snap-code-editor')
+    else
+      @text_field = $('.snap-code-editor')
+    @text_field.change => @compileSource()
+    target = @text_field.data('target')
+    @target = target
+    container = @
+    ace_div = $('<div></div>').attr('id', 'ace-div').html @text_field.val()
+    ace_div.css
+      width: '100%'
+      height: '500px'
+    @text_field.after(ace_div)
+
+    #ACE
+    @editor = ace.edit('ace-div')
+    @editor.setTheme 'ace/theme/monokai'
+    @editor.getSession().setMode 'ace/mode/coffee'
+    @editor.getSession().on 'change', (e)=>
+      @text_field.val(@editor.getValue()).change()
+    @text_field.hide()
+
+    @svg_code_field = $('#svg_element_svg')
+    $(target).on "DOMSubtreeModified", =>
+      @svg_code_field.val $(target).html()
+
+    @box_width = $('#svg_element_box_width')
+    @box_height = $('#svg_element_box_height')
+    @dpm = $('#svg_element_dpm')
+
+    @box_width.change(->
+      $(target).attr 'width', $(@).val()
+      container.compileSource()
+    ).change()
+    @box_height.change(->
+      $(target).attr 'height', $(@).val()
+      container.compileSource()
+    ).change()
+    @dpm.change(->
+      return unless dpm = $(@).val()
+      if pheight = container.box_height.val()
+        height = Math.round(10 * pheight / dpm)/10
+        $('.box_height .attribute-info').html "#{height}&nbsp;<i>m</i>"
+
+      if pwidth = container.box_width.val()
+        width = Math.round(10 * pwidth / dpm)/10
+        $('.box_width .attribute-info').html "#{width}&nbsp;<i>m</i>"
+
+    ).change()
+    $(target).css('border', '1px solid black')
+    @compileSource()
+  compileSource: ->
+    source = @text_field.val()
+    results = $(@text_field.data('preview'))
+    window.compiledJS = ''
+    try
+      window.compiledJS = CoffeeScript.compile source, bare: on
+      el = results[0]
+      if el.innerText
+        el.innerText = window.compiledJS
+      else
+        results.text(window.compiledJS)
+      results.removeClass 'error'
+      window.evaluator = new SnapDsl(window.compiledJS, target: @target)
+      evaluator.result()
+      $('.minibutton.run').removeClass 'error'
+    catch {location, message}
+      if location?
+        message = "Error on line #{location.first_line + 1}: #{message}"
+      results.text(message).addClass 'error'
+      $('.minibutton.run').addClass 'error'
+class SnapDsl
+  constructor: (code, options = {})->
+    @js_code = code
+    @options = options
+    @t = $(options.target)
+    @width = @t.width()
+    @height = @t.height()
+    $(options.target).html('')
+  result: ->
+    @snap = Snap(@options.target)
+    s = @snap
+    try
+      eval @js_code
+    catch
+      @t.html('cannot render')
+
+@SvgElement = new SvgElementClass()
+$ -> SvgElement.setup()