plugins/gallery/canvas.js
changeset 18 c1c398349651
child 19 08bf8aa2f0ab
equal deleted inserted replaced
15:ac7d3dedcc44 18:c1c398349651
       
     1 var canvas_mousemove_temp;
       
     2 var canvas_keyup_temp;
       
     3 var CANVAS_KEY_ESC = 27;
       
     4 
       
     5 function canvas_click(obj)
       
     6 {
       
     7   var click_x = mouseX - $(obj).Left();
       
     8   var click_y = mouseY - $(obj).Top() + getScrollOffset();
       
     9   
       
    10   if ( obj.canvas_in_draw )
       
    11   {
       
    12     canvas_close_draw(obj, click_x, click_y);
       
    13   }
       
    14   else
       
    15   {
       
    16     canvas_open_draw(obj, click_x, click_y);
       
    17   }
       
    18 }
       
    19 
       
    20 function canvas_open_draw(obj, x, y)
       
    21 {
       
    22   obj.canvas_box_obj = canvas_create_box(obj, x, y, 1, 1);
       
    23   obj.canvas_in_draw = true;
       
    24   obj.onclick = function(e)
       
    25   {
       
    26     canvas_click(this);
       
    27     var onclose = this.getAttribute('canvas:oncomplete');
       
    28     if ( onclose )
       
    29     {
       
    30       eval(onclose);
       
    31     }
       
    32   }
       
    33   canvas_replace_mousemove(obj);
       
    34 }
       
    35 
       
    36 function canvas_replace_mousemove(obj)
       
    37 {
       
    38   canvas_mousemove_temp = document.onmousemove;
       
    39   canvas_mousemove_temp.box_obj = obj;
       
    40   canvas_keyup_temp = document.onkeyup;
       
    41   document.onmousemove = function(e)
       
    42   {
       
    43     canvas_mousemove_temp(e);
       
    44     canvas_redraw_box(canvas_mousemove_temp.box_obj);
       
    45   }
       
    46   document.onkeyup = function(e)
       
    47   {
       
    48     if ( typeof(canvas_keyup_temp) == 'function' )
       
    49       canvas_keyup_temp(e);
       
    50     
       
    51     if ( e.keyCode == CANVAS_KEY_ESC )
       
    52       canvas_cancel_draw(canvas_mousemove_temp.box_obj);
       
    53   }
       
    54 }
       
    55 
       
    56 function canvas_restore_mousemove()
       
    57 {
       
    58   document.onmousemove = canvas_mousemove_temp;
       
    59   document.onkeyup = canvas_keyup_temp;
       
    60 }
       
    61 
       
    62 function canvas_create_box(obj, x, y, width, height)
       
    63 {
       
    64   var inner_width = width - 2;
       
    65   var inner_height = height - 2;
       
    66   var top = $(obj).Top() + y;
       
    67   var left = $(obj).Left() + x;
       
    68   
       
    69   // draw outer box
       
    70   var div_outer = document.createElement('div');
       
    71   div_outer.className = 'canvasbox';
       
    72   div_outer.style.border = '1px solid #000000';
       
    73   div_outer.style.position = 'absolute';
       
    74   div_outer.style.width = String(width) + 'px';
       
    75   div_outer.style.height = String(height) + 'px';
       
    76   div_outer.style.top = String(top) + 'px';
       
    77   div_outer.style.left = String(left) + 'px';
       
    78   
       
    79   div_outer.rootY = y;
       
    80   div_outer.rootX = x;
       
    81   
       
    82   var div_inner = document.createElement('div');
       
    83   div_inner.style.border = '1px solid #FFFFFF';
       
    84   if ( IE )
       
    85   {
       
    86     div_inner.style.width = '1px';
       
    87     div_inner.style.height = '1px';
       
    88   }
       
    89   else
       
    90   {
       
    91     div_inner.style.width = String(inner_width) + 'px';
       
    92     div_inner.style.height = String(inner_height) + 'px';
       
    93   }
       
    94   
       
    95   div_outer.appendChild(div_inner);
       
    96   
       
    97   obj.appendChild(div_outer);
       
    98   return div_outer;
       
    99 }
       
   100 
       
   101 function canvas_redraw_box(obj)
       
   102 {
       
   103   if ( !obj.canvas_box_obj )
       
   104     return false;
       
   105   var rel_x = mouseX - $(obj).Left();
       
   106   var rel_y = mouseY - $(obj).Top() + getScrollOffset();
       
   107   var new_width = rel_x - obj.canvas_box_obj.rootX;
       
   108   var new_height = rel_y - obj.canvas_box_obj.rootY;
       
   109   var rootX = obj.canvas_box_obj.rootX;
       
   110   var rootY = obj.canvas_box_obj.rootY;
       
   111   // Limit dimensions to width - origin_x and height - origin_y
       
   112   if ( new_width + rootX > $(obj).Width() )
       
   113     new_width = $(obj).Width() - rootX;
       
   114   if ( new_height + rootY > $(obj).Height() )
       
   115     new_height = $(obj).Height() - rootY;
       
   116   // If going to the top or left of the origin, avoid negative width/height by moving the box
       
   117   if ( new_width < 1 )
       
   118   {
       
   119     new_width = rootX - rel_x;
       
   120     obj.canvas_box_obj.style.left = String(mouseX + 2) + 'px';
       
   121   }
       
   122   if ( new_height < 1 )
       
   123   {
       
   124     new_height = rootY - rel_y;
       
   125     obj.canvas_box_obj.style.top = String(mouseY + getScrollOffset() + 2) + 'px';
       
   126   }
       
   127   obj.canvas_box_obj.style.width = String(new_width) + 'px';
       
   128   obj.canvas_box_obj.style.height = String(new_height) + 'px';
       
   129   new_width = new_width - 2;
       
   130   new_height = new_height - 2;
       
   131   if ( IE )
       
   132   {
       
   133     var nw = new_width;
       
   134     var nh = new_height;
       
   135     obj.canvas_box_obj.firstChild.style.width = String(nw) + 'px';
       
   136     obj.canvas_box_obj.firstChild.style.height = String(nh) + 'px';
       
   137   }
       
   138   else
       
   139   {
       
   140     obj.canvas_box_obj.firstChild.style.width = String(new_width) + 'px';
       
   141     obj.canvas_box_obj.firstChild.style.height = String(new_height) + 'px';
       
   142   }
       
   143 }
       
   144 
       
   145 function canvas_close_draw(obj, x, y)
       
   146 {
       
   147   canvas_restore_mousemove();
       
   148   obj.canvas_in_draw = false;
       
   149   obj.canvas = {
       
   150     top: $(obj.canvas_box_obj).Top() - $(obj).Top(),
       
   151     left: $(obj.canvas_box_obj).Left() - $(obj).Left(),
       
   152     width: $(obj.canvas_box_obj).Width(),
       
   153     height: $(obj.canvas_box_obj).Height()
       
   154   }
       
   155   obj.onclick = function(e)
       
   156   {
       
   157     canvas_click(this);
       
   158   }
       
   159 }
       
   160 
       
   161 function canvas_cancel_draw(obj)
       
   162 {
       
   163   canvas_restore_mousemove();
       
   164   obj.canvas_in_draw = false;
       
   165   obj.removeChild(obj.canvas_box_obj);
       
   166   obj.canvas_box_obj = null;
       
   167   obj.onclick = function(e)
       
   168   {
       
   169     canvas_click(this);
       
   170   }
       
   171   var ga = obj.getAttribute('canvas:oncancel');
       
   172   if ( ga )
       
   173   {
       
   174     eval(ga);
       
   175   }
       
   176 }
       
   177