How to add inline script to space pen html


#1

I’m attempting to develop an atom package that opens html in a new page. The view’s content function looks like:

@content: ->
    @div class: 'block', id: 'plasmidDisplayBase', =>
      @script src: 'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'
      @div id: 'canvas_container'
      @div class: 'editor mini editor-colors', id: "replaceThisText",
      "Something typed."
      @script =>
        getCircleToPath = (x, y, r) ->
          s = "M"
          s = s + "" + (x) + "," + (y - r) + "A" + r + "," + r + ",0,1,1," +
          (x - 0.1) + "," + (y - r) + "z"

        sqStr = "M200,100L240,240L120,240Z"

        window.onload = ->
          paper = new Raphael(document.getElementById("canvas_container"),
          500, 500)
          circle = paper.path(getCircleToPath(100, 300, 50))

          rect.attr({
            fill: '#9cf',
            stroke: '#ddd',
            'stroke-width': 5
          })

          circle.animate({
            path:sqStr
          }, 3000, "linear")

That’s an example, but what I’m trying to do is put coffeescript inline in the pseudo-html read by atom. However, the canvas I’m attempting to create isn’t in the view, and when I console.log the page, I get:

<div class="block" id="plasmidDisplayBase" callattachhooks="true" style="display: none;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="canvas_container"></div>
<div class="editor mini editor-colors" id="replaceThisText">Something Else.</div>
<script></script>
</div>

So everything appears to be initialized correctly, except the lower script tag has no content. How do I add content to the inline script tag?


#2

I’ve found this link, where another user was attempting to do what I’m trying to do (although not explaining their solution); it boils down to wanting to use an external js tool (in my case, Raphael.js) only accessible by src-including it in script tags. Is there a better way to do just that?


#3

It might be worthwhile to ask this question on atom/atom-shell. Show us a link to any issue you create.

Edit: It wouldn’t have anything to do with spacepen. Just ask if you can insert a script and if so how to make atom let you do this.


#4

Basically, I think the answer is that Space Pen isn’t designed to do that. But, you might try this:

@content: ->
    @div class: 'block', id: 'plasmidDisplayBase', =>
      @script src: 'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'
      @div id: 'canvas_container'
      @div class: 'editor mini editor-colors', id: "replaceThisText",
        "Something typed."
      @script ->
        @raw '// Put the JS here'

Since @raw is the method to call for putting unescaped text into the content of tags.

Also, if you want to post an Issue, rather than posting it in atom/atom-shell, it should really be in atom/space-pen instead.


#5

I’ve posted an issue in atom/space-pen.


#6

Just a note: this issue has been resolved. Using an iframe to load external js seems to work.


#7

Actually, I’ve found a better solution. The problem appears to be with raphael.js, and not with space-pen. As follows:

{ScrollView} = require 'atom'
SVG = require './svg'
drawUtils = require './draw-utilities'

module.exports =
class PlasmidDisplayView extends ScrollView

  @content: ->
    @div class: 'markdown-preview', id: 'plasmidDisplayBase', =>
      @div outlet: 'canvas_container'

  initialize: (@bpd) ->
    @bpd.view = @
    @paper = SVG(@canvas_container[0]).size(500,500)
    # ...

Where svg.js is locally in the same directory. The tricky part was feeding it an html element that it liked, since it’s used to receiving document.getElementById('canvas_container') as an argument. Atom doesn’t like that (not sure why) and it can’t find an element by that id even when id is specified. However, after playing with the console a bit, I found that the outlet functionality seemed to do the trick. This is a far better solution than using iframes, keeping everything integrated within space-pen.