Return to double-click.js CVS log

Up to [LON-CAPA] / loncom / html / adm / jsMath / extensions

-jsMath 3.2

    1: /*
    2:  *  extensions/double-click.js
    3:  *  
    4:  *  Part of the jsMath package for mathematics on the web.
    5:  *
    6:  *  This file allows users to double click on typeset mathematics
    7:  *  to view the TeX source for the given expression.  It will be loaded
    8:  *  automatically when needed, or can be loaded by
    9:  *  
   10:  *    jsMath.Extension.Require('double-click');
   11:  *
   12:  *  ---------------------------------------------------------------------
   13:  *
   14:  *  Copyright 2005-2006 by Davide P. Cervone
   15:  * 
   16:  *  Licensed under the Apache License, Version 2.0 (the "License");
   17:  *  you may not use this file except in compliance with the License.
   18:  *  You may obtain a copy of the License at
   19:  * 
   20:  *      http://www.apache.org/licenses/LICENSE-2.0
   21:  * 
   22:  *  Unless required by applicable law or agreed to in writing, software
   23:  *  distributed under the License is distributed on an "AS IS" BASIS,
   24:  *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   25:  *  See the License for the specific language governing permissions and
   26:  *  limitations under the License.
   27:  */
   28: 
   29: /********************************************************************/
   30: 
   31: jsMath.Add(jsMath.Click,{
   32: 
   33:   dragging: 0,
   34:   
   35:   /*
   36:    *  Create the hidden DIV used for the tex source window
   37:    */
   38:   Init: function () {
   39:     this.source = jsMath.Setup.DIV("float",{display:'none'});
   40:     this.source.innerHTML =
   41:         '<div class="drag"><div class="close"></div></div>'
   42:       + '<div class="source"><span></span></div>';
   43:     this.drag = this.source.firstChild;
   44:     this.tex  = this.drag.nextSibling.firstChild;
   45:     this.drag.firstChild.onclick = jsMath.Click.CloseSource;
   46:     this.drag.onmousedown = jsMath.Click.StartDragging;
   47:     this.drag.ondragstart = jsMath.Click.False;
   48:     this.drag.onselectstart = jsMath.Click.False;
   49:     this.source.onclick = jsMath.Click.CheckClose;
   50:   },
   51:   False: function () {return false},
   52: 
   53:   /*
   54:    *  Handle a double-click on an equation
   55:    */
   56:   DblClick: function (data) {
   57:     var event = data[0]; var TeX = data[1];
   58:     var event = jsMath.Click.Event(event);
   59: 
   60:     var source = jsMath.Click.source
   61:     var tex = jsMath.Click.tex;
   62: 
   63:     source.style.visibility = 'hidden';
   64:     source.style.display = ''; source.style.width = '';
   65:     source.style.left = ''; source.style.top = '';
   66:     tex.innerHTML = '';
   67: 
   68:     TeX = TeX.replace(/^\s+|\s+$/g,'');
   69:     TeX = TeX.replace(/&/g,'&amp;');
   70:     TeX = TeX.replace(/</g,'&lt;');
   71:     TeX = TeX.replace(/>/g,'&gt;');
   72:     TeX = TeX.replace(/\n/g,'<br/>');
   73:     tex.innerHTML = TeX;
   74: 
   75:     var h = source.offsetHeight; var w;
   76:     if (jsMath.Browser.msieDivWidthBug) {
   77:       tex.className = 'source';          // Work around MSIE bug where
   78:       w = tex.offsetWidth + 5;           // DIV's don't collapse to
   79:       tex.className = '';                // their natural widths
   80:     } else {
   81:       w = source.offsetWidth;
   82:     }
   83:     w = Math.max(50,Math.min(w,.8*event.W,event.W-40));
   84:     var x = Math.floor(event.x-w/2); var y = Math.floor(event.y-h/2);
   85:     x = event.X + Math.max(Math.min(x,event.W-w-20),20);
   86:     y = event.Y + Math.max(Math.min(y,event.H-h-5),5);
   87: 
   88:     source.style.left = x+'px'; source.style.top = y+'px';
   89:     source.style.width = w+'px';
   90:     source.style.visibility = '';
   91:     jsMath.Click.left = x + event.X; jsMath.Click.top = y + event.Y;
   92:     jsMath.Click.w = w; jsMath.Click.h = source.offsetHeight;
   93: 
   94:     jsMath.Click.DeselectText(x,y);
   95:     return false;
   96:   },
   97: 
   98:   /*
   99:    *  Get window width, height, and offsets plus
  100:    *  position of pointer relative to the window
  101:    */
  102:   Event: function (event) {
  103:     var W = jsMath.window.innerWidth  || jsMath.document.body.clientWidth;
  104:     var H = jsMath.window.innerHeight || jsMath.document.body.clientHeight;
  105:     var X = jsMath.window.pageXOffset; var Y = jsMath.window.pageYOffset;
  106:     if (X == null) {
  107:       X = jsMath.document.body.clientLeft;
  108:       Y = jsMath.document.body.clientTop;
  109:     }
  110:     var x = event.pageX; var y = event.pageY;
  111:     if (x == null) {
  112:       x = event.clientX; y = event.clientY;
  113:       if (jsMath.browser == 'MSIE' && jsMath.document.compatMode == 'CSS1Compat') {
  114:         X = jsMath.document.documentElement.scrollLeft;
  115:         Y = jsMath.document.documentElement.scrollTop;
  116:         W = jsMath.document.documentElement.clientWidth;
  117:         H = jsMath.document.documentElement.clientHeight;
  118:       } else {
  119:         X = jsMath.document.body.scrollLeft;
  120:         Y = jsMath.document.body.scrollTop;
  121:       }
  122:     } else {x -= X; y -= Y}
  123: 
  124:     return {x: x, y: y, W: W, H: H, X: X, Y: Y};
  125:   },
  126:   
  127:   /*
  128:    *  Unselect whatever text is selected (since double-clicking
  129:    *  usually selects something)
  130:    */
  131:   DeselectText: function (x,y) {
  132:     if (jsMath.window.getSelection && jsMath.window.getSelection().removeAllRanges)
  133:       {jsMath.window.getSelection().removeAllRanges()}
  134:     else if (jsMath.document.getSelection && jsMath.document.getSelection().removeAllRanges)
  135:       {jsMath.document.getSelection().removeAllRanges()}
  136:     else if (jsMath.document.selection && jsMath.document.selection.empty)
  137:       {jsMath.document.selection.empty()}
  138:     else {
  139:       /* Hack to deselect the text in Opera and Safari */
  140:       if (jsMath.browser == 'MSIE') return;  // don't try it if MISE on Mac
  141:       jsMath.hiddenTop.innerHTML =
  142:         '<textarea style="visibility:hidden" rows="1" cols="1">a</textarea>';
  143:       jsMath.hiddenTop.firstChild.style.position = 'absolute';
  144:       jsMath.hiddenTop.firstChild.style.left = x+'px';
  145:       jsMath.hiddenTop.firstChild.style.top  = y+'px';
  146:       setTimeout(jsMath.Click.SelectHidden,1);
  147:     }
  148:   },
  149:   SelectHidden: function () {
  150:     jsMath.hiddenTop.firstChild.focus();
  151:     jsMath.hiddenTop.firstChild.select();
  152:     jsMath.hiddenTop.innerHTML = '';
  153:   },
  154: 
  155:   /*
  156:    *  Close the TeX source window
  157:    */
  158:   CloseSource: function () {
  159:     jsMath.Click.tex.innerHTML = '';
  160:     jsMath.Click.source.style.display = 'none';
  161:     jsMath.Click.source.style.visibility = 'hidden';
  162:     jsMath.Click.StopDragging();
  163:     return false;
  164:   },
  165:   CheckClose: function (event) {
  166:     if (!event) {event = jsMath.window.event}
  167:     if (event.altKey) {jsMath.Click.CloseSource(); return false}
  168:   },
  169:   
  170:   /*
  171:    *  Set up for dragging the source panel
  172:    */
  173:   StartDragging: function (event) {
  174:     if (!event) {event = jsMath.window.event}
  175:     if (jsMath.Click.dragging) {jsMath.Click.StopDragging(event)}
  176:     var event = jsMath.Click.Event(event);
  177:     jsMath.Click.dragging = 1;
  178:     jsMath.Click.x = event.x + 2*event.X - jsMath.Click.left;
  179:     jsMath.Click.y = event.y + 2*event.Y - jsMath.Click.top;
  180:     jsMath.Click.oldonmousemove = jsMath.document.body.onmousemove;
  181:     jsMath.Click.oldonmouseup = jsMath.document.body.onmouseup;
  182:     jsMath.document.body.onmousemove = jsMath.Click.DragSource;
  183:     jsMath.document.body.onmouseup = jsMath.Click.StopDragging;
  184:     return false;
  185:   },
  186:   
  187:   /*
  188:    *  Stop dragging the source window
  189:    */
  190:   StopDragging: function (event) {
  191:     if (jsMath.Click.dragging) {
  192:       jsMath.document.body.onmousemove = jsMath.Click.oldonmousemove;
  193:       jsMath.document.body.onmouseup   = jsMath.Click.oldonmouseup;
  194:       jsMath.Click.oldonmousemove = null;
  195:       jsMath.Click.oldonmouseup   = null;
  196:       jsMath.Click.dragging = 0;
  197:     }
  198:     return false;
  199:   },
  200:   
  201:   /*
  202:    *  Move the source window (but stay within the browser window)
  203:    */
  204:   DragSource: function (event) {
  205:     if (!event) {event = jsMath.window.event}
  206:     if (jsMath.Browser.buttonCheck && !event.button) {return jsMath.Click.StopDragging(event)}
  207:     event = jsMath.Click.Event(event);
  208:     var x = event.x + event.X - jsMath.Click.x;
  209:     var y = event.y + event.Y - jsMath.Click.y;
  210:     x = Math.max(event.X,Math.min(event.W+event.X-jsMath.Click.w,x));
  211:     y = Math.max(event.Y,Math.min(event.H+event.Y-jsMath.Click.h,y));
  212:     jsMath.Click.source.style.left = x + 'px';
  213:     jsMath.Click.source.style.top  = y + 'px';
  214:     jsMath.Click.left = x + event.X; jsMath.Click.top = y + event.Y;
  215:     return false;
  216:   }
  217: 
  218: });
  219: 
  220: jsMath.Click.Init();