Permalink
Browse files

added z-index option + lockable overlays + upped the version for ff4

  • Loading branch information...
Mike Buckley
Mike Buckley committed Jan 9, 2011
1 parent f7dd75e commit 7b8000dfbf6f9348c1a5eb3a4043338ce5090613
View
@@ -1,17 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
- <name>pixelperfect</name>
+ <name>PixelPerfect</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
- <buildCommand>
- <name>org.xulbooster.eclipse.xb.xulBuilder</name>
- <arguments>
- </arguments>
- </buildCommand>
</buildSpec>
<natures>
- <nature>org.xulbooster.eclipse.xb.xulNature</nature>
+ <nature>com.aptana.projects.webnature</nature>
</natures>
</projectDescription>
@@ -95,14 +95,14 @@ FBL.ns(function() {
},
pixelPerfectHelp: function(menuitem) {
- if ("Pixel Pefect FAQ" == menuitem.label) {
- gBrowser.selectedTab = gBrowser.addTab("http://www.pixelperfectplugin.com/faqs");
+ if ("Pixel Perfect Home" == menuitem.label) {
+ gBrowser.selectedTab = gBrowser.addTab("http://openhouseconcept.com/projects/pixelperfect/");
}
- else if ("Send Feedback" == menuitem.label) {
- gBrowser.selectedTab = gBrowser.addTab("http://www.pixelperfectplugin.com/contact");
+ else if ("File an issue" == menuitem.label) {
+ gBrowser.selectedTab = gBrowser.addTab("https://github.com/openhouseconcept/PixelPerfect/issues");
}
- else if ("Pixel Perfect Home" == menuitem.label) {
- gBrowser.selectedTab = gBrowser.addTab("http://www.pixelperfectplugin.com");
+ else if ("Send Feedback" == menuitem.label) {
+ gBrowser.selectedTab = gBrowser.addTab("http://openhouseconcept.com/projects/pixelperfect/contact");
}
}
});
@@ -123,10 +123,12 @@ FBL.ns(function() {
var existingEle = this.document.getElementById("pixelperfect-wrapper");
if(existingEle != undefined) {
doc.removeChild(existingEle);
+ existingEle.parentNode.removeChild(existingEle);
}
this.panelNode = doc.createElement("div");
this.panelNode.setAttribute("id", "pixelperfect-wrapper");
+ this.panelNode.setAttribute("class", "container_12");
this.panelNode.ownerPanel = this;
this.panelNode.innerHTML = pixelPerfect.fileUtils.readPanelHTML();
doc.body.appendChild(this.panelNode);
@@ -11,6 +11,7 @@
var Drag = {
obj : null,
+ disabled : false,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
@@ -41,75 +42,81 @@ var Drag = {
start : function(e)
{
- var o = Drag.obj = this;
- e = Drag.fixE(e);
- var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
- var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
- o.root.onDragStart(x, y);
-
- o.lastMouseX = e.clientX;
- o.lastMouseY = e.clientY;
-
- if (o.hmode) {
- if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
- if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
- } else {
- if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
- if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
- }
-
- if (o.vmode) {
- if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
- if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
- } else {
- if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
- if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
- }
-
- document.onmousemove = Drag.drag;
- document.onmouseup = Drag.end;
+ if(!Drag.disabled) {
+ var o = Drag.obj = this;
+ e = Drag.fixE(e);
+ var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
+ var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
+ o.root.onDragStart(x, y);
+
+ o.lastMouseX = e.clientX;
+ o.lastMouseY = e.clientY;
+
+ if (o.hmode) {
+ if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
+ if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
+ } else {
+ if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
+ if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
+ }
+
+ if (o.vmode) {
+ if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
+ if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
+ } else {
+ if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
+ if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
+ }
+
+ document.onmousemove = Drag.drag;
+ document.onmouseup = Drag.end;
+ }
return false;
},
drag : function(e)
{
- e = Drag.fixE(e);
- var o = Drag.obj;
-
- var ey = e.clientY;
- var ex = e.clientX;
- var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
- var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
- var nx, ny;
-
- if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
- if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
- if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
- if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
-
- nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
- ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
-
- if (o.xMapper) nx = o.xMapper(y)
- else if (o.yMapper) ny = o.yMapper(x)
-
- Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
- Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
- Drag.obj.lastMouseX = ex;
- Drag.obj.lastMouseY = ey;
-
- Drag.obj.root.onDrag(nx, ny);
+ if(!Drag.disabled) {
+ e = Drag.fixE(e);
+ var o = Drag.obj;
+
+ var ey = e.clientY;
+ var ex = e.clientX;
+ var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
+ var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
+ var nx, ny;
+
+ if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
+ if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
+ if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
+ if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
+
+ nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
+ ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
+
+ if (o.xMapper) nx = o.xMapper(y)
+ else if (o.yMapper) ny = o.yMapper(x)
+
+ Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
+ Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
+ Drag.obj.lastMouseX = ex;
+ Drag.obj.lastMouseY = ey;
+
+ Drag.obj.root.onDrag(nx, ny);
+ }
return false;
},
end : function()
{
- document.onmousemove = null;
- document.onmouseup = null;
- Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
- parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
- Drag.obj = null;
+ if(!Drag.disabled) {
+ document.onmousemove = null;
+ document.onmouseup = null;
+ Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
+ parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
+ Drag.obj = null;
+ }
},
fixE : function(e)
@@ -10,7 +10,7 @@ pixelPerfect.publicDocument = function () {
// public
return {
- notifyPanelOverlayPositionHasChanged: function() {
+ notifyPanelOverlayPositionHasChanged: function(overlayLocked) {
if ("createEvent" in document) {
var element = document.getElementById("ppoc");
if (element == null) {
@@ -26,7 +26,7 @@ pixelPerfect.publicDocument = function () {
element.dispatchEvent(evt);
}
},
- notifyToSaveLastPosition: function() {
+ notifyToSaveLastPosition: function(overlayLocked) {
if ("createEvent" in document) {
var element = document.getElementById("ppoc");
if (element == null) {
@@ -20,7 +20,6 @@ pixelPerfect.fileUtils = function () {
} catch (e) {
alert("error");
}
-
// determine the file-separator
if (path.search(/\\/) != -1) {
this.initializeDirectorySeperator("\\");
@@ -89,28 +88,31 @@ pixelPerfect.fileUtils = function () {
// file is the given directory (nsIFile)
var entries = file.directoryEntries;
- var array = [];
+ var overlayArr = [];
while(entries.hasMoreElements())
{
var entry = entries.getNext();
entry.QueryInterface(Components.interfaces.nsIFile);
if(entry.isFile()) {
var filePath = entry.path;
- var justFileName = filePath.substring(filePath.lastIndexOf(this.directorySeperator) + 1, filePath.length);
- if(justFileName != ".leave") {
- array.push(justFileName);
+ var fileName = filePath.split(this.directorySeperator).pop();
+ if(fileName !== ".leave") {
+ overlayArr.push(fileName);
}
}
}
- return array;
+ return overlayArr;
},
getUserOverlayPath: function() {
- return this.firefoxProfileRootFolder() + 'extensions' + this.directorySeperator + 'pixelperfectplugin@openhouseconcepts.com' + this.directorySeperator + 'chrome' + this.directorySeperator + 'pixelperfect' + this.directorySeperator + 'content' + this.directorySeperator + 'user_overlays' + this.directorySeperator;
+ //return this.firefoxProfileRootFolder() + 'extensions' + this.directorySeperator + 'pixelperfectplugin@openhouseconcepts.com' + this.directorySeperator + 'chrome' + this.directorySeperator + 'pixelperfect' + this.directorySeperator + 'content' + this.directorySeperator + 'user_overlays' + this.directorySeperator;
+ return '/home/mbuckley/firefox_addons/PixelPerfect/srcExtension/chrome/pixelperfect/content/user_overlays/';
},
getContentRootFolder: function() {
- return this.firefoxProfileRootFolder() + 'extensions' + this.directorySeperator + 'pixelperfectplugin@openhouseconcepts.com' + this.directorySeperator + 'chrome' + this.directorySeperator + 'pixelperfect' + this.directorySeperator + 'content';
+ this.firefoxProfileRootFolder();
+ //return this.firefoxProfileRootFolder() + 'extensions' + this.directorySeperator + 'pixelperfectplugin@openhouseconcepts.com' + this.directorySeperator + 'chrome' + this.directorySeperator + 'pixelperfect' + this.directorySeperator + 'content';
+ return '/home/mbuckley/firefox_addons/PixelPerfect/srcExtension/chrome/pixelperfect/content/';
},
readPanelHTML: function() {
@@ -1,31 +1,40 @@
-<div id="comp">
- <h2>Layer Comps</h2>
+<div id="comp" class="grid_4">
+ <h2>Overlays</h2>
<div id="overlay-scroll">
<ul id="overlay-list"></ul>
</div>
</div>
-<div id="options">
- <h2>Layer Comp Options</h2>
+<div id="options" class="grid_3">
+ <h2>Options</h2>
<h3>Opacity</h3>
<div id="opacity-toggle">
<div id="ctl-opacity-down" class="bt-left" onclick="pixelPerfect.panelActions.decreaseOpacity();"></div>
<div class="numbers" id="ctl-opacity-numbers">0.5</div>
<div id="ctl-opacity-up" class="bt-right" onclick="pixelPerfect.panelActions.increaseOpacity();"></div>
</div>
+ <hr />
<h3>Position (try dragging)</h3>
- <div id="opacity-toggle">
+ <div id="position-toggle-y">
<div class="bt-left" onclick="pixelPerfect.panelActions.leftArrowMove();"></div>
<div id="ctl-left-position" class="numbers">0</div>
<div class="bt-right" onclick="pixelPerfect.panelActions.rightArrowMove();"></div>
</div>
- <div id="position-toggle">
+ <div id="position-toggle-x">
<div class="bt-up" onclick="pixelPerfect.panelActions.topArrowMove();"></div>
<div id="ctl-top-position" class="numbers">0</div>
<div class="bt-down" onclick="pixelPerfect.panelActions.bottomArrowMove();"></div>
</div>
+ <div id="position-lock">
+ <input type="checkbox" name="position-lock" id="position-lock-chk" onclick="pixelPerfect.panelActions.togglePositionLock(this);" /><h3>Lock?</h3>
+ </div>
+ <hr />
+ <div id="zindex-settings">
+ <h3>Z-Index</h3>
+ <input type="text" value="1000" id="z-index-input" /> <button name="set-z-index" id="set-z-index-btn" onclick="pixelPerfect.panelActions.updateZIndex(document.getElementById('z-index-input'));">Update</button>
+ </div>
</div>
-<div id="info">
- <h2>Get Started</h2>
+<div id="info" class="grid_5">
+ <h2>Getting Started</h2>
<p>
Pixel Perfect is a firefox firebug extension that allows web developers to easily overlay a web composition over top of the developed html.
Switching the composition on and off allows the developer to see how many pixels they are off while in development.</p>
Oops, something went wrong.

0 comments on commit 7b8000d

Please sign in to comment.