source: trunk/plugins/HorizontalRule/popups/edit_horizontal_rule.html @ 1269

Last change on this file since 1269 was 726, checked in by ray, 13 years ago

HorizontalRule? update

  • use CSS for styling
  • use Xinha.colorPicker
  • removed note about double clicking to select hr (see #3)
  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 4.6 KB
Line 
1<!DOCTYPE html
2     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6<head>
7  <title>Insert/Edit Horizontal Rule</title>
8  <link rel="stylesheet" type="text/css" href="../../../popups/popup.css" />
9  <script type="text/javascript" src="../../../popups/popup.js"></script>
10  <script type="text/javascript" src="../../../modules/ColorPicker/ColorPicker.js"></script>
11<script type="text/javascript">
12editor = window.opener.editor;
13
14function Init() {
15        __dlg_translate("HorizontalRule");
16        __dlg_init(null,{width:320,height:290});
17        var params = window.dialogArguments;
18        if(params) {
19                document.getElementById("f_size").value = params.f_size;
20                document.getElementById("f_width").value = params.f_width;
21                document.getElementById("f_widthUnit").value = params.f_widthUnit;
22                document.getElementById("f_align").value = params.f_align;
23                document.getElementById("f_color").value = params.f_color;
24                document.getElementById("hrpv").style.backgroundColor = params.f_color;
25                document.getElementById("f_noshade").checked = params.f_noshade;
26        }
27       
28        var colpick = document.getElementById('hrpv');
29        var f_color = document.getElementById('f_color');
30        var colPicker = new Xinha.colorPicker({cellsize:'5px',callback:selectColor});
31        colpick.onclick = function() { colPicker.open('top,left',colpick, f_color.value ); }
32       
33        document.getElementById("f_width").focus();
34}
35
36function onOK() {
37  var fields = ["f_size", "f_width", "f_widthUnit", "f_align", "f_color", "f_noshade"];
38  var param = {};
39  for (var i in fields) {
40    var id = fields[i];
41        var el = document.getElementById(id);
42    param[id] = (el.type == "checkbox") ? el.checked : el.value;
43  }
44  __dlg_close(param);
45  return false;
46}
47
48function onCancel() {
49  __dlg_close(null);
50  return false;
51}
52
53function selectColor(color) {
54        document.getElementById('hrpv').style.backgroundColor = color;
55        document.getElementById('f_color').value = color;
56}
57window.onload = Init;
58</script>
59
60<style type="text/css">
61.buttonColor {
62  padding: 1px;
63  cursor: default;
64  border: 1px solid;
65  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
66}
67
68.buttonColor-hilite {
69  border-color: #000;
70}
71
72.buttonColor .chooser {
73  height: 0.6em;
74  border: 1px solid;
75  padding: 0px 1em;
76  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
77}
78
79.buttonColor .nocolor {
80  padding: 0px;
81  height: 0.6em;
82  border: 1px solid;
83  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
84}
85.buttonColor .nocolor-hilite { background-color: #fff; color: #f00; }
86</style>
87
88</head>
89
90<body class="dialog">
91<div class="title">Horizontal Rule</div>
92<form action="" method="get">
93  <fieldset>
94  <legend>Layout</legend>
95    <div class="fr">Width:</div>
96    <input style="margin-right: 0.5em;" name="f_width" id="f_width" size="5" type="text" />
97    <select style="margin-right: 0.5em;" name="f_widthUnit" id="f_widthUnit">
98      <option value="%">percent</option>
99      <option value="px">pixels</option>
100    </select>
101        <br />
102    <div class="fr">Height:</div>
103    <input style="margin-right: 0.5em;" name="f_size" id="f_size" size="5" type="text" /> <span>pixels</span>
104        <br />
105    <div class="fr">Alignment:</div>
106    <select name="f_align" id="f_align">
107      <option value="left">Left</option>
108      <option value="center">Center</option>
109      <option value="right">Right</option>
110    </select>
111
112  </fieldset>
113  <fieldset>
114  <legend>Style</legend>
115    <div class="fr">Color:</div>
116    <table cellpadding="2" cellspacing="0" id="hrbtn" class="buttonColor">
117    <tr>
118      <td class="chooser" id="hrpv"
119          onmouseover="document.getElementById('hrbtn').style.borderColor='black'"
120          onmouseout="document.getElementById('hrbtn').style.borderColor='ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight'"
121          >&nbsp;</td>
122      <td class="nocolor" id="hrclr"
123          onmouseover="document.getElementById('hrclr').style.color='#f00'"
124          onmouseout="document.getElementById('hrclr').style.color='#000'"
125          onclick="document.getElementById('f_color').value=''; document.getElementById('hrpv').style.backgroundColor=''">&#x00d7;</td>
126    </tr>
127    </table>
128    <br />
129    <div class="fr"> </div>
130    <input type="hidden" name="f_color" id="f_color" />
131    <input type="checkbox" name="f_noshade" id="f_noshade" value="noshade" />
132    <span>No shading</span>
133    <br />
134  </fieldset>
135<div id="buttons">
136  <button type="submit" name="ok" onclick="return onOK();">OK</button>
137  <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
138</div>
139</form>
140</body>
141</html>
Note: See TracBrowser for help on using the repository browser.