|
1 (function ( window, document ) { |
|
2 'use strict'; |
|
3 |
|
4 var supportedBrowser = ( document.querySelector && window.addEventListener ), |
|
5 loaded = false, |
|
6 secret, |
|
7 secretTimeout, |
|
8 resizing; |
|
9 |
|
10 function sendEmbedMessage( message, value ) { |
|
11 window.parent.postMessage( { |
|
12 message: message, |
|
13 value: value, |
|
14 secret: secret |
|
15 }, '*' ); |
|
16 } |
|
17 |
|
18 function onLoad() { |
|
19 if ( loaded ) { |
|
20 return; |
|
21 } |
|
22 loaded = true; |
|
23 |
|
24 var share_dialog = document.querySelector( '.wp-embed-share-dialog' ), |
|
25 share_dialog_open = document.querySelector( '.wp-embed-share-dialog-open' ), |
|
26 share_dialog_close = document.querySelector( '.wp-embed-share-dialog-close' ), |
|
27 share_input = document.querySelectorAll( '.wp-embed-share-input' ), |
|
28 share_dialog_tabs = document.querySelectorAll( '.wp-embed-share-tab-button button' ), |
|
29 featured_image = document.querySelector( '.wp-embed-featured-image img' ), |
|
30 i; |
|
31 |
|
32 if ( share_input ) { |
|
33 for ( i = 0; i < share_input.length; i++ ) { |
|
34 share_input[ i ].addEventListener( 'click', function ( e ) { |
|
35 e.target.select(); |
|
36 } ); |
|
37 } |
|
38 } |
|
39 |
|
40 function openSharingDialog() { |
|
41 share_dialog.className = share_dialog.className.replace( 'hidden', '' ); |
|
42 // Initial focus should go on the currently selected tab in the dialog. |
|
43 document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' ).focus(); |
|
44 } |
|
45 |
|
46 function closeSharingDialog() { |
|
47 share_dialog.className += ' hidden'; |
|
48 document.querySelector( '.wp-embed-share-dialog-open' ).focus(); |
|
49 } |
|
50 |
|
51 if ( share_dialog_open ) { |
|
52 share_dialog_open.addEventListener( 'click', function () { |
|
53 openSharingDialog(); |
|
54 } ); |
|
55 } |
|
56 |
|
57 if ( share_dialog_close ) { |
|
58 share_dialog_close.addEventListener( 'click', function () { |
|
59 closeSharingDialog(); |
|
60 } ); |
|
61 } |
|
62 |
|
63 function shareClickHandler( e ) { |
|
64 var currentTab = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' ); |
|
65 currentTab.setAttribute( 'aria-selected', 'false' ); |
|
66 document.querySelector( '#' + currentTab.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' ); |
|
67 |
|
68 e.target.setAttribute( 'aria-selected', 'true' ); |
|
69 document.querySelector( '#' + e.target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' ); |
|
70 } |
|
71 |
|
72 function shareKeyHandler( e ) { |
|
73 var target = e.target, |
|
74 previousSibling = target.parentElement.previousElementSibling, |
|
75 nextSibling = target.parentElement.nextElementSibling, |
|
76 newTab, newTabChild; |
|
77 |
|
78 if ( 37 === e.keyCode ) { |
|
79 newTab = previousSibling; |
|
80 } else if ( 39 === e.keyCode ) { |
|
81 newTab = nextSibling; |
|
82 } else { |
|
83 return false; |
|
84 } |
|
85 |
|
86 if ( 'rtl' === document.documentElement.getAttribute( 'dir' ) ) { |
|
87 newTab = ( newTab === previousSibling ) ? nextSibling : previousSibling; |
|
88 } |
|
89 |
|
90 if ( newTab ) { |
|
91 newTabChild = newTab.firstElementChild; |
|
92 |
|
93 target.setAttribute( 'tabindex', '-1' ); |
|
94 target.setAttribute( 'aria-selected', false ); |
|
95 document.querySelector( '#' + target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' ); |
|
96 |
|
97 newTabChild.setAttribute( 'tabindex', '0' ); |
|
98 newTabChild.setAttribute( 'aria-selected', 'true' ); |
|
99 newTabChild.focus(); |
|
100 document.querySelector( '#' + newTabChild.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' ); |
|
101 } |
|
102 } |
|
103 |
|
104 if ( share_dialog_tabs ) { |
|
105 for ( i = 0; i < share_dialog_tabs.length; i++ ) { |
|
106 share_dialog_tabs[ i ].addEventListener( 'click', shareClickHandler ); |
|
107 |
|
108 share_dialog_tabs[ i ].addEventListener( 'keydown', shareKeyHandler ); |
|
109 } |
|
110 } |
|
111 |
|
112 document.addEventListener( 'keydown', function ( e ) { |
|
113 if ( 27 === e.keyCode && -1 === share_dialog.className.indexOf( 'hidden' ) ) { |
|
114 closeSharingDialog(); |
|
115 } else if ( 9 === e.keyCode ) { |
|
116 constrainTabbing( e ); |
|
117 } |
|
118 }, false ); |
|
119 |
|
120 function constrainTabbing( e ) { |
|
121 // Need to re-get the selected tab each time. |
|
122 var firstFocusable = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' ); |
|
123 |
|
124 if ( share_dialog_close === e.target && ! e.shiftKey ) { |
|
125 firstFocusable.focus(); |
|
126 e.preventDefault(); |
|
127 } else if ( firstFocusable === e.target && e.shiftKey ) { |
|
128 share_dialog_close.focus(); |
|
129 e.preventDefault(); |
|
130 } |
|
131 } |
|
132 |
|
133 if ( window.self === window.top ) { |
|
134 return; |
|
135 } |
|
136 |
|
137 /** |
|
138 * Send this document's height to the parent (embedding) site. |
|
139 */ |
|
140 sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) ); |
|
141 |
|
142 // Send the document's height again after the featured image has been loaded. |
|
143 if ( featured_image ) { |
|
144 featured_image.addEventListener( 'load', function() { |
|
145 sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) ); |
|
146 } ); |
|
147 } |
|
148 |
|
149 /** |
|
150 * Detect clicks to external (_top) links. |
|
151 */ |
|
152 function linkClickHandler( e ) { |
|
153 var target = e.target, |
|
154 href; |
|
155 if ( target.hasAttribute( 'href' ) ) { |
|
156 href = target.getAttribute( 'href' ); |
|
157 } else { |
|
158 href = target.parentElement.getAttribute( 'href' ); |
|
159 } |
|
160 |
|
161 /** |
|
162 * Send link target to the parent (embedding) site. |
|
163 */ |
|
164 if ( href ) { |
|
165 sendEmbedMessage( 'link', href ); |
|
166 e.preventDefault(); |
|
167 } |
|
168 } |
|
169 |
|
170 document.addEventListener( 'click', linkClickHandler ); |
|
171 } |
|
172 |
|
173 /** |
|
174 * Iframe resize handler. |
|
175 */ |
|
176 function onResize() { |
|
177 if ( window.self === window.top ) { |
|
178 return; |
|
179 } |
|
180 |
|
181 clearTimeout( resizing ); |
|
182 |
|
183 resizing = setTimeout( function () { |
|
184 sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) ); |
|
185 }, 100 ); |
|
186 } |
|
187 |
|
188 /** |
|
189 * Re-get the secret when it was added later on. |
|
190 */ |
|
191 function getSecret() { |
|
192 if ( window.self === window.top || !!secret ) { |
|
193 return; |
|
194 } |
|
195 |
|
196 secret = window.location.hash.replace( /.*secret=([\d\w]{10}).*/, '$1' ); |
|
197 |
|
198 clearTimeout( secretTimeout ); |
|
199 |
|
200 secretTimeout = setTimeout( function () { |
|
201 getSecret(); |
|
202 }, 100 ); |
|
203 } |
|
204 |
|
205 if ( supportedBrowser ) { |
|
206 getSecret(); |
|
207 document.documentElement.className = document.documentElement.className.replace( /\bno-js\b/, '' ) + ' js'; |
|
208 document.addEventListener( 'DOMContentLoaded', onLoad, false ); |
|
209 window.addEventListener( 'load', onLoad, false ); |
|
210 window.addEventListener( 'resize', onResize, false ); |
|
211 } |
|
212 })( window, document ); |