| @@ -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 ); | |
