← All changes | assets/js/page.js +193 -175 3.7.0 → 5.5.4 View file →

		@@ -1,215 +1,233 @@
1	1	window.CopyTheCodeToClipboard = (function(window, document, navigator) {
2		- var textArea,
3		- copy;
	2	+ var textArea,
	3	+ copy;
4	4
5		- function isOS() {
6		- return navigator.userAgent.match(/ipad|iphone/i);
7		- }
	5	+ function isOS() {
	6	+ return navigator.userAgent.match( /ipad|iphone/i );
	7	+ }
8	8
9		- function createTextArea(text) {
10		- textArea = document.createElement('textArea');
11		- textArea.value = text;
12		- document.body.appendChild(textArea);
13		- }
	9	+ function createTextArea(text) {
	10	+ textArea = document.createElement( 'textArea' );
	11	+ textArea.value = text;
	12	+ document.body.appendChild( textArea );
	13	+ }
14	14
15		- function selectText() {
16		- var range,
17		- selection;
	15	+ function selectText() {
	16	+ var range,
	17	+ selection;
18	18
19		- if (isOS()) {
20		- range = document.createRange();
21		- range.selectNodeContents(textArea);
22		- selection = window.getSelection();
23		- selection.removeAllRanges();
24		- selection.addRange(range);
25		- textArea.setSelectionRange(0, 999999);
26		- } else {
27		- textArea.select();
28		- }
29		- }
	19	+ if (isOS()) {
	20	+ range = document.createRange();
	21	+ range.selectNodeContents( textArea );
	22	+ selection = window.getSelection();
	23	+ selection.removeAllRanges();
	24	+ selection.addRange( range );
	25	+ textArea.setSelectionRange( 0, 999999 );
	26	+ } else {
	27	+ textArea.select();
	28	+ }
	29	+ }
30	30
31		- function copyToClipboard() {
32		- document.execCommand('copy');
33		- document.body.removeChild(textArea);
34		- }
	31	+ function copyToClipboard() {
	32	+ // Use modern Clipboard API (iOS 26+ compatible)
	33	+ if ( navigator.clipboard && navigator.clipboard.writeText ) {
	34	+ navigator.clipboard.writeText( textArea.value ).then(
	35	+ function() {
	36	+ document.body.removeChild( textArea );
	37	+ }
	38	+ ).catch(
	39	+ function() {
	40	+ // Fallback to legacy method if Clipboard API fails
	41	+ document.execCommand( 'copy' );
	42	+ document.body.removeChild( textArea );
	43	+ }
	44	+ );
	45	+ } else {
	46	+ // Fallback for older browsers
	47	+ document.execCommand( 'copy' );
	48	+ document.body.removeChild( textArea );
	49	+ }
	50	+ }
35	51
36		- copy = function(text) {
37		- createTextArea(text);
38		- selectText();
39		- copyToClipboard();
40		- };
	52	+ copy = function(text) {
	53	+ createTextArea( text );
	54	+ selectText();
	55	+ copyToClipboard();
	56	+ };
41	57
42		- return {
43		- copy: copy
44		- };
45		-})(window, document, navigator);
	58	+ return {
	59	+ copy: copy
	60	+ };
	61	+})( window, document, navigator );
46	62
47	63
48	64	(function($) {
49	65
50		- CopyTheCodePage = {
51		-
52		- /**
53		- * Init
54		- */
55		- init: function()
56		- {
57		- this._bind();
58		- this._preview();
59		- $('.copy-the-code .nav-tab-wrapper > .nav-tab:first-child').addClass('nav-tab-active');
60		- },
	66	+ CopyTheCodePage = {
61	67
62		- _bind: function()
63		- {
64		- $( document ).on('input', '[name="button-text"], [name="button-copy-text"], [name="button-title"]', CopyTheCodePage._preview );
65		- $( document ).on('change', '[name="style"], [name="button-position"]', CopyTheCodePage._preview );
66		- $( document ).on('click', '.copy-the-code-button', CopyTheCodePage.copyCode );
67		- },
	68	+ /**
	69	+ * Init
	70	+ */
	71	+ init: function()
	72	+ {
	73	+ this._bind();
	74	+ this._preview();
	75	+ $( '.copy-the-code .nav-tab-wrapper > .nav-tab:first-child' ).addClass( 'nav-tab-active' );
	76	+ },
68	77
69		- /**
70		- * Copy to Clipboard
71		- */
72		- copyCode: function( event )
73		- {
74		- var btn = $( this ),
75		- preview = $('#preview').find('pre'),
76		- source = btn.parents('.copy-the-code-wrap').find( preview ),
77		- oldText = btn.text();
	78	+ _bind: function()
	79	+ {
	80	+ $( document ).on( 'input', '[name="button-text"], [name="button-copy-text"], [name="button-title"]', CopyTheCodePage._preview );
	81	+ $( document ).on( 'change', '[name="style"], [name="button-position"]', CopyTheCodePage._preview );
	82	+ $( document ).on( 'click', '.copy-the-code-button', CopyTheCodePage.copyCode );
	83	+ },
78	84
79		- var buttonMarkup = $('.copy-the-code-wrap').html() || '';
80		- var copy_as = 'text';
81		- var button_text = $( '[name="button-text"]' ).val() || '';
82		- var button_copy_text = $( '[name="button-copy-text"]' ).val() || '';
83		- var style = $( '[name="style"]' ).val() || 'button';
	85	+ /**
	86	+ * Copy to Clipboard
	87	+ */
	88	+ copyCode: function( event )
	89	+ {
	90	+ var btn = $( this ),
	91	+ preview = $( '#preview' ).find( 'pre' ),
	92	+ source = btn.parents( '.copy-the-code-wrap' ).find( preview ),
	93	+ oldText = btn.text();
84	94
85		- if( 'text' === copy_as ) {
86		- var html = source.text();
	95	+ var buttonMarkup = $( '.copy-the-code-wrap' ).html() || '';
	96	+ var copy_as = 'text';
	97	+ var button_text = $( '[name="button-text"]' ).val() || '';
	98	+ var button_copy_text = $( '[name="button-copy-text"]' ).val() || '';
	99	+ var style = $( '[name="style"]' ).val() || 'button';
87	100
88		- // Remove the 'copy' text.
89		- var tempHTML = html.replace(button_text, '');
90		-
91		- } else {
92		- var html = source.html();
	101	+ if ( 'text' === copy_as ) {
	102	+ var html = source.text();
93	103
94		- // Remove the <copy> button.
95		- var tempHTML = html.replace(buttonMarkup, '');
96		- }
	104	+ // Remove the 'copy' text.
	105	+ var tempHTML = html.replace( button_text, '' );
97	106
	107	+ } else {
	108	+ var html = source.html();
98	109
99		- // Copy the Code.
100		- var tempPre = $("<textarea id='temp-pre'>"),
101		- temp = $("<textarea>"),
102		- brRegex = '/<br\s*[/\]?>/gi';
	110	+ // Remove the <copy> button.
	111	+ var tempHTML = html.replace( buttonMarkup, '' );
	112	+ }
103	113
104		- // Append temporary elements to DOM.
105		- $("body").append(temp);
106		- $("body").append(tempPre);
	114	+ // Copy the Code.
	115	+ var tempPre = $( "<textarea id='temp-pre'>" ),
	116	+ temp = $( "<textarea>" ),
	117	+ brRegex = '/<br\s*[/\]?>/gi';
107	118
108		- // Set temporary HTML markup.
109		- tempPre.html( tempHTML );
	119	+ // Append temporary elements to DOM.
	120	+ $( "body" ).append( temp );
	121	+ $( "body" ).append( tempPre );
110	122
111		- // Format the HTML markup.
112		- temp.val( tempPre.text().replace(brRegex, "\r\n" ) ).select();
	123	+ // Set temporary HTML markup.
	124	+ tempPre.html( tempHTML );
113	125
114		- // Support for IOS devices too.
115		- CopyTheCodeToClipboard.copy( tempPre.text().replace(brRegex, "\r\n" ) );
	126	+ // Format the HTML markup.
	127	+ temp.val( tempPre.text().replace( brRegex, "\r\n" ) ).select();
116	128
117		- // Remove temporary elements.
118		- temp.remove();
119		- tempPre.remove();
	129	+ // Support for IOS devices too.
	130	+ CopyTheCodeToClipboard.copy( tempPre.text().replace( brRegex, "\r\n" ) );
120	131
121		- // Copied!
122		- btn.text( button_copy_text );
123		- setTimeout(function() {
124		- if( 'svg-icon' === style ) {
125		- btn.html( copyTheCode.buttonSvg );
126		- } else {
127		- btn.text( oldText );
128		- }
129		- }, 1000);
130		- },
	132	+ // Remove temporary elements.
	133	+ temp.remove();
	134	+ tempPre.remove();
131	135
132		- _preview: function() {
133		- var button_position = $( '[name="button-position"]' ).val() || '';
134		- // var value = $( 'select[name="copy-as"]' ).children("option:selected").val() || '';
135		- var style = $( '[name="style"]' ).val() || 'button';
136		- var button_text = $( '[name="button-text"]' ).val() || '';
137		- var button_copy_text = $( '[name="button-copy-text"]' ).val() || '';
138		- var button_title = $( '[name="button-title"]' ).val() || '';
139		- var buttonMarkup = copyTheCode.buttonMarkup || '';
	136	+ // Copied!
	137	+ btn.text( button_copy_text );
	138	+ setTimeout(
	139	+ function() {
	140	+ if ( 'svg-icon' === style ) {
	141	+ btn.html( copyTheCode.buttonSvg );
	142	+ } else {
	143	+ btn.text( oldText );
	144	+ }
	145	+ },
	146	+ 1000
	147	+ );
	148	+ },
140	149
141		- var markup = '<div class="outer">';
142		- markup += '<div class="inner copy-as-text">';
143		- markup += '<p>Sample Preview 1</p>';
144		- markup += '<pre id="pre-html"></pre>';
145		- markup += '</div>';
	150	+ _preview: function() {
	151	+ var button_position = $( '[name="button-position"]' ).val() || '';
	152	+ // var value = $( 'select[name="copy-as"]' ).children("option:selected").val() || '';
	153	+ var style = $( '[name="style"]' ).val() || 'button';
	154	+ var button_text = $( '[name="button-text"]' ).val() || '';
	155	+ var button_copy_text = $( '[name="button-copy-text"]' ).val() || '';
	156	+ var button_title = $( '[name="button-title"]' ).val() || '';
	157	+ var buttonMarkup = copyTheCode.buttonMarkup || '';
146	158
147		- markup += '<div class="inner copy-as-html">';
148		- markup += '<p>Sample Preview 2</p>';
149		- markup += '<pre id="pre-text"></pre>';
150		- markup += '</div>';
	159	+ var markup = '<div class="outer">';
	160	+ markup += '<div class="inner copy-as-text">';
	161	+ markup += '<p>Sample Preview 1</p>';
	162	+ markup += '<pre id="pre-html"></pre>';
	163	+ markup += '</div>';
151	164
152		- markup += '</div>';
	165	+ markup += '<div class="inner copy-as-html">';
	166	+ markup += '<p>Sample Preview 2</p>';
	167	+ markup += '<pre id="pre-text"></pre>';
	168	+ markup += '</div>';
153	169
154		- $('#preview').html( markup );
155		- $('#preview #pre-html').html( copyTheCode.previewMarkup );
156		- $('#preview #pre-text').text( copyTheCode.previewMarkup );
157		-
158		- if( 'cover' !== style && 'outside' === button_position ) {
159		- $('#preview pre').wrap( '<span class="copy-the-code-style-' + style + ' copy-the-code-wrap copy-the-code-outside-wrap"></span>' );
160		- $('#preview pre').parent().prepend('<div class="copy-the-code-outside">' + buttonMarkup + '</div>');
161		- } else {
162		- $('#preview pre').wrap( '<span class="copy-the-code-style-' + style + ' copy-the-code-wrap copy-the-code-inside-wrap"></span>' );
163		- $('#preview pre').append( buttonMarkup );
164		- }
	170	+ markup += '</div>';
165	171
166		- $('#preview').find( '.copy-the-code-button').attr('title', button_title);
167		- $('#preview').find( '.copy-the-code-button').attr( 'style', style);
	172	+ $( '#preview' ).html( markup );
	173	+ $( '#preview #pre-html' ).html( copyTheCode.previewMarkup );
	174	+ $( '#preview #pre-text' ).text( copyTheCode.previewMarkup );
168	175
169		- if( 'svg-icon' === style ) {
170		- $( '[name="button-text"]' ).parents('tr').hide();
171		- $( '[name="button-position"]' ).parents('tr').hide();
172		- } else {
173		- $( '[name="button-text"]' ).parents('tr').show();
174		- $( '[name="button-position"]' ).parents('tr').show();
175		- }
176		- if( 'cover' === style ) {
177		- $( '[name="button-position"]' ).parents('tr').hide();
178		- } else {
179		- $( '[name="button-position"]' ).parents('tr').show();
180		- }
	176	+ if ( 'cover' !== style && 'outside' === button_position ) {
	177	+ $( '#preview pre' ).wrap( '<span class="copy-the-code-style-' + style + ' copy-the-code-wrap copy-the-code-outside-wrap"></span>' );
	178	+ $( '#preview pre' ).parent().prepend( '<div class="copy-the-code-outside">' + buttonMarkup + '</div>' );
	179	+ } else {
	180	+ $( '#preview pre' ).wrap( '<span class="copy-the-code-style-' + style + ' copy-the-code-wrap copy-the-code-inside-wrap"></span>' );
	181	+ $( '#preview pre' ).append( buttonMarkup );
	182	+ }
181	183
182		- switch( style ) {
183		- case 'svg-icon':
184		- $('#preview').find( '.copy-the-code-button').html( copyTheCode.buttonSvg );
185		- break;
186		- case 'cover':
187		- case 'button':
188		- default:
189		- $('#preview').find( '.copy-the-code-button').html( button_text );
190		- break;
191		- }
	184	+ $( '#preview' ).find( '.copy-the-code-button' ).attr( 'title', button_title );
	185	+ $( '#preview' ).find( '.copy-the-code-button' ).attr( 'style', style );
192	186
193		- $( document ).trigger( 'copy-the-code-style-change', style );
194		-
195		- },
	187	+ if ( 'svg-icon' === style ) {
	188	+ $( '[name="button-text"]' ).parents( 'tr' ).hide();
	189	+ $( '[name="button-position"]' ).parents( 'tr' ).hide();
	190	+ } else {
	191	+ $( '[name="button-text"]' ).parents( 'tr' ).show();
	192	+ $( '[name="button-position"]' ).parents( 'tr' ).show();
	193	+ }
	194	+ if ( 'cover' === style ) {
	195	+ $( '[name="button-position"]' ).parents( 'tr' ).hide();
	196	+ } else {
	197	+ $( '[name="button-position"]' ).parents( 'tr' ).show();
	198	+ }
196	199
197		- _switch_tab: function( event ) {
198		- $(this).siblings().removeClass('nav-tab-active');
199		- $(this).addClass('nav-tab-active');
200		- $( '#' + $(this).attr( 'data-id' ) ).siblings().hide();
201		- $( '#' + $(this).attr( 'data-id' ) ).show();
202		- }
	200	+ switch ( style ) {
	201	+ case 'svg-icon':
	202	+ $( '#preview' ).find( '.copy-the-code-button' ).html( copyTheCode.buttonSvg );
	203	+ break;
	204	+ case 'cover':
	205	+ case 'button':
	206	+ default:
	207	+ $( '#preview' ).find( '.copy-the-code-button' ).html( button_text );
	208	+ break;
	209	+ }
203	210
204		- };
	211	+ $( document ).trigger( 'copy-the-code-style-change', style );
205	212
206		- /**
207		- * Initialization
208		- */
209		- $(function() {
210		- CopyTheCodePage.init();
211		- });
	213	+ },
212	214
213		-})(jQuery);
	215	+ _switch_tab: function( event ) {
	216	+ $( this ).siblings().removeClass( 'nav-tab-active' );
	217	+ $( this ).addClass( 'nav-tab-active' );
	218	+ $( '#' + $( this ).attr( 'data-id' ) ).siblings().hide();
	219	+ $( '#' + $( this ).attr( 'data-id' ) ).show();
	220	+ }
214	221
215		-
	222	+ };
	223	+
	224	+ /**
	225	+ * Initialization
	226	+ */
	227	+ $(
	228	+ function() {
	229	+ CopyTheCodePage.init();
	230	+ }
	231	+ );
	232	+
	233	+})( jQuery );