WordPress.org
Get WordPress

Plugin Directory

Changeset 486830


Ignore:
Timestamp:
01/09/2012 12:25:31 PM (14 years ago)
Author:
codeblab
Message:

Started on margin in CSS messesup the coordinates problem.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • glass/trunk/glass.js

    r481324 r486830  
     1//
     2//  // Try to find the margins on all parent of the image.
     3//  o = obj;
     4//  do {
     5//    o = o.parentNode;
     6//
     7//    // Get the marginLeft, marginTop.
     8//    //
     9//    if (o.currentStyle) { // CSS style for IE & Opera
     10//      mleft  = o.currentStyle['margin-left'];
     11//      mtop   = o.currentStyle['margin-top'];
     12//    }
     13//    else if (window.getComputedStyle) { // CSS style for Firefox
     14//      style  = document.defaultView.getComputedStyle(o, null);
     15//      mleft  = style.getPropertyValue('margin-left');
     16//      mtop   = style.getPropertyValue('margin-top');
     17//    }
     18//
     19//    if (mleft != '0px' || mtop != '0px') { 
     20//      // Use dummyImg to convert the strings to pixel counts.
     21//      //
     22//      with(document.body.glass.my.dummyImg) {
     23//        style.width   = mleft;
     24//        style.height  = mtop;
     25//        o.absoluteX   += width;
     26//        o.absoluteY   += height;
     27//     
     28//  alert("t,l " + mleft + "," + mtop + " = " + width + "," + height);
     29//      }
     30//    }
     31// 
     32//  } while (o && o.tagName.toLowerCase() != 'body');
     33//
     34//
     35
     36
    137/////////////////////////////////////////////////////////////////////////////
    238//
    … …  
    169205} 
    170206
     207
     208
    171209// AddAbsoluteXY: Add absoluteX and Y to properties of object.
    172210//
    … …  
    180218  obj.absoluteY  = 0;
    181219
    182   while (o && o.offsetParent) {
     220  while (o) { // && o.offsetParent) {
    183221    obj.absoluteX += o.offsetLeft;
    184222    obj.absoluteY += o.offsetTop;
    … …  
    265303  borderTop  = borderBottom = '0';
    266304
    267   // Get the Left, Tip, Right, and Bottom widths from the style.
     305  // Get the Left, Top, Right, and Bottom widths from the style.
    268306  //
    269307  if (obj.currentStyle) { // CSS style for IE & Opera
    … …  
    510548    style.maxHeight  = 'none';
    511549  }
    512   document.body.appendChild(dummyImg);
     550  document.body.glass.my.parent.appendChild(dummyImg);
    513551  return dummyImg;
    514552}
    … …  
    655693  node    = null;
    656694
    657   if(event.touches.length == 2) {
     695  if (touches.length == 2) {
    658696    // Find the lowres image.
    659697    if (touches[0].target)
    … …  
    666704      glassTouchSetSize(event);
    667705      myevent = new Object();
    668       myevent.pageX = (event.touches[0].pageX + event.touches[1].pageX) / 2;
    669       myevent.pageY = (event.touches[0].pageY + event.touches[1].pageY) / 2;
     706      myevent.pageX = (touches[0].pageX + touches[1].pageX) / 2;
     707      myevent.pageY = (touches[0].pageY + touches[1].pageY) / 2;
    670708      glassStart(node, myevent);
    671709    }
    … …  
    677715function glassTouchEnd(event)
    678716{
    679   if(event.touches.length < 2)
     717  if (event.touches.length < 2)
    680718     document.body.glass.style.display = "none";
    681719}
    … …  
    684722// <img> and a text <p> inside.
    685723//
    686 function glassSetup()
     724function glassSetup(parent)
    687725{
    688726  // Create the glass as a div object.
    689727  glass = document.body.glass = document.createElement("div");
    690728  document.body.glass.my = new Object();
     729  document.body.glass.my.parent = parent;
    691730
    692731  // Since a double click also causes at least one (single) click
    … …  
    814853
    815854  // Add the glass to the document.
    816   document.body.appendChild(glass);
     855  parent.appendChild(glass);
    817856
    818857  // Add some functionality to the glass here.
    … …  
    9741013function glassCreate(size)
    9751014{
    976   glassSetup();      // Note a Resize is needed after this.
    977   glassResize(size); // Resize can be called again and again.
    978   if (gGlassRimPath == '') {
    979     glassSetRGB(document.myrtheGlassRimRGB || 'FF3300');
    980   }
    9811015}
    9821016
    … …  
    10091043// none, so this probably won't break anything.
    10101044//
    1011 function glassInit()
     1045
     1046
     1047
     1048
     1049function insertGlass(parent)
    10121050{
    10131051  // Set the path to the rim images.
    10141052  gGlassRimPath = (document.myrtheGlassRimPath || '');
    10151053
    1016   // Actually create the glass.
    1017   glassCreate(document.myrtheGlassDefaultSize || 5);
    1018 
     1054  // Create the glass a resize is needed to complete the setup.
     1055  glassSetup(parent || document.body);
     1056  glassResize(document.myrtheGlassDefaultSize || 5);
     1057
     1058  // If a user selectable color is used, set it.
     1059  if (gGlassRimPath == '') {
     1060    glassSetRGB(document.myrtheGlassRimRGB || 'FF3300');
     1061  }
     1062}
     1063
     1064
     1065
     1066// ActivateImage: make the image react to a touchstart or mouseover
     1067// and start loading the hires image.
     1068//
     1069function activateImage(img)
     1070{
     1071  if ('ontouchstart' in img)
     1072    img.ontouchstart = glassTouchStart;     // iOS/Safari hook.
     1073  else
     1074    img.onmouseover = glassMouseStart;      // Turn on the glass.
     1075
     1076  cc = 0;
     1077  if (!document.body.glass) {
     1078    parent = img;
     1079    while(parent.tagName.toLowerCase() !='body') {
     1080        parent = parent.parentNode;
     1081        cc += 1;
     1082    }
     1083    parent = document.body;
     1084    insertGlass(parent);
     1085    alert("Took " + cc + " parents.");
     1086  }
     1087
     1088  img.hires.preload = createDummyImage(img.hires.URL);  // Preload.
     1089  img.hires.preload.onload = glassRefresh;  // Hide "Loading." layer.
     1090}
     1091
     1092
     1093function glassInit()
     1094{
    10191095  // Loop through all the images on the page.
    10201096  a_img = document.getElementsByTagName("img");
    … …  
    10351111    img.hires = new Object();
    10361112        img.hires.URL     = img.parentNode.href;
    1037     img.hires.preload = createDummyImage(img.hires.URL);  // Preload.
    1038         img.hires.preload.onload = glassRefresh;  // Hide "Loading." layer.
    1039     if ('ontouchstart' in img)
    1040       img.ontouchstart = glassTouchStart;     // iOS/Safari hook.
    1041     else
    1042       img.onmouseover = glassMouseStart;      // Turn on the glass.
     1113
     1114        activateImage(img);
    10431115      }
    10441116      else if (document.myrtheGlassDx && document.myrtheGlassDy) {
    … …  
    10651137            img.hires.URL = am[1] + '-'+dx+'x'+dy + am[3];
    10661138      }
    1067       img.hires.preload = createDummyImage(img.hires.URL);  // Preload.
    1068           img.hires.preload.onload = glassRefresh;  // Hide "Loading." layer.
    1069       if ('ontouchstart' in img)
    1070         img.ontouchstart = glassTouchStart;     // iOS/Safari hook.
    1071       else
    1072             img.onmouseover = glassMouseStart;      // Turn on the glass.
     1139
     1140      activateImage(img);
    10731141
    10741142          // Since an image can be either dx,dy or dy,dx sized,
Note: See TracChangeset for help on using the changeset viewer.