1 /* 2 * Release: 1.3.1 2009-04-26 3 */ 4 /* 5 * Copyright (c) Andr?e Hansson (peolanha AT gmail DOT com) 6 * MIT License - http://www.opensource.org/licenses/mit-license.php 7 * Idea loosely based on JASH, http://billyreisinger.com/jash/ 8 * 9 * Website: http://gridder.andreehansson.se/ 10 * 11 * Changelog: 12 * - New GUI! The new GUI should be less obtrusive and has been repositioned. 13 * It is also featuring a slight delay on inputs so that you'll have a chance 14 * to change the settings before it is re-rendering the grid 15 * - Due to a lot of inquries regarding affiliation with jQuery the filenames has 16 * been changed, I'm very sorry for the inconvenience! 17 * - CSS issues with the GUI should also be fixed in more websites, please report 18 * in any issue you stumble upon 19 * - A small bug in IE that made the paragraph lines not position correctly has been 20 * fixed 21 * - A dropdown box has replaced the columns input box, 960 Gridder calculates the 22 * proper number of columns that can be used with the specified grid width 23 * - The 960 Gridder is now displaying perfectly (into the very pixels) in all 24 * A-grade browsers (according to browsershots.org) 25 * - An option to invert the gutters has been added, set this to 'true' if 26 * you want to use it, OR use the shortcut CTRL+ALT+A 27 * - Some other minor changes... 28 */ 29 function Grid() { 30 var c = this; 31 c.settingsDef = { 32 urlBase: "http://gridder.andreehansson.se/releases/1.3.1/", 33 gColor: "#EEEEEE", 34 gColumns: 12, 35 gOpacity: 0.45, 36 gWidth: 10, 37 pColor: "#C0C0C0", 38 pHeight: 15, 39 pOffset: 0, 40 pOpacity: 0.55, 41 center: true, 42 invert: false, 43 gEnabled: true, 44 pEnabled: true, 45 size: 960, 46 fixFlash: true, 47 setupEnabled: true, 48 pressedKeys: [], 49 delayTimer: "" 50 }; 51 c.settings = (typeof (window.gOverride) === "undefined") ? {} : window.gOverride; 52 for (var a in c.settingsDef) { 53 if (typeof (c.settings[a]) === "undefined") { 54 c.settings[a] = c.settingsDef[a]; 55 } 56 } 57 if (typeof (window.jQuery) === "undefined" || jQuery().jquery.match(/^1\.3/) === null) { 58 window.jQuery = undefined; 59 var b = document.createElement("script"); 60 b.type = "text/javascript"; 61 b.src = c.settings.urlBase + "jquery.js"; 62 document.body.appendChild(b); 63 } 64 c._createEntity = function (e, d) { 65 jQuery('<div class="g-' + e + '"> </div>').appendTo("#g-grid").css(d); 66 }; 67 c._setVariable = function (d, e) { 68 d = d.replace(/g-setup-/, ""); 69 if (isNaN(parseInt(e, 10)) || parseInt(e, 10) === 0) { 70 c.settings[d] = e; 71 } else { 72 c.settings[d] = parseInt(e, 10); 73 } 74 if (e === true) { 75 jQuery("#g-setup-" + d).attr("checked", "checked"); 76 } else { 77 if (e === false) { 78 jQuery("#g-setup-" + d).removeAttr("checked"); 79 } else { 80 jQuery("#g-setup-" + d).val(e); 81 } 82 } 83 }; 84 c.setupWindow = function () { 85 jQuery('<style type"text/css">#g-setup{position:absolute;top:150px;left:-310px;padding:6px;margin:0;list-style:none;width:320px!important;background-color:#d1cfe6;border:2px solid #a19bd1;z-index:2100; display:none;}#g-setup *{background:transparent!important;border:0!important;color:#58517c!important;font-family:Verdana,Geneva,sans-serif!important;font-size:10px!important;font-weight:normal!important;letter-spacing:normal!important;line-height:1!important;list-style-type:none!important;margin:0!important;padding:0!important;text-decoration:none!important;text-indent:0!important;text-transform:none!important;word-spacing:0!important;z-index:2100!important;}#g-setup .head{font-weight:bold!important;text-align:center;border-bottom:1px solid #7cb267!important;}#g-setup ul{width:150px;float:left!important;}#g-setup li{clear:left;padding:5px!important;}* html #g-setup li{clear:none!important;padding:4px!important;}#g-setup span{float:left!important;width:50px;padding:1px 4px 0 0!important;text-align:right!important;line-height:1.5!important;}#g-setup input,#g-setup select{float:left!important;width:70px;border:1px solid #a19bd1!important;background-color:#e7e6ee!important;padding:2px!important;}#g-setup select{width:77px;padding:0!important;}#g-setup-misc{margin-top:5px!important;clear:left;float:none!important;width:300px!important;border-top:1px solid #7cb267!important;}#g-setup-misc span{line-height:1.1!important;width:200px;}#g-setup-misc input{width:15px;padding:0!important;height:15px;}#g-setup-tab{width:26px;overflow:hidden;position:absolute;top:0;left:100%;margin-left:-26px!important;z-index:2100!important;}#g-setup-tab img{left:0;position:relative;}#g-grid{left:0;position:absolute;z-index:500;top:0;}#g-grid .g-vertical,#g-grid .g-horizontal{position:absolute;z-index:1000;}*:first-child+html #g-grid .g-horizontal,*:first-child+html #g-grid .g-vertical{margin-left:-1px;}#g-grid .g-horizontal{min-height:1px;height:1px;font-size:0;line-height:0;}</style>').appendTo("head"); 86 c.settings.height = jQuery(document).height(); 87 if (c.settings.setupEnabled) { 88 jQuery('<div id="g-setup"><ul><li class="head">Vertical</li><li><span>Color</span><input id="g-setup-gColor" /></li><li><span>Opacity</span><input id="g-setup-gOpacity" /></li><li><span>Width</span><input id="g-setup-gWidth" /></li><li><span>Columns</span><select id="g-setup-gColumns"></select></li></ul><ul><li class="head">Horizontal</li><li><span>Color</span><input id="g-setup-pColor" /></li><li><span>Opacity</span><input id="g-setup-pOpacity" /></li><li><span>Height</span><input id="g-setup-pHeight" /></li><li><span>Offset</span><input id="g-setup-pOffset" /></li></ul><ul id="g-setup-misc"><li><span>Enable vertical (gutters)</span><input id="g-setup-gEnabled" type="checkbox" /></li><li><span>Enable horizontal (paragraphs)</span><input id="g-setup-pEnabled" type="checkbox" /></li><li><span>Invert vertical</span><input id="g-setup-invert" type="checkbox" /></li><li><span>Center grid</span><input id="g-setup-center" type="checkbox" /></li></ul><div style="clear: left;"></div><div id="g-setup-tab"><a href="javascript:;"><img src="http://gridder.andreehansson.se/releases/1.3.1/logo-sprite.png" alt="" /></a></div></div>').appendTo("body"); 89 for (var d = 2; d < 48; d++) { 90 if (Math.round((c.settings.size / d)) === (c.settings.size / d)) { 91 jQuery('<option value="' + d + '">' + d + "</option>").appendTo("#g-setup-gColumns"); 92 } 93 } 94 for (var d in c.settings) { 95 if (jQuery("#g-setup-" + d).length !== 0) { 96 if (jQuery("#g-setup-" + d).parent().parent().is("#g-setup-misc") && c.settings[d]) { 97 jQuery("#g-setup-" + d).attr("checked", "checked"); 98 } else { 99 jQuery("#g-setup-" + d).val(c.settings[d]); 100 } 101 } 102 } 103 jQuery("#g-setup").css("top", jQuery(window).scrollTop() + 150); 104 jQuery("#g-setup-tab a").click(function () { 105 c.toggleSetupWindow(); 106 }); 107 jQuery("#g-setup input").keyup(function () { 108 var e = this; 109 clearTimeout(c.settings.delayTimer); 110 c.settings.delayTimer = setTimeout(function () { 111 c.setVariable(jQuery(e).attr("id"), jQuery(e).val()); 112 }, 700); 113 }); 114 jQuery("#g-setup-gColumns").change(function () { 115 c.setVariable("gColumns", $(this).val()); 116 }); 117 jQuery("#g-setup-misc input").click(function () { 118 c.setVariable(jQuery(this).attr("id"), jQuery(this).attr("checked")); 119 }); 120 jQuery().keydown(function (f) { 121 if (jQuery.inArray(f.which, c.settings.pressedKeys) === -1) { 122 c.settings.pressedKeys.push(f.which); 123 } 124 }); 125 jQuery(window).scroll(function () { 126 jQuery("#g-setup").css("top", jQuery().scrollTop() + 150); 127 }); 128 } 129 jQuery().keyup(function (g) { 130 if (jQuery.inArray(17, c.settings.pressedKeys) !== -1 && jQuery.inArray(18, c.settings.pressedKeys) !== -1) { 131 if (jQuery.inArray(90, c.settings.pressedKeys) !== -1) { 132 c.setVariable("gEnabled", !c.settings.gEnabled); 133 } else { 134 if (jQuery.inArray(88, c.settings.pressedKeys) !== -1) { 135 c.setVariable("pEnabled", !c.settings.pEnabled); 136 } else { 137 if (jQuery.inArray(65, c.settings.pressedKeys) !== -1) { 138 c.setVariable("invert", !c.settings.invert); 139 } else { 140 if (jQuery.inArray(67, c.settings.pressedKeys) !== -1) { 141 c.setVariable({ 142 gEnabled: !c.settings.gEnabled, 143 pEnabled: !c.settings.pEnabled 144 }); 145 } 146 } 147 } 148 } 149 } 150 var f = jQuery.inArray(g.which, c.settings.pressedKeys); 151 c.settings.pressedKeys.splice(f, f); 152 }); 153 }; 154 c.setVariable = function () { 155 if (typeof (arguments[0]) === "object") { 156 for (var d in arguments[0]) { 157 c._setVariable(d, arguments[0][d]); 158 } 159 } else { 160 c._setVariable(arguments[0], arguments[1]); 161 } 162 c.createGrid(); 163 }; 164 c.toggleSetupWindow = function () { 165 var d = jQuery("#g-setup-tab img"); 166 d.css("left", d.position().left === 0 ? -26 : 0); 167 if (parseInt(jQuery("#g-setup").css("left"), 10) === 0) { 168 jQuery("#g-setup").animate({ 169 left: -310 170 }, 200); 171 } else { 172 jQuery("#g-setup").animate({ 173 left: 0 174 }, 200); 175 } 176 }; 177 c.createGrid = function () { 178 jQuery("embed").each(function () { 179 if (c.settings.fixFlash) { 180 jQuery(this).attr("wmode", "transparent"); 181 } else { 182 jQuery(this).removeAttr("wmode"); 183 } 184 var i = jQuery(this).wrap("<div></div>").parent().html(); 185 jQuery(this).parent().replaceWith(i); 186 jQuery(this).remove(); 187 }); 188 jQuery("#g-grid").remove(); 189 jQuery('<div id="g-grid"></div>').appendTo("body").css("width", c.settings.size); 190 if (c.settings.center) { 191 jQuery("#g-grid").css({ 192 left: "50%", 193 marginLeft: -((c.settings.size / 2) + c.settings.gWidth) 194 }); 195 } 196 if (c.settings.gEnabled && c.settings.gColumns > 0) { 197 if (c.settings.invert) { 198 jQuery().css("overflow-x", "hidden"); 199 var e = (jQuery(window).width() - c.settings.size) / 2; 200 c._createEntity("vertical", { 201 left: -e, 202 width: e, 203 height: c.settings.height, 204 backgroundColor: c.settings.gColor, 205 opacity: c.settings.gOpacity 206 }); 207 for (var g = 0; g < c.settings.gColumns; g++) { 208 var f = (c.settings.size / c.settings.gColumns) - (c.settings.gWidth * 2); 209 var h = (c.settings.gWidth * 2); 210 c._createEntity("vertical", { 211 left: ((f + h) * g) + h, 212 width: f + "px", 213 height: c.settings.height, 214 backgroundColor: c.settings.gColor, 215 opacity: c.settings.gOpacity 216 }); 217 } 218 if ((c.settings.height + 10) > jQuery(window).height()) { 219 e -= 10; 220 } 221 c._createEntity("vertical", { 222 left: "100%", 223 marginLeft: 20, 224 width: e, 225 height: c.settings.height, 226 backgroundColor: c.settings.gColor, 227 opacity: c.settings.gOpacity 228 }); 229 } else { 230 for (var g = 0; g <= c.settings.gColumns; g++) { 231 c._createEntity("vertical", { 232 left: ((c.settings.size / c.settings.gColumns) * g), 233 width: (c.settings.gWidth * 2), 234 height: c.settings.height, 235 backgroundColor: c.settings.gColor, 236 opacity: c.settings.gOpacity 237 }); 238 } 239 } 240 } 241 if (c.settings.pEnabled && c.settings.pHeight > 1) { 242 var d = ((c.settings.height - c.settings.pOffset) / c.settings.pHeight); 243 for (g = 0; g <= d; g++) { 244 c._createEntity("horizontal", { 245 top: ((c.settings.height / d) * g) + c.settings.pOffset, 246 left: "50%", 247 marginLeft: -(c.settings.size / 2), 248 width: (c.settings.size + (c.settings.gWidth * 2)), 249 backgroundColor: c.settings.pColor, 250 opacity: c.settings.pOpacity 251 }); 252 } 253 } 254 }; 255 } 256 var checkJQuery = function () { 257 if (typeof (window.jQuery) === "undefined") { 258 setTimeout(function () { 259 checkJQuery(); 260 }, 10); 261 } else { 262 window.grid.setupWindow(); 263 window.grid.createGrid(); 264 } 265 }; 266 if (typeof (window.grid) === "undefined") { 267 window.grid = new Grid(); 268 checkJQuery(); 269 } else { 270 window.grid.toggleSetupWindow(); 271 }
