[OpenLayers-Commits] r5656 - in sandbox/tschaub/scalebar: lib/OpenLayers/Control theme/default
commits at openlayers.org
commits at openlayers.org
Sun Jan 6 14:09:43 EST 2008
Author: tschaub
Date: 2008-01-06 14:09:43 -0500 (Sun, 06 Jan 2008)
New Revision: 5656
Modified:
sandbox/tschaub/scalebar/lib/OpenLayers/Control/ScaleBar.js
sandbox/tschaub/scalebar/theme/default/style.css
Log:
tidying up
Modified: sandbox/tschaub/scalebar/lib/OpenLayers/Control/ScaleBar.js
===================================================================
--- sandbox/tschaub/scalebar/lib/OpenLayers/Control/ScaleBar.js 2008-01-05 02:18:28 UTC (rev 5655)
+++ sandbox/tschaub/scalebar/lib/OpenLayers/Control/ScaleBar.js 2008-01-06 19:09:43 UTC (rev 5656)
@@ -67,7 +67,6 @@
/**
* APIProperty: abbreviateLabel
* {Boolean} Show abbreviated measurement unit (ft, km). Default is false.
- * @type Boolean
*/
abbreviateLabel: false,
@@ -104,6 +103,70 @@
},
/**
+ * Property: limitedStyle
+ * {Boolean} For browsers with limited CSS support, limitedStyle will be
+ * set to true. In addition, this property can be set to true in the
+ * options sent to the constructor. If true scale bar element offsets
+ * will be determined based on the <defaultStyles> object.
+ */
+ limitedStyle: false,
+
+ /**
+ * Property: customStyle
+ * {Object} For cases where <limitedStyle> is true, a customStyle property
+ * can be set on the options sent to the constructor. The
+ * <defaultStyles> object will be extended with this custom style
+ * object.
+ */
+ customStyles: null,
+
+ /**
+ * Property: defaultStyles
+ * {Object} For cases where <limitedStyle> is true, default scale bar
+ * element offsets are taken from this object. Values correspond to
+ * pixel dimensions given in the stylesheet.
+ */
+ defaultStyles: {
+ Bar: {
+ height: 11, top: 12,
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ },
+ BarAlt: {
+ height: 11, top: 12,
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ },
+ MarkerMajor: {
+ height: 13, width: 13, top: 12,
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ },
+ MarkerMinor: {
+ height: 13, width: 13, top: 12,
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ },
+ NumbersBox: {
+ height: 13, width: 40, top: 24
+ },
+ LabelBox: {
+ height: 15, top: -2
+ },
+ LabelBoxSingleLine: {
+ height: 15, width: 35, top: 5, left: 10
+ }
+ },
+
+ /**
+ * Property: appliedStyles
+ * For cases where <limitedStyle> is true, scale bar element offsets will
+ * be determined based on <defaultStyles> extended with any
+ * <customStyles>.
+ */
+ appliedStyles: null,
+
+ /**
* Constructor: OpenLayers.Control.ScaleBar
* Create a new scale bar instance.
*
@@ -113,6 +176,13 @@
*/
initialize: function(options) {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
+ if(!document.styleSheets) {
+ this.limitedStyle = true;
+ }
+ if(this.limitedStyle) {
+ this.appliedStyles = OpenLayers.Util.extend({}, this.defaultStyles);
+ OpenLayers.Util.extend(this.appliedStyles, this.customStyles);
+ }
// create scalebar DOM elements
this.element = document.createElement('div');
this.element.style.position = 'relative';
@@ -127,15 +197,9 @@
this.numbersContainer = document.createElement('div');
this.numbersContainer.style.position = 'absolute';
this.numbersContainer.className = this.displayClass + 'Numbers';
- // put in some markers and bar pieces so style attributes can be grabbed
- // this is a solution for Safari support
- var classArray = ['MarkerMajor', 'MarkerMinor', 'Bar', 'BarAlt',
- 'NumbersBox', 'LabelBox', 'LabelBoxSingleLine'];
- for(classIndex = 0; classIndex < classArray.length; ++classIndex) {
- var anElement = document.createElement('div');
- anElement.className = this.diplayClass + classArray[classIndex];
- this.graphicsContainer.appendChild(anElement);
- }
+ this.element.appendChild(this.graphicsContainer);
+ this.element.appendChild(this.labelContainer);
+ this.element.appendChild(this.numbersContainer);
},
/**
@@ -155,12 +219,6 @@
this.xOffsetBarAlt = (this.styleValue('BarAlt', 'borderLeftWidth') +
this.styleValue('BarAlt', 'borderRightWidth')) / 2;
this.xOffsetNumbersBox = (this.styleValue('NumbersBox', 'width')) / 2;
- // support for browsers without the Document.styleSheets property (Opera)
- if(!document.styleSheets) {
- // this is a two part hack, one for the offsets here and one for the css below
- this.xOffsetMarkerMajor = 0.5;
- this.xOffsetMarkerMinor = 0.5;
- }
// set scale bar element height
var classNames = ['Bar', 'BarAlt', 'MarkerMajor', 'MarkerMinor'];
if(this.singleLine) {
@@ -278,15 +336,9 @@
}
}
// clean out any old content from containers
- while(this.labelContainer.hasChildNodes()) {
- this.labelContainer.removeChild(this.labelContainer.firstChild);
- }
- while(this.graphicsContainer.hasChildNodes()) {
- this.graphicsContainer.removeChild(this.graphicsContainer.firstChild);
- }
- while(this.numbersContainer.hasChildNodes()) {
- this.numbersContainer.removeChild(this.numbersContainer.firstChild);
- }
+ this.labelContainer.innerHTML = "";
+ this.graphicsContainer.innerHTML = "";
+ this.numbersContainer.innerHTML = "";
// create all divisions
var aMarker, aBarPiece, numbersBox, xOffset;
var alignmentOffset = {
@@ -434,70 +486,57 @@
}
labelBox.appendChild(document.createTextNode(labelText));
this.labelContainer.appendChild(labelBox);
- // support for browsers without the Document.styleSheets property (Opera)
- if(!document.styleSheets) {
- // override custom css with default
- var defaultStyle = document.createElement('style');
- defaultStyle.type = 'text/css';
- var styleText = '.olControlScaleBarBar {top: 12px; background: #666666; height: 1px; border: 0;}';
- styleText += '.olControlScaleBarBarAlt {top: 12px; background: #666666; height: 1px; border: 0;}';
- styleText += '.olControlScaleBarMarkerMajor {top: 12px; height: 7px; width: 1px; background: #666666; border: 0;}';
- styleText += '.olControlScaleBarMarkerMinor {top: 12px; height: 5px; width: 1px; background: #666666; border: 0;}';
- styleText += '.olControlScaleBarLabelBox {top: -5px; height: 15px; font-size: 13px; color: #333333; font-variant: small-caps;}';
- styleText += '.olControlScaleBarNumbersBox {top: 19px; font-size: 11px; width: 40px; height: 15px; color: #333333;}';
- defaultStyle.appendChild(document.createTextNode(styleText));
- document.getElementsByTagName('head').item(0).appendChild(defaultStyle);
- }
- // append the child containers to the parent element
- this.element.appendChild(this.graphicsContainer);
- this.element.appendChild(this.labelContainer);
- this.element.appendChild(this.numbersContainer);
},
/**
+ * Method: styleValue
* Get an integer value associated with a particular selector and key.
- * Given a stylesheet with .someSelector {border: 2px solid red},
- * styleValue('.someSelector', 'borderWidth') returns 2
- * @type Int
- * @private
+ * Given a stylesheet with .displayClassSomeSelector {border: 2px solid red},
+ * styleValue('SomeSelector', 'borderWidth') returns 2
+ *
+ * Returns:
+ * {Integer} A value associated with a style selector/key combo.
*/
- styleValue: function(aSelector, styleKey) {
- aSelector = "." + this.displayClass + aSelector;
- var aValue = 0;
- if(document.styleSheets) {
- for(var sheetIndex = document.styleSheets.length - 1; sheetIndex >= 0; --sheetIndex) {
- var aSheet = document.styleSheets[sheetIndex];
- if(!aSheet.disabled) {
+ styleValue: function(selector, key) {
+ var value = 0;
+ if(this.limitedStyle) {
+ value = this.appliedStyles[selector][key];
+ } else {
+ selector = "." + this.displayClass + selector;
+ for(var i = document.styleSheets.length - 1; i >= 0; --i) {
+ var sheet = document.styleSheets[i];
+ if(!sheet.disabled) {
var allRules;
try {
- if(typeof(aSheet.cssRules) == 'undefined') {
- if(typeof(aSheet.rules) == 'undefined') {
+ if(typeof(sheet.cssRules) == 'undefined') {
+ if(typeof(sheet.rules) == 'undefined') {
// can't get rules, assume zero
- return 0;
+ break;
}
else {
- allRules = aSheet.rules;
+ allRules = sheet.rules;
}
}
else {
- allRules = aSheet.cssRules;
+ allRules = sheet.cssRules;
}
} catch(err) {
- return 0;
+ break;
}
for(var ruleIndex = 0; ruleIndex < allRules.length; ++ruleIndex) {
- var aRule = allRules[ruleIndex];
- if(aRule.selectorText && (aRule.selectorText.toLowerCase() == aSelector.toLowerCase())) {
- if(aRule.style[styleKey] != '') {
- aValue = parseInt(aRule.style[styleKey]);
+ var rule = allRules[ruleIndex];
+ if(rule.selectorText &&
+ (rule.selectorText.toLowerCase() == selector.toLowerCase())) {
+ if(rule.style[key] != '') {
+ value = parseInt(rule.style[key]);
}
}
}
}
}
}
- // if the styleKey was not found, the equivalent value is zero
- return aValue ? aValue : 0;
+ // if the key was not found, the equivalent value is zero
+ return value ? value : 0;
},
/**
@@ -532,49 +571,46 @@
* Attempts to generate a nice looking number.
*
* Parameters:
- * smallUglyNumber - {Float}
- * bigUglyNumber - {Float}
+ * small - {Float}
+ * big - {Float}
* sigFigs - {Integer}
*/
- getHandsomeNumber: function(smallUglyNumber, bigUglyNumber, sigFigs) {
+ getHandsomeNumber: function(small, big, sigFigs) {
sigFigs = (sigFigs == null) ? 10 : sigFigs;
var bestScore = Number.POSITIVE_INFINITY;
var bestTieBreaker = Number.POSITIVE_INFINITY;
// if all else fails, return a small ugly number
- var handsomeValue = smallUglyNumber;
+ var handsomeValue = small;
var handsomeNumDec = 3;
// try the first three comely multiplicands (in order of comliness)
for(var halvingExp = 0; halvingExp < 3; ++halvingExp) {
- var comelyMultiplicand = Math.pow(2, (-1 * halvingExp));
- var maxTensExp = Math.floor(Math.log(bigUglyNumber /
- comelyMultiplicand) / Math.LN10);
- for(var tensExp = maxTensExp;
- tensExp > (maxTensExp - sigFigs + 1); --tensExp) {
- var numDec = Math.max(halvingExp - tensExp, 0);
- var testMultiplicand = comelyMultiplicand *
- Math.pow(10, tensExp);
- // check if there is an integer multiple of testMultiplicand
- // between smallUglyNumber and bigUglyNumber
- if((testMultiplicand * Math.floor(bigUglyNumber /
- testMultiplicand)) >= smallUglyNumber) {
- // check if smallUglyNumber is an integer multiple of testMultiplicand
- if(smallUglyNumber % testMultiplicand == 0) {
- var testMultiplier = smallUglyNumber / testMultiplicand;
+ var cmult = Math.pow(2, (-1 * halvingExp));
+ var maxTensExp = Math.floor(Math.log(big / cmult) / Math.LN10);
+ for(var texp = maxTensExp; texp > (maxTensExp - sigFigs + 1); --texp) {
+ var numDec = Math.max(halvingExp - texp, 0);
+ var tmult = cmult * Math.pow(10, texp);
+ // check if there is an integer multiple of tmult
+ // between small and big
+ if((tmult * Math.floor(big /
+ tmult)) >= small) {
+ // check if small is an integer multiple of tmult
+ if(small % tmult == 0) {
+ var testMultiplier = small / tmult;
}
// otherwise go for the smallest integer multiple between small and big
else {
- var testMultiplier = Math.floor(smallUglyNumber /
- testMultiplicand) + 1;
+ var testMultiplier = Math.floor(small /
+ tmult) + 1;
}
// test against the best (lower == better)
var testScore = testMultiplier + (2 * halvingExp);
- var testTieBreaker = (tensExp < 0) ?
- (Math.abs(tensExp) + 1) : tensExp;
+ var testTieBreaker = (texp < 0) ?
+ (Math.abs(texp) + 1) : texp;
if((testScore < bestScore) || ((testScore == bestScore) &&
(testTieBreaker < bestTieBreaker))) {
bestScore = testScore;
bestTieBreaker = testTieBreaker;
- handsomeValue = (testMultiplicand *
+ handsomeValue = (tmult *
testMultiplier).toFixed(numDec);
handsomeNumDec = numDec;
}
Modified: sandbox/tschaub/scalebar/theme/default/style.css
===================================================================
--- sandbox/tschaub/scalebar/theme/default/style.css 2008-01-05 02:18:28 UTC (rev 5655)
+++ sandbox/tschaub/scalebar/theme/default/style.css 2008-01-06 19:09:43 UTC (rev 5656)
@@ -171,40 +171,34 @@
filter: alpha(opacity=50);
}
-.olControlScaleBarWrapper {
+.olControlScaleBar {
+ bottom: 10px;
font-family: sans-serif;
- color: #ffffff;
-}
-.olControlScaleBarWrapperHover {
color: #00008B;
}
-.olControlScaleBar {
- bottom: 10px;
-}
-
.olControlScaleBarBar {
+ height: 11px;
top: 12px;
background-color: #00008B;
background-image: url('img/scalebar-bar.png');
background-position: 0 0;
background-repeat: repeat-x;
- height: 11px;
}
.olControlScaleBarBarAlt {
+ height: 11px;
top: 12px;
background-color: #00008B;
background-image: url('img/scalebar-bar.png');
background-position: 0 0;
background-repeat: repeat-x;
- height: 11px;
}
.olControlScaleBarMarkerMajor {
- top: 12px;
height: 13px;
width: 13px;
+ top: 12px;
background-image: url('img/scalebar-marker.png');
background-position: 0 0;
background-repeat: no-repeat;
@@ -212,9 +206,9 @@
}
.olControlScaleBarMarkerMinor {
- top: 12px;
height: 13px;
width: 13px;
+ top: 12px;
background-image: url('img/scalebar-marker.png');
background-position: 0 0;
background-repeat: no-repeat;
@@ -222,25 +216,25 @@
}
.olControlScaleBarNumbersBox {
+ height: 13px;
+ width: 40px;
top: 24px;
font-size: 9px;
- width: 40px;
- height: 13px;
}
.olControlScaleBarLabelBox {
- top: -2px;
height: 15px;
+ top: -2px;
font-size: 11px;
font-weight: bold;
letter-spacing: 0.1em;
}
.olControlScaleBarLabelBoxSingleLine {
+ height: 15px;
+ width: 35px;
top: 5px;
left: 10px;
- width: 35px;
- height: 15px;
font-size: 13px;
}
More information about the Commits
mailing list