Changeset 726


Ignore:
Timestamp:
02/09/07 18:52:35 (13 years ago)
Author:
ray
Message:

HorizontalRule? update

  • use CSS for styling
  • use Xinha.colorPicker
  • removed note about double clicking to select hr (see #3)
Location:
trunk/plugins/HorizontalRule
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/plugins/HorizontalRule/horizontal-rule.js

    r677 r726  
    3333 
    3434HorizontalRule.prototype._lc = function(string) { 
    35     return HTMLArea._lc(string, 'HorizontalRule'); 
     35    return  Xinha._lc(string, 'HorizontalRule'); 
    3636}; 
    3737 
     
    4545        var sel = editor._getSelection(); 
    4646        var range = editor._createRange(sel); 
    47   var outparam = null; 
    48   if (typeof rule == "undefined") { 
    49     rule = editor.getParentElement(); 
    50     if (rule && !/^hr$/i.test(rule.tagName)) 
    51       rule = null; 
    52   } 
    53   if (rule) outparam = { 
    54     f_size        : rule.size, 
    55     f_width       : /%/.test(rule.width)? rule.width.substring(0,rule.width.length-1):rule.width, 
    56     f_widthUnit   : /%/.test(rule.width)?"%":"px", 
    57     f_color       : rule.color, 
    58     f_noshade     : rule.noShade, 
    59     f_align       : rule.align 
    60   }; 
    61  
     47        var outparam = null; 
     48        if (typeof rule == "undefined") { 
     49                rule = editor.getParentElement(); 
     50                if (rule && !/^hr$/i.test(rule.tagName)) 
     51                        rule = null; 
     52        } 
     53        if (rule) { 
     54                var f_widthValue    = rule.style.width || rule.width; 
     55                outparam = { 
     56                        f_size      : parseInt(rule.style.height,10) || rule.size, 
     57                        f_widthUnit : (/(%|px)$/.test(f_widthValue)) ? RegExp.$1 : 'px', 
     58                        f_width     : parseInt (f_widthValue,10), 
     59                        f_color     : Xinha._colorToRgb(rule.style.backgroundColor) || rule.color, 
     60                        f_align     : rule.style.textAlign || rule.align, 
     61                        f_noshade   : (parseInt(rule.style.borderWidth,10) == 0) || rule.noShade 
     62                }; 
     63        } 
    6264        editor._popupDialog("plugin://HorizontalRule/edit_horizontal_rule.html", function(param) { 
    6365                if (!param) {   // user pressed Cancel 
     
    6668                var hr = rule; 
    6769                if (!hr) { 
    68                   var hrule = "<hr"; 
     70                        var hrule = editor._doc.createElement("hr"); 
    6971                        for (var field in param) { 
    7072                                var value = param[field]; 
     
    7274                                switch (field) {  
    7375                                case "f_width" : 
    74                                 if(param["f_widthUnit"]=="%")hrule += " width='" + value+"%'"; 
    75                                         else hrule += " width='" + value +"'"; break; 
     76                                        if(param["f_widthUnit"]=="%") 
     77                                        { 
     78                                                hrule.style.width = value + "%"; 
     79                                        } 
     80                                        else 
     81                                        { 
     82                                                hrule.style.width = value + "px"; 
     83                                        } 
     84                                break; 
    7685                                case "f_size" : 
    77                                 hrule += " size='" + value +"'"; break; 
    78                                 case "f_align" : 
    79                                 hrule += " align='" + value +"'"; break; 
     86                                        hrule.style.height = value + "px";  
     87                                break; 
     88                                case "f_align" : // Gecko needs the margins for alignment 
     89                                        hrule.style.textAlign = value; 
     90                                        switch (value) { 
     91                                                case 'left': 
     92                                                        hrule.style.marginLeft = "0"; 
     93                                                break; 
     94                                                case 'right': 
     95                                                        hrule.style.marginRight = "0"; 
     96                                                break; 
     97                                                case 'center': 
     98                                                        hrule.style.marginLeft = "auto"; 
     99                                                        hrule.style.marginRight = "auto"; 
     100                                                break; 
     101                                        } 
     102                                break; 
    80103                                case "f_color" : 
    81                                 hrule += " color='" + value +"'"; break; 
     104                                        hrule.style.backgroundColor = value;  
     105                                break; 
    82106                                case "f_noshade" : 
    83                                 hrule += (value)? " noshade":""; break; 
     107                                        hrule.style.border = "0";  
     108                                break; 
    84109                                } 
    85110                        } 
    86                         hrule += ">"; 
    87                         editor.insertHTML(hrule); 
     111                        if ( Xinha.is_gecko ) 
     112                        {   // If I use editor.insertNodeAtSelection(hrule) here I get get a </hr> closing tag 
     113                                editor.execCommand("inserthtml",false,Xinha.getOuterHTML(hrule)); 
     114                        } 
     115                        else editor.insertNodeAtSelection(hrule); 
     116                         
    88117                } else { 
    89118                        for (var field in param) { 
    90119                          var value = param[field]; 
    91120                          switch (field) { 
    92                                   case "f_size"    : hr.size  = value; break; 
    93                                   case "f_width"   : hr.width   = (param["f_widthUnit"]=="%")?value+"%":value; break; 
    94                                   case "f_align"   : hr.align   = value; break; 
    95                                   case "f_color"   : hr.color   = value; break; 
    96                                   case "f_noshade" : hr.noShade = value; break; 
     121                                case "f_width" : 
     122                                        if(param["f_widthUnit"]=="%") 
     123                                        { 
     124                                                hr.style.width = value + "%"; 
     125                                        } 
     126                                        else 
     127                                        { 
     128                                                hr.style.width = value + "px"; 
     129                                        } 
     130                                break; 
     131                                case "f_size" : 
     132                                        hr.style.height = value + "px";  
     133                                break; 
     134                                case "f_align" : 
     135                                        hr.style.textAlign = value; 
     136                                        switch (value) { 
     137                                                case 'left': 
     138                                                        hr.style.marginLeft = "0"; 
     139                                                        hr.style.marginRight = null; 
     140                                                break; 
     141                                                case 'right': 
     142                                                        hr.style.marginRight = "0"; 
     143                                                        hr.style.marginLeft = null; 
     144                                                break; 
     145                                                case 'center': 
     146                                                        hr.style.marginLeft = "auto"; 
     147                                                        hr.style.marginRight = "auto"; 
     148                                                break; 
     149                                        } 
     150                                break; 
     151                                case "f_color" : 
     152                                        hr.style.backgroundColor = value;  
     153                                break; 
     154                                case "f_noshade" : 
     155                                         
     156                                break; 
    97157                          } 
     158                          hr.style.border = (param["f_noshade"]) ? "0" : null;  
    98159                        } 
    99160                } 
  • trunk/plugins/HorizontalRule/popups/edit_horizontal_rule.html

    r677 r726  
    1 <html> 
     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"> 
    26<head> 
    37  <title>Insert/Edit Horizontal Rule</title> 
    48  <link rel="stylesheet" type="text/css" href="../../../popups/popup.css" /> 
    59  <script type="text/javascript" src="../../../popups/popup.js"></script> 
    6  
     10  <script type="text/javascript" src="../../../modules/ColorPicker/ColorPicker.js"></script> 
    711<script type="text/javascript"> 
    812editor = window.opener.editor; 
     
    1014function Init() { 
    1115        __dlg_translate("HorizontalRule"); 
    12         __dlg_init(); 
    13         window.resizeTo(300,320); 
     16        __dlg_init(null,{width:320,height:290}); 
    1417        var params = window.dialogArguments; 
    1518        if(params) { 
     
    2225                document.getElementById("f_noshade").checked = params.f_noshade; 
    2326        } 
     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         
    2433        document.getElementById("f_width").focus(); 
    2534} 
     
    2736function onOK() { 
    2837  var fields = ["f_size", "f_width", "f_widthUnit", "f_align", "f_color", "f_noshade"]; 
    29   var param = new Object(); 
     38  var param = {}; 
    3039  for (var i in fields) { 
    3140    var id = fields[i]; 
     
    4251} 
    4352 
    44 function selectColor(id1,id2,color) { 
    45         Dialog(editor.popupURL("select_color.html"), function(color){ 
    46                 if (color) { 
    47                         document.getElementById(id1).style.backgroundColor="#"+color; 
    48                         document.getElementById(id2).value="#"+color; 
    49                 } 
    50         }, color); 
     53function selectColor(color) { 
     54        document.getElementById('hrpv').style.backgroundColor = color; 
     55        document.getElementById('f_color').value = color; 
    5156} 
    52 function Dialog(url, action, init) { 
    53         Dialog.openModal(url, action, init); 
    54 } 
    55 Dialog.openModal = function(url, action, init) { 
    56         var dlg2 = window.open(url, "hadialog2", 
    57                   "toolbar=no,menubar=no,personalbar=no,width=10,height=10," + 
    58                   "scrollbars=no,resizable=yes,modal=yes,dependable=yes"); 
    59         Dialog._modal = dlg2; 
    60         Dialog._arguments = init; 
    61         Dialog._return = function (val) { 
    62                 if (val && action) { 
    63                         action(val); 
    64                 } 
    65                 Dialog._modal = null; 
    66         }; 
    67 }; 
    68  
     57window.onload = Init; 
    6958</script> 
    7059 
     
    9685.buttonColor .nocolor-hilite { background-color: #fff; color: #f00; } 
    9786</style> 
    98 <style type="text/css"> 
    99 @import url(../../../popups/popupstyle.css); 
    100 </style> 
    10187 
    10288</head> 
    10389 
    104 <body class="dialog" onload="Init()"> 
     90<body class="dialog"> 
    10591<div class="title">Horizontal Rule</div> 
    10692<form action="" method="get"> 
     
    10894  <legend>Layout</legend> 
    10995    <div class="fr">Width:</div> 
    110     <input style="margin-right: 0.5em;" name="f_width" id="f_width" size="5" type="text"> 
     96    <input style="margin-right: 0.5em;" name="f_width" id="f_width" size="5" type="text" /> 
    11197    <select style="margin-right: 0.5em;" name="f_widthUnit" id="f_widthUnit"> 
    11298      <option value="%">percent</option> 
    11399      <option value="px">pixels</option> 
    114100    </select> 
    115     <p /> 
     101        <br /> 
    116102    <div class="fr">Height:</div> 
    117     <input style="margin-right: 0.5em;" name="f_size" id="f_size" size="5" type="text"> <span>pixels</span> 
    118     <p /> 
     103    <input style="margin-right: 0.5em;" name="f_size" id="f_size" size="5" type="text" /> <span>pixels</span> 
     104        <br /> 
    119105    <div class="fr">Alignment:</div> 
    120106    <select name="f_align" id="f_align"> 
     
    123109      <option value="right">Right</option> 
    124110    </select> 
    125     <p /> 
     111 
    126112  </fieldset> 
    127113  <fieldset> 
     
    131117    <tr> 
    132118      <td class="chooser" id="hrpv" 
    133           onMouseOver="document.getElementById('hrbtn').style.borderColor='black'" 
    134           onMouseOut="document.getElementById('hrbtn').style.borderColor='ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight'" 
    135           onClick="selectColor('hrpv','f_color',document.getElementById('f_color').value)">&nbsp;</td> 
     119          onmouseover="document.getElementById('hrbtn').style.borderColor='black'" 
     120          onmouseout="document.getElementById('hrbtn').style.borderColor='ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight'" 
     121          >&nbsp;</td> 
    136122      <td class="nocolor" id="hrclr" 
    137           onMouseOver="document.getElementById('hrclr').style.color='#f00'" 
    138           onMouseOut="document.getElementById('hrclr').style.color='#000'" 
    139           onClick="document.getElementById('f_color').value=''; document.getElementById('hrpv').style.backgroundColor=''">&#x00d7;</td> 
     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> 
    140126    </tr> 
    141127    </table> 
    142     <p /> 
     128    <br /> 
    143129    <div class="fr"> </div> 
    144     <input type="hidden" name="f_color" id="f_color"> 
    145     <input type="checkbox" name="f_noshade" id="f_noshade" value="noshade"> 
     130    <input type="hidden" name="f_color" id="f_color" /> 
     131    <input type="checkbox" name="f_noshade" id="f_noshade" value="noshade" /> 
    146132    <span>No shading</span> 
    147     <p /> 
    148   </fieldset> 
    149   <fieldset> 
    150           <legend>Note:</legend> 
    151     <span>To select an existing horizontal rule, a double-click may be needed.</span> 
     133    <br /> 
    152134  </fieldset> 
    153135<div id="buttons"> 
Note: See TracChangeset for help on using the changeset viewer.