Ticket #30468: 30468.2.patch
File 30468.2.patch, 16.1 KB (added by , 9 years ago) |
---|
-
src/wp-includes/class-wp-editor.php
1426 1426 // display: none is required here, see #WP27605 1427 1427 ?> 1428 1428 <div id="wp-link-backdrop" style="display: none"></div> 1429 <div id="wp-link-wrap" class="wp-core-ui<?php echo $search_panel_visible; ?>" style="display: none" >1429 <div id="wp-link-wrap" class="wp-core-ui<?php echo $search_panel_visible; ?>" style="display: none" role="dialog" aria-labelledby="link-modal-title" tabindex="0"> 1430 1430 <form id="wp-link" tabindex="-1"> 1431 1431 <?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?> 1432 <div id="link-modal-title"> 1433 <?php _e( 'Insert/edit link' ) ?> 1434 <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button> 1435 </div> 1432 <h1 id="link-modal-title"><?php _e( 'Insert/edit link' ) ?></h1> 1433 <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button> 1436 1434 <div id="link-selector"> 1437 1435 <div id="link-options"> 1438 <p class="howto" ><?php _e( 'Enter the destination URL' ); ?></p>1436 <p class="howto" id="wp-link-howto-url"><?php _e( 'Enter the destination URL' ); ?></p> 1439 1437 <div> 1440 <label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" name="href" /></label>1438 <label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" name="href" aria-describedby="wp-link-howto-url" /></label> 1441 1439 </div> 1442 1440 <div> 1443 1441 <label><span><?php _e( 'Title' ); ?></span><input id="link-title-field" type="text" name="linktitle" /></label> 1444 1442 </div> 1445 1443 <div class="link-target"> 1446 <label><span> </span><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label>1444 <label><span></span><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label> 1447 1445 </div> 1448 1446 </div> 1449 < p class="howto"><a href="#" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></a></p>1447 <div class="howto"><button type="button" id="wp-link-search-toggle" class="button" aria-expanded="false"><?php _e( 'Or link to existing content' ); ?></button></div> 1450 1448 <div id="search-panel"> 1451 1449 <div class="link-search-wrapper"> 1452 1450 <label> 1453 1451 <span class="search-label"><?php _e( 'Search' ); ?></span> 1454 <input type="search" id="search-field" class="link-search-field" autocomplete="off" />1452 <input type="search" id="search-field" class="link-search-field" autocomplete="off" aria-describedby="query-notice-hint" /> 1455 1453 <span class="spinner"></span> 1456 1454 </label> 1457 1455 </div> 1458 <div id="search-results" class="query-results" tabindex="0"> 1459 <ul></ul> 1460 <div class="river-waiting"> 1461 <span class="spinner"></span> 1456 <div role="application" aria-label="<?php esc_attr_e( 'Links:' ); ?>"> 1457 <div id="search-results" class="query-results" tabindex="0" role="list" aria-label="<?php esc_attr_e( 'Search results:' ); ?>"> 1458 <ul aria-live="polite"></ul> 1459 <div class="river-waiting"> 1460 <span class="spinner"></span> 1461 </div> 1462 1462 </div> 1463 </div> 1464 <div id="most-recent-results" class="query-results" tabindex="0"> 1465 <div class="query-notice" id="query-notice-message"> 1466 <em class="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em> 1467 <em class="query-notice-hint screen-reader-text"><?php _e( 'Search or use up and down arrow keys to select an item.' ); ?></em> 1463 <div id="most-recent-results" class="query-results" tabindex="0" role="list" aria-labelledby="query-notice-default"> 1464 <div class="query-notice" id="query-notice-message"> 1465 <em class="query-notice-default" id="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em> 1466 <em class="query-notice-hint screen-reader-text" id="query-notice-hint"><?php _e( 'Search or use up and down arrow keys to select an item.' ); ?></em> 1467 </div> 1468 <ul></ul> 1469 <div class="river-waiting"> 1470 <span class="spinner"></span> 1471 </div> 1468 1472 </div> 1469 <ul></ul>1470 <div class="river-waiting">1471 <span class="spinner"></span>1472 </div>1473 1473 </div> 1474 1474 </div> 1475 1475 </div> 1476 1476 <div class="submitbox"> 1477 1477 <div id="wp-link-cancel"> 1478 < a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>1478 <button type="button" id="wp-link-cancel-button" class="button"><?php _e( 'Cancel' ); ?></button> 1479 1479 </div> 1480 1480 <div id="wp-link-update"> 1481 1481 <input type="submit" value="<?php esc_attr_e( 'Add Link' ); ?>" class="button button-primary" id="wp-link-submit" name="wp-link-submit"> -
src/wp-includes/css/editor.css
919 919 padding: 10px; 920 920 margin: 1px 0 0; 921 921 line-height: 150%; 922 border: 0 none;922 border: 0; 923 923 outline: none; 924 924 display: block; 925 925 resize: vertical; … … 1188 1188 -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); 1189 1189 box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); 1190 1190 width: 500px; 1191 height: 2 50px;1191 height: 260px; 1192 1192 overflow: hidden; 1193 1193 margin-left: -250px; 1194 1194 margin-top: -125px; … … 1220 1220 } 1221 1221 1222 1222 #wp-link-wrap.search-panel-visible { 1223 height: 5 00px;1224 margin-top: -25 0px;1223 height: 510px; 1224 margin-top: -255px; 1225 1225 } 1226 1226 1227 1227 #link-modal-title { … … 1231 1231 font-size: 18px; 1232 1232 font-weight: 600; 1233 1233 line-height: 36px; 1234 margin: 0; 1234 1235 padding: 0 36px 0 16px; 1235 top: 0;1236 right: 0;1237 left: 0;1238 1236 } 1239 1237 1240 1238 #wp-link-close { … … 1297 1295 padding: 0; 1298 1296 } 1299 1297 1298 #wp-link-search-toggle { 1299 font-style: normal; 1300 } 1301 1300 1302 #wp-link-search-toggle:after { 1301 1303 display: inline-block; 1302 font: normal 20px/ 1'dashicons';1304 font: normal 20px/26px 'dashicons'; 1303 1305 vertical-align: top; 1304 1306 speak: none; 1305 1307 -webkit-font-smoothing: antialiased; … … 1325 1327 margin: 3px 0; 1326 1328 } 1327 1329 1330 #wp-link div.howto { 1331 margin: 0 0 12px 85px; 1332 } 1333 1328 1334 #wp-link p.howto a { 1329 1335 text-decoration: none; 1330 1336 color: inherit; 1331 1337 } 1332 1338 1333 #wp-link-search-toggle {1334 cursor: pointer;1335 }1336 1337 1339 #wp-link label input[type="text"] { 1338 1340 margin-top: 5px; 1339 1341 width: 70%; … … 1350 1352 1351 1353 #wp-link .link-search-field { 1352 1354 float: left; 1353 width: 250px; 1354 max-width: 70%; 1355 width: 70%; 1355 1356 } 1356 1357 1357 1358 #wp-link .link-search-wrapper { … … 1375 1376 white-space: nowrap; 1376 1377 overflow: hidden; 1377 1378 text-overflow: ellipsis; 1379 max-width: 90%; 1378 1380 } 1379 1381 1380 #wp-link .link-target label {1381 max-width: 70%;1382 }1383 1384 1382 #wp-link .query-results { 1385 1383 border: 1px #dfdfdf solid; 1386 1384 margin: 0; … … 1390 1388 left: 16px; 1391 1389 right: 16px; 1392 1390 bottom: 16px; 1393 top: 2 05px;1391 top: 215px; 1394 1392 } 1395 1393 1396 1394 #wp-link li { … … 1401 1399 padding: 4px 6px 4px 10px; 1402 1400 cursor: pointer; 1403 1401 position: relative; 1402 outline: 0; 1404 1403 } 1405 1404 1406 1405 #wp-link .query-notice { … … 1886 1885 1887 1886 #wp-fullscreen-buttons .mce-btn button { 1888 1887 margin: 0; 1889 outline: 0 none;1890 border: 0 none;1888 outline: 0; 1889 border: 0; 1891 1890 white-space: nowrap; 1892 1891 width: auto; 1893 1892 background: none; -
src/wp-includes/js/wplink.js
5 5 var editor, searchTimer, River, Query, 6 6 inputs = {}, 7 7 rivers = {}, 8 isTouch = ( 'ontouchend' in document ); 8 isTouch = ( 'ontouchend' in document ), 9 visible; 9 10 10 11 wpLink = { 11 12 timeToTriggerRiver: 150, 12 13 minRiverAJAXDuration: 200, 13 14 riverBottomThreshold: 5, 14 keySensitivity: 1 00,15 keySensitivity: 150, 15 16 lastSearch: '', 16 17 textarea: '', 17 18 … … 28 29 inputs.title = $( '#link-title-field' ); 29 30 // Advanced Options 30 31 inputs.openInNewTab = $( '#link-target-checkbox' ); 32 inputs.searchToggle = $( '#wp-link-search-toggle' ); 31 33 inputs.search = $( '#search-field' ); 32 34 // Build Rivers 33 35 rivers.search = new River( $( '#search-results' ) ); … … 46 48 event.preventDefault(); 47 49 wpLink.update(); 48 50 }); 49 inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel a' ).click( function( event ) {51 inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel-button' ).click( function( event ) { 50 52 event.preventDefault(); 51 53 wpLink.close(); 52 54 }); 53 55 54 $( '#wp-link-search-toggle' ).on( 'click', wpLink.toggleInternalLinking );56 inputs.searchToggle.on( 'click', wpLink.toggleInternalLinking ); 55 57 56 58 rivers.elements.on( 'river-select', wpLink.updateFields ); 57 59 … … 125 127 // Refresh rivers (clear links, check visibility) 126 128 rivers.search.refresh(); 127 129 rivers.recent.refresh(); 130 visible = inputs.wrap.hasClass( 'search-panel-visible' ); 128 131 129 132 if ( wpLink.isMCE() ) { 130 133 wpLink.mceRefresh(); … … 146 149 if ( ! rivers.recent.ul.children().length ) { 147 150 rivers.recent.ajax(); 148 151 } 152 153 // Toggle the button aria-expanded attribute. 154 if ( visible ) { 155 inputs.searchToggle.attr( 'aria-expanded', 'true' ); 156 } else { 157 inputs.searchToggle.attr( 'aria-expanded', 'false' ); 158 } 149 159 }, 150 160 151 161 mceRefresh: function() { … … 195 205 }, 196 206 197 207 update: function() { 198 if ( wpLink.isMCE() ) 208 if ( wpLink.isMCE() ) { 199 209 wpLink.mceUpdate(); 200 else210 } else { 201 211 wpLink.htmlUpdate(); 212 } 202 213 }, 203 214 204 215 htmlUpdate: function() { … … 205 216 var attrs, html, begin, end, cursor, title, selection, 206 217 textarea = wpLink.textarea; 207 218 208 if ( ! textarea ) 219 if ( ! textarea ) { 209 220 return; 221 } 210 222 211 223 attrs = wpLink.getAttrs(); 212 224 213 225 // If there's no href, return. 214 if ( ! attrs.href || attrs.href == 'http://' ) 226 if ( ! attrs.href || attrs.href == 'http://' ) { 215 227 return; 228 } 216 229 217 230 // Build HTML 218 231 html = '<a href="' + attrs.href + '"'; … … 248 261 cursor = begin + html.length; 249 262 250 263 // If no text is selected, place the cursor inside the closing tag. 251 if ( begin == end ) 264 if ( begin == end ) { 252 265 cursor -= '</a>'.length; 266 } 253 267 254 268 textarea.value = textarea.value.substring( 0, begin ) + html + 255 269 textarea.value.substring( end, textarea.value.length ); … … 328 342 rivers.search.show(); 329 343 330 344 // Don't search if the keypress didn't change the title. 331 if ( wpLink.lastSearch == search ) 345 if ( wpLink.lastSearch == search ) { 332 346 return; 347 } 333 348 334 349 wpLink.lastSearch = search; 335 350 waiting = t.parent().find('.spinner').show(); … … 379 394 return; 380 395 } 381 396 382 if ( document.activeElement && 383 ( document.activeElement.id === 'link-title-field' || document.activeElement.id === 'url-field' ) ) { 397 if ( document.activeElement && ( 398 'wp-link-close' === document.activeElement.id || 399 'link-title-field' === document.activeElement.id || 400 'url-field' === document.activeElement.id || 401 'link-target-checkbox' === document.activeElement.id || 402 'wp-link-search-toggle' === document.activeElement.id || 403 'wp-link-cancel-button' === document.activeElement.id || 404 'wp-link-submit' === document.activeElement.id 405 ) ) { 384 406 return; 385 407 } 386 408 … … 403 425 delayedCallback: function( func, delay ) { 404 426 var timeoutTriggered, funcTriggered, funcArgs, funcContext; 405 427 406 if ( ! delay ) 428 if ( ! delay ) { 407 429 return func; 430 } 408 431 409 432 setTimeout( function() { 410 if ( funcTriggered ) 433 if ( funcTriggered ) { 411 434 return func.apply( funcContext, funcArgs ); 435 } 412 436 // Otherwise, wait. 413 437 timeoutTriggered = true; 414 438 }, delay ); 415 439 416 440 return function() { 417 if ( timeoutTriggered ) 441 if ( timeoutTriggered ) { 418 442 return func.apply( this, arguments ); 443 } 419 444 // Otherwise, wait. 420 445 funcArgs = arguments; 421 446 funcContext = this; … … 424 449 }, 425 450 426 451 toggleInternalLinking: function( event ) { 427 v ar visible = inputs.wrap.hasClass( 'search-panel-visible' );452 visible = inputs.wrap.hasClass( 'search-panel-visible' ); 428 453 429 454 inputs.wrap.toggleClass( 'search-panel-visible', ! visible ); 430 455 setUserSetting( 'wplink', visible ? '0' : '1' ); 431 inputs[ ! visible ? 'search' : 'url' ].focus(); 456 if ( ! visible ) { 457 inputs.search.focus(); 458 inputs.searchToggle.attr( 'aria-expanded', 'true' ); 459 } else { 460 inputs.searchToggle.attr( 'aria-expanded', 'false' ); 461 } 432 462 event.preventDefault(); 433 463 } 434 464 }; … … 471 501 select: function( li, event ) { 472 502 var liHeight, elHeight, liTop, elTop; 473 503 474 if ( li.hasClass( 'unselectable' ) || li == this.selected ) 504 if ( li.hasClass( 'unselectable' ) || li == this.selected ) { 475 505 return; 506 } 476 507 477 508 this.deselect(); 478 this.selected = li.addClass( 'selected' ) ;509 this.selected = li.addClass( 'selected' ).attr( 'aria-selected', 'true' ).focus(); 479 510 // Make sure the element is visible 480 511 liHeight = li.outerHeight(); 481 512 elHeight = this.element.height(); … … 482 513 liTop = li.position().top; 483 514 elTop = this.element.scrollTop(); 484 515 485 if ( liTop < 0 ) // Make first visible element516 if ( liTop < 0 ) { // Make first visible element 486 517 this.element.scrollTop( elTop + liTop ); 487 else if ( liTop + liHeight > elHeight )// Make last visible element518 } else if ( liTop + liHeight > elHeight ) { // Make last visible element 488 519 this.element.scrollTop( elTop + liTop - elHeight + liHeight ); 520 } 489 521 490 522 // Trigger the river-select event 491 523 this.element.trigger( 'river-select', [ li, event, this ] ); 492 524 }, 493 525 deselect: function() { 494 if ( this.selected ) 495 this.selected.removeClass( 'selected' ); 526 if ( this.selected ) { 527 this.selected.removeClass( 'selected' ).attr( 'aria-selected', 'false' ); 528 } 496 529 this.selected = false; 497 530 }, 498 531 prev: function() { 499 if ( ! this.visible ) 532 if ( ! this.visible ) { 500 533 return; 534 } 501 535 502 536 var to; 503 537 if ( this.selected ) { 504 538 to = this.selected.prev( 'li' ); 505 if ( to.length ) 539 if ( to.length ) { 506 540 this.select( to ); 541 } 507 542 } 508 543 }, 509 544 next: function() { 510 if ( ! this.visible ) 545 if ( ! this.visible ) { 511 546 return; 547 } 512 548 513 549 var to = this.selected ? this.selected.next( 'li' ) : $( 'li:not(.unselectable):first', this.element ); 514 if ( to.length ) 550 if ( to.length ) { 515 551 this.select( to ); 552 } 516 553 }, 517 554 ajax: function( callback ) { 518 555 var self = this, … … 519 556 delay = this.query.page == 1 ? 0 : wpLink.minRiverAJAXDuration, 520 557 response = wpLink.delayedCallback( function( results, params ) { 521 558 self.process( results, params ); 522 if ( callback ) 559 if ( callback ) { 523 560 callback( results, params ); 561 } 524 562 }, delay ); 525 563 526 564 this.query.ajax( response ); 527 565 }, 528 566 change: function( search ) { 529 if ( this.query && this._search == search ) 567 if ( this.query && this._search == search ) { 530 568 return; 569 } 531 570 532 571 this._search = search; 533 572 this.query = new Query( search ); … … 546 585 $.each( results, function() { 547 586 classes = alt ? 'alternate' : ''; 548 587 classes += this.title ? '' : ' no-title'; 549 list += classes ? '<li class="' + classes + '" >' : '<li>';588 list += classes ? '<li class="' + classes + '" tabindex="-1" role="listitem">' : '<li tabindex="-1" role="listitem">'; 550 589 list += '<input type="hidden" class="item-permalink" value="' + this.permalink + '" />'; 551 590 list += '<span class="item-title">'; 552 591 list += this.title ? this.title : wpLinkL10n.noTitle; … … 562 601 el = this.element, 563 602 bottom = el.scrollTop() + el.height(); 564 603 565 if ( ! this.query.ready() || bottom < this.contentHeight.height() - wpLink.riverBottomThreshold ) 604 if ( ! this.query.ready() || bottom < this.contentHeight.height() - wpLink.riverBottomThreshold ) { 566 605 return; 606 } 567 607 568 608 setTimeout(function() { 569 609 var newTop = el.scrollTop(), 570 610 newBottom = newTop + el.height(); 571 611 572 if ( ! self.query.ready() || newBottom < self.contentHeight.height() - wpLink.riverBottomThreshold ) 612 if ( ! self.query.ready() || newBottom < self.contentHeight.height() - wpLink.riverBottomThreshold ) { 573 613 return; 614 } 574 615 575 616 self.waiting.show(); 576 617 el.scrollTop( newTop + self.waiting.outerHeight() ); … … 601 642 '_ajax_linking_nonce' : inputs.nonce.val() 602 643 }; 603 644 604 if ( this.search ) 645 if ( this.search ) { 605 646 query.search = this.search; 647 } 606 648 607 649 this.querying = true; 608 650