PIE_IE9_uncompressed.js 109 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992
  1. /*
  2. PIE: CSS3 rendering for IE
  3. Version 2.0beta1
  4. http://css3pie.com
  5. Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
  6. */
  7. (function( win, doc ) {
  8. var PIE = win[ 'PIE' ] || ( win[ 'PIE' ] = {} );
  9. /**
  10. * Simple utility for merging objects
  11. * @param {Object} obj1 The main object into which all others will be merged
  12. * @param {...Object} var_args Other objects which will be merged into the first, in order
  13. */
  14. PIE.merge = function( obj1 ) {
  15. var i, len, p, objN, args = arguments;
  16. for( i = 1, len = args.length; i < len; i++ ) {
  17. objN = args[i];
  18. for( p in objN ) {
  19. if( objN.hasOwnProperty( p ) ) {
  20. obj1[ p ] = objN[ p ];
  21. }
  22. }
  23. }
  24. return obj1;
  25. };
  26. PIE.merge(PIE, {
  27. // Constants
  28. CSS_PREFIX: '-pie-',
  29. STYLE_PREFIX: 'Pie',
  30. CLASS_PREFIX: 'pie_',
  31. tableCellTags: {
  32. 'TD': 1,
  33. 'TH': 1
  34. },
  35. /**
  36. * Lookup table of elements which cannot take custom children.
  37. */
  38. childlessElements: {
  39. 'TABLE':1,
  40. 'THEAD':1,
  41. 'TBODY':1,
  42. 'TFOOT':1,
  43. 'TR':1,
  44. 'INPUT':1,
  45. 'TEXTAREA':1,
  46. 'SELECT':1,
  47. 'OPTION':1,
  48. 'IMG':1,
  49. 'HR':1
  50. },
  51. /**
  52. * Elements that can receive user focus
  53. */
  54. focusableElements: {
  55. 'A':1,
  56. 'INPUT':1,
  57. 'TEXTAREA':1,
  58. 'SELECT':1,
  59. 'BUTTON':1
  60. },
  61. /**
  62. * Values of the type attribute for input elements displayed as buttons
  63. */
  64. inputButtonTypes: {
  65. 'submit':1,
  66. 'button':1,
  67. 'reset':1
  68. },
  69. emptyFn: function() {}
  70. });
  71. // Force the background cache to be used. No reason it shouldn't be.
  72. try {
  73. doc.execCommand( 'BackgroundImageCache', false, true );
  74. } catch(e) {}
  75. (function() {
  76. /*
  77. * IE version detection approach by James Padolsey, with modifications -- from
  78. * http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
  79. */
  80. var ieVersion = 4,
  81. div = doc.createElement('div'),
  82. all = div.getElementsByTagName('i'),
  83. shape;
  84. while (
  85. div.innerHTML = '<!--[if gt IE ' + (++ieVersion) + ']><i></i><![endif]-->',
  86. all[0]
  87. ) {}
  88. PIE.ieVersion = ieVersion;
  89. // Detect IE6
  90. if( ieVersion === 6 ) {
  91. // IE6 can't access properties with leading dash, but can without it.
  92. PIE.CSS_PREFIX = PIE.CSS_PREFIX.replace( /^-/, '' );
  93. }
  94. PIE.ieDocMode = doc.documentMode || PIE.ieVersion;
  95. // Detect VML support (a small number of IE installs don't have a working VML engine)
  96. div.innerHTML = '<v:shape adj="1"/>';
  97. shape = div.firstChild;
  98. shape.style['behavior'] = 'url(#default#VML)';
  99. PIE.supportsVML = (typeof shape['adj'] === "object");
  100. })();
  101. /**
  102. * Utility functions
  103. */
  104. (function() {
  105. var idNum = 0,
  106. imageSizes = {};
  107. PIE.Util = {
  108. /**
  109. * Generate and return a unique ID for a given object. The generated ID is stored
  110. * as a property of the object for future reuse. For DOM Elements, don't use this
  111. * but use the IE-native uniqueID property instead.
  112. * @param {Object} obj
  113. */
  114. getUID: function( obj ) {
  115. return obj && obj[ '_pieId' ] || ( obj[ '_pieId' ] = '_' + idNum++ );
  116. },
  117. /**
  118. * Execute a callback function, passing it the dimensions of a given image once
  119. * they are known.
  120. * @param {string} src The source URL of the image
  121. * @param {function({w:number, h:number})} func The callback function to be called once the image dimensions are known
  122. * @param {Object} ctx A context object which will be used as the 'this' value within the executed callback function
  123. */
  124. withImageSize: function( src, func, ctx ) {
  125. var size = imageSizes[ src ], img, queue;
  126. if( size ) {
  127. // If we have a queue, add to it
  128. if( Object.prototype.toString.call( size ) === '[object Array]' ) {
  129. size.push( [ func, ctx ] );
  130. }
  131. // Already have the size cached, call func right away
  132. else {
  133. func.call( ctx, size );
  134. }
  135. } else {
  136. queue = imageSizes[ src ] = [ [ func, ctx ] ]; //create queue
  137. img = new Image();
  138. img.onload = function() {
  139. size = imageSizes[ src ] = { w: img.width, h: img.height };
  140. for( var i = 0, len = queue.length; i < len; i++ ) {
  141. queue[ i ][ 0 ].call( queue[ i ][ 1 ], size );
  142. }
  143. img.onload = null;
  144. };
  145. img.src = src;
  146. }
  147. }
  148. };
  149. })();/**
  150. * Utility functions for handling gradients
  151. */
  152. PIE.GradientUtil = {
  153. toSideAngles: {
  154. 'top': 0,
  155. 'right': 90,
  156. 'bottom': 180,
  157. 'left': 270
  158. },
  159. getGradientMetrics: function( el, width, height, gradientInfo ) {
  160. var angle = gradientInfo.angle,
  161. toPos = gradientInfo.gradientTo,
  162. dX, dY,
  163. endPoint,
  164. startX, startY,
  165. endX, endY;
  166. // If an angle was specified, just use it
  167. if (angle) {
  168. angle = angle.degrees();
  169. }
  170. // If a to-position was specified, find the appropriate angle for it
  171. else if (toPos) {
  172. // To a corner; find the adjacent corners and use the angle perpendicular to them
  173. if (toPos[1]) {
  174. dX = ( toPos[0] == 'top' || toPos[1] == 'top' ) ? width : -width;
  175. dY = ( toPos[0] == 'left' || toPos[1] == 'left' ) ? -height : height;
  176. angle = Math.atan2(dY, dX) * 180 / Math.PI;
  177. }
  178. // To a side; map to a vertical/horizontal angle
  179. else {
  180. angle = this.toSideAngles[toPos[0]];
  181. }
  182. }
  183. // Neither specified; default is top to bottom
  184. else {
  185. angle = 180;
  186. }
  187. // Normalize the angle to a value between [0, 360)
  188. while( angle < 0 ) {
  189. angle += 360;
  190. }
  191. angle = angle % 360;
  192. // Find the end point of the gradient line, extending the angle from the center point
  193. // to where it intersects the perpendicular line passing through the nearest corner.
  194. endPoint = PIE.GradientUtil.perpendicularIntersect(width / 2, height / 2, angle,
  195. ( angle >= 180 ? 0 : width ), ( angle < 90 || angle > 270 ? 0 : height )
  196. );
  197. endX = endPoint[0];
  198. endY = endPoint[1];
  199. startX = width - endX;
  200. startY = height - endY;
  201. return {
  202. angle: angle,
  203. endX: endX,
  204. endY: endY,
  205. startX: startX,
  206. startY: startY,
  207. lineLength: PIE.GradientUtil.distance( startX, startY, endX, endY )
  208. };
  209. },
  210. /**
  211. * Find the point along a given line (defined by a starting point and an angle), at which
  212. * that line is intersected by a perpendicular line extending through another point.
  213. * @param x1 - x coord of the starting point
  214. * @param y1 - y coord of the starting point
  215. * @param angle - angle of the line extending from the starting point (in degrees)
  216. * @param x2 - x coord of point along the perpendicular line
  217. * @param y2 - y coord of point along the perpendicular line
  218. * @return [ x, y ]
  219. */
  220. perpendicularIntersect: function( x1, y1, angle, x2, y2 ) {
  221. // Handle straight vertical and horizontal angles, for performance and to avoid
  222. // divide-by-zero errors.
  223. if( angle === 0 || angle === 180 ) {
  224. return [ x1, y2 ];
  225. }
  226. else if( angle === 90 || angle === 270 ) {
  227. return [ x2, y1 ];
  228. }
  229. else {
  230. // General approach: determine the Ax+By=C formula for each line (the slope of the second
  231. // line is the negative inverse of the first) and then solve for where both formulas have
  232. // the same x/y values.
  233. var a1 = Math.tan( ( angle - 90 ) * Math.PI / 180 ),
  234. c1 = a1 * x1 - y1,
  235. a2 = -1 / a1,
  236. c2 = a2 * x2 - y2,
  237. d = a2 - a1,
  238. endX = ( c2 - c1 ) / d,
  239. endY = ( a1 * c2 - a2 * c1 ) / d;
  240. return [ endX, endY ];
  241. }
  242. },
  243. /**
  244. * Find the distance between two points
  245. * @param {Number} p1x
  246. * @param {Number} p1y
  247. * @param {Number} p2x
  248. * @param {Number} p2y
  249. * @return {Number} the distance
  250. */
  251. distance: function( p1x, p1y, p2x, p2y ) {
  252. var dx = p2x - p1x,
  253. dy = p2y - p1y;
  254. return Math.abs(
  255. dx === 0 ? dy :
  256. dy === 0 ? dx :
  257. Math.sqrt( dx * dx + dy * dy )
  258. );
  259. }
  260. };/**
  261. *
  262. */
  263. PIE.Observable = function() {
  264. /**
  265. * List of registered observer functions
  266. */
  267. this.observers = [];
  268. /**
  269. * Hash of function ids to their position in the observers list, for fast lookup
  270. */
  271. this.indexes = {};
  272. };
  273. PIE.Observable.prototype = {
  274. observe: function( fn ) {
  275. var id = PIE.Util.getUID( fn ),
  276. indexes = this.indexes,
  277. observers = this.observers;
  278. if( !( id in indexes ) ) {
  279. indexes[ id ] = observers.length;
  280. observers.push( fn );
  281. }
  282. },
  283. unobserve: function( fn ) {
  284. var id = PIE.Util.getUID( fn ),
  285. indexes = this.indexes;
  286. if( id && id in indexes ) {
  287. delete this.observers[ indexes[ id ] ];
  288. delete indexes[ id ];
  289. }
  290. },
  291. fire: function() {
  292. var o = this.observers,
  293. i = o.length;
  294. while( i-- ) {
  295. o[ i ] && o[ i ]();
  296. }
  297. }
  298. };/*
  299. * Simple heartbeat timer - this is a brute-force workaround for syncing issues caused by IE not
  300. * always firing the onmove and onresize events when elements are moved or resized. We check a few
  301. * times every second to make sure the elements have the correct position and size. See Element.js
  302. * which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8-9
  303. * and false elsewhere.
  304. */
  305. PIE.Heartbeat = new PIE.Observable();
  306. PIE.Heartbeat.run = function() {
  307. var me = this,
  308. interval;
  309. if( !me.running ) {
  310. interval = doc.documentElement.currentStyle.getAttribute( PIE.CSS_PREFIX + 'poll-interval' ) || 250;
  311. (function beat() {
  312. me.fire();
  313. setTimeout(beat, interval);
  314. })();
  315. me.running = 1;
  316. }
  317. };
  318. /**
  319. * Create an observable listener for the onunload event
  320. */
  321. (function() {
  322. PIE.OnUnload = new PIE.Observable();
  323. function handleUnload() {
  324. PIE.OnUnload.fire();
  325. win.detachEvent( 'onunload', handleUnload );
  326. win[ 'PIE' ] = null;
  327. }
  328. win.attachEvent( 'onunload', handleUnload );
  329. /**
  330. * Attach an event which automatically gets detached onunload
  331. */
  332. PIE.OnUnload.attachManagedEvent = function( target, name, handler ) {
  333. target.attachEvent( name, handler );
  334. this.observe( function() {
  335. target.detachEvent( name, handler );
  336. } );
  337. };
  338. })()/**
  339. * Create a single observable listener for window resize events.
  340. */
  341. PIE.OnResize = new PIE.Observable();
  342. PIE.OnUnload.attachManagedEvent( win, 'onresize', function() { PIE.OnResize.fire(); } );
  343. /**
  344. * Create a single observable listener for scroll events. Used for lazy loading based
  345. * on the viewport, and for fixed position backgrounds.
  346. */
  347. (function() {
  348. PIE.OnScroll = new PIE.Observable();
  349. function scrolled() {
  350. PIE.OnScroll.fire();
  351. }
  352. PIE.OnUnload.attachManagedEvent( win, 'onscroll', scrolled );
  353. PIE.OnResize.observe( scrolled );
  354. })();
  355. /**
  356. * Create a single observable listener for document mouseup events.
  357. */
  358. PIE.OnMouseup = new PIE.Observable();
  359. PIE.OnUnload.attachManagedEvent( doc, 'onmouseup', function() { PIE.OnMouseup.fire(); } );
  360. /**
  361. * Wrapper for length and percentage style values. The value is immutable. A singleton instance per unique
  362. * value is returned from PIE.getLength() - always use that instead of instantiating directly.
  363. * @constructor
  364. * @param {string} val The CSS string representing the length. It is assumed that this will already have
  365. * been validated as a valid length or percentage syntax.
  366. */
  367. PIE.Length = (function() {
  368. var lengthCalcEl = doc.createElement( 'length-calc' ),
  369. parent = doc.body || doc.documentElement,
  370. s = lengthCalcEl.style,
  371. conversions = {},
  372. units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],
  373. i = units.length,
  374. instances = {};
  375. s.position = 'absolute';
  376. s.top = s.left = '-9999px';
  377. parent.appendChild( lengthCalcEl );
  378. while( i-- ) {
  379. s.width = '100' + units[i];
  380. conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;
  381. }
  382. parent.removeChild( lengthCalcEl );
  383. // All calcs from here on will use 1em
  384. s.width = '1em';
  385. function Length( val ) {
  386. this.val = val;
  387. }
  388. Length.prototype = {
  389. /**
  390. * Regular expression for matching the length unit
  391. * @private
  392. */
  393. unitRE: /(px|em|ex|mm|cm|in|pt|pc|%)$/,
  394. /**
  395. * Get the numeric value of the length
  396. * @return {number} The value
  397. */
  398. getNumber: function() {
  399. var num = this.num,
  400. UNDEF;
  401. if( num === UNDEF ) {
  402. num = this.num = parseFloat( this.val );
  403. }
  404. return num;
  405. },
  406. /**
  407. * Get the unit of the length
  408. * @return {string} The unit
  409. */
  410. getUnit: function() {
  411. var unit = this.unit,
  412. m;
  413. if( !unit ) {
  414. m = this.val.match( this.unitRE );
  415. unit = this.unit = ( m && m[0] ) || 'px';
  416. }
  417. return unit;
  418. },
  419. /**
  420. * Determine whether this is a percentage length value
  421. * @return {boolean}
  422. */
  423. isPercentage: function() {
  424. return this.getUnit() === '%';
  425. },
  426. /**
  427. * Resolve this length into a number of pixels.
  428. * @param {Element} el - the context element, used to resolve font-relative values
  429. * @param {(function():number|number)=} pct100 - the number of pixels that equal a 100% percentage. This can be either a number or a
  430. * function which will be called to return the number.
  431. */
  432. pixels: function( el, pct100 ) {
  433. var num = this.getNumber(),
  434. unit = this.getUnit();
  435. switch( unit ) {
  436. case "px":
  437. return num;
  438. case "%":
  439. return num * ( typeof pct100 === 'function' ? pct100() : pct100 ) / 100;
  440. case "em":
  441. return num * this.getEmPixels( el );
  442. case "ex":
  443. return num * this.getEmPixels( el ) / 2;
  444. default:
  445. return num * conversions[ unit ];
  446. }
  447. },
  448. /**
  449. * The em and ex units are relative to the font-size of the current element,
  450. * however if the font-size is set using non-pixel units then we get that value
  451. * rather than a pixel conversion. To get around this, we keep a floating element
  452. * with width:1em which we insert into the target element and then read its offsetWidth.
  453. * For elements that won't accept a child we insert into the parent node and perform
  454. * additional calculation. If the font-size *is* specified in pixels, then we use that
  455. * directly to avoid the expensive DOM manipulation.
  456. * @param {Element} el
  457. * @return {number}
  458. */
  459. getEmPixels: function( el ) {
  460. var fs = el.currentStyle.fontSize,
  461. px, parent, me;
  462. if( fs.indexOf( 'px' ) > 0 ) {
  463. return parseFloat( fs );
  464. }
  465. else if( el.tagName in PIE.childlessElements ) {
  466. me = this;
  467. parent = el.parentNode;
  468. return PIE.getLength( fs ).pixels( parent, function() {
  469. return me.getEmPixels( parent );
  470. } );
  471. }
  472. else {
  473. el.appendChild( lengthCalcEl );
  474. px = lengthCalcEl.offsetWidth;
  475. if( lengthCalcEl.parentNode === el ) { //not sure how this could be false but it sometimes is
  476. el.removeChild( lengthCalcEl );
  477. }
  478. return px;
  479. }
  480. }
  481. };
  482. /**
  483. * Convert a pixel length into a point length
  484. */
  485. Length.pxToPt = function( px ) {
  486. return px / conversions[ 'pt' ];
  487. };
  488. /**
  489. * Retrieve a PIE.Length instance for the given value. A shared singleton instance is returned for each unique value.
  490. * @param {string} val The CSS string representing the length. It is assumed that this will already have
  491. * been validated as a valid length or percentage syntax.
  492. */
  493. PIE.getLength = function( val ) {
  494. return instances[ val ] || ( instances[ val ] = new Length( val ) );
  495. };
  496. return Length;
  497. })();
  498. /**
  499. * Wrapper for a CSS3 bg-position value. Takes up to 2 position keywords and 2 lengths/percentages.
  500. * @constructor
  501. * @param {Array.<PIE.Tokenizer.Token>} tokens The tokens making up the background position value.
  502. */
  503. PIE.BgPosition = (function() {
  504. var length_fifty = PIE.getLength( '50%' ),
  505. vert_idents = { 'top': 1, 'center': 1, 'bottom': 1 },
  506. horiz_idents = { 'left': 1, 'center': 1, 'right': 1 };
  507. function BgPosition( tokens ) {
  508. this.tokens = tokens;
  509. }
  510. BgPosition.prototype = {
  511. /**
  512. * Normalize the values into the form:
  513. * [ xOffsetSide, xOffsetLength, yOffsetSide, yOffsetLength ]
  514. * where: xOffsetSide is either 'left' or 'right',
  515. * yOffsetSide is either 'top' or 'bottom',
  516. * and x/yOffsetLength are both PIE.Length objects.
  517. * @return {Array}
  518. */
  519. getValues: function() {
  520. if( !this._values ) {
  521. var tokens = this.tokens,
  522. len = tokens.length,
  523. Tokenizer = PIE.Tokenizer,
  524. identType = Tokenizer.Type,
  525. length_zero = PIE.getLength( '0' ),
  526. type_ident = identType.IDENT,
  527. type_length = identType.LENGTH,
  528. type_percent = identType.PERCENT,
  529. type, value,
  530. vals = [ 'left', length_zero, 'top', length_zero ];
  531. // If only one value, the second is assumed to be 'center'
  532. if( len === 1 ) {
  533. tokens.push( new Tokenizer.Token( type_ident, 'center' ) );
  534. len++;
  535. }
  536. // Two values - CSS2
  537. if( len === 2 ) {
  538. // If both idents, they can appear in either order, so switch them if needed
  539. if( type_ident & ( tokens[0].tokenType | tokens[1].tokenType ) &&
  540. tokens[0].tokenValue in vert_idents && tokens[1].tokenValue in horiz_idents ) {
  541. tokens.push( tokens.shift() );
  542. }
  543. if( tokens[0].tokenType & type_ident ) {
  544. if( tokens[0].tokenValue === 'center' ) {
  545. vals[1] = length_fifty;
  546. } else {
  547. vals[0] = tokens[0].tokenValue;
  548. }
  549. }
  550. else if( tokens[0].isLengthOrPercent() ) {
  551. vals[1] = PIE.getLength( tokens[0].tokenValue );
  552. }
  553. if( tokens[1].tokenType & type_ident ) {
  554. if( tokens[1].tokenValue === 'center' ) {
  555. vals[3] = length_fifty;
  556. } else {
  557. vals[2] = tokens[1].tokenValue;
  558. }
  559. }
  560. else if( tokens[1].isLengthOrPercent() ) {
  561. vals[3] = PIE.getLength( tokens[1].tokenValue );
  562. }
  563. }
  564. // Three or four values - CSS3
  565. else {
  566. // TODO
  567. }
  568. this._values = vals;
  569. }
  570. return this._values;
  571. },
  572. /**
  573. * Find the coordinates of the background image from the upper-left corner of the background area.
  574. * Note that these coordinate values are not rounded.
  575. * @param {Element} el
  576. * @param {number} width - the width for percentages (background area width minus image width)
  577. * @param {number} height - the height for percentages (background area height minus image height)
  578. * @return {Object} { x: Number, y: Number }
  579. */
  580. coords: function( el, width, height ) {
  581. var vals = this.getValues(),
  582. pxX = vals[1].pixels( el, width ),
  583. pxY = vals[3].pixels( el, height );
  584. return {
  585. x: vals[0] === 'right' ? width - pxX : pxX,
  586. y: vals[2] === 'bottom' ? height - pxY : pxY
  587. };
  588. }
  589. };
  590. return BgPosition;
  591. })();
  592. /**
  593. * Wrapper for a CSS3 background-size value.
  594. * @constructor
  595. * @param {String|PIE.Length} w The width parameter
  596. * @param {String|PIE.Length} h The height parameter, if any
  597. */
  598. PIE.BgSize = (function() {
  599. var CONTAIN = 'contain',
  600. COVER = 'cover',
  601. AUTO = 'auto';
  602. function BgSize( w, h ) {
  603. this.w = w;
  604. this.h = h;
  605. }
  606. BgSize.prototype = {
  607. pixels: function( el, areaW, areaH, imgW, imgH ) {
  608. var me = this,
  609. w = me.w,
  610. h = me.h,
  611. areaRatio = areaW / areaH,
  612. imgRatio = imgW / imgH;
  613. if ( w === CONTAIN ) {
  614. w = imgRatio > areaRatio ? areaW : areaH * imgRatio;
  615. h = imgRatio > areaRatio ? areaW / imgRatio : areaH;
  616. }
  617. else if ( w === COVER ) {
  618. w = imgRatio < areaRatio ? areaW : areaH * imgRatio;
  619. h = imgRatio < areaRatio ? areaW / imgRatio : areaH;
  620. }
  621. else if ( w === AUTO ) {
  622. h = ( h === AUTO ? imgH : h.pixels( el, areaH ) );
  623. w = h * imgRatio;
  624. }
  625. else {
  626. w = w.pixels( el, areaW );
  627. h = ( h === AUTO ? w / imgRatio : h.pixels( el, areaH ) );
  628. }
  629. return { w: w, h: h };
  630. }
  631. };
  632. BgSize.DEFAULT = new BgSize( AUTO, AUTO );
  633. return BgSize;
  634. })();
  635. /**
  636. * Wrapper for angle values; handles conversion to degrees from all allowed angle units
  637. * @constructor
  638. * @param {string} val The raw CSS value for the angle. It is assumed it has been pre-validated.
  639. */
  640. PIE.Angle = (function() {
  641. function Angle( val ) {
  642. this.val = val;
  643. }
  644. Angle.prototype = {
  645. unitRE: /[a-z]+$/i,
  646. /**
  647. * @return {string} The unit of the angle value
  648. */
  649. getUnit: function() {
  650. return this._unit || ( this._unit = this.val.match( this.unitRE )[0].toLowerCase() );
  651. },
  652. /**
  653. * Get the numeric value of the angle in degrees.
  654. * @return {number} The degrees value
  655. */
  656. degrees: function() {
  657. var deg = this._deg, u, n;
  658. if( deg === undefined ) {
  659. u = this.getUnit();
  660. n = parseFloat( this.val, 10 );
  661. deg = this._deg = ( u === 'deg' ? n : u === 'rad' ? n / Math.PI * 180 : u === 'grad' ? n / 400 * 360 : u === 'turn' ? n * 360 : 0 );
  662. }
  663. return deg;
  664. }
  665. };
  666. return Angle;
  667. })();/**
  668. * Abstraction for colors values. Allows detection of rgba values. A singleton instance per unique
  669. * value is returned from PIE.getColor() - always use that instead of instantiating directly.
  670. * @constructor
  671. * @param {string} val The raw CSS string value for the color
  672. */
  673. PIE.Color = (function() {
  674. /*
  675. * hsl2rgb from http://codingforums.com/showthread.php?t=11156
  676. * code by Jason Karl Davis (http://www.jasonkarldavis.com)
  677. * swiped from cssSandpaper by Zoltan Hawryluk (http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/)
  678. * modified for formatting and size optimizations
  679. */
  680. function hsl2rgb( h, s, l ) {
  681. var m1, m2, r, g, b,
  682. round = Math.round;
  683. s /= 100;
  684. l /= 100;
  685. if ( !s ) { r = g = b = l * 255; }
  686. else {
  687. if ( l <= 0.5 ) { m2 = l * ( s + 1 ); }
  688. else { m2 = l + s - l * s; }
  689. m1 = l * 2 - m2;
  690. h = ( h % 360 ) / 360;
  691. r = hueToRgb( m1, m2, h + 1/3 );
  692. g = hueToRgb( m1, m2, h );
  693. b = hueToRgb( m1, m2, h - 1/3 );
  694. }
  695. return { r: round( r ), g: round( g ), b: round( b ) };
  696. }
  697. function hueToRgb( m1, m2, hue ) {
  698. var v;
  699. if ( hue < 0 ) { hue += 1; }
  700. else if ( hue > 1 ) { hue -= 1; }
  701. if ( 6 * hue < 1 ) { v = m1 + ( m2 - m1 ) * hue * 6; }
  702. else if ( 2 * hue < 1 ) { v = m2; }
  703. else if ( 3 * hue < 2 ) { v = m1 + ( m2 - m1 ) * ( 2/3 - hue ) * 6; }
  704. else { v = m1; }
  705. return 255 * v;
  706. }
  707. var instances = {};
  708. function Color( val ) {
  709. this.val = val;
  710. }
  711. /**
  712. * Regular expression for matching rgba colors and extracting their components
  713. * @type {RegExp}
  714. */
  715. Color.rgbOrRgbaRE = /\s*rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*(\d+|\d*\.\d+))?\s*\)\s*/;
  716. Color.hslOrHslaRE = /\s*hsla?\(\s*(\d*\.?\d+)\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*(,\s*(\d+|\d*\.\d+))?\s*\)\s*/;
  717. /**
  718. * Hash of color keyword names to their corresponding hex values. Encoded for
  719. * small size and expanded into a hash on startup.
  720. */
  721. Color.names = {};
  722. var names = 'black|0|navy|3k|darkblue|b|mediumblue|1u|blue|1e|darkgreen|jk1|green|5j4|teal|3k|darkcyan|26j|deepskyblue|ad0|darkturquoise|2xe|mediumspringgreen|8nd|lime|va|springgreen|3j|aqua|3k|cyan|0|midnightblue|xunl|dodgerblue|7ogf|lightseagreen|2zsb|forestgreen|2lbs|seagreen|guut|darkslategray|12pk|limegreen|4wkj|mediumseagreen|dwlb|turquoise|5v8f|royalblue|r2p|steelblue|75qr|darkslateblue|2fh3|mediumturquoise|ta9|indigo|32d2|darkolivegreen|emr1|cadetblue|ebu9|cornflowerblue|6z4d|mediumaquamarine|3459|dimgray|3nwf|slateblue|1bok|olivedrab|1opi|slategray|6y5p|lightslategray|9vk9|mediumslateblue|5g0l|lawngreen|27ma|chartreuse|48ao|aquamarine|5w|maroon|18|purple|3k|olive|p6o|gray|3k|lightslateblue|5j7j|skyblue|4q98|lightskyblue|f|blueviolet|3bhk|darkred|15we|darkmagenta|3v|saddlebrown|djc|darkseagreen|69vg|lightgreen|1og1|mediumpurple|3ivc|darkviolet|sfv|palegreen|6zt1|darkorchid|awk|yellowgreen|292e|sienna|7r3v|brown|6sxp|darkgray|6bgf|lightblue|5vlp|greenyellow|7k9|paleturquoise|2pxb|lightsteelblue|169c|powderblue|5jc|firebrick|1rgc|darkgoldenrod|8z55|mediumorchid|2jm0|rosybrown|34jg|darkkhaki|1mfw|silver|49jp|mediumvioletred|8w5h|indianred|8tef|peru|82r|violetred|3ntd|feldspar|212d|chocolate|16eh|tan|ewe|lightgrey|1kqv|palevioletred|6h8g|metle|fnp|orchid|2dj2|goldenrod|abu|crimson|20ik|gainsboro|13mo|plum|12pt|burlywood|1j8q|lightcyan|3794|lavender|8agr|darksalmon|3rsw|violet|6wz8|palegoldenrod|k3g|lightcoral|28k6|khaki|k5o|aliceblue|3n7|honeydew|1dd|azure|f|sandybrown|5469|wheat|1q37|beige|4kp|whitesmoke|p|mintcream|1z9|ghostwhite|46bp|salmon|25bn|antiquewhite|l7p|linen|zz|lightgoldenrodyellow|1yk|oldlace|46qc|red|1gka|magenta|73|fuchsia|0|deeppink|3v8|orangered|9kd|tomato|5zb|hotpink|19p|coral|49o|darkorange|2i8|lightsalmon|41m|orange|w6|lightpink|3i9|pink|1ze|gold|4dx|peachpuff|qh|navajowhite|s4|moccasin|16w|bisque|f|mistyrose|t|blanchedalmond|1d8|papayawhip|so|lavenderblush|80|seashell|zd|cornsilk|ku|lemonchiffon|dt|floralwhite|z|snow|a|yellow|sm|lightyellow|68|ivory|g|white|f'.split('|'),
  723. i = 0, len = names.length, color = 0, hexColor;
  724. for(; i < len; i += 2) {
  725. color += parseInt(names[i + 1], 36);
  726. hexColor = color.toString(16);
  727. Color.names[names[i]] = '#000000'.slice(0, -hexColor.length) + hexColor;
  728. }
  729. Color.prototype = {
  730. /**
  731. * @private
  732. */
  733. parse: function() {
  734. if( !this._color ) {
  735. var me = this,
  736. color = me.val,
  737. alpha, vLower, m, rgb;
  738. // RGB or RGBA colors
  739. if( m = color.match( Color.rgbOrRgbaRE ) ) {
  740. color = me.rgbToHex( +m[1], +m[2], +m[3] );
  741. alpha = m[5] ? +m[5] : 1;
  742. }
  743. // HSL or HSLA colors
  744. else if( m = color.match( Color.hslOrHslaRE ) ) {
  745. rgb = hsl2rgb( m[1], m[2], m[3] );
  746. color = me.rgbToHex( rgb.r, rgb.g, rgb.b );
  747. alpha = m[5] ? +m[5] : 1;
  748. }
  749. else {
  750. if( Color.names.hasOwnProperty( vLower = color.toLowerCase() ) ) {
  751. color = Color.names[vLower];
  752. }
  753. alpha = ( color === 'transparent' ? 0 : 1 );
  754. }
  755. me._color = color;
  756. me._alpha = alpha;
  757. }
  758. },
  759. /**
  760. * Converts RGB color channels to a hex value string
  761. */
  762. rgbToHex: function( r, g, b ) {
  763. return '#' + ( r < 16 ? '0' : '' ) + r.toString( 16 ) +
  764. ( g < 16 ? '0' : '' ) + g.toString( 16 ) +
  765. ( b < 16 ? '0' : '' ) + b.toString( 16 );
  766. },
  767. /**
  768. * Retrieve the value of the color in a format usable by IE natively. This will be the same as
  769. * the raw input value, except for rgb(a) and hsl(a) values which will be converted to a hex value.
  770. * @param {Element} el The context element, used to get 'currentColor' keyword value.
  771. * @return {string} Color value
  772. */
  773. colorValue: function( el ) {
  774. this.parse();
  775. return this._color === 'currentColor' ? PIE.getColor( el.currentStyle.color ).colorValue( el ) : this._color;
  776. },
  777. /**
  778. * Retrieve the value of the color in a normalized six-digit hex format.
  779. * @param el
  780. */
  781. hexValue: function( el ) {
  782. var color = this.colorValue( el );
  783. // At this point the color should be either a 3- or 6-digit hex value, or the string "transparent".
  784. function ch( i ) {
  785. return color.charAt( i );
  786. }
  787. // Fudge transparent to black - should be ignored anyway since its alpha will be 0
  788. if( color === 'transparent' ) {
  789. color = '#000';
  790. }
  791. // Expand 3-digit to 6-digit hex
  792. if( ch(0) === '#' && color.length === 4 ) {
  793. color = '#' + ch(1) + ch(1) + ch(2) + ch(2) + ch(3) + ch(3);
  794. }
  795. return color;
  796. },
  797. /**
  798. * Retrieve the alpha value of the color. Will be 1 for all values except for rgba values
  799. * with an alpha component.
  800. * @return {number} The alpha value, from 0 to 1.
  801. */
  802. alpha: function() {
  803. this.parse();
  804. return this._alpha;
  805. }
  806. };
  807. /**
  808. * Retrieve a PIE.Color instance for the given value. A shared singleton instance is returned for each unique value.
  809. * @param {string} val The CSS string representing the color. It is assumed that this will already have
  810. * been validated as a valid color syntax.
  811. */
  812. PIE.getColor = function(val) {
  813. return instances[ val ] || ( instances[ val ] = new Color( val ) );
  814. };
  815. return Color;
  816. })();/**
  817. * A tokenizer for CSS value strings.
  818. * @constructor
  819. * @param {string} css The CSS value string
  820. */
  821. PIE.Tokenizer = (function() {
  822. function Tokenizer( css ) {
  823. this.css = css;
  824. this.ch = 0;
  825. this.tokens = [];
  826. this.tokenIndex = 0;
  827. }
  828. /**
  829. * Enumeration of token type constants.
  830. * @enum {number}
  831. */
  832. var Type = Tokenizer.Type = {
  833. ANGLE: 1,
  834. CHARACTER: 2,
  835. COLOR: 4,
  836. DIMEN: 8,
  837. FUNCTION: 16,
  838. IDENT: 32,
  839. LENGTH: 64,
  840. NUMBER: 128,
  841. OPERATOR: 256,
  842. PERCENT: 512,
  843. STRING: 1024,
  844. URL: 2048
  845. };
  846. /**
  847. * A single token
  848. * @constructor
  849. * @param {number} type The type of the token - see PIE.Tokenizer.Type
  850. * @param {string} value The value of the token
  851. */
  852. Tokenizer.Token = function( type, value ) {
  853. this.tokenType = type;
  854. this.tokenValue = value;
  855. };
  856. Tokenizer.Token.prototype = {
  857. isLength: function() {
  858. return this.tokenType & Type.LENGTH || ( this.tokenType & Type.NUMBER && this.tokenValue === '0' );
  859. },
  860. isLengthOrPercent: function() {
  861. return this.isLength() || this.tokenType & Type.PERCENT;
  862. }
  863. };
  864. Tokenizer.prototype = {
  865. whitespace: /\s/,
  866. number: /^[\+\-]?(\d*\.)?\d+/,
  867. url: /^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,
  868. ident: /^\-?[_a-z][\w-]*/i,
  869. string: /^("([^"]*)"|'([^']*)')/,
  870. operator: /^[\/,]/,
  871. hash: /^#[\w]+/,
  872. hashColor: /^#([\da-f]{6}|[\da-f]{3})/i,
  873. unitTypes: {
  874. 'px': Type.LENGTH, 'em': Type.LENGTH, 'ex': Type.LENGTH,
  875. 'mm': Type.LENGTH, 'cm': Type.LENGTH, 'in': Type.LENGTH,
  876. 'pt': Type.LENGTH, 'pc': Type.LENGTH,
  877. 'deg': Type.ANGLE, 'rad': Type.ANGLE, 'grad': Type.ANGLE
  878. },
  879. colorFunctions: {
  880. 'rgb': 1, 'rgba': 1, 'hsl': 1, 'hsla': 1
  881. },
  882. /**
  883. * Advance to and return the next token in the CSS string. If the end of the CSS string has
  884. * been reached, null will be returned.
  885. * @param {boolean} forget - if true, the token will not be stored for the purposes of backtracking with prev().
  886. * @return {PIE.Tokenizer.Token}
  887. */
  888. next: function( forget ) {
  889. var css, ch, firstChar, match, val,
  890. me = this;
  891. function newToken( type, value ) {
  892. var tok = new Tokenizer.Token( type, value );
  893. if( !forget ) {
  894. me.tokens.push( tok );
  895. me.tokenIndex++;
  896. }
  897. return tok;
  898. }
  899. function failure() {
  900. me.tokenIndex++;
  901. return null;
  902. }
  903. // In case we previously backed up, return the stored token in the next slot
  904. if( this.tokenIndex < this.tokens.length ) {
  905. return this.tokens[ this.tokenIndex++ ];
  906. }
  907. // Move past leading whitespace characters
  908. while( this.whitespace.test( this.css.charAt( this.ch ) ) ) {
  909. this.ch++;
  910. }
  911. if( this.ch >= this.css.length ) {
  912. return failure();
  913. }
  914. ch = this.ch;
  915. css = this.css.substring( this.ch );
  916. firstChar = css.charAt( 0 );
  917. switch( firstChar ) {
  918. case '#':
  919. if( match = css.match( this.hashColor ) ) {
  920. this.ch += match[0].length;
  921. return newToken( Type.COLOR, match[0] );
  922. }
  923. break;
  924. case '"':
  925. case "'":
  926. if( match = css.match( this.string ) ) {
  927. this.ch += match[0].length;
  928. return newToken( Type.STRING, match[2] || match[3] || '' );
  929. }
  930. break;
  931. case "/":
  932. case ",":
  933. this.ch++;
  934. return newToken( Type.OPERATOR, firstChar );
  935. case 'u':
  936. if( match = css.match( this.url ) ) {
  937. this.ch += match[0].length;
  938. return newToken( Type.URL, match[2] || match[3] || match[4] || '' );
  939. }
  940. }
  941. // Numbers and values starting with numbers
  942. if( match = css.match( this.number ) ) {
  943. val = match[0];
  944. this.ch += val.length;
  945. // Check if it is followed by a unit
  946. if( css.charAt( val.length ) === '%' ) {
  947. this.ch++;
  948. return newToken( Type.PERCENT, val + '%' );
  949. }
  950. if( match = css.substring( val.length ).match( this.ident ) ) {
  951. val += match[0];
  952. this.ch += match[0].length;
  953. return newToken( this.unitTypes[ match[0].toLowerCase() ] || Type.DIMEN, val );
  954. }
  955. // Plain ol' number
  956. return newToken( Type.NUMBER, val );
  957. }
  958. // Identifiers
  959. if( match = css.match( this.ident ) ) {
  960. val = match[0];
  961. this.ch += val.length;
  962. // Named colors
  963. if( val.toLowerCase() in PIE.Color.names || val === 'currentColor' || val === 'transparent' ) {
  964. return newToken( Type.COLOR, val );
  965. }
  966. // Functions
  967. if( css.charAt( val.length ) === '(' ) {
  968. this.ch++;
  969. // Color values in function format: rgb, rgba, hsl, hsla
  970. if( val.toLowerCase() in this.colorFunctions ) {
  971. function isNum( tok ) {
  972. return tok && tok.tokenType & Type.NUMBER;
  973. }
  974. function isNumOrPct( tok ) {
  975. return tok && ( tok.tokenType & ( Type.NUMBER | Type.PERCENT ) );
  976. }
  977. function isValue( tok, val ) {
  978. return tok && tok.tokenValue === val;
  979. }
  980. function next() {
  981. return me.next( 1 );
  982. }
  983. if( ( val.charAt(0) === 'r' ? isNumOrPct( next() ) : isNum( next() ) ) &&
  984. isValue( next(), ',' ) &&
  985. isNumOrPct( next() ) &&
  986. isValue( next(), ',' ) &&
  987. isNumOrPct( next() ) &&
  988. ( val === 'rgb' || val === 'hsa' || (
  989. isValue( next(), ',' ) &&
  990. isNum( next() )
  991. ) ) &&
  992. isValue( next(), ')' ) ) {
  993. return newToken( Type.COLOR, this.css.substring( ch, this.ch ) );
  994. }
  995. return failure();
  996. }
  997. return newToken( Type.FUNCTION, val );
  998. }
  999. // Other identifier
  1000. return newToken( Type.IDENT, val );
  1001. }
  1002. // Standalone character
  1003. this.ch++;
  1004. return newToken( Type.CHARACTER, firstChar );
  1005. },
  1006. /**
  1007. * Determine whether there is another token
  1008. * @return {boolean}
  1009. */
  1010. hasNext: function() {
  1011. var next = this.next();
  1012. this.prev();
  1013. return !!next;
  1014. },
  1015. /**
  1016. * Back up and return the previous token
  1017. * @return {PIE.Tokenizer.Token}
  1018. */
  1019. prev: function() {
  1020. return this.tokens[ this.tokenIndex-- - 2 ];
  1021. },
  1022. /**
  1023. * Retrieve all the tokens in the CSS string
  1024. * @return {Array.<PIE.Tokenizer.Token>}
  1025. */
  1026. all: function() {
  1027. while( this.next() ) {}
  1028. return this.tokens;
  1029. },
  1030. /**
  1031. * Return a list of tokens from the current position until the given function returns
  1032. * true. The final token will not be included in the list.
  1033. * @param {function():boolean} func - test function
  1034. * @param {boolean} require - if true, then if the end of the CSS string is reached
  1035. * before the test function returns true, null will be returned instead of the
  1036. * tokens that have been found so far.
  1037. * @return {Array.<PIE.Tokenizer.Token>}
  1038. */
  1039. until: function( func, require ) {
  1040. var list = [], t, hit;
  1041. while( t = this.next() ) {
  1042. if( func( t ) ) {
  1043. hit = true;
  1044. this.prev();
  1045. break;
  1046. }
  1047. list.push( t );
  1048. }
  1049. return require && !hit ? null : list;
  1050. }
  1051. };
  1052. return Tokenizer;
  1053. })();/**
  1054. * Handles calculating, caching, and detecting changes to size and position of the element.
  1055. * @constructor
  1056. * @param {Element} el the target element
  1057. */
  1058. PIE.BoundsInfo = function( el ) {
  1059. this.targetElement = el;
  1060. };
  1061. PIE.BoundsInfo.prototype = {
  1062. _locked: 0,
  1063. /**
  1064. * Determines if the element's position has changed since the last update.
  1065. * TODO this does a simple getBoundingClientRect comparison for detecting the
  1066. * changes in position, which may not always be accurate; it's possible that
  1067. * an element will actually move relative to its positioning parent, but its position
  1068. * relative to the viewport will stay the same. Need to come up with a better way to
  1069. * track movement. The most accurate would be the same logic used in RootRenderer.updatePos()
  1070. * but that is a more expensive operation since it performs DOM walking, and we want this
  1071. * check to be as fast as possible. Perhaps introduce a -pie-* flag to trigger the slower
  1072. * but more accurate method?
  1073. */
  1074. positionChanged: function() {
  1075. var last = this._lastBounds,
  1076. bounds;
  1077. return !last || ( ( bounds = this.getBounds() ) && ( last.x !== bounds.x || last.y !== bounds.y ) );
  1078. },
  1079. sizeChanged: function() {
  1080. var last = this._lastBounds,
  1081. bounds;
  1082. return !last || ( ( bounds = this.getBounds() ) && ( last.w !== bounds.w || last.h !== bounds.h ) );
  1083. },
  1084. getLiveBounds: function() {
  1085. var el = this.targetElement,
  1086. rect = el.getBoundingClientRect(),
  1087. isIE9 = PIE.ieDocMode === 9,
  1088. isIE7 = PIE.ieVersion === 7,
  1089. width = rect.right - rect.left;
  1090. return {
  1091. x: rect.left,
  1092. y: rect.top,
  1093. // In some cases scrolling the page will cause IE9 to report incorrect dimensions
  1094. // in the rect returned by getBoundingClientRect, so we must query offsetWidth/Height
  1095. // instead. Also IE7 is inconsistent in using logical vs. device pixels in measurements
  1096. // so we must calculate the ratio and use it in certain places as a position adjustment.
  1097. w: isIE9 || isIE7 ? el.offsetWidth : width,
  1098. h: isIE9 || isIE7 ? el.offsetHeight : rect.bottom - rect.top,
  1099. logicalZoomRatio: ( isIE7 && width ) ? el.offsetWidth / width : 1
  1100. };
  1101. },
  1102. getBounds: function() {
  1103. return this._locked ?
  1104. ( this._lockedBounds || ( this._lockedBounds = this.getLiveBounds() ) ) :
  1105. this.getLiveBounds();
  1106. },
  1107. hasBeenQueried: function() {
  1108. return !!this._lastBounds;
  1109. },
  1110. lock: function() {
  1111. ++this._locked;
  1112. },
  1113. unlock: function() {
  1114. if( !--this._locked ) {
  1115. if( this._lockedBounds ) this._lastBounds = this._lockedBounds;
  1116. this._lockedBounds = null;
  1117. }
  1118. }
  1119. };
  1120. (function() {
  1121. function cacheWhenLocked( fn ) {
  1122. var uid = PIE.Util.getUID( fn );
  1123. return function() {
  1124. if( this._locked ) {
  1125. var cache = this._lockedValues || ( this._lockedValues = {} );
  1126. return ( uid in cache ) ? cache[ uid ] : ( cache[ uid ] = fn.call( this ) );
  1127. } else {
  1128. return fn.call( this );
  1129. }
  1130. }
  1131. }
  1132. PIE.StyleInfoBase = {
  1133. _locked: 0,
  1134. /**
  1135. * Create a new StyleInfo class, with the standard constructor, and augmented by
  1136. * the StyleInfoBase's members.
  1137. * @param proto
  1138. */
  1139. newStyleInfo: function( proto ) {
  1140. function StyleInfo( el ) {
  1141. this.targetElement = el;
  1142. this._lastCss = this.getCss();
  1143. }
  1144. PIE.merge( StyleInfo.prototype, PIE.StyleInfoBase, proto );
  1145. StyleInfo._propsCache = {};
  1146. return StyleInfo;
  1147. },
  1148. /**
  1149. * Get an object representation of the target CSS style, caching it for each unique
  1150. * CSS value string.
  1151. * @return {Object}
  1152. */
  1153. getProps: function() {
  1154. var css = this.getCss(),
  1155. cache = this.constructor._propsCache;
  1156. return css ? ( css in cache ? cache[ css ] : ( cache[ css ] = this.parseCss( css ) ) ) : null;
  1157. },
  1158. /**
  1159. * Get the raw CSS value for the target style
  1160. * @return {string}
  1161. */
  1162. getCss: cacheWhenLocked( function() {
  1163. var el = this.targetElement,
  1164. ctor = this.constructor,
  1165. s = el.style,
  1166. cs = el.currentStyle,
  1167. cssProp = this.cssProperty,
  1168. styleProp = this.styleProperty,
  1169. prefixedCssProp = ctor._prefixedCssProp || ( ctor._prefixedCssProp = PIE.CSS_PREFIX + cssProp ),
  1170. prefixedStyleProp = ctor._prefixedStyleProp || ( ctor._prefixedStyleProp = PIE.STYLE_PREFIX + styleProp.charAt(0).toUpperCase() + styleProp.substring(1) );
  1171. return s[ prefixedStyleProp ] || cs.getAttribute( prefixedCssProp ) || s[ styleProp ] || cs.getAttribute( cssProp );
  1172. } ),
  1173. /**
  1174. * Determine whether the target CSS style is active.
  1175. * @return {boolean}
  1176. */
  1177. isActive: cacheWhenLocked( function() {
  1178. return !!this.getProps();
  1179. } ),
  1180. /**
  1181. * Determine whether the target CSS style has changed since the last time it was used.
  1182. * @return {boolean}
  1183. */
  1184. changed: cacheWhenLocked( function() {
  1185. var currentCss = this.getCss(),
  1186. changed = currentCss !== this._lastCss;
  1187. this._lastCss = currentCss;
  1188. return changed;
  1189. } ),
  1190. cacheWhenLocked: cacheWhenLocked,
  1191. lock: function() {
  1192. ++this._locked;
  1193. },
  1194. unlock: function() {
  1195. if( !--this._locked ) {
  1196. delete this._lockedValues;
  1197. }
  1198. }
  1199. };
  1200. })();/**
  1201. * Handles parsing, caching, and detecting changes to background (and -pie-background) CSS
  1202. * @constructor
  1203. * @param {Element} el the target element
  1204. */
  1205. PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
  1206. cssProperty: PIE.CSS_PREFIX + 'background',
  1207. styleProperty: PIE.STYLE_PREFIX + 'Background',
  1208. attachIdents: { 'scroll':1, 'fixed':1, 'local':1 },
  1209. repeatIdents: { 'repeat-x':1, 'repeat-y':1, 'repeat':1, 'no-repeat':1 },
  1210. originAndClipIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 },
  1211. positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 },
  1212. sizeIdents: { 'contain':1, 'cover':1 },
  1213. tbIdents: { 'top': 1, 'bottom': 1 },
  1214. lrIdents: { 'left': 1, 'right': 1 },
  1215. propertyNames: {
  1216. CLIP: 'backgroundClip',
  1217. COLOR: 'backgroundColor',
  1218. IMAGE: 'backgroundImage',
  1219. ORIGIN: 'backgroundOrigin',
  1220. POSITION: 'backgroundPosition',
  1221. REPEAT: 'backgroundRepeat',
  1222. SIZE: 'backgroundSize'
  1223. },
  1224. /**
  1225. * For background styles, we support the -pie-background property but fall back to the standard
  1226. * backround* properties. The reason we have to use the prefixed version is that IE natively
  1227. * parses the standard properties and if it sees something it doesn't know how to parse, for example
  1228. * multiple values or gradient definitions, it will throw that away and not make it available through
  1229. * currentStyle.
  1230. *
  1231. * Format of return object:
  1232. * {
  1233. * color: <PIE.Color>,
  1234. * colorClip: <'border-box' | 'padding-box'>,
  1235. * bgImages: [
  1236. * {
  1237. * imgType: 'image',
  1238. * imgUrl: 'image.png',
  1239. * imgRepeat: <'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'>,
  1240. * bgPosition: <PIE.BgPosition>,
  1241. * bgAttachment: <'scroll' | 'fixed' | 'local'>,
  1242. * bgOrigin: <'border-box' | 'padding-box' | 'content-box'>,
  1243. * bgClip: <'border-box' | 'padding-box'>,
  1244. * bgSize: <PIE.BgSize>,
  1245. * origString: 'url(img.png) no-repeat top left'
  1246. * },
  1247. * {
  1248. * imgType: 'linear-gradient',
  1249. * gradientTo: [<'top' | 'bottom'>, <'left' | 'right'>?],
  1250. * angle: <PIE.Angle>,
  1251. * stops: [
  1252. * { color: <PIE.Color>, offset: <PIE.Length> },
  1253. * { color: <PIE.Color>, offset: <PIE.Length> }, ...
  1254. * ]
  1255. * }
  1256. * ]
  1257. * }
  1258. * @param {String} css
  1259. * @override
  1260. */
  1261. parseCss: function( css ) {
  1262. var el = this.targetElement,
  1263. cs = el.currentStyle,
  1264. tokenizer, token, image,
  1265. tok_type = PIE.Tokenizer.Type,
  1266. type_operator = tok_type.OPERATOR,
  1267. type_ident = tok_type.IDENT,
  1268. type_color = tok_type.COLOR,
  1269. tokType, tokVal,
  1270. beginCharIndex = 0,
  1271. positionIdents = this.positionIdents,
  1272. gradient, stop, width, height, gradientTo, len, tbIdents, lrIdents,
  1273. props = { bgImages: [] };
  1274. function isBgPosToken( token ) {
  1275. return token && token.isLengthOrPercent() || ( token.tokenType & type_ident && token.tokenValue in positionIdents );
  1276. }
  1277. function sizeToken( token ) {
  1278. return token && ( ( token.isLengthOrPercent() && PIE.getLength( token.tokenValue ) ) || ( token.tokenValue === 'auto' && 'auto' ) );
  1279. }
  1280. // If the CSS3-specific -pie-background property is present, parse it
  1281. if( this.getCss3() ) {
  1282. tokenizer = new PIE.Tokenizer( css );
  1283. image = {};
  1284. while( token = tokenizer.next() ) {
  1285. tokType = token.tokenType;
  1286. tokVal = token.tokenValue;
  1287. if( !image.imgType && tokType & tok_type.FUNCTION && tokVal === 'linear-gradient' ) {
  1288. gradient = { stops: [], imgType: tokVal };
  1289. stop = {};
  1290. while( token = tokenizer.next() ) {
  1291. tokType = token.tokenType;
  1292. tokVal = token.tokenValue;
  1293. // If we reached the end of the function and had at least 2 stops, flush the info
  1294. if( tokType & tok_type.CHARACTER && tokVal === ')' ) {
  1295. if( stop.color ) {
  1296. gradient.stops.push( stop );
  1297. }
  1298. if( gradient.stops.length > 1 ) {
  1299. PIE.merge( image, gradient );
  1300. }
  1301. break;
  1302. }
  1303. // Color stop - must start with color
  1304. if( tokType & type_color ) {
  1305. // if we already have an angle/position, make sure that the previous token was a comma
  1306. if( gradient.angle || gradient.gradientTo ) {
  1307. token = tokenizer.prev();
  1308. if( token.tokenType !== type_operator ) {
  1309. break; //fail
  1310. }
  1311. tokenizer.next();
  1312. }
  1313. stop = {
  1314. color: PIE.getColor( tokVal )
  1315. };
  1316. // check for offset following color
  1317. token = tokenizer.next();
  1318. if( token.isLengthOrPercent() ) {
  1319. stop.offset = PIE.getLength( token.tokenValue );
  1320. } else {
  1321. tokenizer.prev();
  1322. }
  1323. }
  1324. // Angle - can only appear in first spot
  1325. else if( tokType & tok_type.ANGLE && !gradient.angle && !gradient.gradientTo && !stop.color && !gradient.stops.length ) {
  1326. gradient.angle = new PIE.Angle( token.tokenValue );
  1327. }
  1328. // "to <side-or-corner>" - can only appear in first spot
  1329. else if( tokType & tok_type.IDENT && tokVal === 'to' && !gradient.gradientTo && !gradient.angle && !stop.color && !gradient.stops.length ) {
  1330. tbIdents = this.tbIdents;
  1331. lrIdents = this.lrIdents;
  1332. gradientTo = tokenizer.until( function( t ) {
  1333. return !(t && t.tokenType & tok_type.IDENT && ( t.tokenValue in tbIdents || t.tokenValue in lrIdents ));
  1334. } );
  1335. len = gradientTo.length;
  1336. gradientTo = [ gradientTo[0] && gradientTo[0].tokenValue, gradientTo[1] && gradientTo[1].tokenValue ];
  1337. // bail unless there are 1 or 2 values, or if the 2 values are from the same pair of sides
  1338. if ( len < 1 || len > 2 || ( len > 1 && (
  1339. ( gradientTo[0] in tbIdents && gradientTo[1] in tbIdents ) ||
  1340. ( gradientTo[0] in lrIdents && gradientTo[1] in lrIdents )
  1341. ) ) ) {
  1342. break;
  1343. }
  1344. gradient.gradientTo = gradientTo;
  1345. }
  1346. else if( tokType & type_operator && tokVal === ',' ) {
  1347. if( stop.color ) {
  1348. gradient.stops.push( stop );
  1349. stop = {};
  1350. }
  1351. }
  1352. else {
  1353. // Found something we didn't recognize; fail without adding image
  1354. break;
  1355. }
  1356. }
  1357. }
  1358. else if( !image.imgType && tokType & tok_type.URL ) {
  1359. image.imgUrl = tokVal;
  1360. image.imgType = 'image';
  1361. }
  1362. else if( isBgPosToken( token ) && !image.bgPosition ) {
  1363. tokenizer.prev();
  1364. image.bgPosition = new PIE.BgPosition(
  1365. tokenizer.until( function( t ) {
  1366. return !isBgPosToken( t );
  1367. }, false )
  1368. );
  1369. }
  1370. else if( tokType & type_ident ) {
  1371. if( tokVal in this.repeatIdents && !image.imgRepeat ) {
  1372. image.imgRepeat = tokVal;
  1373. }
  1374. else if( tokVal in this.originAndClipIdents && !image.bgOrigin ) {
  1375. image.bgOrigin = tokVal;
  1376. if( ( token = tokenizer.next() ) && ( token.tokenType & type_ident ) &&
  1377. token.tokenValue in this.originAndClipIdents ) {
  1378. image.bgClip = token.tokenValue;
  1379. } else {
  1380. image.bgClip = tokVal;
  1381. tokenizer.prev();
  1382. }
  1383. }
  1384. else if( tokVal in this.attachIdents && !image.bgAttachment ) {
  1385. image.bgAttachment = tokVal;
  1386. }
  1387. else {
  1388. return null;
  1389. }
  1390. }
  1391. else if( tokType & type_color && !props.color ) {
  1392. props.color = PIE.getColor( tokVal );
  1393. }
  1394. else if( tokType & type_operator && tokVal === '/' && !image.bgSize && image.bgPosition ) {
  1395. // background size
  1396. token = tokenizer.next();
  1397. if( token.tokenType & type_ident && token.tokenValue in this.sizeIdents ) {
  1398. image.bgSize = new PIE.BgSize( token.tokenValue );
  1399. }
  1400. else if( width = sizeToken( token ) ) {
  1401. height = sizeToken( tokenizer.next() );
  1402. if ( !height ) {
  1403. height = width;
  1404. tokenizer.prev();
  1405. }
  1406. image.bgSize = new PIE.BgSize( width, height );
  1407. }
  1408. else {
  1409. return null;
  1410. }
  1411. }
  1412. // new layer
  1413. else if( tokType & type_operator && tokVal === ',' && image.imgType ) {
  1414. image.origString = css.substring( beginCharIndex, tokenizer.ch - 1 );
  1415. beginCharIndex = tokenizer.ch;
  1416. props.bgImages.push( image );
  1417. image = {};
  1418. }
  1419. else {
  1420. // Found something unrecognized; chuck everything
  1421. return null;
  1422. }
  1423. }
  1424. // leftovers
  1425. if( image.imgType ) {
  1426. image.origString = css.substring( beginCharIndex );
  1427. props.bgImages.push( image );
  1428. }
  1429. props.colorClip = image.bgClip;
  1430. }
  1431. // Otherwise, use the standard background properties; let IE give us the values rather than parsing them
  1432. else {
  1433. this.withActualBg( PIE.ieDocMode < 9 ?
  1434. function() {
  1435. var propNames = this.propertyNames,
  1436. posX = cs[propNames.POSITION + 'X'],
  1437. posY = cs[propNames.POSITION + 'Y'],
  1438. img = cs[propNames.IMAGE],
  1439. color = cs[propNames.COLOR];
  1440. if( color !== 'transparent' ) {
  1441. props.color = PIE.getColor( color )
  1442. }
  1443. if( img !== 'none' ) {
  1444. props.bgImages = [ {
  1445. imgType: 'image',
  1446. imgUrl: new PIE.Tokenizer( img ).next().tokenValue,
  1447. imgRepeat: cs[propNames.REPEAT],
  1448. bgPosition: new PIE.BgPosition( new PIE.Tokenizer( posX + ' ' + posY ).all() )
  1449. } ];
  1450. }
  1451. } :
  1452. function() {
  1453. var propNames = this.propertyNames,
  1454. splitter = /\s*,\s*/,
  1455. images = cs[propNames.IMAGE].split( splitter ),
  1456. color = cs[propNames.COLOR],
  1457. repeats, positions, origins, clips, sizes, i, len, image, sizeParts;
  1458. if( color !== 'transparent' ) {
  1459. props.color = PIE.getColor( color )
  1460. }
  1461. len = images.length;
  1462. if( len && images[0] !== 'none' ) {
  1463. repeats = cs[propNames.REPEAT].split( splitter );
  1464. positions = cs[propNames.POSITION].split( splitter );
  1465. origins = cs[propNames.ORIGIN].split( splitter );
  1466. clips = cs[propNames.CLIP].split( splitter );
  1467. sizes = cs[propNames.SIZE].split( splitter );
  1468. props.bgImages = [];
  1469. for( i = 0; i < len; i++ ) {
  1470. image = images[ i ];
  1471. if( image && image !== 'none' ) {
  1472. sizeParts = sizes[i].split( ' ' );
  1473. props.bgImages.push( {
  1474. origString: image + ' ' + repeats[ i ] + ' ' + positions[ i ] + ' / ' + sizes[ i ] + ' ' +
  1475. origins[ i ] + ' ' + clips[ i ],
  1476. imgType: 'image',
  1477. imgUrl: new PIE.Tokenizer( image ).next().tokenValue,
  1478. imgRepeat: repeats[ i ],
  1479. bgPosition: new PIE.BgPosition( new PIE.Tokenizer( positions[ i ] ).all() ),
  1480. bgOrigin: origins[ i ],
  1481. bgClip: clips[ i ],
  1482. bgSize: new PIE.BgSize( sizeParts[ 0 ], sizeParts[ 1 ] )
  1483. } );
  1484. }
  1485. }
  1486. }
  1487. }
  1488. );
  1489. }
  1490. return ( props.color || props.bgImages[0] ) ? props : null;
  1491. },
  1492. /**
  1493. * Execute a function with the actual background styles (not overridden with runtimeStyle
  1494. * properties set by the renderers) available via currentStyle.
  1495. * @param fn
  1496. */
  1497. withActualBg: function( fn ) {
  1498. var isIE9 = PIE.ieDocMode > 8,
  1499. propNames = this.propertyNames,
  1500. rs = this.targetElement.runtimeStyle,
  1501. rsImage = rs[propNames.IMAGE],
  1502. rsColor = rs[propNames.COLOR],
  1503. rsRepeat = rs[propNames.REPEAT],
  1504. rsClip, rsOrigin, rsSize, rsPosition, ret;
  1505. if( rsImage ) rs[propNames.IMAGE] = '';
  1506. if( rsColor ) rs[propNames.COLOR] = '';
  1507. if( rsRepeat ) rs[propNames.REPEAT] = '';
  1508. if( isIE9 ) {
  1509. rsClip = rs[propNames.CLIP];
  1510. rsOrigin = rs[propNames.ORIGIN];
  1511. rsPosition = rs[propNames.POSITION];
  1512. rsSize = rs[propNames.SIZE];
  1513. if( rsClip ) rs[propNames.CLIP] = '';
  1514. if( rsOrigin ) rs[propNames.ORIGIN] = '';
  1515. if( rsPosition ) rs[propNames.POSITION] = '';
  1516. if( rsSize ) rs[propNames.SIZE] = '';
  1517. }
  1518. ret = fn.call( this );
  1519. if( rsImage ) rs[propNames.IMAGE] = rsImage;
  1520. if( rsColor ) rs[propNames.COLOR] = rsColor;
  1521. if( rsRepeat ) rs[propNames.REPEAT] = rsRepeat;
  1522. if( isIE9 ) {
  1523. if( rsClip ) rs[propNames.CLIP] = rsClip;
  1524. if( rsOrigin ) rs[propNames.ORIGIN] = rsOrigin;
  1525. if( rsPosition ) rs[propNames.POSITION] = rsPosition;
  1526. if( rsSize ) rs[propNames.SIZE] = rsSize;
  1527. }
  1528. return ret;
  1529. },
  1530. getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
  1531. return this.getCss3() ||
  1532. this.withActualBg( function() {
  1533. var cs = this.targetElement.currentStyle,
  1534. propNames = this.propertyNames;
  1535. return cs[propNames.COLOR] + ' ' + cs[propNames.IMAGE] + ' ' + cs[propNames.REPEAT] + ' ' +
  1536. cs[propNames.POSITION + 'X'] + ' ' + cs[propNames.POSITION + 'Y'];
  1537. } );
  1538. } ),
  1539. getCss3: PIE.StyleInfoBase.cacheWhenLocked( function() {
  1540. var el = this.targetElement;
  1541. return el.style[ this.styleProperty ] || el.currentStyle.getAttribute( this.cssProperty );
  1542. } ),
  1543. /**
  1544. * For a given background-origin value, return the dimensions of the background area.
  1545. * @param {String} bgOrigin
  1546. * @param {PIE.BoundsInfo} boundsInfo
  1547. * @param {PIE.BorderStyleInfo} borderInfo
  1548. */
  1549. getBgAreaSize: function( bgOrigin, boundsInfo, borderInfo, paddingInfo ) {
  1550. var el = this.targetElement,
  1551. bounds = boundsInfo.getBounds(),
  1552. w = bounds.w,
  1553. h = bounds.h,
  1554. borders, paddings;
  1555. if( bgOrigin !== 'border-box' ) {
  1556. borders = borderInfo.getProps();
  1557. if( borders && ( borders = borders.widths ) ) {
  1558. w -= borders[ 'l' ].pixels( el ) + borders[ 'l' ].pixels( el );
  1559. h -= borders[ 't' ].pixels( el ) + borders[ 'b' ].pixels( el );
  1560. }
  1561. }
  1562. if ( bgOrigin === 'content-box' ) {
  1563. paddings = paddingInfo.getProps();
  1564. if ( paddings ) {
  1565. w -= paddings[ 'l' ].pixels( el ) + paddings[ 'l' ].pixels( el );
  1566. h -= paddings[ 't' ].pixels( el ) + paddings[ 'b' ].pixels( el );
  1567. }
  1568. }
  1569. return { w: w, h: h };
  1570. },
  1571. /**
  1572. * Tests if style.PiePngFix or the -pie-png-fix property is set to true in IE6.
  1573. */
  1574. isPngFix: function() {
  1575. var val = 0, el;
  1576. if( PIE.ieVersion < 7 ) {
  1577. el = this.targetElement;
  1578. val = ( '' + ( el.style[ PIE.STYLE_PREFIX + 'PngFix' ] || el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'png-fix' ) ) === 'true' );
  1579. }
  1580. return val;
  1581. },
  1582. /**
  1583. * The isActive logic is slightly different, because getProps() always returns an object
  1584. * even if it is just falling back to the native background properties. But we only want
  1585. * to report is as being "active" if either the -pie-background override property is present
  1586. * and parses successfully or '-pie-png-fix' is set to true in IE6.
  1587. */
  1588. isActive: PIE.StyleInfoBase.cacheWhenLocked( function() {
  1589. return (this.getCss3() || this.isPngFix()) && !!this.getProps();
  1590. } )
  1591. } );/**
  1592. * Handles parsing, caching, and detecting changes to border CSS
  1593. * @constructor
  1594. * @param {Element} el the target element
  1595. */
  1596. PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
  1597. sides: [ 'Top', 'Right', 'Bottom', 'Left' ],
  1598. namedWidths: {
  1599. 'thin': '1px',
  1600. 'medium': '3px',
  1601. 'thick': '5px'
  1602. },
  1603. parseCss: function( css ) {
  1604. var w = {},
  1605. s = {},
  1606. c = {},
  1607. active = false,
  1608. colorsSame = true,
  1609. stylesSame = true,
  1610. widthsSame = true;
  1611. this.withActualBorder( function() {
  1612. var el = this.targetElement,
  1613. cs = el.currentStyle,
  1614. i = 0,
  1615. style, color, width, lastStyle, lastColor, lastWidth, side, ltr;
  1616. for( ; i < 4; i++ ) {
  1617. side = this.sides[ i ];
  1618. ltr = side.charAt(0).toLowerCase();
  1619. style = s[ ltr ] = cs[ 'border' + side + 'Style' ];
  1620. color = cs[ 'border' + side + 'Color' ];
  1621. width = cs[ 'border' + side + 'Width' ];
  1622. if( i > 0 ) {
  1623. if( style !== lastStyle ) { stylesSame = false; }
  1624. if( color !== lastColor ) { colorsSame = false; }
  1625. if( width !== lastWidth ) { widthsSame = false; }
  1626. }
  1627. lastStyle = style;
  1628. lastColor = color;
  1629. lastWidth = width;
  1630. c[ ltr ] = PIE.getColor( color );
  1631. width = w[ ltr ] = PIE.getLength( s[ ltr ] === 'none' ? '0' : ( this.namedWidths[ width ] || width ) );
  1632. if( width.pixels( this.targetElement ) > 0 ) {
  1633. active = true;
  1634. }
  1635. }
  1636. } );
  1637. return active ? {
  1638. widths: w,
  1639. styles: s,
  1640. colors: c,
  1641. widthsSame: widthsSame,
  1642. colorsSame: colorsSame,
  1643. stylesSame: stylesSame
  1644. } : null;
  1645. },
  1646. getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
  1647. var el = this.targetElement,
  1648. cs = el.currentStyle,
  1649. css;
  1650. // Don't redraw or hide borders for cells in border-collapse:collapse tables
  1651. if( !( el.tagName in PIE.tableCellTags && el.offsetParent.currentStyle.borderCollapse === 'collapse' ) ) {
  1652. this.withActualBorder( function() {
  1653. css = cs.borderWidth + '|' + cs.borderStyle + '|' + cs.borderColor;
  1654. } );
  1655. }
  1656. return css;
  1657. } ),
  1658. /**
  1659. * Execute a function with the actual border styles (not overridden with runtimeStyle
  1660. * properties set by the renderers) available via currentStyle.
  1661. * @param fn
  1662. */
  1663. withActualBorder: function( fn ) {
  1664. var rs = this.targetElement.runtimeStyle,
  1665. rsWidth = rs.borderWidth,
  1666. rsColor = rs.borderColor,
  1667. ret;
  1668. if( rsWidth ) rs.borderWidth = '';
  1669. if( rsColor ) rs.borderColor = '';
  1670. ret = fn.call( this );
  1671. if( rsWidth ) rs.borderWidth = rsWidth;
  1672. if( rsColor ) rs.borderColor = rsColor;
  1673. return ret;
  1674. }
  1675. } );
  1676. /**
  1677. * Handles parsing, caching, and detecting changes to border-image CSS
  1678. * @constructor
  1679. * @param {Element} el the target element
  1680. */
  1681. PIE.BorderImageStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
  1682. cssProperty: 'border-image',
  1683. styleProperty: 'borderImage',
  1684. repeatIdents: { 'stretch':1, 'round':1, 'repeat':1, 'space':1 },
  1685. parseCss: function( css ) {
  1686. var p = null, tokenizer, token, type, value,
  1687. slices, widths, outsets,
  1688. slashCount = 0,
  1689. Type = PIE.Tokenizer.Type,
  1690. IDENT = Type.IDENT,
  1691. NUMBER = Type.NUMBER,
  1692. PERCENT = Type.PERCENT;
  1693. if( css ) {
  1694. tokenizer = new PIE.Tokenizer( css );
  1695. p = {};
  1696. function isSlash( token ) {
  1697. return token && ( token.tokenType & Type.OPERATOR ) && ( token.tokenValue === '/' );
  1698. }
  1699. function isFillIdent( token ) {
  1700. return token && ( token.tokenType & IDENT ) && ( token.tokenValue === 'fill' );
  1701. }
  1702. function collectSlicesEtc() {
  1703. slices = tokenizer.until( function( tok ) {
  1704. return !( tok.tokenType & ( NUMBER | PERCENT ) );
  1705. } );
  1706. if( isFillIdent( tokenizer.next() ) && !p.fill ) {
  1707. p.fill = true;
  1708. } else {
  1709. tokenizer.prev();
  1710. }
  1711. if( isSlash( tokenizer.next() ) ) {
  1712. slashCount++;
  1713. widths = tokenizer.until( function( token ) {
  1714. return !token.isLengthOrPercent() && !( ( token.tokenType & IDENT ) && token.tokenValue === 'auto' );
  1715. } );
  1716. if( isSlash( tokenizer.next() ) ) {
  1717. slashCount++;
  1718. outsets = tokenizer.until( function( token ) {
  1719. return !token.isLength();
  1720. } );
  1721. }
  1722. } else {
  1723. tokenizer.prev();
  1724. }
  1725. }
  1726. while( token = tokenizer.next() ) {
  1727. type = token.tokenType;
  1728. value = token.tokenValue;
  1729. // Numbers and/or 'fill' keyword: slice values. May be followed optionally by width values, followed optionally by outset values
  1730. if( type & ( NUMBER | PERCENT ) && !slices ) {
  1731. tokenizer.prev();
  1732. collectSlicesEtc();
  1733. }
  1734. else if( isFillIdent( token ) && !p.fill ) {
  1735. p.fill = true;
  1736. collectSlicesEtc();
  1737. }
  1738. // Idents: one or values for 'repeat'
  1739. else if( ( type & IDENT ) && this.repeatIdents[value] && !p.repeat ) {
  1740. p.repeat = { h: value };
  1741. if( token = tokenizer.next() ) {
  1742. if( ( token.tokenType & IDENT ) && this.repeatIdents[token.tokenValue] ) {
  1743. p.repeat.v = token.tokenValue;
  1744. } else {
  1745. tokenizer.prev();
  1746. }
  1747. }
  1748. }
  1749. // URL of the image
  1750. else if( ( type & Type.URL ) && !p.src ) {
  1751. p.src = value;
  1752. }
  1753. // Found something unrecognized; exit.
  1754. else {
  1755. return null;
  1756. }
  1757. }
  1758. // Validate what we collected
  1759. if( !p.src || !slices || slices.length < 1 || slices.length > 4 ||
  1760. ( widths && widths.length > 4 ) || ( slashCount === 1 && widths.length < 1 ) ||
  1761. ( outsets && outsets.length > 4 ) || ( slashCount === 2 && outsets.length < 1 ) ) {
  1762. return null;
  1763. }
  1764. // Fill in missing values
  1765. if( !p.repeat ) {
  1766. p.repeat = { h: 'stretch' };
  1767. }
  1768. if( !p.repeat.v ) {
  1769. p.repeat.v = p.repeat.h;
  1770. }
  1771. function distributeSides( tokens, convertFn ) {
  1772. return {
  1773. 't': convertFn( tokens[0] ),
  1774. 'r': convertFn( tokens[1] || tokens[0] ),
  1775. 'b': convertFn( tokens[2] || tokens[0] ),
  1776. 'l': convertFn( tokens[3] || tokens[1] || tokens[0] )
  1777. };
  1778. }
  1779. p.slice = distributeSides( slices, function( tok ) {
  1780. return PIE.getLength( ( tok.tokenType & NUMBER ) ? tok.tokenValue + 'px' : tok.tokenValue );
  1781. } );
  1782. if( widths && widths[0] ) {
  1783. p.widths = distributeSides( widths, function( tok ) {
  1784. return tok.isLengthOrPercent() ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
  1785. } );
  1786. }
  1787. if( outsets && outsets[0] ) {
  1788. p.outset = distributeSides( outsets, function( tok ) {
  1789. return tok.isLength() ? PIE.getLength( tok.tokenValue ) : tok.tokenValue;
  1790. } );
  1791. }
  1792. }
  1793. return p;
  1794. }
  1795. } );/**
  1796. * Handles parsing, caching, and detecting changes to padding CSS
  1797. * @constructor
  1798. * @param {Element} el the target element
  1799. */
  1800. PIE.PaddingStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
  1801. parseCss: function( css ) {
  1802. var tokenizer = new PIE.Tokenizer( css ),
  1803. arr = [],
  1804. token;
  1805. while( ( token = tokenizer.next() ) && token.isLengthOrPercent() ) {
  1806. arr.push( PIE.getLength( token.tokenValue ) );
  1807. }
  1808. return arr.length > 0 && arr.length < 5 ? {
  1809. 't': arr[0],
  1810. 'r': arr[1] || arr[0],
  1811. 'b': arr[2] || arr[0],
  1812. 'l': arr[3] || arr[1] || arr[0]
  1813. } : null;
  1814. },
  1815. getCss: PIE.StyleInfoBase.cacheWhenLocked( function() {
  1816. var el = this.targetElement,
  1817. rs = el.runtimeStyle,
  1818. rsPadding = rs.padding,
  1819. padding;
  1820. if( rsPadding ) rs.padding = '';
  1821. padding = el.currentStyle.padding;
  1822. if( rsPadding ) rs.padding = rsPadding;
  1823. return padding;
  1824. } )
  1825. } );
  1826. PIE.RendererBase = {
  1827. /**
  1828. * Create a new Renderer class, with the standard constructor, and augmented by
  1829. * the RendererBase's members.
  1830. * @param proto
  1831. */
  1832. newRenderer: function( proto ) {
  1833. function Renderer( el, boundsInfo, styleInfos, parent ) {
  1834. this.targetElement = el;
  1835. this.boundsInfo = boundsInfo;
  1836. this.styleInfos = styleInfos;
  1837. this.parent = parent;
  1838. }
  1839. PIE.merge( Renderer.prototype, PIE.RendererBase, proto );
  1840. return Renderer;
  1841. },
  1842. /**
  1843. * Determine if the renderer needs to be updated
  1844. * @return {boolean}
  1845. */
  1846. needsUpdate: function() {
  1847. return false;
  1848. },
  1849. /**
  1850. * Run any preparation logic that would affect the main update logic of this
  1851. * renderer or any of the other renderers, e.g. things that might affect the
  1852. * element's size or style properties.
  1853. */
  1854. prepareUpdate: PIE.emptyFn,
  1855. /**
  1856. * Tell the renderer to update based on modified properties or element dimensions
  1857. */
  1858. updateRendering: function() {
  1859. if( this.isActive() ) {
  1860. this.draw();
  1861. } else {
  1862. this.destroy();
  1863. }
  1864. },
  1865. /**
  1866. * Hide the target element's border
  1867. */
  1868. hideBorder: function() {
  1869. this.targetElement.runtimeStyle.borderColor = 'transparent';
  1870. },
  1871. /**
  1872. * Destroy the rendered objects. This is a base implementation which handles common renderer
  1873. * structures, but individual renderers may override as necessary.
  1874. */
  1875. destroy: function() {
  1876. }
  1877. };
  1878. /**
  1879. * Root renderer for IE9; manages the rendering layers in the element's background
  1880. * @param {Element} el The target element
  1881. * @param {Object} styleInfos The StyleInfo objects
  1882. */
  1883. PIE.IE9RootRenderer = PIE.RendererBase.newRenderer( {
  1884. outerCommasRE: /^,+|,+$/g,
  1885. innerCommasRE: /,+/g,
  1886. setBackgroundLayer: function(zIndex, bg) {
  1887. var me = this,
  1888. bgLayers = me._bgLayers || ( me._bgLayers = [] ),
  1889. undef;
  1890. bgLayers[zIndex] = bg || undef;
  1891. },
  1892. updateRendering: function() {
  1893. var me = this,
  1894. bgLayers = me._bgLayers,
  1895. bg;
  1896. if( bgLayers && ( bg = bgLayers.join( ',' ).replace( me.outerCommasRE, '' ).replace( me.innerCommasRE, ',' ) ) !== me._lastBg ) {
  1897. me._lastBg = me.targetElement.runtimeStyle.background = bg;
  1898. }
  1899. },
  1900. destroy: function() {
  1901. this.targetElement.runtimeStyle.background = '';
  1902. delete this._bgLayers;
  1903. }
  1904. } );
  1905. /**
  1906. * Renderer for element backgrounds, specific for IE9. Only handles translating CSS3 gradients
  1907. * to an equivalent SVG data URI.
  1908. * @constructor
  1909. * @param {Element} el The target element
  1910. * @param {Object} styleInfos The StyleInfo objects
  1911. */
  1912. PIE.IE9BackgroundRenderer = PIE.RendererBase.newRenderer( {
  1913. drawingCanvas: doc.createElement( 'canvas' ),
  1914. bgLayerZIndex: 1,
  1915. needsUpdate: function() {
  1916. var si = this.styleInfos;
  1917. return si.backgroundInfo.changed();
  1918. },
  1919. isActive: function() {
  1920. var si = this.styleInfos;
  1921. return si.backgroundInfo.isActive() || si.borderImageInfo.isActive();
  1922. },
  1923. draw: function() {
  1924. var me = this,
  1925. styleInfos = me.styleInfos,
  1926. bgInfo = styleInfos.backgroundInfo,
  1927. props = bgInfo.getProps(),
  1928. bg, images, i = 0, img, bgAreaSize, bgSize;
  1929. if ( props ) {
  1930. bg = [];
  1931. images = props.bgImages;
  1932. if ( images ) {
  1933. while( img = images[ i++ ] ) {
  1934. if (img.imgType === 'linear-gradient' ) {
  1935. bgAreaSize = bgInfo.getBgAreaSize( bg.bgOrigin, me.boundsInfo, styleInfos.borderInfo, styleInfos.paddingInfo );
  1936. bgSize = ( img.bgSize || PIE.BgSize.DEFAULT ).pixels(
  1937. me.targetElement, bgAreaSize.w, bgAreaSize.h, bgAreaSize.w, bgAreaSize.h
  1938. );
  1939. bg.push(
  1940. 'url(' + me.getGradientImgData( img, bgSize.w, bgSize.h ) + ') ' +
  1941. me.bgPositionToString( img.bgPosition ) + ' / ' + bgSize.w + 'px ' + bgSize.h + 'px ' +
  1942. ( img.bgAttachment || '' ) + ' ' + ( img.bgOrigin || '' ) + ' ' + ( img.bgClip || '' )
  1943. );
  1944. } else {
  1945. bg.push( img.origString );
  1946. }
  1947. }
  1948. }
  1949. if ( props.color ) {
  1950. bg.push( props.color.val + ' ' + ( props.colorClip || '' ) );
  1951. }
  1952. me.parent.setBackgroundLayer(me.bgLayerZIndex, bg.join(','));
  1953. }
  1954. },
  1955. bgPositionToString: function( bgPosition ) {
  1956. return bgPosition ? bgPosition.tokens.map(function(token) {
  1957. return token.tokenValue;
  1958. }).join(' ') : '0 0';
  1959. },
  1960. getGradientImgData: function( info, bgWidth, bgHeight ) {
  1961. var me = this,
  1962. el = me.targetElement,
  1963. stopsInfo = info.stops,
  1964. stopCount = stopsInfo.length,
  1965. metrics = PIE.GradientUtil.getGradientMetrics( el, bgWidth, bgHeight, info ),
  1966. lineLength = metrics.lineLength,
  1967. canvas = me.drawingCanvas,
  1968. context = canvas.getContext( '2d' ),
  1969. gradient = context.createLinearGradient( metrics.startX, metrics.startY, metrics.endX, metrics.endY ),
  1970. stopPx = [],
  1971. i, j, before, after;
  1972. // Find the pixel offsets along the CSS3 gradient-line for each stop.
  1973. for( i = 0; i < stopCount; i++ ) {
  1974. stopPx.push( stopsInfo[i].offset ? stopsInfo[i].offset.pixels( el, lineLength ) :
  1975. i === 0 ? 0 : i === stopCount - 1 ? lineLength : null );
  1976. }
  1977. // Fill in gaps with evenly-spaced offsets
  1978. for( i = 1; i < stopCount; i++ ) {
  1979. if( stopPx[ i ] === null ) {
  1980. before = stopPx[ i - 1 ];
  1981. j = i;
  1982. do {
  1983. after = stopPx[ ++j ];
  1984. } while( after === null );
  1985. stopPx[ i ] = before + ( after - before ) / ( j - i + 1 );
  1986. }
  1987. }
  1988. // Convert stops to percentages along the gradient line and add a stop for each
  1989. for( i = 0; i < stopCount; i++ ) {
  1990. gradient.addColorStop( stopPx[ i ] / lineLength, stopsInfo[ i ].color.val );
  1991. }
  1992. canvas.width = bgWidth;
  1993. canvas.height = bgHeight;
  1994. context.fillStyle = gradient;
  1995. context.fillRect( 0, 0, bgWidth, bgHeight );
  1996. return canvas.toDataURL();
  1997. },
  1998. destroy: function() {
  1999. this.parent.setBackgroundLayer( this.bgLayerZIndex );
  2000. }
  2001. } );
  2002. /**
  2003. * Renderer for border-image
  2004. * @constructor
  2005. * @param {Element} el The target element
  2006. * @param {Object} styleInfos The StyleInfo objects
  2007. * @param {PIE.RootRenderer} parent
  2008. */
  2009. PIE.IE9BorderImageRenderer = PIE.RendererBase.newRenderer( {
  2010. REPEAT: 'repeat',
  2011. STRETCH: 'stretch',
  2012. ROUND: 'round',
  2013. bgLayerZIndex: 0,
  2014. needsUpdate: function() {
  2015. return this.styleInfos.borderImageInfo.changed();
  2016. },
  2017. isActive: function() {
  2018. return this.styleInfos.borderImageInfo.isActive();
  2019. },
  2020. draw: function() {
  2021. var me = this,
  2022. props = me.styleInfos.borderImageInfo.getProps(),
  2023. borderProps = me.styleInfos.borderInfo.getProps(),
  2024. bounds = me.boundsInfo.getBounds(),
  2025. repeat = props.repeat,
  2026. repeatH = repeat.h,
  2027. repeatV = repeat.v,
  2028. el = me.targetElement,
  2029. isAsync = 0;
  2030. PIE.Util.withImageSize( props.src, function( imgSize ) {
  2031. var elW = bounds.w,
  2032. elH = bounds.h,
  2033. imgW = imgSize.w,
  2034. imgH = imgSize.h,
  2035. // The image cannot be referenced as a URL directly in the SVG because IE9 throws a strange
  2036. // security exception (perhaps due to cross-origin policy within data URIs?) Therefore we
  2037. // work around this by converting the image data into a data URI itself using a transient
  2038. // canvas. This unfortunately requires the border-image src to be within the same domain,
  2039. // which isn't a limitation in true border-image, so we need to try and find a better fix.
  2040. imgSrc = me.imageToDataURI( props.src, imgW, imgH ),
  2041. REPEAT = me.REPEAT,
  2042. STRETCH = me.STRETCH,
  2043. ROUND = me.ROUND,
  2044. ceil = Math.ceil,
  2045. zero = PIE.getLength( '0' ),
  2046. widths = props.widths || ( borderProps ? borderProps.widths : { 't': zero, 'r': zero, 'b': zero, 'l': zero } ),
  2047. widthT = widths['t'].pixels( el ),
  2048. widthR = widths['r'].pixels( el ),
  2049. widthB = widths['b'].pixels( el ),
  2050. widthL = widths['l'].pixels( el ),
  2051. slices = props.slice,
  2052. sliceT = slices['t'].pixels( el ),
  2053. sliceR = slices['r'].pixels( el ),
  2054. sliceB = slices['b'].pixels( el ),
  2055. sliceL = slices['l'].pixels( el ),
  2056. centerW = elW - widthL - widthR,
  2057. middleH = elH - widthT - widthB,
  2058. imgCenterW = imgW - sliceL - sliceR,
  2059. imgMiddleH = imgH - sliceT - sliceB,
  2060. // Determine the size of each tile - 'round' is handled below
  2061. tileSizeT = repeatH === STRETCH ? centerW : imgCenterW * widthT / sliceT,
  2062. tileSizeR = repeatV === STRETCH ? middleH : imgMiddleH * widthR / sliceR,
  2063. tileSizeB = repeatH === STRETCH ? centerW : imgCenterW * widthB / sliceB,
  2064. tileSizeL = repeatV === STRETCH ? middleH : imgMiddleH * widthL / sliceL,
  2065. svg,
  2066. patterns = [],
  2067. rects = [],
  2068. i = 0;
  2069. // For 'round', subtract from each tile's size enough so that they fill the space a whole number of times
  2070. if (repeatH === ROUND) {
  2071. tileSizeT -= (tileSizeT - (centerW % tileSizeT || tileSizeT)) / ceil(centerW / tileSizeT);
  2072. tileSizeB -= (tileSizeB - (centerW % tileSizeB || tileSizeB)) / ceil(centerW / tileSizeB);
  2073. }
  2074. if (repeatV === ROUND) {
  2075. tileSizeR -= (tileSizeR - (middleH % tileSizeR || tileSizeR)) / ceil(middleH / tileSizeR);
  2076. tileSizeL -= (tileSizeL - (middleH % tileSizeL || tileSizeL)) / ceil(middleH / tileSizeL);
  2077. }
  2078. // Build the SVG for the border-image rendering. Add each piece as a pattern, which is then stretched
  2079. // or repeated as the fill of a rect of appropriate size.
  2080. svg = [
  2081. '<svg width="' + elW + '" height="' + elH + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'
  2082. ];
  2083. function addImage( x, y, w, h, cropX, cropY, cropW, cropH, tileW, tileH ) {
  2084. patterns.push(
  2085. '<pattern patternUnits="userSpaceOnUse" id="pattern' + i + '" ' +
  2086. 'x="' + (repeatH === REPEAT ? x + w / 2 - tileW / 2 : x) + '" ' +
  2087. 'y="' + (repeatV === REPEAT ? y + h / 2 - tileH / 2 : y) + '" ' +
  2088. 'width="' + tileW + '" height="' + tileH + '">' +
  2089. '<svg width="' + tileW + '" height="' + tileH + '" viewBox="' + cropX + ' ' + cropY + ' ' + cropW + ' ' + cropH + '" preserveAspectRatio="none">' +
  2090. '<image xlink:href="' + imgSrc + '" x="0" y="0" width="' + imgW + '" height="' + imgH + '" />' +
  2091. '</svg>' +
  2092. '</pattern>'
  2093. );
  2094. rects.push(
  2095. '<rect x="' + x + '" y="' + y + '" width="' + w + '" height="' + h + '" fill="url(#pattern' + i + ')" />'
  2096. );
  2097. i++;
  2098. }
  2099. addImage( 0, 0, widthL, widthT, 0, 0, sliceL, sliceT, widthL, widthT ); // top left
  2100. addImage( widthL, 0, centerW, widthT, sliceL, 0, imgCenterW, sliceT, tileSizeT, widthT ); // top center
  2101. addImage( elW - widthR, 0, widthR, widthT, imgW - sliceR, 0, sliceR, sliceT, widthR, widthT ); // top right
  2102. addImage( 0, widthT, widthL, middleH, 0, sliceT, sliceL, imgMiddleH, widthL, tileSizeL ); // middle left
  2103. if ( props.fill ) { // center fill
  2104. addImage( widthL, widthT, centerW, middleH, sliceL, sliceT, imgCenterW, imgMiddleH,
  2105. tileSizeT || tileSizeB || imgCenterW, tileSizeL || tileSizeR || imgMiddleH );
  2106. }
  2107. addImage( elW - widthR, widthT, widthR, middleH, imgW - sliceR, sliceT, sliceR, imgMiddleH, widthR, tileSizeR ); // middle right
  2108. addImage( 0, elH - widthB, widthL, widthB, 0, imgH - sliceB, sliceL, sliceB, widthL, widthB ); // bottom left
  2109. addImage( widthL, elH - widthB, centerW, widthB, sliceL, imgH - sliceB, imgCenterW, sliceB, tileSizeB, widthB ); // bottom center
  2110. addImage( elW - widthR, elH - widthB, widthR, widthB, imgW - sliceR, imgH - sliceB, sliceR, sliceB, widthR, widthB ); // bottom right
  2111. svg.push(
  2112. '<defs>' +
  2113. patterns.join('\n') +
  2114. '</defs>' +
  2115. rects.join('\n') +
  2116. '</svg>'
  2117. );
  2118. me.parent.setBackgroundLayer( me.bgLayerZIndex, 'url(data:image/svg+xml,' + escape( svg.join( '' ) ) + ') no-repeat border-box border-box' );
  2119. // If the border-image's src wasn't immediately available, the SVG for its background layer
  2120. // will have been created asynchronously after the main element's update has finished; we'll
  2121. // therefore need to force the root renderer to sync to the final background once finished.
  2122. if( isAsync ) {
  2123. me.parent.updateRendering();
  2124. }
  2125. }, me );
  2126. isAsync = 1;
  2127. },
  2128. /**
  2129. * Convert a given image to a data URI
  2130. */
  2131. imageToDataURI: (function() {
  2132. var uris = {};
  2133. return function( src, width, height ) {
  2134. var uri = uris[ src ],
  2135. image, canvas;
  2136. if ( !uri ) {
  2137. image = new Image();
  2138. canvas = doc.createElement( 'canvas' );
  2139. image.src = src;
  2140. canvas.width = width;
  2141. canvas.height = height;
  2142. canvas.getContext( '2d' ).drawImage( image, 0, 0 );
  2143. uri = uris[ src ] = canvas.toDataURL();
  2144. }
  2145. return uri;
  2146. }
  2147. })(),
  2148. prepareUpdate: function() {
  2149. if (this.isActive()) {
  2150. var me = this,
  2151. el = me.targetElement,
  2152. rs = el.runtimeStyle,
  2153. widths = me.styleInfos.borderImageInfo.getProps().widths;
  2154. // Force border-style to solid so it doesn't collapse
  2155. rs.borderStyle = 'solid';
  2156. // If widths specified in border-image shorthand, override border-width
  2157. if ( widths ) {
  2158. rs.borderTopWidth = widths['t'].pixels( el ) + 'px';
  2159. rs.borderRightWidth = widths['r'].pixels( el ) + 'px';
  2160. rs.borderBottomWidth = widths['b'].pixels( el ) + 'px';
  2161. rs.borderLeftWidth = widths['l'].pixels( el ) + 'px';
  2162. }
  2163. // Make the border transparent
  2164. me.hideBorder();
  2165. }
  2166. },
  2167. destroy: function() {
  2168. var me = this,
  2169. rs = me.targetElement.runtimeStyle;
  2170. me.parent.setBackgroundLayer( me.bgLayerZIndex );
  2171. rs.borderColor = rs.borderStyle = rs.borderWidth = '';
  2172. }
  2173. } );
  2174. PIE.Element = (function() {
  2175. var wrappers = {},
  2176. lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
  2177. pollCssProp = PIE.CSS_PREFIX + 'poll',
  2178. trackActiveCssProp = PIE.CSS_PREFIX + 'track-active',
  2179. trackHoverCssProp = PIE.CSS_PREFIX + 'track-hover',
  2180. hoverClass = PIE.CLASS_PREFIX + 'hover',
  2181. activeClass = PIE.CLASS_PREFIX + 'active',
  2182. focusClass = PIE.CLASS_PREFIX + 'focus',
  2183. firstChildClass = PIE.CLASS_PREFIX + 'first-child',
  2184. ignorePropertyNames = { 'background':1, 'bgColor':1, 'display': 1 },
  2185. classNameRegExes = {},
  2186. dummyArray = [];
  2187. function addClass( el, className ) {
  2188. el.className += ' ' + className;
  2189. }
  2190. function removeClass( el, className ) {
  2191. var re = classNameRegExes[ className ] ||
  2192. ( classNameRegExes[ className ] = new RegExp( '\\b' + className + '\\b', 'g' ) );
  2193. el.className = el.className.replace( re, '' );
  2194. }
  2195. function delayAddClass( el, className /*, className2*/ ) {
  2196. var classes = dummyArray.slice.call( arguments, 1 ),
  2197. i = classes.length;
  2198. setTimeout( function() {
  2199. if( el ) {
  2200. while( i-- ) {
  2201. addClass( el, classes[ i ] );
  2202. }
  2203. }
  2204. }, 0 );
  2205. }
  2206. function delayRemoveClass( el, className /*, className2*/ ) {
  2207. var classes = dummyArray.slice.call( arguments, 1 ),
  2208. i = classes.length;
  2209. setTimeout( function() {
  2210. if( el ) {
  2211. while( i-- ) {
  2212. removeClass( el, classes[ i ] );
  2213. }
  2214. }
  2215. }, 0 );
  2216. }
  2217. function Element( el ) {
  2218. var me = this,
  2219. childRenderers,
  2220. rootRenderer,
  2221. boundsInfo = new PIE.BoundsInfo( el ),
  2222. styleInfos,
  2223. styleInfosArr,
  2224. initializing,
  2225. initialized,
  2226. eventsAttached,
  2227. eventListeners = [],
  2228. delayed,
  2229. destroyed,
  2230. poll;
  2231. me.el = el;
  2232. /**
  2233. * Initialize PIE for this element.
  2234. */
  2235. function init() {
  2236. if( !initialized ) {
  2237. var docEl,
  2238. bounds,
  2239. ieDocMode = PIE.ieDocMode,
  2240. cs = el.currentStyle,
  2241. lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
  2242. trackActive = cs.getAttribute( trackActiveCssProp ) !== 'false',
  2243. trackHover = cs.getAttribute( trackHoverCssProp ) !== 'false';
  2244. // Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
  2245. poll = cs.getAttribute( pollCssProp );
  2246. poll = ieDocMode > 7 ? poll !== 'false' : poll === 'true';
  2247. // Force layout so move/resize events will fire. Set this as soon as possible to avoid layout changes
  2248. // after load, but make sure it only gets called the first time through to avoid recursive calls to init().
  2249. if( !initializing ) {
  2250. initializing = 1;
  2251. el.runtimeStyle.zoom = 1;
  2252. initFirstChildPseudoClass();
  2253. }
  2254. boundsInfo.lock();
  2255. // If the -pie-lazy-init:true flag is set, check if the element is outside the viewport and if so, delay initialization
  2256. if( lazy && ( bounds = boundsInfo.getBounds() ) && ( docEl = doc.documentElement || doc.body ) &&
  2257. ( bounds.y > docEl.clientHeight || bounds.x > docEl.clientWidth || bounds.y + bounds.h < 0 || bounds.x + bounds.w < 0 ) ) {
  2258. if( !delayed ) {
  2259. delayed = 1;
  2260. PIE.OnScroll.observe( init );
  2261. }
  2262. } else {
  2263. initialized = 1;
  2264. delayed = initializing = 0;
  2265. PIE.OnScroll.unobserve( init );
  2266. // Create the style infos and renderers
  2267. if ( ieDocMode === 9 ) {
  2268. styleInfos = {
  2269. backgroundInfo: new PIE.BackgroundStyleInfo( el ),
  2270. borderImageInfo: new PIE.BorderImageStyleInfo( el ),
  2271. borderInfo: new PIE.BorderStyleInfo( el ),
  2272. paddingInfo: new PIE.PaddingStyleInfo( el )
  2273. };
  2274. styleInfosArr = [
  2275. styleInfos.backgroundInfo,
  2276. styleInfos.borderInfo,
  2277. styleInfos.borderImageInfo,
  2278. styleInfos.paddingInfo
  2279. ];
  2280. rootRenderer = new PIE.IE9RootRenderer( el, boundsInfo, styleInfos );
  2281. childRenderers = [
  2282. new PIE.IE9BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
  2283. new PIE.IE9BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
  2284. ];
  2285. } else {
  2286. styleInfos = {
  2287. backgroundInfo: new PIE.BackgroundStyleInfo( el ),
  2288. borderInfo: new PIE.BorderStyleInfo( el ),
  2289. borderImageInfo: new PIE.BorderImageStyleInfo( el ),
  2290. borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
  2291. boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
  2292. paddingInfo: new PIE.PaddingStyleInfo( el ),
  2293. visibilityInfo: new PIE.VisibilityStyleInfo( el )
  2294. };
  2295. styleInfosArr = [
  2296. styleInfos.backgroundInfo,
  2297. styleInfos.borderInfo,
  2298. styleInfos.borderImageInfo,
  2299. styleInfos.borderRadiusInfo,
  2300. styleInfos.boxShadowInfo,
  2301. styleInfos.paddingInfo,
  2302. styleInfos.visibilityInfo
  2303. ];
  2304. rootRenderer = new PIE.RootRenderer( el, boundsInfo, styleInfos );
  2305. childRenderers = [
  2306. new PIE.BoxShadowOutsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
  2307. new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
  2308. //new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
  2309. new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
  2310. new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
  2311. ];
  2312. if( el.tagName === 'IMG' ) {
  2313. childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
  2314. }
  2315. rootRenderer.childRenderers = childRenderers; // circular reference, can't pass in constructor; TODO is there a cleaner way?
  2316. }
  2317. // Add property change listeners to ancestors if requested
  2318. initAncestorEventListeners();
  2319. // Add to list of polled elements when -pie-poll:true
  2320. if( poll ) {
  2321. PIE.Heartbeat.observe( update );
  2322. PIE.Heartbeat.run();
  2323. }
  2324. // Trigger rendering
  2325. update( 0, 1 );
  2326. }
  2327. if( !eventsAttached ) {
  2328. eventsAttached = 1;
  2329. if( ieDocMode < 9 ) {
  2330. addListener( el, 'onmove', handleMoveOrResize );
  2331. }
  2332. addListener( el, 'onresize', handleMoveOrResize );
  2333. addListener( el, 'onpropertychange', propChanged );
  2334. if( trackHover ) {
  2335. addListener( el, 'onmouseenter', mouseEntered );
  2336. }
  2337. if( trackHover || trackActive ) {
  2338. addListener( el, 'onmouseleave', mouseLeft );
  2339. }
  2340. if( trackActive ) {
  2341. addListener( el, 'onmousedown', mousePressed );
  2342. }
  2343. if( el.tagName in PIE.focusableElements ) {
  2344. addListener( el, 'onfocus', focused );
  2345. addListener( el, 'onblur', blurred );
  2346. }
  2347. PIE.OnResize.observe( handleMoveOrResize );
  2348. PIE.OnUnload.observe( removeEventListeners );
  2349. }
  2350. boundsInfo.unlock();
  2351. }
  2352. }
  2353. /**
  2354. * Event handler for onmove and onresize events. Invokes update() only if the element's
  2355. * bounds have previously been calculated, to prevent multiple runs during page load when
  2356. * the element has no initial CSS3 properties.
  2357. */
  2358. function handleMoveOrResize() {
  2359. if( boundsInfo && boundsInfo.hasBeenQueried() ) {
  2360. update();
  2361. }
  2362. }
  2363. /**
  2364. * Update position and/or size as necessary. Both move and resize events call
  2365. * this rather than the updatePos/Size functions because sometimes, particularly
  2366. * during page load, one will fire but the other won't.
  2367. */
  2368. function update( isPropChange, force ) {
  2369. if( !destroyed ) {
  2370. if( initialized ) {
  2371. lockAll();
  2372. var i = 0, len = childRenderers.length,
  2373. sizeChanged = boundsInfo.sizeChanged();
  2374. for( ; i < len; i++ ) {
  2375. childRenderers[i].prepareUpdate();
  2376. }
  2377. for( i = 0; i < len; i++ ) {
  2378. if( force || sizeChanged || ( isPropChange && childRenderers[i].needsUpdate() ) ) {
  2379. childRenderers[i].updateRendering();
  2380. }
  2381. }
  2382. if( force || sizeChanged || isPropChange || boundsInfo.positionChanged() ) {
  2383. rootRenderer.updateRendering();
  2384. }
  2385. unlockAll();
  2386. }
  2387. else if( !initializing ) {
  2388. init();
  2389. }
  2390. }
  2391. }
  2392. /**
  2393. * Handle property changes to trigger update when appropriate.
  2394. */
  2395. function propChanged() {
  2396. // Some elements like <table> fire onpropertychange events for old-school background properties
  2397. // ('background', 'bgColor') when runtimeStyle background properties are changed, which
  2398. // results in an infinite loop; therefore we filter out those property names. Also, 'display'
  2399. // is ignored because size calculations don't work correctly immediately when its onpropertychange
  2400. // event fires, and because it will trigger an onresize event anyway.
  2401. if( initialized && !( event && event.propertyName in ignorePropertyNames ) ) {
  2402. update( 1 );
  2403. }
  2404. }
  2405. /**
  2406. * Handle mouseenter events. Adds a custom class to the element to allow IE6 to add
  2407. * hover styles to non-link elements, and to trigger a propertychange update.
  2408. */
  2409. function mouseEntered() {
  2410. //must delay this because the mouseenter event fires before the :hover styles are added.
  2411. delayAddClass( el, hoverClass );
  2412. }
  2413. /**
  2414. * Handle mouseleave events
  2415. */
  2416. function mouseLeft() {
  2417. //must delay this because the mouseleave event fires before the :hover styles are removed.
  2418. delayRemoveClass( el, hoverClass, activeClass );
  2419. }
  2420. /**
  2421. * Handle mousedown events. Adds a custom class to the element to allow IE6 to add
  2422. * active styles to non-link elements, and to trigger a propertychange update.
  2423. */
  2424. function mousePressed() {
  2425. //must delay this because the mousedown event fires before the :active styles are added.
  2426. delayAddClass( el, activeClass );
  2427. // listen for mouseups on the document; can't just be on the element because the user might
  2428. // have dragged out of the element while the mouse button was held down
  2429. PIE.OnMouseup.observe( mouseReleased );
  2430. }
  2431. /**
  2432. * Handle mouseup events
  2433. */
  2434. function mouseReleased() {
  2435. //must delay this because the mouseup event fires before the :active styles are removed.
  2436. delayRemoveClass( el, activeClass );
  2437. PIE.OnMouseup.unobserve( mouseReleased );
  2438. }
  2439. /**
  2440. * Handle focus events. Adds a custom class to the element to trigger a propertychange update.
  2441. */
  2442. function focused() {
  2443. //must delay this because the focus event fires before the :focus styles are added.
  2444. delayAddClass( el, focusClass );
  2445. }
  2446. /**
  2447. * Handle blur events
  2448. */
  2449. function blurred() {
  2450. //must delay this because the blur event fires before the :focus styles are removed.
  2451. delayRemoveClass( el, focusClass );
  2452. }
  2453. /**
  2454. * Handle property changes on ancestors of the element; see initAncestorEventListeners()
  2455. * which adds these listeners as requested with the -pie-watch-ancestors CSS property.
  2456. */
  2457. function ancestorPropChanged() {
  2458. var name = event.propertyName;
  2459. if( name === 'className' || name === 'id' || name.indexOf( 'style.' ) === 0 ) {
  2460. propChanged();
  2461. }
  2462. }
  2463. function lockAll() {
  2464. boundsInfo.lock();
  2465. for( var i = styleInfosArr.length; i--; ) {
  2466. styleInfosArr[i].lock();
  2467. }
  2468. }
  2469. function unlockAll() {
  2470. for( var i = styleInfosArr.length; i--; ) {
  2471. styleInfosArr[i].unlock();
  2472. }
  2473. boundsInfo.unlock();
  2474. }
  2475. function addListener( targetEl, type, handler ) {
  2476. targetEl.attachEvent( type, handler );
  2477. eventListeners.push( [ targetEl, type, handler ] );
  2478. }
  2479. /**
  2480. * Remove all event listeners from the element and any monitored ancestors.
  2481. */
  2482. function removeEventListeners() {
  2483. if (eventsAttached) {
  2484. var i = eventListeners.length,
  2485. listener;
  2486. while( i-- ) {
  2487. listener = eventListeners[ i ];
  2488. listener[ 0 ].detachEvent( listener[ 1 ], listener[ 2 ] );
  2489. }
  2490. PIE.OnUnload.unobserve( removeEventListeners );
  2491. eventsAttached = 0;
  2492. eventListeners = [];
  2493. }
  2494. }
  2495. /**
  2496. * Clean everything up when the behavior is removed from the element, or the element
  2497. * is manually destroyed.
  2498. */
  2499. function destroy() {
  2500. if( !destroyed ) {
  2501. var i, len;
  2502. removeEventListeners();
  2503. destroyed = 1;
  2504. // destroy any active renderers
  2505. if( childRenderers ) {
  2506. for( i = 0, len = childRenderers.length; i < len; i++ ) {
  2507. childRenderers[i].finalized = 1;
  2508. childRenderers[i].destroy();
  2509. }
  2510. }
  2511. rootRenderer.destroy();
  2512. // Remove from list of polled elements in IE8
  2513. if( poll ) {
  2514. PIE.Heartbeat.unobserve( update );
  2515. }
  2516. // Stop onresize listening
  2517. PIE.OnResize.unobserve( update );
  2518. // Kill references
  2519. childRenderers = rootRenderer = boundsInfo = styleInfos = styleInfosArr = el = null;
  2520. me.el = me = 0;
  2521. }
  2522. }
  2523. /**
  2524. * If requested via the custom -pie-watch-ancestors CSS property, add onpropertychange and
  2525. * other event listeners to ancestor(s) of the element so we can pick up style changes
  2526. * based on CSS rules using descendant selectors.
  2527. */
  2528. function initAncestorEventListeners() {
  2529. var watch = el.currentStyle.getAttribute( PIE.CSS_PREFIX + 'watch-ancestors' ),
  2530. i, a;
  2531. if( watch ) {
  2532. watch = parseInt( watch, 10 );
  2533. i = 0;
  2534. a = el.parentNode;
  2535. while( a && ( watch === 'NaN' || i++ < watch ) ) {
  2536. addListener( a, 'onpropertychange', ancestorPropChanged );
  2537. addListener( a, 'onmouseenter', mouseEntered );
  2538. addListener( a, 'onmouseleave', mouseLeft );
  2539. addListener( a, 'onmousedown', mousePressed );
  2540. if( a.tagName in PIE.focusableElements ) {
  2541. addListener( a, 'onfocus', focused );
  2542. addListener( a, 'onblur', blurred );
  2543. }
  2544. a = a.parentNode;
  2545. }
  2546. }
  2547. }
  2548. /**
  2549. * If the target element is a first child, add a pie_first-child class to it. This allows using
  2550. * the added class as a workaround for the fact that PIE's rendering element breaks the :first-child
  2551. * pseudo-class selector.
  2552. */
  2553. function initFirstChildPseudoClass() {
  2554. var tmpEl = el,
  2555. isFirst = 1;
  2556. while( tmpEl = tmpEl.previousSibling ) {
  2557. if( tmpEl.nodeType === 1 ) {
  2558. isFirst = 0;
  2559. break;
  2560. }
  2561. }
  2562. if( isFirst ) {
  2563. addClass( el, firstChildClass );
  2564. }
  2565. }
  2566. // These methods are all already bound to this instance so there's no need to wrap them
  2567. // in a closure to maintain the 'this' scope object when calling them.
  2568. me.init = init;
  2569. me.destroy = destroy;
  2570. }
  2571. Element.getInstance = function( el ) {
  2572. var id = el[ 'uniqueID' ];
  2573. return wrappers[ id ] || ( wrappers[ id ] = new Element( el ) );
  2574. };
  2575. Element.destroy = function( el ) {
  2576. var id = el[ 'uniqueID' ],
  2577. wrapper = wrappers[ id ];
  2578. if( wrapper ) {
  2579. wrapper.destroy();
  2580. delete wrappers[ id ];
  2581. }
  2582. };
  2583. Element.destroyAll = function() {
  2584. var els = [], wrapper;
  2585. if( wrappers ) {
  2586. for( var w in wrappers ) {
  2587. if( wrappers.hasOwnProperty( w ) ) {
  2588. wrapper = wrappers[ w ];
  2589. els.push( wrapper.el );
  2590. wrapper.destroy();
  2591. }
  2592. }
  2593. wrappers = {};
  2594. }
  2595. return els;
  2596. };
  2597. return Element;
  2598. })();
  2599. /*
  2600. * This file exposes the public API for invoking PIE.
  2601. */
  2602. /**
  2603. * The version number of this PIE build.
  2604. */
  2605. PIE[ 'version' ] = '2.0beta1';
  2606. /**
  2607. * @property supportsVML
  2608. * True if the current IE browser environment has a functioning VML engine. Should be true
  2609. * in most IEs, but in rare cases may be false. If false, PIE will exit immediately when
  2610. * attached to an element (for IE<9) to prevent errors; this property may also be used for
  2611. * debugging or by external scripts to perform some special action when VML support is absent.
  2612. * @type {boolean}
  2613. */
  2614. PIE[ 'supportsVML' ] = PIE.supportsVML;
  2615. /**
  2616. * Programatically attach PIE to a single element.
  2617. * @param {Element} el
  2618. */
  2619. PIE[ 'attach' ] = function( el ) {
  2620. if ( PIE.ieDocMode === 9 || ( PIE.ieDocMode < 9 && PIE.supportsVML ) ) {
  2621. PIE.Element.getInstance( el ).init();
  2622. }
  2623. };
  2624. /**
  2625. * Programatically detach PIE from a single element.
  2626. * @param {Element} el
  2627. */
  2628. PIE[ 'detach' ] = function( el ) {
  2629. PIE.Element.destroy( el );
  2630. };
  2631. })( window, document );