-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathconcepts.js
168 lines (130 loc) · 4.99 KB
/
concepts.js
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
DocType = {
match_text: 'doctype',
menu_view: '<b>HTML5 Doctype</b>',
Entity: function() {
var e = {};
e.view = document.createElement('span');
e.view.innerText = '<!DOCTYPE html>';
e.view.setAttribute('contenteditable', 'false');
e.view.setAttribute('style', 'background-color: blue;');
e.view.to_js = function() {
return '<!DOCTYPE html>';
}
return e;
}
}
function check_body(event) {
window.setTimeout( function(){
var self = $(event.srcElement).parents('concept').first();
var body = self.find('[data-id=body]').first();
if (body.height() > 20) {body.addClass('block')} else { body.removeClass('block')}
if(f = self.parents('concept.html-tag')[0]) {
var carrierEvent = { srcElement: self.parents('concept.html-tag').find('[data-id=body]')[0] };
check_body( carrierEvent );
}
}, 0);
}
function focus_open_tag(event) {
var self_jq = $(event.srcElement).parents('.tag').first();
var open_tag_jq = self_jq.children('[data-id=open-tag]').first();
open_tag_jq.focus();
}
function update_end_tag(event) {
var self_jq = $(event.srcElement).parents('.tag');
var end_tag_jq = self_jq.children('[data-id=close-tag]').first();
end_tag_jq.text(event.srcElement.innerText);
}
HtmlTag = {
match_text: 'tag',
menu_view: '<b>HTML Tag</b>',
Entity: function() {
var e = {};
var data = get(URL('html-tag.html'));
var d = document.createElement('div');
d.innerHTML = data;
e.view = d.children[0];
e.view.to_js = function() {
return 'tag';
}
return e;
}
}
var StateChart = {
match_text: "state",
menu_view: '<b>State Chart</b>',
Entity: function() {
var e = {};
e.fields = ['name', 'arguments', 'body'];
e.view = $("<img src='state-chart.png'/>")[0];
e.view.to_js = function() {
return '"state: RED"';
}
return e;
}
};
var Comment = {
match_text: "comment",
menu_view: "<comment>Comment </comment> <span class='type'> Comment</span>",
Entity: function() {
var e = {};
e.view = $("<comment contenteditable='false'><b>// Comment</b><hr/> <field contenteditable='true'/><br></comment>")[0];
e.view.setAttribute('to_js', 'function() {\
var field = $(e.view).find("field")[0];\
return "/*" + field.innerText + "*/";\
}')
e.view.to_constructor = function() { return 'Comment.Entity("foo").view' };
return e;
}
}
var DeclarationAssignment = {
match_text: "var",
menu_view: "<b>var</b> <field/> <b>=</b> <field/><b>;</b><span class='type'> Declaration-Assignment</span>",
Entity: function (name, value) {
var e = {};
if (!name) name = '';
if (!value) value = '';
e.fields = [name , value];
e.view = $("<declaration-assignment contenteditable='false'><b>var</b> <field name='name' contenteditable='true'>" + name + "</field> <b>=</b> <field name='value' contenteditable='true'>" + value + "</field><b>;</b></declaration-assignment>")[0];
e.view.to_js = e.to_js = function() {
var fields = $(e.view).find("field");
// TODO: Now I just need to find a cleaner model of recursive to_js in everything that is inserted into the editor. no innerText
return "var " + fields[0].to_js() + " = " + fields[1].to_js() + ";";
};
e.view.onclick = function() { IntentionInteractionWindowEditor( e.view ) };
e.view.to_constructor = function() {
var fields = $(e.view).find("field");
return 'DeclarationAssignment.Entity("'+ fields[0].innerText + '","' + fields[1].innerText + '").view'; };
return e;
}
};
//TODO: make the views work with the cursor when they are plain text nodes; doc fragment etc so we can insert more lo-fi things as well
var VarText = {
match_text: "var",
menu_view: 'var<span class="type"> text</span>',
Entity: function() {
var e = {};
e.fields = [];
e.view = document.createTextNode('var');
e.view.to_js = function () { return 'var' };
return e;
// {
// fields: [],
// view: document.createTextNode('var') //,
// // to_javascript: function() { return "var"; }
// };
}
}
var Fun = {
match_text: "function",
menu_view: '<function><b>function</b> <field> </field>(<field>arg</field>) {<layouter contenteditable="true"><br> \n </layouter> <field contenteditable="true">   </field><br> }</function>',
Entity: function() {
var e = {};
e.fields = ['name', 'arguments', 'body'];
e.view = $("<function contenteditable='false'><b>function</b><field contenteditable='true'/>(<field contenteditable='true'/>) {<layouter contenteditable='true'><br> \n </layouter>\n <field contenteditable='true'/><br> }</function>" )[0];
e.view.to_js = function() {
var fields = $(e.view).find("field");
return "function " + fields[0].to_js() + "( " + fields[1].to_js() +" ) {\n " + fields[2].to_js() + "\n}";
}
return e;
}
}