source: trunk/plugins/QuickTag/popups/quicktag.html @ 212

Last change on this file since 212 was 212, checked in by gocher, 14 years ago

new plugin QuickTag? Ticket #305

modified that it works with Xinha!!

QuickTag? is really cool. Highlight text you want to put a tag around, and a dropdown appears with tags, when you choose a tag, nearly every possible attribute for that tag appears as an additional option, just like in a typical IDE.

File size: 9.6 KB
Line 
1<html>
2<head>
3<title>Quick Tag Editor</title>
4<script type="text/javascript" src="../tag-lib.js"></script>
5<script type="text/javascript" src="../../../popups/popup.js"></script>
6<script type="text/javascript">
7
8window.resizeTo(400, 180);
9var QuickTag = window.opener.QuickTag;
10var curTag = 'none';
11var curTagOpt = false;
12var CSSEdit = false;
13var editor = null;
14
15function Init() {
16  __dlg_translate("QuickTag");
17  __dlg_init();
18
19  var param = window.dialogArguments;
20  editor = param['editor'];
21  var selectext = param['selectedText']; // sem uso...
22
23  if(!document.all) window.resizeTo(400, 180); // i don't undertand why...
24
25  createDropdown("tags");
26
27  var to = document.getElementById('tagopen');
28  if (document.all)
29    to.attachEvent("onkeypress", function(e) { choice_dropdown(e) });
30  else
31    to.addEventListener("keypress", function(e) { choice_dropdown(e) }, true);
32  to.focus();
33
34  document.getElementById('bt_colors').style.display = 'none';
35  document.body.onkeypress = __dlg_key_press;
36};
37
38function onCancel() {
39  __dlg_close(null);
40  return false;
41};
42
43function quoteTest(val) {
44  var er = /^\w+\s*(\w+=\"[^\"]*\"\s*|\w+=\'[^\']*\'\s*)*$/;
45  return er.test(val);
46};
47
48function onOK() {
49  var el = document.getElementById('tagopen');
50  if(!el.value) {
51  alert(HTMLArea._lc("Enter the TAG you want to insert", "QuickTag"));
52  el.focus();
53  return false;
54  }
55  if(!quoteTest(el.value)) {
56    alert(HTMLArea._lc("There are some unclosed quote", "QuickTag"));
57    el.focus();
58    el.select();
59    return false;
60  }
61  var param = {};
62  var cleanTO = document.getElementById('tagopen').value.replace(/(<|>)/g,"");
63  param.tagopen = "<"+cleanTO+">";
64  param.tagclose = param.tagopen.replace(/^<(\w+) ?.*>/,"</$1>");
65
66  var subtag = subTagLib[curTag];
67  if(typeof subtag == 'object') {
68    param.tagopen = param.tagopen+subtag.op;
69    param.tagclose = subtag.cl+param.tagclose;
70  }
71
72  __dlg_close(param);
73  return false;
74};
75
76function __dlg_key_press(ev) {
77  ev || (ev = window.event);
78  switch(ev.keyCode) {
79    case 13:
80    document.getElementById('bt_ok').click();
81      break;
82    case 27:
83    __dlg_close();
84    return false;
85  }
86  return true;
87};
88
89function selchange() {
90  var toadd = document.getElementById('selectag').value;
91  var oldval = document.getElementById('tagopen').value;
92  var text = (oldval+toadd).replace(/^\s*(.+)\s*$/,"$1");
93  var atrib = /(\w+)=\"$/.test(toadd) ? toadd.replace(/(\w+)=\"$/, "$1") : null;
94  var showcolors = (/color\: ?$/.test(toadd)) ? true : false;
95  var noCSSclasses = false;
96  var obj = null;
97  curTag = text.replace(/(^\w+) ?.*$/, "$1");
98  curTagOpt = (tagLib[curTag] == true);
99
100  if(atrib) {
101    var atrer = eval('/'+atrib+'=/ig');
102    if(atrer.test(oldval) && !(/[^=]\"$/.test(toadd))) {
103      alert(HTMLArea._lc("This attribute already exists in the TAG", "QuickTag"));
104      return false;
105    }
106
107    switch(atrib) {
108    case 'style':
109      CSSEdit = true;
110      break;
111    case 'class':
112      if(captureClasses() == 0) noCSSclasses = true;
113      break;
114    case 'color': case 'bgcolor': case 'bordercolor':
115    case 'bordercolorlight': case 'bordercolordark':
116      showcolors = true;
117      break;
118    }
119
120    if(curTagOpt == true)
121      obj = eval('opAtt_'+curTag+'["'+atrib+'"]');
122    else
123      obj = opAtt_all[atrib];
124  }
125  else if(!CSSEdit && (/(^\w+$|\"$)/.test(toadd))) {
126    obj = 'all';
127    if(curTagOpt == true) obj = curTag;
128    toadd += ' ';
129  }
130
131  if(CSSEdit && quoteTest(text))
132    CSSEdit = false;
133
134  if(showcolors)
135    document.getElementById('bt_colors').style.display = '';
136
137  if(obj)
138    createDropdown(obj);
139  else if(!CSSEdit)
140    document.getElementById('showselect').style.visibility = 'hidden';
141
142  if(noCSSclasses) {
143    document.getElementById('showselect').innerHTML = HTMLArea._lc("No CSS class avaiable", "QuickTag");
144    document.getElementById('showselect').style.visibility = 'visible';
145  }
146
147  addchanges();
148
149  function addchanges() {
150    document.getElementById('tagopen').focus();
151    document.getElementById('tagopen').value += toadd;
152  };
153};
154
155function captureClasses() {
156  var cont = 0;
157  // If there is no '<HTML>' in the HTMLArea content, when using
158  // styleSheets[..].rule, IE generates an error.
159  // In this case, we lost the classes in external CSS files.
160  // If FullPage is loaded, there is no problem.
161  if(!(/<\s*html\s*>/i.test(editor.getHTML())) && document.all) {
162    var styles = editor._doc.getElementsByTagName("style");
163    for(var i in styles) {
164      var cont = styles[i].innerHTML;
165      if(typeof cont != 'undefined') {
166        var cls = cont.match(/\.\w+/ig,"");
167        for(j in cls) if(/^\.\w+$/.test(cls[j])) {
168          var classname = cls[j].replace(/\./,"")+'"';
169          opAtt_all['class'][cls[j]] = classname;
170          cont++;
171        }
172      }
173    }
174    return cont;
175  }
176
177  var styleSheet = null;
178  var styles = editor._doc.styleSheets;
179
180  for (var i = 0; i < styles.length; i++) {
181    styleSheet = styles[i];
182    if(document.all)
183      var _rules = styleSheet.rules;
184    else
185      var _rules = styleSheet.cssRules;
186    for (var j = 0; j < _rules.length; j++) {
187      rule = _rules[j];
188      if(/^\.\w+$/.test(rule.selectorText)) {
189        var classname = rule.selectorText.replace(/\./,"")+'"';
190        opAtt_all['class'][rule.selectorText] = classname;
191        cont++;
192      }
193    }
194  }
195  return cont;
196};
197
198function choice_dropdown(e) {
199  if (document.all) Key = e.keyCode;
200  else Key = e.charCode;
201
202  if(Key != 32) return;
203
204  var text = document.getElementById('tagopen').value.replace(/^\s*([^\s]+)\s*$/,"$1");
205
206  if(CSSEdit && quoteTest(text)) CSSEdit = false;
207  if(CSSEdit) return;
208
209  if(curTag == 'none') {
210    curTag = text.replace(/(^\w+) ?.*$/, "$1");
211    curTagOpt = tagLib[curTag];
212  }
213
214  if(!/\w/.test(text)) {
215    document.getElementById('tagopen').value = '';
216    createDropdown("tags");
217    return;
218  }
219
220  var att = 'all';
221  if(curTagOpt == true)
222    att = curTag;
223
224  createDropdown(att);
225};
226
227function createDropdown(type) {
228  var _div = document.getElementById('showselect');
229  while(_div.hasChildNodes())
230    _div.removeChild(_div.firstChild);
231  _div.style.visibility = 'visible';
232
233  var _sel = document.createElement("select");
234  _sel.id = "selectag";
235  _sel.onchange = function() { selchange(); };
236
237  if(typeof type == 'object') {
238    var obj = type;
239    forObj(HTMLArea._lc("OPTIONS", "QuickTag"));
240    _div.appendChild(_sel);
241    return;
242  }
243
244  if(type == 'tags') {
245    var obj = allTags;
246    forObj(HTMLArea._lc("TAGs", "QuickTag"));
247    _div.appendChild(_sel);
248    return;
249  }
250
251  type = type.replace(/^h[1-6]$/,"h");
252  var topt = eval('opTag_'+type);
253  if(typeof topt == 'object')
254    var obj = topt;
255  else
256    return;
257
258  forObj(HTMLArea._lc("ATTRIBUTES", "QuickTag"));
259  _div.appendChild(_sel);
260
261  function forObj(first) {
262    if(first) {
263      var _op = document.createElement("option");
264      _op.appendChild(document.createTextNode(first));
265      _sel.appendChild(_op);
266    }
267    for(i in obj) {
268      var opt = document.createElement("option");
269      opt.appendChild(document.createTextNode(i));
270      opt.value = obj[i];
271      _sel.appendChild(opt);
272    }
273  };
274};
275
276function colors() {
277  var colloc = window.location.toString().replace(/plugins.+$/,"") +
278               "popups/select_color.html";
279  window.open(colloc, 'colors', "toolbar=no,location=no,directories=no," +
280              "status=no,menubar=no,scrollbars=no,resizable=no,width=240,height=182");
281};
282
283// simulation of Dialog._return - select_color.html needs it.
284var Dialog = new Object();
285Dialog._return = function (val) {
286  if(val != null) {
287    if(CSSEdit)
288      val += '; ';
289    else
290      val += '"';
291    document.getElementById('tagopen').focus();
292    document.getElementById('tagopen').value += "#"+val;
293    document.getElementById('bt_colors').style.display = 'none';
294  }
295};
296</script>
297<style type="text/css">
298html, body {
299background: ButtonFace;
300color: ButtonText;
301font: 11px Tahoma,Verdana,sans-serif;
302margin: 0px;
303padding: 0px;
304border-width: 0px;
305}
306body { padding: 5px; }
307table { font: 11px Tahoma,Verdana,sans-serif; }
308select, input, button { font: 11px Tahoma,Verdana,sans-serif; }
309button { width: 70px; }
310.space { padding: 2px; }
311.title {
312background: #ddf;
313color: #000;
314font-weight: bold;
315font-size: 120%;
316padding: 3px 10px;
317margin-bottom: 10px;
318border-bottom: 1px solid black;
319letter-spacing: 2px;
320}
321.buttons {
322border-top: 1px solid #999;
323padding: 5px;
324text-align: right;
325height: 20px;
326}
327form { padding: 0px; margin: 0px; }
328</style>
329</head>
330  <body onload="Init()">
331<form action="" method="get">
332  <div class="title" style="width: 360px">Quick Tag Editor</div>
333  <div align="center">
334  <table border="0" width="370">
335    <tbody>
336      <tr>
337        <td colspan="2" align="center" style="padding: 3px; background-color: #e9e9e9;">
338        <strong style="font-size: 14px">&lt;</strong>
339        <input id="tagopen" type="text" style="background-color: #e9e9e9; width: 327px; border-width: 0px;">
340        <strong style="font-size: 14px">&gt;</strong>
341        </td>
342      </tr>
343    </tbody>
344  </table>
345  </div>
346<div class="space"></div>
347<div class="buttons">
348<button type="button" id="bt_colors" onclick="colors();">Colors</button>
349<button type="button" id="bt_ok" onclick="return onOK();">Ok</button>
350<button type="button" onclick="return onCancel();">Cancel</button>
351</div>
352<div id="showselect" style="position:absolute; left:7px; top:75px; width:150px; z-index:100; visibility: visible; height: 13px; color: red;">
353</div>
354</form>
355</body>
356</html>
Note: See TracBrowser for help on using the repository browser.