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