source-frame/source-frame.html at master · ayc/source-frame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!--
@license
Copyright (c) 2016 Alex Choi. All rights reserved.
-->

<link rel="import" href="../polymer/polymer.html">

<!--

`<source-frame>` is source code viewing frame

    <source-frame src=""></source-frame>

@demo demo/index.html
-->

<dom-module id="source-frame">
  <template>
    <style>

        #body pre{
            clear: left;
            min-height: 42px;
            padding: 15px 0;
            color: #f1f1f1;
            font-size: 12px;
            line-height: 19px;
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #222;
            counter-reset: line-numbering;
            margin-top: 0;
        }
        pre{
            font-family: Monaco,monospace;
        }
    </style>

    <div id="body">
        <template is="dom-repeat" items="{{line}}">
            <pre>
                <p>
                    <a>{{index}}</a>
                </p>
                <span>
                    {{item.text}}
                </span>
            </pre>
        </template>

        <template is="error" if="[[errorMessage]]">
            <source-frame-error>[[errorMessage]]</source-frame-error>
        </template>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'source-frame',
    properties: {
      src: {
        type: String,
        notify: true,
        observer: '_resourceAssigned'
      }
    },
    // triggered element is created
    created: function(){

    },
    // when dom element is ready
    ready: function(){},
    // when dom element is attached
    attached: function(){},
    // when dom element is detached
    detached: function(){},
    attributeChanged: function(){},

    _resourceAssigned: function(newValue, oldValue) {
      // src attribute has been updated
    },

    behaviors: [
    ]
  });
</script>