├── .gitignore
├── PSDGuides.js
├── README.md
├── bower.json
├── examples
    ├── 960.html
    ├── assets
    │   ├── images
    │   │   ├── _cnn-bg-sample.png
    │   │   └── breezi_com-sample.jpg
    │   └── reset.css
    ├── basic-bundle.js
    ├── basic.html
    ├── basic.js
    ├── breezi-com.html
    └── cnn.html
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .sass-cache
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/PSDGuides.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * psd-guides - Draw photoshop-like guides
  3 |  * @version v1.0.1
  4 |  * @link https://github.com/noeldelgado/psd-guides
  5 |  * @license MIT
  6 |  */
  7 | (function () {
  8 |   function PSDGuides(config) {
  9 |     this.config = {
 10 |       canvas: document.body,
 11 |       canvasWidth: 0,
 12 |       alignment: "center",
 13 |       backColor: "rgba(132, 170, 234, 0.25)",
 14 |       lineColor: "rgba(73, 141, 255, 1)",
 15 |       horizontalGuides: [],
 16 |       verticalGuides: [],
 17 |       zindex: 9999
 18 |     };
 19 |     this._ui = null;
 20 |     this._verticalGuides = null;
 21 |     this._horizontalGuides = null;
 22 |     this.__resizeHandler = null;
 23 |     this._reGroup = null;
 24 |     this._reSplit = null;
 25 |     this.active = null;
 26 | 
 27 |     Object.keys(config).forEach(function(propertyName) {
 28 |       this.config[propertyName] = config[propertyName];
 29 |     }, this);
 30 | 
 31 |     this._init();
 32 |   }
 33 | 
 34 |   PSDGuides.prototype._init = function _init() {
 35 |     this._ui = {};
 36 |     this.active = false;
 37 |     this._verticalGuides = [];
 38 |     this._horizontalGuides = [];
 39 |     this._reGroup = new RegExp("[()\\s]","g");
 40 |     this._reSplit = new RegExp("[,*]","g");
 41 | 
 42 |     this._ui.documentElement = window.document.documentElement;
 43 |     this._ui.body = window.document.body;
 44 |     this._ui.wrapper = document.createElement("div");
 45 |     this._ui.hContainer = document.createElement("div");
 46 |     this._ui.vContainer = document.createElement("div");
 47 | 
 48 |     this._setStyles(this._ui.wrapper, {
 49 |       display: "none",
 50 |       position: "absolute",
 51 |       top: 0,
 52 |       zIndex: this.config.zIndex,
 53 |       backgroundColor: this.config.backColor
 54 |     })._setStyles(this._ui.hContainer, {
 55 |       position: "absolute",
 56 |       top: 0,
 57 |       height: "100%",
 58 |       borderLeft: "1px dotted " + this.config.lineColor,
 59 |       borderRight: "1px dotted " + this.config.lineColor
 60 |     })._setStyles(this._ui.vContainer, {
 61 |       position: "absolute",
 62 |       top: 0,
 63 |       height: "100%",
 64 |       width: "100%"
 65 |     });
 66 | 
 67 |     this._ui.wrapper.className = "psd-guides-wrapper";
 68 |     this.config.canvas.appendChild(this._ui.wrapper);
 69 | 
 70 |     this._bindEvents();
 71 |     this._overrideCSS();
 72 |     this.addVerticalGuides(this.config.verticalGuides);
 73 |     this.addHorizontalGuides(this.config.horizontalGuides);
 74 |     this.update();
 75 | 
 76 |     return this;
 77 |   };
 78 | 
 79 |   PSDGuides.prototype._bindEvents = function _bindEvents() {
 80 |     this.__resizeHandler = this._resizeHandler.bind(this);
 81 |     window.addEventListener("resize", this.__resizeHandler, false);
 82 | 
 83 |     return this;
 84 |   };
 85 | 
 86 |   PSDGuides.prototype._resizeHandler = function _resizeHandler() {
 87 |     if (this.active) {
 88 |       this._hide();
 89 |       window.clearTimeout(this._resizeTimer);
 90 |       this._resizeTimer = window.setTimeout(function() {
 91 |         this.update().activate();
 92 |       }.bind(this), 250);
 93 |     }
 94 |   };
 95 | 
 96 |   /**
 97 |    * Add guides to the _verticalGuides Array holder.
 98 |    * @property addVerticalGuides <public> [Function]
 99 |    * @argument guides <required> [Array]
100 |    * @return this [PSDGuides]
101 |    */
102 |   PSDGuides.prototype.addVerticalGuides = function addVerticalGuides(guides) {
103 |     this._verticalGuides = this._verticalGuides.concat(this._getParsedGuides(guides));
104 | 
105 |     return this;
106 |   };
107 | 
108 |   /**
109 |    * Add guides to the _horizontalGuides Array holder.
110 |    * @property addHorizontalGuides <public> [Function]
111 |    * @argument guides <required> [Array]
112 |    * @return this [PSDGuides]
113 |    */
114 |   PSDGuides.prototype.addHorizontalGuides = function addHorizontalGuides(guides) {
115 |     this._horizontalGuides = this._horizontalGuides.concat(this._getParsedGuides(guides));
116 | 
117 |     return this;
118 |   };
119 | 
120 |   /**
121 |    * Check if the guides needs to be translated into Numbers.
122 |    * parsed = this._getParsedGuides([100, "200 * 4"], 100);
123 |    * => [100, 200, 200, 200, 200, 100]
124 |    * @property _getParsedGuides <private> [Function]
125 |    * @argument guides <required> [Array]
126 |    * @return _parsedGuides [Array]
127 |    */
128 |   PSDGuides.prototype._getParsedGuides = function _getParsedGuides(guides) {
129 |     var _parsedGuides = [];
130 | 
131 |     guides.map(function (guide) {
132 |       if ((typeof guide === "string") && (guide.indexOf("*") !== -1)) {
133 |         var values, times, length, i, j;
134 | 
135 |         values = guide.replace(this._reGroup, "").split(this._reSplit);
136 |         times = values.pop();
137 |         length = values.length;
138 | 
139 |         for (i = 0; i < times; i++) {
140 |           for (j = 0; j < length; j++) {
141 |             _parsedGuides.push(~~values[j]);
142 |           }
143 |         }
144 | 
145 |         return;
146 |       }
147 | 
148 |       _parsedGuides.push(~~guide);
149 |     }, this);
150 | 
151 |     return _parsedGuides;
152 |   };
153 | 
154 |   /**
155 |    * Create the vertical guides DOMElements and append them to its parent.
156 |    * @property _createVerticalLines <private> [Function]
157 |    * @return this [PSDGuides]
158 |    */
159 |   PSDGuides.prototype._createVerticalLines = function _createVerticalLines() {
160 |     var fragment, newDocHeight;
161 | 
162 |     fragment = document.createDocumentFragment();
163 |     newDocHeight = 0;
164 | 
165 |     this.getVerticalGuides().map(function (guide) {
166 |       this._appendLine(fragment, {
167 |         height: guide + "px",
168 |         borderBottom: "1px dotted " + this.config.lineColor
169 |       });
170 | 
171 |       newDocHeight += guide;
172 |     }, this);
173 | 
174 |     newDocHeight = Math.max(this._ui.body.clientHeight, newDocHeight);
175 | 
176 |     this._ui.wrapper.style.height = newDocHeight;
177 |     this._ui.vContainer.appendChild(fragment);
178 |     this._ui.wrapper.appendChild(this._ui.vContainer);
179 | 
180 |     return this;
181 |   };
182 | 
183 |   /**
184 |    * Create the horizontal guides DOMElements and append them to its parent.
185 |    * @prototype _createHorizontalLines <private> [Object]
186 |    * @return this [PSDGuides]
187 |    */
188 |   PSDGuides.prototype._createHorizontalLines = function _createHorizontalLines() {
189 |     var fragment, siteWidth, coveredWidth;
190 | 
191 |     fragment = document.createDocumentFragment();
192 |     siteWidth = this.config.canvasWidth;
193 |     coveredWidth = 0;
194 | 
195 |     this._setStyles(this._ui.hContainer, {
196 |       width: (siteWidth) + "px",
197 |       marginLeft: this._getAligment(siteWidth) + "px"
198 |     }).getHorizontalGuides().map(function (guide) {
199 |       this._appendLine(fragment, {
200 |         position: "absolute",
201 |         left: coveredWidth + "px",
202 |         width: guide + "px",
203 |         height: "100%",
204 |         borderRight: "1px dotted " + this.config.lineColor
205 |       });
206 | 
207 |       coveredWidth += guide;
208 |     }, this);
209 | 
210 |     this._ui.hContainer.appendChild(fragment);
211 |     this._ui.wrapper.appendChild(this._ui.hContainer);
212 | 
213 |     return this;
214 |   };
215 | 
216 |   /**
217 |    * Remove the guide elements from the DOM.
218 |    * @property _removeLines <private> [Function]
219 |    * @return this [PSDGuides]
220 |    */
221 |   PSDGuides.prototype._removeLines = function _removeLines() {
222 |     while (this._ui.hContainer.firstChild) {
223 |       this._ui.hContainer.removeChild(this._ui.hContainer.firstChild);
224 |     }
225 | 
226 |     while (this._ui.vContainer.firstChild) {
227 |       this._ui.vContainer.removeChild(this._ui.vContainer.firstChild);
228 |     }
229 | 
230 |     return this;
231 |   };
232 | 
233 |   /**
234 |    * Crate a new Element (line) and append it to the parentElement passed as
235 |    * the first argument. It will also add the styles passed as second param.
236 |    * @property _appendLine <private> [Function]
237 |    * @argument parent <required> [DOMElement] the element to append the line.
238 |    * @argument styles <optional> [Object] the styles to be added to the line.
239 |    * @return this [PSDGuides]
240 |    */
241 |   PSDGuides.prototype._appendLine = function _appendLine(parent, styles) {
242 |     var line = document.createElement("div");
243 | 
244 |     this._setStyles(line, styles);
245 |     parent.appendChild(line);
246 | 
247 |     return this;
248 |   };
249 | 
250 |   /**
251 |    * Return the max available width or height of the document.
252 |    * @property _getMaxSize <private> [Function]
253 |    * @argument prop <required> [String] "Width|Height"
254 |    * @return Math.max(...) [Number]
255 |    */
256 |   PSDGuides.prototype._getMaxSize = function _getMaxSize(prop) {
257 |     var scroll, offset, client;
258 | 
259 |     scroll = Math.max(this._ui.body['scroll' + prop], this._ui.documentElement['scroll' + prop]);
260 |     offset = Math.max(this._ui.body['offset' + prop], this._ui.documentElement['offset' + prop]);
261 |     client = Math.max(this._ui.body['client' + prop], this._ui.documentElement['client' + prop]);
262 | 
263 |     return Math.max(scroll, offset, client);
264 |   };
265 | 
266 |   /**
267 |    * Return the number of pixels for psd-guides container to be aligned.
268 |    * @property _getAligment <private> [Function]
269 |    * @return [Number]
270 |    */
271 |   PSDGuides.prototype._getAligment = function _getAligment(siteWidth) {
272 |     if (this.config.alignment === "left") {
273 |       return 0;
274 |     }
275 | 
276 |     if (this.config.alignment === "right") {
277 |       return Math.floor(this._getMaxSize("Width") - siteWidth);
278 |     }
279 | 
280 |     return Math.floor((this._getMaxSize("Width") - siteWidth) / 2);
281 |   };
282 | 
283 |   /**
284 |    * Utility method for adding styles to elements.
285 |    * @property _setStyles <private> [Function]
286 |    * @argument element <required> [DOMElement]
287 |    * @argument hash <required> [Object]
288 |    * @return this [PSDGuides]
289 |    */
290 |   PSDGuides.prototype._setStyles = function _setStyles(element, hash) {
291 |     Object.keys(hash).forEach(function(propertyName) {
292 |       element.style[propertyName] = hash[propertyName];
293 |     });
294 | 
295 |     return this;
296 |   };
297 | 
298 |   /**
299 |    * CSS override utility.
300 |    * @property _overrideCSS <private> [Function]
301 |    * @return this [PSDGuides]
302 |    */
303 |   PSDGuides.prototype._overrideCSS = function _overrideCSS() {
304 |     var css, head, style;
305 | 
306 |     css = ".psd-guides-wrapper * {-webkit-box-sizing: border-box !important; box-sizing: border-box !important;}";
307 |     head = document.getElementsByTagName("head")[0];
308 |     style = document.createElement("style");
309 | 
310 |     style.type = "text/css";
311 | 
312 |     if (style.styleSheet) {
313 |       style.styleSheet.cssText = css;
314 |     } else {
315 |       style.appendChild(document.createTextNode(css));
316 |     }
317 | 
318 |     head.appendChild(style);
319 | 
320 |     return this;
321 |   };
322 | 
323 |   PSDGuides.prototype._hide = function _hide() {
324 |     this._ui.wrapper.style.display = "none";
325 |   };
326 | 
327 |   /**
328 |    * Return the current saved horizontal guides.
329 |    * @property getHorizontalGuides <public> [Function]
330 |    * @return this._horizontalGuides [Array]
331 |    */
332 |   PSDGuides.prototype.getHorizontalGuides = function getHorizontalGuides() {
333 |     return this._horizontalGuides;
334 |   };
335 | 
336 |   /**
337 |    * Return the current saved vertical guides.
338 |    * @property getVerticalGuides <public> [Function]
339 |    * @return this._verticalGuides [Array]
340 |    */
341 |   PSDGuides.prototype.getVerticalGuides = function getVerticalGuides() {
342 |     return this._verticalGuides;
343 |   };
344 | 
345 |   /**
346 |    * Clear the horizontal guides array reference.
347 |    * @property removeHorizontalGuides <public> [Function]
348 |    * @return this [PSDGuides]
349 |    */
350 |   PSDGuides.prototype.removeHorizontalGuides = function removeHorizontalGuides() {
351 |     this._horizontalGuides = [];
352 | 
353 |     return this;
354 |   };
355 | 
356 |   /**
357 |    * Clear the vertical guides array reference.
358 |    * @property removeVerticalGuides <public> [Function]
359 |    * @return this [PSDGuides]
360 |    */
361 |   PSDGuides.prototype.removeVerticalGuides = function removeVerticalGuides() {
362 |     this._verticalGuides = [];
363 | 
364 |     return this;
365 |   };
366 | 
367 |   /**
368 |    * Clear both horizontal and vertical array references.
369 |    * @property removeGuides <public> [Function]
370 |    * @return this [PSDGuides]
371 |    */
372 |   PSDGuides.prototype.removeGuides = function removeGuides() {
373 |     this.removeHorizontalGuides().removeVerticalGuides();
374 | 
375 |     return this;
376 |   };
377 | 
378 |   /**
379 |    * Update the width and height of psd-guides container,
380 |    * remove and create the guides using the guides array references.
381 |    * @property update <public> [Function]
382 |    * @return this [PSDGuides]
383 |    */
384 |   PSDGuides.prototype.update = function update() {
385 |     this._setStyles(this._ui.wrapper, {
386 |       width: this._getMaxSize("Width") + "px",
387 |       height: this._getMaxSize("Height") + "px"
388 |     })._removeLines()._createVerticalLines()._createHorizontalLines();
389 | 
390 |     return this;
391 |   };
392 | 
393 |   /**
394 |    * Display the guides.
395 |    * @property activate <public> [Function]
396 |    * @return this [PSDGuides]
397 |    */
398 |   PSDGuides.prototype.activate = function activate() {
399 |     this.active = true;
400 |     this.update();
401 |     this._ui.wrapper.style.display = "";
402 | 
403 |     return this;
404 |   };
405 | 
406 |   /**
407 |    * Hide the guides.
408 |    * @property deactivate <public> [Function]
409 |    * @return this [PSDGuides]
410 |    */
411 |   PSDGuides.prototype.deactivate = function deactivate() {
412 |     this.active = false;
413 |     this._hide();
414 | 
415 |     return this;
416 |   };
417 | 
418 |   /**
419 |    * Clean all references to other objects and remove DOMElements.
420 |    * @property destroy <public> [Function]
421 |    * @return null
422 |    */
423 |   PSDGuides.prototype.destroy = function destroy () {
424 |     this._removeLines();
425 |     this._ui.wrapper.removeChild(this._ui.vContainer);
426 |     this._ui.wrapper.removeChild(this._ui.hContainer);
427 |     this.config.canvas.removeChild(this._ui.wrapper);
428 |     window.removeEventListener("resize", this.__resizeHandler, false);
429 | 
430 |     Object.keys(this).forEach(function(propertyName) {
431 |       delete this[propertyName];
432 |     }, this);
433 | 
434 |     return null;
435 |   };
436 | 
437 |   if (typeof exports === 'object') {module.exports = PSDGuides;}
438 |   else {window.PSDGuides = PSDGuides;}
439 | })();
440 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # psd-guides
  2 | 
  3 | [![npm-image](https://img.shields.io/npm/v/psd-guides.svg)](https://www.npmjs.com/package/psd-guides)
  4 | ![bower-image](https://img.shields.io/bower/v/psd-guides.svg)
  5 | 
  6 | https://noeldelgado.github.io/psd-guides/
  7 | 
  8 | psd-guides is a simple script to draw photoshop-like guides.
  9 | 
 10 | Can be useful during slicing phase to accomplish pixel-perfect web layouts.
 11 | 
 12 | ## Installation
 13 | **NPM**
 14 | ```sh
 15 | npm install psd-guides --save
 16 | ```
 17 | 
 18 | **BOWER**
 19 | ```sh
 20 | bower install psd-guides --save
 21 | ```
 22 | 
 23 | ## Usage
 24 | ```javascript
 25 | new PSDGuides({
 26 |   canvasWidth : 1000,
 27 |   horizontalGuides : [20, "355 * 2", 250, 20],
 28 |   vericalGuides : [50, "100 * 2", "250 * 2", "50 * 3"]
 29 | }).activate();
 30 | ```
 31 | 
 32 | **Tip:** While defining your guides, if you have similar values that needs to be repeated several times, instead of writing them all you can use the `*` character followed by the number you want it to be repeated, for instance: `vericalGuides : [10, 10, 10, 10, 10, 20, 30, 20, 30, 20, 30]` can be written as `verticalGuides : ["10 * 5", "(20, 30) * 3"]`
 33 | 
 34 | ## Defaults
 35 | ```javascript
 36 | {
 37 |   canvas : document.body,                 // [DOMElement]
 38 |   canvasWidth : 0,                        // [Integer] (pixels)
 39 |   alignment : "center",                   // [String] "center"|"left"|"right"
 40 |   backColor : "rgba(132, 170, 234, .25)", // [String] Any valid color format
 41 |   lineColor : "rgba(73, 141, 255, 1)",    // [String] Any valid color format
 42 |   horizontalGuides : [],                  // [Array]
 43 |   verticalGuides : [],                    // [Array]
 44 |   zindex : 9999                           // [Number]
 45 | }
 46 | ```
 47 | 
 48 | ## API
 49 | 
 50 | ### activate
 51 | ```javascript
 52 | /**
 53 |  * Display the guides.
 54 |  * @property activate <public> [Function]
 55 |  * @return this [PSDGuides]
 56 |  */
 57 | 
 58 | var psd = new PSDGuides({
 59 | 	canvasWidth : 1000,
 60 | 	horizontalGuides : [20, "355 * 2", 250],
 61 | 	verticalGuides : [50, "100 * 2", "250 * 2", "50 * 3"]
 62 | });
 63 | 
 64 | psd.activate();
 65 | ```
 66 | 
 67 | ### deactivate
 68 | ```javascript
 69 | /**
 70 |  * Hide the guides.
 71 |  * @property deactivate <public> [Function]
 72 |  * @return this [PSDGuides]
 73 |  */
 74 | 
 75 | psd.deactivate();
 76 | ```
 77 | 
 78 | ### update
 79 | ```javascript
 80 | /**
 81 |  * Update the width and height of psd-guides container,
 82 |  * remove and create the guides using the guides array references.
 83 |  * @property update <public> [Function]
 84 |  * @return this [PSDGuides]
 85 |  */
 86 | 
 87 | psd.update();
 88 | ```
 89 | 
 90 | ### destroy
 91 | ```javascript
 92 | /**
 93 |  * Clean all references to other objects and remove DOMElements.
 94 |  * @property destroy <public> [Function]
 95 |  * @return null
 96 |  */
 97 | 
 98 | psd.destroy();
 99 | // => null
100 | ```
101 | 
102 | ### # Removing guides
103 | When guides are removed, you need to call the `update` or `activate` method to reflect the changes.
104 | 
105 | ### removeHorizontalGuides
106 | ```javascript
107 | /**
108 |  * Clear the horizontal guides array reference.
109 |  * @property removeHorizontalGuides <public> [Function]
110 |  * @return this [PSDGuides]
111 |  */
112 | 
113 | psd.removeHorizontalGuides();
114 | // console.log( psd.getHorizontalGuides() );
115 | // => []
116 | // console.log( psd.getVerticalGuides() );
117 | // => [50, 100, 100, 250, 250, 50, 50, 50]
118 | ```
119 | 
120 | ### removeVerticalGuides
121 | ```javascript
122 | /**
123 |  * Clear the vertical guides array reference.
124 |  * @property removeVerticalGuides <public> [Function]
125 |  * @return this [PSDGuides]
126 |  */
127 | 
128 | psd.removeVerticalGuides();
129 | // console.log( psd.getVerticalGuides() );
130 | // => []
131 | ```
132 | 
133 | ### removeGuides
134 | ```javascript
135 | /**
136 |  * Clear both horizontal and vertical array references.
137 |  * @property removeGuides <public> [Function]
138 |  * @return this [PSDGuides]
139 |  */
140 | 
141 | psd.removeGuides().update();
142 | ```
143 | 
144 | ### # Adding guides
145 | When adding guides, you need to call the `update` or `activate` method after to reflect the changes.
146 | 
147 | ### addHorizontalGuides
148 | ```javascript
149 | /**
150 |  * Add guides to the _horizontalGuides Array holder.
151 |  * @property addHorizontalGuides <public> [Function]
152 |  * @argument guides <required> [Array]
153 |  * @return this [PSDGuides]
154 |  */
155 | 
156 | psd.addHorizontalGuides([20, "355 * 2", 250]).update();
157 | // console.log( psd.getHorizontalGuides() );
158 | // => [20, 355, 355, 250]
159 | ```
160 | 
161 | ### addVericalGuides
162 | ```javascript
163 | /**
164 |  * Add guides to the _verticalGuides Array holder.
165 |  * @property addVerticalGuides <public> [Function]
166 |  * @argument guides <required> [Array]
167 |  * @return this [PSDGuides]
168 |  */
169 | 
170 | psd.addVerticalGuides([50, "100 * 2", "250 * 2", "50 * 3"]).update();
171 | // console.log( psd.getVerticalGuides() );
172 | // => [50, 100, 100, 250, 250, 50, 50, 50]
173 | ```
174 | 
175 | ### # Getting the guides
176 | Get current saved guides.
177 | 
178 | ### getHorizontalGuides
179 | ```javascript
180 | /**
181 |  * Return the current saved horizontal guides.
182 |  * @property getHorizontalGuides <public> [Function]
183 |  * @return this._horizontalGuides [Array]
184 |  */
185 | 
186 | psd.getHorizontalGuides();
187 | // => [20, 355, 355, 250]
188 | ```
189 | 
190 | ### getVerticalGuides
191 | ```javascript
192 | /**
193 |  * Return the current saved vertical guides.
194 |  * @property getVerticalGuides <public> [Function]
195 |  * @return this._verticalGuides [Array]
196 |  */
197 | 
198 | psd.getVerticalGuides();
199 | // => [50, 100, 100, 250, 250, 50, 50, 50]
200 | ```
201 | 
202 | ## Examples (960 Grid System)
203 | 
204 | Applying 960 grid system
205 | 
206 | ### 12-column grid
207 | ```javascript
208 | new PSDGuides({
209 |     canvasWidth : 960,
210 |     horizontalGuides : ["(10, 60, 10) * 12"]
211 | }).activate()
212 | ```
213 | 
214 | ### 16-column grid
215 | ```javascript
216 | new PSDGuides({
217 |     canvasWidth : 960,
218 |     horizontalGuides : ["(10, 40, 10) * 16"]
219 | }).activate();
220 | ```
221 | 
222 | ### 24-column grid
223 | ```javascript
224 | new PSDGuides({
225 |     canvasWidth : 960,
226 |     horizontalGuides : ["(10, 20, 10) * 24"]
227 | }).activate()
228 | ```
229 | 
230 | There are more examples inside the `examples` folder.
231 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "psd-guides",
 3 |   "main": "./PSDGuides.js",
 4 |   "version": "1.0.1",
 5 |   "homepage": "https://github.com/noeldelgado/psd-guides",
 6 |   "authors": [
 7 |     "Noel Delgado <auhcsei@gmail.com>"
 8 |   ],
 9 |   "description": "JS library to draw photoshop-like guides.",
10 |   "keywords": [
11 |     "psd",
12 |     "guides"
13 |   ],
14 |   "license": "MIT",
15 |   "ignore": [
16 |     "**/.*",
17 |     "node_modules",
18 |     "bower_components",
19 |     "test",
20 |     "tests",
21 |     "examples",
22 |     "PSDGuides.js",
23 |     "README.md",
24 |     "gulpfile.js",
25 |     "package.json"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/examples/960.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="utf-8" />
  5 |   <title>PSDGuides.js - 960 Grid System Example</title>
  6 |   <link rel="stylesheet" href="assets/reset.css" type="text/css">
  7 |   <style>
  8 |     body, button {
  9 |       font-size: 14px;
 10 |       font-family: Helvetica, Arial, sans-serif;
 11 |     }
 12 |     #sample-container {
 13 |       width: 960px;
 14 |       margin: 20px auto;
 15 |       padding: 0 10px;
 16 |     }
 17 |     #sample-container p {
 18 |       text-align: center;
 19 |       padding-top: 2.5em;
 20 |     }
 21 |     #sample-container header {
 22 |       height: 100px;
 23 |       background-color: #DCF5DC
 24 |     }
 25 |     #sample-container div[role='content'] {
 26 |       height: 500px;
 27 |     }
 28 |     #sample-container div[role='main'] {
 29 |       float: left;
 30 |       width: 710px;
 31 |       height: 100%;
 32 |       background-color: #FCF4BE
 33 |     }
 34 |     #sample-container aside {
 35 |       width: 250px;
 36 |       height: 100%;
 37 |       float: right;
 38 |       background-color: #F5DCDC
 39 |     }
 40 |     #sample-container footer {
 41 |       height: 100px;
 42 |       background-color: #DCDCF5
 43 |     }
 44 |     .controls {
 45 |       position: fixed;
 46 |       top: 0;
 47 |       left: 50%;
 48 |       margin-left: -90px;
 49 |       width: 180px;
 50 |       padding: .6em 0 .7em;
 51 |       font-size: .85em;
 52 |       z-index: 1;
 53 |       background-color: rgba(255, 255, 255, 1);
 54 |       text-align: center;
 55 |       border-radius: 0 0 3px 3px;
 56 |       box-shadow: 0 0 0 4px rgba(0,0,0,.15);
 57 |       font-weight: 600;
 58 |     }
 59 |     .controls .label {
 60 |       display: inline-block;
 61 |       vertical-align: top;
 62 |       padding: .3em .2em 0 0;
 63 |     }
 64 |     .controls button {
 65 |       font-size: 1em;
 66 |       margin: 0;
 67 |       padding: .25em .6em;
 68 |       vertical-align: top;
 69 |       cursor: pointer;
 70 |       outline: none;
 71 |       background-color: rgba(0,0,0,.7);
 72 |       color: #fff;
 73 |       border-radius: 3px;
 74 |       border: none;
 75 |     }
 76 |     .controls button:hover {
 77 |       background-color: rgba(0,0,0,.6);
 78 |     }
 79 |     .controls button.active {
 80 |       background-color: limegreen;
 81 |     }
 82 |   </style>
 83 | </head>
 84 | 
 85 | <body>
 86 |   <div id="sample-container">
 87 |     <header>
 88 |       <p>header</p>
 89 |     </header>
 90 |     <div role="content">
 91 |       <div role="main">
 92 |         <p>content</p>
 93 |       </div>
 94 |       <aside>
 95 |         <p>sidebar</p>
 96 |       </aside>
 97 |     </div>
 98 |     <footer>
 99 |       <p>footer</p>
100 |     </footer>
101 |   </div>
102 | 
103 |   <div class="controls">
104 |     <span class="label">Columns:</span>
105 |     <button data-cols="12">12</button>
106 |     <button data-cols="16">16</button>
107 |     <button data-cols="24">24</button>
108 |   </div>
109 | 
110 |   <script src="../PSDGuides.js"></script>
111 |   <script>
112 |       window.onload = function () {
113 |           var buttons, guides, psd, activateFn;
114 | 
115 |           buttons = {};
116 |           guides = {
117 |             '12': ["(10, 60, 10) * 12"],
118 |             '16': ["(10, 40, 10) * 16"],
119 |             '24': ["(10, 20, 10) * 24"]
120 |           };
121 |           psd = new PSDGuides({
122 |               canvasWidth : 960,
123 |               lineColor : "rgb(56, 172, 250)",
124 |               backColor : "rgba(56, 172, 250, .15)",
125 |               zIndex : 0
126 |           });
127 |           activateFn = function activateFn(ev) {
128 |               var cols = ev.target.getAttribute('data-cols');
129 | 
130 |               Object.keys(buttons).forEach(function(propertyName) {
131 |                   buttons[propertyName].classList.remove('active');
132 |              });
133 | 
134 |               buttons[cols].classList.add('active');
135 |               psd.removeHorizontalGuides().addHorizontalGuides(guides[cols]).activate();
136 |           };
137 | 
138 |           [].slice.call(document.querySelectorAll('button'), 0).forEach(function(item) {
139 |               buttons[item.getAttribute('data-cols')] = item;
140 |               buttons[item.getAttribute('data-cols')].addEventListener('click', activateFn, false);
141 |           });
142 | 
143 |           buttons['12'].click();
144 |       };
145 |   </script>
146 | </body>
147 | </html>
148 | 


--------------------------------------------------------------------------------
/examples/assets/images/_cnn-bg-sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/noeldelgado/psd-guides/560474d636a51d935016504c8ee1daaefbc986ce/examples/assets/images/_cnn-bg-sample.png


--------------------------------------------------------------------------------
/examples/assets/images/breezi_com-sample.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/noeldelgado/psd-guides/560474d636a51d935016504c8ee1daaefbc986ce/examples/assets/images/breezi_com-sample.jpg


--------------------------------------------------------------------------------
/examples/assets/reset.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2008, Yahoo! Inc. All rights reserved.
  3 | Code licensed under the BSD License:
  4 | http://developer.yahoo.net/yui/license.txt
  5 | version: 3.0.0pr1
  6 | */
  7 | /*
  8 | 	TODO will need to remove settings on HTML since we can't namespace it.
  9 | 	TODO with the prefix, should I group by selector or property for weight savings?
 10 | */
 11 | html{
 12 | 	color:#000;
 13 | 	background:#FFF;
 14 | }
 15 | /*
 16 | 	TODO remove settings on BODY since we can't namespace it.
 17 | */
 18 | /*
 19 | 	TODO test putting a class on HEAD.
 20 | 		- Fails on FF. 
 21 | */
 22 | body,
 23 | div,
 24 | dl,
 25 | dt,
 26 | dd,
 27 | ul,
 28 | ol,
 29 | li,
 30 | h1,
 31 | h2,
 32 | h3,
 33 | h4,
 34 | h5,
 35 | h6,
 36 | pre,
 37 | code,
 38 | form,
 39 | fieldset,
 40 | legend,
 41 | input,
 42 | textarea,
 43 | p,
 44 | blockquote,
 45 | th,
 46 | td {
 47 | 	margin:0;
 48 | 	padding:0;
 49 | }
 50 | table {
 51 | 	border-collapse:collapse;
 52 | 	border-spacing:0;
 53 | }
 54 | fieldset,
 55 | img {
 56 | 	border:0;
 57 | }
 58 | /*
 59 | 	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
 60 | */
 61 | address,
 62 | caption,
 63 | cite,
 64 | code,
 65 | dfn,
 66 | em,
 67 | strong,
 68 | th,
 69 | var {
 70 | 	font-style:normal;
 71 | 	font-weight:normal;
 72 | }
 73 | /*
 74 | 	TODO Figure out where this list-style rule is best set. Hedger has a request to investigate.
 75 | */
 76 | li {
 77 | 	list-style:none;
 78 | }
 79 | 
 80 | caption,
 81 | th {
 82 | 	text-align:left;
 83 | }
 84 | h1,
 85 | h2,
 86 | h3,
 87 | h4,
 88 | h5,
 89 | h6 {
 90 | 	font-size:100%;
 91 | 	font-weight:normal;
 92 | }
 93 | q:before,
 94 | q:after {
 95 | 	content:'';
 96 | }
 97 | abbr,
 98 | acronym {
 99 | 	border:0;
100 | 	font-variant:normal;
101 | }
102 | /* to preserve line-height and selector appearance */
103 | sup {
104 | 	vertical-align:text-top;
105 | }
106 | sub {
107 | 	vertical-align:text-bottom;
108 | }
109 | input,
110 | textarea,
111 | select {
112 | 	font-family:inherit;
113 | 	font-size:inherit;
114 | 	font-weight:inherit;
115 | }
116 | /*to enable resizing for IE*/
117 | input,
118 | textarea,
119 | select {
120 | 	*font-size:100%;
121 | }
122 | /*because legend doesn't inherit in IE */
123 | legend {
124 | 	color:#000;
125 | }


--------------------------------------------------------------------------------
/examples/basic-bundle.js:
--------------------------------------------------------------------------------
  1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | /**
  3 |  * psdguides - Draw photoshop-like guides
  4 |  * @version v1.0.0
  5 |  * @link https://github.com/noeldelgado/psd-guides
  6 |  * @license MIT
  7 |  */
  8 | (function () {
  9 |     function PSDGuides(config) {
 10 |         this.config = {
 11 |             canvas : document.body,
 12 |             canvasWidth : 0,
 13 |             alignment : "center",
 14 |             backColor : "rgba(132, 170, 234, 0.25)",
 15 |             lineColor : "rgba(73, 141, 255, 1)",
 16 |             horizontalGuides : [],
 17 |             verticalGuides : [],
 18 |             zindex : 9999
 19 |         };
 20 |         this._ui = null;
 21 |         this._verticalGuides = null;
 22 |         this._horizontalGuides = null;
 23 |         this.__resizeHandler = null;
 24 |         this._reGroup = null;
 25 |         this._reSplit = null;
 26 |         this.active = null;
 27 | 
 28 |         Object.keys(config).forEach(function(propertyName) {
 29 |             this.config[propertyName] = config[propertyName];
 30 |         }, this);
 31 | 
 32 |         this._init();
 33 |    }
 34 | 
 35 |     PSDGuides.prototype._init = function _init() {
 36 |         this._ui = {};
 37 |         this.active = false;
 38 |         this._verticalGuides = [];
 39 |         this._horizontalGuides = [];
 40 |         this._reGroup = new RegExp("[()\\s]","g");
 41 |         this._reSplit = new RegExp("[,*]","g");
 42 | 
 43 |         this._ui.documentElement = window.document.documentElement;
 44 |         this._ui.body = window.document.body;
 45 |         this._ui.wrapper = document.createElement("div");
 46 |         this._ui.hContainer = document.createElement("div");
 47 |         this._ui.vContainer = document.createElement("div");
 48 | 
 49 |         this._setStyles(this._ui.wrapper, {
 50 |             display : "none",
 51 |             position : "absolute",
 52 |             top : 0,
 53 |             zIndex : this.config.zIndex,
 54 |             backgroundColor: this.config.backColor
 55 |         })._setStyles(this._ui.hContainer, {
 56 |             position : "absolute",
 57 |             top : 0,
 58 |             height : "100%",
 59 |             borderLeft : "1px dotted " + this.config.lineColor,
 60 |             borderRight : "1px dotted " + this.config.lineColor
 61 |         })._setStyles(this._ui.vContainer, {
 62 |             position : "absolute",
 63 |             top : 0,
 64 |             height : "100%",
 65 |             width : "100%"
 66 |         });
 67 | 
 68 |         this._ui.wrapper.className = "psd-guides-wrapper";
 69 |         this.config.canvas.appendChild(this._ui.wrapper);
 70 | 
 71 |         this._bindEvents();
 72 |         this._overrideCSS();
 73 |         this.addVerticalGuides(this.config.verticalGuides);
 74 |         this.addHorizontalGuides(this.config.horizontalGuides);
 75 |         this.update();
 76 | 
 77 |         return this;
 78 |     };
 79 | 
 80 |     PSDGuides.prototype._bindEvents = function _bindEvents() {
 81 |         this.__resizeHandler = this._resizeHandler.bind(this);
 82 |         window.addEventListener("resize", this.__resizeHandler, false);
 83 | 
 84 |         return this;
 85 |     };
 86 | 
 87 |     PSDGuides.prototype._resizeHandler = function _resizeHandler() {
 88 |         if (this.active) {
 89 |             this._hide();
 90 |             window.clearTimeout(this._resizeTimer);
 91 |             this._resizeTimer = window.setTimeout(function() {
 92 |                 this.update().activate();
 93 |             }.bind(this), 250);
 94 |         }
 95 |     };
 96 | 
 97 |     /**
 98 |      * Add guides to the _verticalGuides Array holder.
 99 |      * @property addVerticalGuides <public> [Function]
100 |      * @argument guides <required> [Array]
101 |      * @return this [PSDGuides]
102 |      */
103 |     PSDGuides.prototype.addVerticalGuides = function addVerticalGuides(guides) {
104 |         this._verticalGuides = this._verticalGuides.concat(this._getParsedGuides(guides));
105 | 
106 |         return this;
107 |     };
108 | 
109 |     /**
110 |      * Add guides to the _horizontalGuides Array holder.
111 |      * @property addHorizontalGuides <public> [Function]
112 |      * @argument guides <required> [Array]
113 |      * @return this [PSDGuides]
114 |      */
115 |     PSDGuides.prototype.addHorizontalGuides = function addHorizontalGuides(guides) {
116 |         this._horizontalGuides = this._horizontalGuides.concat(this._getParsedGuides(guides));
117 | 
118 |         return this;
119 |     };
120 | 
121 |     /**
122 |      * Check if the guides needs to be translated into Numbers.
123 |      * parsed = this._getParsedGuides([100, "200 * 4"], 100);
124 |      * => [100, 200, 200, 200, 200, 100]
125 |      * @property _getParsedGuides <private> [Function]
126 |      * @argument guides <required> [Array]
127 |      * @return _parsedGuides [Array]
128 |      */
129 |     PSDGuides.prototype._getParsedGuides = function _getParsedGuides(guides) {
130 |         var _parsedGuides = [];
131 | 
132 |         guides.map(function (guide) {
133 |             if ((typeof guide === "string") && (guide.indexOf("*") !== -1)) {
134 |                 var values, times, length, i, j;
135 | 
136 |                 values = guide.replace(this._reGroup, "").split(this._reSplit);
137 |                 times = values.pop();
138 |                 length = values.length;
139 | 
140 |                 for (i = 0; i < times; i++) {
141 |                     for (j = 0; j < length; j++) {
142 |                         _parsedGuides.push(~~values[j]);
143 |                     }
144 |                 }
145 | 
146 |                 return;
147 |             }
148 | 
149 |             _parsedGuides.push(~~guide);
150 |         }, this);
151 | 
152 |         return _parsedGuides;
153 |     };
154 | 
155 |     /**
156 |      * Create the vertical guides DOMElements and append them to its parent.
157 |      * @property _createVerticalLines <private> [Function]
158 |      * @return this [PSDGuides]
159 |      */
160 |     PSDGuides.prototype._createVerticalLines = function _createVerticalLines() {
161 |         var fragment, newDocHeight;
162 | 
163 |         fragment = document.createDocumentFragment();
164 |         newDocHeight = 0;
165 | 
166 |         this.getVerticalGuides().map(function (guide) {
167 |             this._appendLine(fragment, {
168 |                 height : guide + "px",
169 |                 borderBottom : "1px dotted " + this.config.lineColor
170 |             });
171 | 
172 |             newDocHeight += guide;
173 |         }, this);
174 | 
175 |         newDocHeight = Math.max(this._ui.body.clientHeight, newDocHeight);
176 | 
177 |         this._ui.wrapper.style.height = newDocHeight;
178 |         this._ui.vContainer.appendChild(fragment);
179 |         this._ui.wrapper.appendChild(this._ui.vContainer);
180 | 
181 |         return this;
182 |     };
183 | 
184 |     /**
185 |      * Create the horizontal guides DOMElements and append them to its parent.
186 |      * @prototype _createHorizontalLines <private> [Object]
187 |      * @return this [PSDGuides]
188 |      */
189 |     PSDGuides.prototype._createHorizontalLines = function _createHorizontalLines() {
190 |         var fragment, siteWidth, coveredWidth;
191 | 
192 |         fragment = document.createDocumentFragment();
193 |         siteWidth = this.config.canvasWidth;
194 |         coveredWidth = 0;
195 | 
196 |         this._setStyles(this._ui.hContainer, {
197 |             width : (siteWidth) + "px",
198 |             marginLeft : this._getAligment(siteWidth) + "px"
199 |         }).getHorizontalGuides().map(function (guide) {
200 |             this._appendLine(fragment, {
201 |                 position : "absolute",
202 |                 left : coveredWidth + "px",
203 |                 width : guide + "px",
204 |                 height : "100%",
205 |                 borderRight : "1px dotted " + this.config.lineColor
206 |             });
207 | 
208 |             coveredWidth += guide;
209 |         }, this);
210 | 
211 |         this._ui.hContainer.appendChild(fragment);
212 |         this._ui.wrapper.appendChild(this._ui.hContainer);
213 | 
214 |         return this;
215 |     };
216 | 
217 |     /**
218 |      * Remove the guide elements from the DOM.
219 |      * @property _removeLines <private> [Function]
220 |      * @return this [PSDGuides]
221 |      */
222 |     PSDGuides.prototype._removeLines = function _removeLines() {
223 |         while (this._ui.hContainer.firstChild) {
224 |             this._ui.hContainer.removeChild(this._ui.hContainer.firstChild);
225 |         }
226 | 
227 |         while (this._ui.vContainer.firstChild) {
228 |             this._ui.vContainer.removeChild(this._ui.vContainer.firstChild);
229 |         }
230 | 
231 |         return this;
232 |     };
233 | 
234 |     /**
235 |      * Crate a new Element (line) and append it to the parentElement passed as
236 |      * the first argument. It will also add the styles passed as second param.
237 |      * @property _appendLine <private> [Function]
238 |      * @argument parent <required> [DOMElement] the element to append the line.
239 |      * @argument styles <optional> [Object] the styles to be added to the line.
240 |      * @return this [PSDGuides]
241 |      */
242 |     PSDGuides.prototype._appendLine = function _appendLine(parent, styles) {
243 |         var line = document.createElement("div");
244 | 
245 |         this._setStyles(line, styles);
246 |         parent.appendChild(line);
247 | 
248 |         return this;
249 |     };
250 | 
251 |     /**
252 |      * Return the max available width or height of the document.
253 |      * @property _getMaxSize <private> [Function]
254 |      * @argument prop <required> [String] "Width|Height"
255 |      * @return Math.max(...) [Number]
256 |      */
257 |     PSDGuides.prototype._getMaxSize = function _getMaxSize(prop) {
258 |         var scroll, offset, client;
259 | 
260 |         scroll = Math.max(this._ui.body['scroll' + prop], this._ui.documentElement['scroll' + prop]);
261 |         offset = Math.max(this._ui.body['offset' + prop], this._ui.documentElement['offset' + prop]);
262 |         client = Math.max(this._ui.body['client' + prop], this._ui.documentElement['client' + prop]);
263 | 
264 |         return Math.max(scroll, offset, client);
265 |     };
266 | 
267 |     /**
268 |      * Return the number of pixels for psd-guides container to be aligned.
269 |      * @property _getAligment <private> [Function]
270 |      * @return [Number]
271 |      */
272 |     PSDGuides.prototype._getAligment = function _getAligment(siteWidth) {
273 |         if (this.config.alignment === "left") {
274 |             return 0;
275 |         }
276 | 
277 |         if (this.config.alignment === "right") {
278 |             return Math.floor(this._getMaxSize("Width") - siteWidth);
279 |         }
280 | 
281 |         return Math.floor((this._getMaxSize("Width") - siteWidth) / 2);
282 |     };
283 | 
284 |     /**
285 |      * Utility method for adding styles to elements.
286 |      * @property _setStyles <private> [Function]
287 |      * @argument element <required> [DOMElement]
288 |      * @argument hash <required> [Object]
289 |      * @return this [PSDGuides]
290 |      */
291 |     PSDGuides.prototype._setStyles = function _setStyles(element, hash) {
292 |         Object.keys(hash).forEach(function(propertyName) {
293 |             element.style[propertyName] = hash[propertyName];
294 |         });
295 | 
296 |         return this;
297 |     };
298 | 
299 |     /**
300 |      * CSS override utility.
301 |      * @property _overrideCSS <private> [Function]
302 |      * @return this [PSDGuides]
303 |      */
304 |     PSDGuides.prototype._overrideCSS = function _overrideCSS() {
305 |         var css, head, style;
306 | 
307 |         css = ".psd-guides-wrapper * {-webkit-box-sizing: border-box !important; box-sizing: border-box !important;}";
308 |         head = document.getElementsByTagName("head")[0];
309 |         style = document.createElement("style");
310 | 
311 |         style.type = "text/css";
312 | 
313 |         if (style.styleSheet) {
314 |             style.styleSheet.cssText = css;
315 |         } else {
316 |             style.appendChild(document.createTextNode(css));
317 |         }
318 | 
319 |         head.appendChild(style);
320 | 
321 |         return this;
322 |     };
323 | 
324 |     PSDGuides.prototype._hide = function _hide() {
325 |         this._ui.wrapper.style.display = "none";
326 |     };
327 | 
328 |     /**
329 |      * Return the current saved horizontal guides.
330 |      * @property getHorizontalGuides <public> [Function]
331 |      * @return this._horizontalGuides [Array]
332 |      */
333 |     PSDGuides.prototype.getHorizontalGuides = function getHorizontalGuides() {
334 |         return this._horizontalGuides;
335 |     };
336 | 
337 |     /**
338 |      * Return the current saved vertical guides.
339 |      * @property getVerticalGuides <public> [Function]
340 |      * @return this._verticalGuides [Array]
341 |      */
342 |     PSDGuides.prototype.getVerticalGuides = function getVerticalGuides() {
343 |         return this._verticalGuides;
344 |     };
345 | 
346 |     /**
347 |      * Clear the horizontal guides array reference.
348 |      * @property removeHorizontalGuides <public> [Function]
349 |      * @return this [PSDGuides]
350 |      */
351 |     PSDGuides.prototype.removeHorizontalGuides = function removeHorizontalGuides() {
352 |         this._horizontalGuides = [];
353 | 
354 |         return this;
355 |     };
356 | 
357 |     /**
358 |      * Clear the vertical guides array reference.
359 |      * @property removeVerticalGuides <public> [Function]
360 |      * @return this [PSDGuides]
361 |      */
362 |     PSDGuides.prototype.removeVerticalGuides = function removeVerticalGuides() {
363 |         this._verticalGuides = [];
364 | 
365 |         return this;
366 |     };
367 | 
368 |     /**
369 |      * Clear both horizontal and vertical array references.
370 |      * @property removeGuides <public> [Function]
371 |      * @return this [PSDGuides]
372 |      */
373 |     PSDGuides.prototype.removeGuides = function removeGuides() {
374 |         this.removeHorizontalGuides().removeVerticalGuides();
375 | 
376 |         return this;
377 |     };
378 | 
379 |     /**
380 |      * Update the width and height of psd-guides container,
381 |      * remove and create the guides using the guides array references.
382 |      * @property update <public> [Function]
383 |      * @return this [PSDGuides]
384 |      */
385 |     PSDGuides.prototype.update = function update() {
386 |         this._setStyles(this._ui.wrapper, {
387 |             width : this._getMaxSize("Width") + "px",
388 |             height : this._getMaxSize("Height") + "px"
389 |         })._removeLines()._createVerticalLines()._createHorizontalLines();
390 | 
391 |         return this;
392 |     };
393 | 
394 |     /**
395 |      * Display the guides.
396 |      * @property activate <public> [Function]
397 |      * @return this [PSDGuides]
398 |      */
399 |     PSDGuides.prototype.activate = function activate() {
400 |         this.active = true;
401 |         this.update();
402 |         this._ui.wrapper.style.display = "";
403 | 
404 |         return this;
405 |     };
406 | 
407 |     /**
408 |      * Hide the guides.
409 |      * @property deactivate <public> [Function]
410 |      * @return this [PSDGuides]
411 |      */
412 |     PSDGuides.prototype.deactivate = function deactivate() {
413 |         this.active = false;
414 |         this._hide();
415 | 
416 |         return this;
417 |     };
418 | 
419 |     /**
420 |      * Clean all references to other objects and remove DOMElements.
421 |      * @property destroy <public> [Function]
422 |      * @return null
423 |      */
424 |     PSDGuides.prototype.destroy = function destroy () {
425 |         this._removeLines();
426 |         this._ui.wrapper.removeChild(this._ui.vContainer);
427 |         this._ui.wrapper.removeChild(this._ui.hContainer);
428 |         this.config.canvas.removeChild(this._ui.wrapper);
429 |         window.removeEventListener("resize", this.__resizeHandler, false);
430 | 
431 |         Object.keys(this).forEach(function(propertyName) {
432 |             delete this[propertyName];
433 |         }, this);
434 | 
435 |         return null;
436 | 
437 |     };
438 | 
439 |     if (typeof exports === 'object') module.exports = PSDGuides;
440 |     else window.PSDGuides = PSDGuides;
441 | })();
442 | 
443 | },{}],2:[function(require,module,exports){
444 | window.onload = function () {
445 |     var guides = require('../');
446 |     var button = document.querySelector('button');
447 | 
448 |     button.addEventListener('click', function() {
449 |         if (psd.active) {
450 |             return psd.deactivate();
451 |         }
452 | 
453 |         return psd.activate();
454 |     });
455 | 
456 |     window.psd = new guides({
457 |         canvasWidth : 1000,
458 |         horizontalGuides : [20],
459 |         verticalGuides : [50, "100 * 2", "250 * 2"],
460 |         zIndex : 0
461 |     });
462 | 
463 |     psd.addHorizontalGuides(["355 * 2", 250]);
464 |     psd.addVerticalGuides(["50 * 3"]);
465 |     psd.activate();
466 | 
467 |     console.log('horizontals', psd.getHorizontalGuides());
468 |     console.log('verticals', psd.getVerticalGuides());
469 | };
470 | 
471 | },{"../":1}]},{},[2]);
472 | 


--------------------------------------------------------------------------------
/examples/basic.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>PSDGuides.js - Basic Example</title>
 6 |     <link rel="stylesheet" href="assets/reset.css" type="text/css">
 7 |     <style>
 8 |         body, button {
 9 |             font-size: 12px;
10 |             font-family: Helvetica, Arial, sans-serif;
11 |         }
12 |         #sample-container {
13 |             width: 960px;
14 |             margin: 50px auto;
15 |         }
16 |         #sample-container p {
17 |             text-align: center;
18 |             padding-top: 2.5em;
19 |         }
20 |         #sample-container header {
21 |           height: 200px;
22 |           background-color: #DCF5DC
23 |         }
24 |         #sample-container div[role='content'] {
25 |             height: 500px;
26 |         }
27 |         #sample-container div[role='main'] {
28 |             float: left;
29 |             width: 710px;
30 |             height: 100%;
31 |             background-color: #FCF4BE
32 |         }
33 |         #sample-container aside {
34 |             width: 250px;
35 |             height: 100%;
36 |             float: right;
37 |             background-color: #F5DCDC
38 |         }
39 |         #sample-container footer {
40 |             height: 100px;
41 |             background-color: #DCDCF5
42 |         }
43 |         .controls {
44 |           position: fixed;
45 |           top: 1em;
46 |           right: 1em;
47 |           z-index: 1;
48 |         }
49 |         .controls button {
50 |           cursor: pointer;
51 |           background-color: rgba(0,0,0,.7);
52 |           color: #fff;
53 |           border-radius: 3px;
54 |           font-weight: 600;
55 |           border: none;
56 |           padding: .5em 1em;
57 |         }
58 |         .controls button.active {
59 |           background-color: #09c;
60 |         }
61 |     </style>
62 | </head>
63 | <body>
64 |     <div id="sample-container">
65 |         <header>
66 |             <p>header</p>
67 |         </header>
68 |         <div role="content">
69 |             <div role="main">
70 |                 <p>content</p>
71 |             </div>
72 |             <aside>
73 |                 <p>sidebar</p>
74 |             </aside>
75 |         </div>
76 |         <footer>
77 |             <p>footer</p>
78 |         </footer>
79 |     </div>
80 | 
81 |     <div class="controls">
82 |         <button>Toggle PDSGuides</button>
83 |     </div>
84 |     <script src="basic-bundle.js"></script>
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/examples/basic.js:
--------------------------------------------------------------------------------
 1 | window.onload = function () {
 2 |     var guides = require('../');
 3 |     var button = document.querySelector('button');
 4 | 
 5 |     button.addEventListener('click', function() {
 6 |         if (psd.active) {
 7 |             return psd.deactivate();
 8 |         }
 9 | 
10 |         return psd.activate();
11 |     });
12 | 
13 |     window.psd = new guides({
14 |         canvasWidth : 1000,
15 |         horizontalGuides : [20],
16 |         verticalGuides : [50, "100 * 2", "250 * 2"],
17 |         zIndex : 0
18 |     });
19 | 
20 |     psd.addHorizontalGuides(["355 * 2", 250]);
21 |     psd.addVerticalGuides(["50 * 3"]);
22 |     psd.activate();
23 | 
24 |     console.log('horizontals', psd.getHorizontalGuides());
25 |     console.log('verticals', psd.getVerticalGuides());
26 | };
27 | 


--------------------------------------------------------------------------------
/examples/breezi-com.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8" />
 5 |   <title>PSDGuides.js - Breezi Old Example</title>
 6 |   <link rel="stylesheet" href="assets/reset.css" type="text/css">
 7 |   <style>
 8 |     body {
 9 |       background: #000 url('assets/images/breezi_com-sample.jpg') 50% 0 no-repeat;
10 |       width: 100%; min-height: 10948px;
11 |     }
12 |   </style>
13 | </head>
14 | <body>
15 | 
16 |   <script src="../PSDGuides.js"></script>
17 | 
18 |   <script>
19 |     window.onload = function () {
20 |       window.psd = new PSDGuides({
21 |         canvasWidth : 1400,
22 |         horizontalGuides : [40, 171, "(54, 30) * 5", 54, "15 * 2", "(54, 30) * 5", 54, 171],
23 |         verticalGuides : [
24 |           40, 72,
25 |           50, 190, 185, 185, 90, 50, 40,
26 |           178, 214, 16,
27 |           100, 100, 200, 200,
28 |           100, 168, 166, 100,
29 |           226, 226,
30 |           100, 211, 211, 100,
31 |           211, 211, 100,
32 |           671, 150,
33 |           615, 150,
34 |           105, 104, 100,
35 |           288, 100, //Fonts
36 |           204, 204, 100, // Forms
37 |           207, 205, 100, // Apps
38 |           155, 155, 100, // Pages
39 |           190, 190, 100, // SEO
40 |           211, 211, 100, // Chat
41 |           145, 145, 150, //Embed
42 |           204, 254, // Tracking
43 |           150, 457, // More
44 |           602, 47
45 |         ]
46 |       });
47 | 
48 |       psd.activate();
49 |     };
50 |   </script>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/examples/cnn.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8" />
 5 |   <title>PSDGuides.js - CNN Example</title>
 6 |   <link rel="stylesheet" href="assets/reset.css" type="text/css">
 7 |   <style>
 8 |     body {
 9 |       background: url('assets/images/_cnn-bg-sample.png') 50% no-repeat;
10 |       width: 100%; min-height: 2636px;
11 |     }
12 |   </style>
13 | </head>
14 | <body>
15 | 
16 | 
17 |   <script src="../PSDGuides.js"></script>
18 | 
19 |   <script>
20 |     window.onload = function () {
21 |       window.psd = new PSDGuides({
22 |         canvasWidth : 980,
23 |         horizontalGuides : [240, 10, 8, 232, 10, 175, 5, 60, 10],
24 |         verticalGuides : [85, 35, 5, 20, 250, 15, 505, 9, 160, 9, 250, 10, 250, 9, 251, 9, 252, 9, 158, 9, 129, 35, 59, 50, 11],
25 |         lineColor : 'red',
26 |         backColor : 'rgba(255, 0, 0, 0.1)'
27 |       });
28 | 
29 |       psd.activate();
30 |     };
31 |   </script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "psd-guides",
 3 |   "version": "1.0.1",
 4 |   "description": "Draw photoshop-like guides",
 5 |   "main": "./PSDGuides.js",
 6 |   "dependencies": {},
 7 |   "devDependencies": {},
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git://github.com/noeldelgado/psd-guides.git"
11 |   },
12 |   "keywords": [
13 |     "rules",
14 |     "photoshop"
15 |   ],
16 |   "author": "Noel Delgado <auhcsei@gmail.com>",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/noeldelgado/psd-guides/issues"
20 |   },
21 |   "homepage": "https://github.com/noeldelgado/psd-guides"
22 | }
23 | 


--------------------------------------------------------------------------------