1 /****************************************************************************
  2  Copyright (c) 2010-2012 cocos2d-x.org
  3  Copyright (c) 2008-2010 Ricardo Quesada
  4  Copyright (c) 2011      Zynga Inc.
  5 
  6  http://www.cocos2d-x.org
  7 
  8  Permission is hereby granted, free of charge, to any person obtaining a copy
  9  of this software and associated documentation files (the "Software"), to deal
 10  in the Software without restriction, including without limitation the rights
 11  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 12  copies of the Software, and to permit persons to whom the Software is
 13  furnished to do so, subject to the following conditions:
 14 
 15  The above copyright notice and this permission notice shall be included in
 16  all copies or substantial portions of the Software.
 17 
 18  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 19  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 20  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 21  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 22  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 23  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 24  THE SOFTWARE.
 25  ****************************************************************************/
 26 
 27 /**
 28  * Open an URL address
 29  * @function
 30  */
 31 cc.openURL = function (url) {
 32     if (this.isMobile) {
 33         var size = cc.director.getWinSize();
 34         var w = size.width + "px";
 35         var h = size.height + "px";
 36 
 37         var div = cc.$new("div");
 38         div.style.backgroundColor = "#ffffff";
 39         div.style.width = w;
 40         div.style.height = h;
 41         div.style.zindex = 1000;
 42         div.style.position = 'absolute';
 43         div.style.top = 0 + 'px';
 44         div.style.left = 0 + 'px';
 45         div.id = "cocos2d-browser";
 46 
 47         var iframe = cc.$new("iframe");
 48         iframe.src = url;
 49         iframe.style.width = w;
 50         iframe.style.height = h;
 51         iframe.setAttribute("frameborder", "no");
 52         iframe.setAttribute("scrolling", "no");
 53         div.appendChild(iframe);
 54 
 55         iframe.onload = function () {
 56             var close = document.createElement('img');
 57             close.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5OERBMEM3OUQzRTMxMUUyODg2Q0RFNjU1QkU1RjlFQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5OERBMEM3QUQzRTMxMUUyODg2Q0RFNjU1QkU1RjlFQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4REEwQzc3RDNFMzExRTI4ODZDREU2NTVCRTVGOUVBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk4REEwQzc4RDNFMzExRTI4ODZDREU2NTVCRTVGOUVBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+NwBuoAAAA/tJREFUeNrEWF0sW3EUb6+28zFhbGadsBaNhazV+kpDYhFWKRGWbHvwFV5IvPiIFw9evElEPEiWSUgsIWoIglhmUomPxj6aKC0zKVJjtPU5o9j5J7dLdbf33jKc5Jfc3v+v5/+755x7/j1lMoiNBRDh4AO88HvO2m+ACbAC+AJQAyz2JCbBFyMBWQA/xv+3DUAXLuivudhcY4BMwCuAB+NqDPmNAnAAOsCZvQgk4BnjeiwEwAbM2YoQA14yrteQEANgDcML7gXjZgw9OAuJkADu3JAIb7Q/hr+GtCwuLs6LDq+iooLvhBAREhFEl11ZWRne0tIiIeNIpVKv4uJi4dTUVApNt0EY3ohILSIiwqO7u1sql8vD8vLyJJ2dnXH2HDabzczPz3/Y1taWzOfz78XExDxSq9Vyd3d3jMK9F2pWr6lEtLa2RmVnZ4tt7w0NDWlTU1OVtkK7urqSQ0NDzzW5hYWFjcTExAGDwXDkyD+VSkZ7e3tsWlpamP19mUwWplQqk9B1UlKST3NzczxE4K49D4mCiDwn24PyPMjIyHjs6urKIVpLSEgInp6eZsM6Kzw8nEvEMZvNBxC1BbI9KCMhkUgUy8vLRpL1QIFA4EcSyZmcnJzpS4mYnZ3dj46O7p2fn193xIGi/CeiFovlFIp5pqGhYZ5qD1qFiQxCjk1OTsqEQmEAFReloL+/X0sVAadFWE2n02VA+O+TcVZXV01QkO8ODw9P6fjEnO2zvb2936g4XC7XG4rWm65P2iL8/f05kN8nBQUFQkqnGMYcGBjIys3N5dLxjY7ydDrE6urqsNLSUqmbmxuH1tOBkMzMTIHRaNxSqVTmS4soKyvjFRUViTw9PV2dTR901WAOh7M/MjKyeeHCbGpqEhcWFkY5Wl9aWtpUKBRaONziSbsii/Xm5OTk7EIdU6/X7zpaW1xc/Al5HxkfH9/e2dk5rqmpeUrE6+vr06ADzpEIlI5kMjFwPhh5PB5DJBKdK7KDg4Oj2tpaVUdHxw/0eWxszIjyj8Jvy4N60FdVVX2Grnt4dkaowYJESAG3yaLR09Oz5uvrexwbGxuAR2erpKTkI6RqxW5DM6RnLT09PQQV5vDwsDYlJWUU+I4EIDMhEQLAA6q0DA4OrqMCg/c/qL6+XtXY2Kgn4sGJuavRaFbFYrFPeXn5FIj6ReFa64KnIpJOpaMK39vbM9XV1X13lF9kc3Nz+xMTEwZo89s03A4ycRE1N/RjF/WPKgyfDRU39Gu7w1qYyNYAtwDB1yhgGPDBfgzU4bMi7xoEjAI6iWZRdGMGH80Cr2goRlP5W8B7qwBHfw1YO6kEH4yC8EnJ5QKbnuDFh17nr4BPRP9P/BFgAHo7ZNgI9EbHAAAAAElFTkSuQmCC";
 58             div.appendChild(close);
 59             close.style.zindex = 1000;
 60             close.style.position = 'absolute';
 61             close.style.bottom = 10 + 'px';
 62             close.style.right = 10 + 'px';
 63             close.onclick = function () {
 64                 div.remove();
 65             }
 66         };
 67 
 68         var tag = document['ccConfig'].tag;
 69         var parent = document.getElementById(tag).parentNode;
 70         if (parent) {
 71             parent.appendChild(div);
 72         }
 73     }
 74     else {
 75         window.open(url);
 76     }
 77 };
 78 
 79 /**
 80  * the dollar sign, classic like jquery, this selector add extra methods to HTMLElement without touching its prototype</br>
 81  * it is also chainable like jquery
 82  * @param {HTMLElement|String} x pass in a css selector in string or the whole HTMLElement
 83  * @class
 84  * @return {cc.$}
 85  */
 86 cc.$ = function (x) {
 87     /** @lends cc.$# */
 88     var parent = (this == cc) ? document : this;
 89 
 90     var el = (x instanceof HTMLElement) ? x : parent.querySelector(x);
 91 
 92     if (el) {
 93         /**
 94          * find and return the child wth css selector (same as jquery.find)
 95          * @lends cc.$#
 96          * @function
 97          * @param {HTMLElement|String} x pass in a css selector in string or the whole HTMLElement
 98          * @return {cc.$}
 99          */
100         el.find = el.find || cc.$;
101         /**
102          * check if a DOMNode has a specific class
103          * @lends cc.$#
104          * @function
105          * @param {String} cls
106          * @return {Boolean}
107          */
108         el.hasClass = el.hasClass || function (cls) {
109             return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
110         };
111         /**
112          * add a class to a DOMNode, returns self to allow chaining
113          * @lends cc.$#
114          * @function
115          * @param {String} cls
116          * @return {cc.$}
117          */
118         el.addClass = el.addClass || function (cls) {
119             if (!this.hasClass(cls)) {
120                 if (this.className) {
121                     this.className += " ";
122                 }
123                 this.className += cls;
124             }
125             return this;
126         };
127         /**
128          * remove a specific class from a DOMNode, returns self to allow chaining
129          * @lends cc.$#
130          * @function
131          * @param {String} cls
132          * @return {cc.$}
133          */
134         el.removeClass = el.removeClass || function (cls) {
135             if (this.hasClass(cls)) {
136                 this.className = this.className.replace(cls, '');
137             }
138             return this;
139         };
140         /**
141          * detach it self from parent
142          * @lends cc.$#
143          * @function
144          */
145         el.remove = el.remove || function () {
146             if (this.parentNode)
147                 this.parentNode.removeChild(this);
148             return this;
149         };
150 
151         /**
152          * add to another element as a child
153          * @lends cc.$#
154          * @function
155          * @param {HTMLElement|cc.$} x
156          * @return {cc.$}
157          */
158         el.appendTo = el.appendTo || function (x) {
159             x.appendChild(this);
160             return this;
161         };
162 
163         /**
164          * add to another element as a child and place on the top of the children list
165          * @lends cc.$#
166          * @function
167          * @param {HTMLElement|cc.$} x
168          * @return {cc.$}
169          */
170         el.prependTo = el.prependTo || function (x) {
171             ( x.childNodes[0]) ? x.insertBefore(this, x.childNodes[0]) : x.appendChild(this);
172             return this;
173         };
174 
175         /**
176          * helper function for updating the css transform
177          * @lends cc.$#
178          * @function
179          * @return {cc.$}
180          */
181         el.transforms = el.transforms || function () {
182             this.style[cc.$.trans] = cc.$.translate(this.position) + cc.$.rotate(this.rotation) + cc.$.scale(this.scale) + cc.$.skew(this.skew);
183             return this;
184         };
185 
186         el.position = el.position || {x: 0, y: 0};
187         el.rotation = el.rotation || 0;
188         el.scale = el.scale || {x: 1, y: 1};
189         el.skew = el.skew || {x: 0, y: 0};
190 
191         /**
192          * move the element
193          * @memberOf cc.$#
194          * @name translates
195          * @function
196          * @param {Number} x in pixel
197          * @param {Number} y in pixel
198          * @return {cc.$}
199          */
200         el.translates = function (x, y) {
201             this.position.x = x;
202             this.position.y = y;
203             this.transforms();
204             return this
205         };
206 
207         /**
208          * rotate the element
209          * @memberOf cc.$#
210          * @name rotate
211          * @function
212          * @param {Number} x in degrees
213          * @return {cc.$}
214          */
215         el.rotate = function (x) {
216             this.rotation = x;
217             this.transforms();
218             return this
219         };
220 
221         /**
222          * resize the element
223          * @memberOf cc.$#
224          * @name resize
225          * @function
226          * @param {Number} x
227          * @param {Number} y
228          * @return {cc.$}
229          */
230         el.resize = function (x, y) {
231             this.scale.x = x;
232             this.scale.y = y;
233             this.transforms();
234             return this
235         };
236 
237         /**
238          * skews the element
239          * @memberOf cc.$#
240          * @name setSkew
241          * @function
242          * @param {Number} x in degrees
243          * @param {Number} y
244          * @return {cc.$}
245          */
246         el.setSkew = function (x, y) {
247             this.skew.x = x;
248             this.skew.y = y;
249             this.transforms();
250             return this
251         };
252     }
253     return el;
254 };
255 //getting the prefix and css3 3d support
256 switch (cc.sys.browserType) {
257     case cc.sys.BROWSER_TYPE_FIREFOX:
258         cc.$.pfx = "Moz";
259         cc.$.hd = true;
260         break;
261     case cc.sys.BROWSER_TYPE_CHROME:
262     case cc.sys.BROWSER_TYPE_SAFARI:
263         cc.$.pfx = "webkit";
264         cc.$.hd = true;
265         break;
266     case cc.sys.BROWSER_TYPE_OPERA:
267         cc.$.pfx = "O";
268         cc.$.hd = false;
269         break;
270     case cc.sys.BROWSER_TYPE_IE:
271         cc.$.pfx = "ms";
272         cc.$.hd = false;
273         break;
274     default:
275         cc.$.pfx = "webkit";
276         cc.$.hd = true;
277 }
278 //cache for prefixed transform
279 cc.$.trans = cc.$.pfx + "Transform";
280 //helper function for constructing transform strings
281 cc.$.translate = (cc.$.hd) ? function (a) {
282     return "translate3d(" + a.x + "px, " + a.y + "px, 0) "
283 } : function (a) {
284     return "translate(" + a.x + "px, " + a.y + "px) "
285 };
286 cc.$.rotate = (cc.$.hd) ? function (a) {
287     return "rotateZ(" + a + "deg) ";
288 } : function (a) {
289     return "rotate(" + a + "deg) ";
290 };
291 cc.$.scale = function (a) {
292     return "scale(" + a.x + ", " + a.y + ") "
293 };
294 cc.$.skew = function (a) {
295     return "skewX(" + -a.x + "deg) skewY(" + a.y + "deg)";
296 };
297 
298 
299 /**
300  * Creates a new element, and adds cc.$ methods
301  * @param {String} x name of the element tag to create
302  * @return {cc.$}
303  */
304 cc.$new = function (x) {
305     return cc.$(document.createElement(x))
306 };
307 cc.$.findpos = function (obj) {
308     var curleft = 0;
309     var curtop = 0;
310     do {
311         curleft += obj.offsetLeft;
312         curtop += obj.offsetTop;
313     } while (obj = obj.offsetParent);
314     return {x: curleft, y: curtop};
315 };
316