WordPress.org

Make WordPress Core

Ticket #27423: 27423.9.patch

File 27423.9.patch, 21.1 KB (added by celloexpressions, 6 years ago)

Prevent the page from scrolling when in the modal (also applies outside of mobile). We could standardize an in-modal class to do this in all core modals, potentially (theme-details currently does).

  • src/wp-includes/css/media-views.css

     
    8989        display: none;
    9090}
    9191
     92body.in-modal {
     93        overflow: hidden;
     94}
     95
    9296/* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
    9397.ui-sortable,
    9498.ui-draggable {
     
    529533        z-index: 150;
    530534}
    531535
     536.media-frame .media-frame-menu-toggle {
     537        position: absolute;
     538        top: 0;
     539        left: 0;
     540        z-index: 200;
     541        display: none;
     542        text-decoration: none;
     543        font-size: 16px;
     544        padding: 16px;
     545}
     546
     547.media-frame .media-frame-menu-toggle:hover {
     548        position: absolute;
     549}
     550
    532551.media-frame-title {
    533552        position: absolute;
    534553        top: 0;
     
    683702 */
    684703.attachments {
    685704        margin: 0;
    686         padding-right: 16px;
     705        padding: 8px;
    687706        -webkit-overflow-scrolling: touch;
    688707}
    689708
     
    705724}
    706725
    707726.attachment:focus {
     727        outline: none;
     728}
     729
     730.attachment:focus .attachment-preview {
    708731        -webkit-box-shadow:
    709732                0 0 0 1px #5b9dd9,
    710733                0 0 2px 2px #5b9dd9;
     
    711734        box-shadow:
    712735                0 0 0 1px #5b9dd9,
    713736                0 0 2px 2px #5b9dd9;
    714         outline: none;
    715737}
    716738
    717 .selected.attachment {
     739.selected.attachment .attachment-preview {
    718740        -webkit-box-shadow:
    719741                0 0 0 1px #fff,
    720742                0 0 0 3px #ccc;
     
    725747
    726748.attachment-preview {
    727749        position: relative;
    728         width: 199px;
    729         height: 199px;
    730750        -webkit-box-shadow:
    731751                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
    732752                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
     
    904924        display: block;
    905925}
    906926
    907 .attachment.details,
     927.attachment.details .attachment-preview,
    908928.media-grid-view .selected.attachment {
    909929        -webkit-box-shadow: 0 0 0 1px #fff,
    910930                                0 0 0 5px #1e8cbe;
     
    14561476.media-selection .attachments {
    14571477        display: inline-block;
    14581478        height: 48px;
    1459         margin-top: 5px;
    14601479        overflow: hidden;
    14611480        vertical-align: top;
    14621481}
     
    15251544        margin-top: 14px;
    15261545}
    15271546
    1528 /**
    1529  * Attachment Details
    1530  */
    1531 .attachment-details {
    1532         position: relative;
    1533         overflow: auto;
    1534 }
    1535 
    1536 .attachment-details .settings-save-status {
     1547.media-sidebar .settings-save-status {
     1548        background: #f5f5f5;
    15371549        float: right;
    15381550        text-transform: none;
    15391551        z-index: 10;
    15401552}
    15411553
    1542 .attachment-details .settings-save-status .spinner {
     1554.media-sidebar .settings-save-status .spinner {
    15431555        margin: 0 5px 0;
    15441556}
    15451557
    1546 .attachment-details .settings-save-status .saved {
     1558.media-sidebar .settings-save-status .saved {
    15471559        float: right;
    15481560        display: none;
    15491561}
    15501562
    1551 .attachment-details.save-waiting .settings-save-status .spinner,
    1552 .attachment-details.save-complete .settings-save-status .saved {
     1563.media-sidebar .save-waiting .settings-save-status .spinner,
     1564.media-sidebar .save-complete .settings-save-status .saved {
    15531565        display: block;
    15541566}
    15551567
     1568/**
     1569 * Attachment Details
     1570 */
     1571.attachment-details {
     1572        position: relative;
     1573        overflow: auto;
     1574}
     1575
    15561576.attachment-info {
    15571577        overflow: hidden;
    15581578        min-height: 60px;
     
    16441664        display: block;
    16451665}
    16461666
    1647 .media-modal .delete-attachment,
    1648 .media-modal .trash-attachment {
     1667.attachment-info .delete-attachment,
     1668.attachment-info .trash-attachment {
    16491669        color: #bc0b0b;
    16501670}
    16511671
    1652 .media-modal .delete-attachment:hover,
    1653 .media-modal .trash-attachment:hover {
     1672.attachment-info .delete-attachment:hover,
     1673.attachment-info .trash-attachment:hover {
    16541674        color: red;
    16551675}
    16561676
     
    23092329@media only screen and (max-width: 640px), screen and (max-height: 400px) {
    23102330
    23112331        /* Media tabs on the top */
    2312         .media-frame-content .media-toolbar .instructions {
     2332        .media-frame-content .media-toolbar .instructions,
     2333        .media-frame-router {
    23132334                display: none;
    23142335        }
    23152336
    23162337        .media-frame-menu {
    2317                 width: auto;
    2318                 bottom: auto;
    2319                 right: 0;
    2320                 height: 60px;
     2338                top: 30px;
     2339                left: 0;
     2340                z-index: inherit;
    23212341        }
    23222342
     2343        .media-frame .media-frame-menu-toggle {
     2344                display: block;
     2345                font-size: 22px;
     2346                font-weight: 600;
     2347                color: #444;
     2348                padding: 12px 16px;
     2349                transition: color .1s ease-in;
     2350        }
     2351
     2352        .media-frame .media-frame-menu-toggle:after {
     2353                display: inline-block;
     2354                width: 20px;
     2355                height: 20px;
     2356                font: normal 20px/1 dashicons;
     2357                content: "\f140";
     2358                -webkit-font-smoothing: antialiased;
     2359                -moz-osx-font-smoothing: grayscale;
     2360        }
     2361
     2362        .media-frame .media-frame-menu-toggle:hover,
     2363        .media-frame .media-frame-menu-toggle:focus {
     2364                color: #2ea2cc;
     2365        }
     2366
    23232367        .media-menu {
    2324                 border-right: none;
     2368                z-index: inherit;
     2369                width: 200px;
    23252370                position: relative;
    2326                 border-bottom: 1px solid #dddddd;
    2327                 overflow: hidden;
    23282371                padding: 10px 0 10px 10px;
     2372                display: none;
     2373                border: 1px solid #ccc;
    23292374        }
    23302375
    2331         .media-menu a {
    2332                 float: left;
    2333                 width: 42%;
    2334                 white-space: nowrap;
    2335                 text-overflow: ellipsis;
    2336                 overflow: hidden;
     2376        .media-menu.visible {
     2377                z-index: 2000;
     2378                display: block;
     2379                position: fixed;
     2380                top: 0;
     2381                bottom: 0;
     2382                left: 0;
     2383                right: 0;
     2384                width: auto;
     2385                border: none;
     2386                padding: 10px 0;
    23372387        }
    23382388
     2389        .media-menu > a {
     2390                padding: 20px;
     2391                width: auto !important;
     2392                text-align: center;
     2393                font-size: 20px;
     2394        }
     2395
    23392396        .media-frame-title {
    23402397                display: none;
    23412398        }
     
    23462403                font-size: 14px;
    23472404        }
    23482405
     2406        .image-details .media-frame-menu-toggle {
     2407                display: none;
     2408        }
     2409
    23492410        .media-frame-toolbar {
    23502411                position: absolute;
    23512412                bottom: 0px;
    23522413                left: 0;
    23532414                right: 0;
    2354                 background: #FFF;
    2355                 border-top: 1px solid #DEDEDE;
     2415                background: #fff;
    23562416        }
    23572417
    23582418        .media-toolbar {
     
    23592419                position: relative;
    23602420        }
    23612421
     2422        .media-toolbar .spinner {
     2423                margin-right: 6px;
     2424        }
     2425
    23622426        .media-frame {
    23632427                overflow: hidden;
    23642428        }
    23652429
    2366         .attachments-browser .attachments {
    2367                 top: 42px;
     2430        .media-frame .attachments-browser {
     2431                overflow: auto;
    23682432        }
    23692433
    2370         .attachment-details h3 {
    2371                 margin-top: 45px;
     2434        .attachments-browser .attachments {
     2435                top: 0;
     2436                right: 0;
    23722437        }
    23732438
    23742439        /* Shorten right-side links so they don't overlap the close button */
     
    23812446                display: none;
    23822447        }
    23832448
    2384         .media-frame-title {
     2449        .attachment-details {
     2450                padding: 0 20px;
     2451        }
     2452       
     2453        .attachment-display-settings {
     2454                padding: 0 20px 20px 20px;
     2455                width: -webkit-calc(100% - 40px);
     2456                width: calc(100% - 40px);
     2457        }
     2458
     2459        .attachment-info .thumbnail img {
     2460                max-width: 100%; /* Display the image bigger, since the screen's smaller. */
     2461                max-height: 50%;
     2462        }
     2463
     2464        .image-details .media-frame-title {
    23852465                top: 72px;
    2386                 left: auto;
    2387                 height: auto;
    23882466        }
    23892467
    23902468        .media-frame-title h1 {
     
    23932471        }
    23942472
    23952473        .media-frame-router {
    2396                 top: 84px;
    23972474                left: 0;
    23982475        }
    23992476
    24002477        .media-frame-content {
    24012478                left: 0;
    2402                 top: 118px;
     2479                top: 48px;
    24032480        }
    24042481
    24052482        .image-details .media-frame.hide-router .media-frame-content {
     
    24062483                top: 40px;
    24072484        }
    24082485
    2409         .media-frame .attachments-browser {
    2410                 padding-bottom: 300px;
     2486        .media-sidebar {
     2487                position: fixed;
     2488                top: 0;
     2489                right: -100%;
     2490                width: 100%;
     2491                padding: 0;
     2492                margin: 0 0 62px 0;
     2493                z-index: 201;
     2494                transition: .18s right ease-in-out;
    24112495        }
    24122496
    2413         .media-sidebar {
    2414                 border-bottom: 1px solid #dddddd;
     2497        .media-sidebar.active {
     2498                right: 0;
    24152499        }
    24162500
    24172501        .media-modal {
     
    24182502                width: auto;
    24192503        }
    24202504
    2421         .media-toolbar-primary, .media-toolbar-secondary {
     2505        .media-toolbar-primary,
     2506        .media-toolbar-secondary {
    24222507                height: auto;
    24232508        }
    24242509
     2510        .attachments-browser .media-toolbar-primary,
     2511        .attachments-browser .media-toolbar-secondary {
     2512                width: 50%;
     2513        }
     2514
     2515        .media-frame .media-frame-content .media-toolbar .search,
     2516        .media-frame .media-frame-content .media-toolbar .attachment-filters {
     2517                max-width: 200px;
     2518                width: -webkit-calc(100% - 32px);
     2519                width: calc(100% - 32px);
     2520                margin: 11px 0 0 0;
     2521                height: 28px;
     2522        }
     2523
    24252524        .uploader-inline h3 {
    24262525                margin: 0 0 .8em 0;
    24272526        }
     
    24342533                margin: 0;
    24352534        }
    24362535
    2437         .attachments-browser .attachments, .attachments-browser .uploader-inline {
     2536        .attachments-browser .attachments,
     2537        .attachments-browser .uploader-inline {
    24382538                position: relative;
    2439                 margin-right: 180px;
     2539                margin-right: 0;
    24402540        }
    24412541
    24422542        /* Full-bleed modal */
     
    24582558                max-width: 100%;
    24592559        }
    24602560
    2461         .attachments-browser .media-toolbar-primary input.search {
    2462                 max-width: 150px;
    2463         }
    2464 
    24652561        .uploader-inline-content {
    24662562                position: relative;
    24672563        }
     
    25642660
    25652661        .media-frame .spinner {
    25662662                background-image: url(../images/spinner-2x.gif);
    2567         }
     2663        }
    25682664}
    25692665
     2666.attachments-browser .attachment {
     2667        position: relative;
     2668        width: 20%;
     2669        margin: 0;
     2670}
    25702671
     2672.attachments-browser .attachment:before {
     2673        content: '';
     2674        display: block;
     2675        padding-top: 100%;
     2676}
     2677
     2678.attachments-browser .attachment .attachment-preview {
     2679        position: absolute;
     2680        top: 8px;
     2681        right: 8px;
     2682        bottom: 8px;
     2683        left: 8px;
     2684}
     2685
     2686.attachments-browser .portrait img {
     2687        max-width: 100%;
     2688}
     2689
     2690.attachments-browser .landscape img {
     2691        max-height: 100%;
     2692}
     2693
     2694/**/
     2695
     2696.media-selection .attachments {
     2697        padding: 5px;
     2698}
     2699
     2700.media-selection .attachment {
     2701        margin: 5px;
     2702        width: 40px;
     2703}
     2704
     2705.media-selection .attachment-preview,
     2706.media-selection .attachment-preview .thumbnail {
     2707        width: 40px;
     2708        height: 40px;
     2709}
     2710
     2711.media-selection .portrait .thumbnail img {
     2712        max-width: 40px;
     2713        height: auto;
     2714}
     2715
     2716.media-selection .landscape .thumbnail img {
     2717        width: auto;
     2718        max-height: 40px;
     2719}
     2720
     2721@media only screen and ( max-width: 400px ) {
     2722        .attachments-browser .attachment {
     2723                width: 50%;
     2724        }
     2725}
     2726
     2727@media only screen and ( min-width: 400px ) {
     2728        .attachments-browser .attachment {
     2729                width: 33.3%;
     2730        }
     2731}
     2732
     2733@media only screen and ( min-width: 520px ) {
     2734        .attachments-browser .attachment {
     2735                width: 25%;
     2736        }
     2737}
     2738
     2739@media only screen and ( min-width: 640px ) {
     2740        .attachments-browser .attachment {
     2741                width: 33.3%;
     2742        }
     2743}
     2744
     2745@media only screen and ( min-width: 960px ) {
     2746        .attachments-browser .attachment {
     2747                width: 25%;
     2748        }
     2749}
     2750
     2751@media only screen and ( min-width: 1200px ) {
     2752        .attachments-browser .attachment {
     2753                width: 20%;
     2754        }
     2755}
     2756
    25712757/**
    25722758 * Media Grid
    25732759 */
     
    26692855 *
    26702856 * This should be OOCSS'd so both use a shared selector.
    26712857 */
    2672 .edit-attachment-frame .edit-media-header {
    2673         overflow: hidden;
    2674 }
    2675 
    2676 .upload-php .media-modal-close .media-modal-icon:before {
    2677         content: '\f335';
    2678         font-size: 30px;
    2679 }
    2680 
    2681 .upload-php .media-modal-close:hover .media-modal-icon:before,
    2682 .upload-php .media-modal-close:focus .media-modal-icon:before {
    2683         color: #fff;
    2684 }
    2685 
    2686 .upload-php .media-modal-close .media-modal-icon {
    2687         margin-top: 13px;
    2688         width: 30px;
    2689         height: 30px;
    2690 }
    2691 
    2692 .upload-php .media-modal-close,
    26932858.edit-attachment-frame .edit-media-header .left,
    26942859.edit-attachment-frame .edit-media-header .right {
    26952860        cursor: pointer;
    26962861        color: #777;
    26972862        background-color: transparent;
    2698         height: 56px;
    2699         width: 56px;
    2700         padding: 0;
    2701         position: absolute;
     2863        height: 48px;
     2864        width: 54px;
     2865        float: left;
    27022866        text-align: center;
    27032867        border: 0;
    2704         border-left: 1px solid #ddd;
     2868        border-right: 1px solid #ddd;
    27052869}
    27062870
    2707 .upload-php .media-modal-close {
    2708         top: 0;
    2709         right: 0;
    2710 }
    2711 
    2712 .edit-attachment-frame .edit-media-header .left {
    2713         right: 112px;
    2714 }
    2715 
    2716 .edit-attachment-frame .edit-media-header .right {
    2717         right: 56px;
    2718 }
    2719 
    2720 .edit-attachment-frame .media-frame-title {
    2721         left: 0;
    2722         right: 170px; /* leave space for prev/next/close */
    2723 }
    2724 
    27252871.edit-attachment-frame .edit-media-header .right:before,
    27262872.edit-attachment-frame .edit-media-header .left:before {
    27272873        font: normal 20px/50px 'dashicons' !important;
     
    27502896        cursor: inherit;
    27512897}
    27522898
    2753 .upload-php .media-modal-close:hover,
     2899.edit-attachment-frame .edit-media-header .close:hover,
    27542900.edit-attachment-frame .edit-media-header .right:hover,
    27552901.edit-attachment-frame .edit-media-header .left:hover,
    2756 .upload-php .media-modal-close:focus,
     2902.edit-attachment-frame .edit-media-header .close:focus,
    27572903.edit-attachment-frame .edit-media-header .right:focus,
    27582904.edit-attachment-frame .edit-media-header .left:focus {
    27592905        background: #0074a2;
     
    27682914.edit-attachment-frame .media-frame-content {
    27692915        border-bottom: none;
    27702916        bottom: 0;
    2771         top: 56px;
    27722917}
    27732918
    27742919/* Hiding this for the moment instead of removing it from the template. */
     
    27832928        bottom: 0;
    27842929        right: 0;
    27852930        left: 0;
    2786         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2787         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    27882931}
    2789 .edit-attachment-frame .attachment-media-view {
    2790         float: left;
    2791         width: 65%;
    2792         height: 100%;
     2932
     2933.edit-attachment-frame .attachment-info {
     2934        border-bottom: 0;
     2935        border-right: 1px solid #ddd;
     2936        bottom: 0;
     2937        position: absolute;
     2938        top: 0;
     2939        left: 0;
     2940        right: 50%;
     2941        margin-bottom: 0;
     2942        padding: 2% 4% 0;
     2943        height: 98%; /* 100% - padding percentage above */
    27932944}
    27942945
    2795 .edit-attachment-frame .attachment-media-view .thumbnail {
    2796         -webkit-box-sizing: border-box;
    2797         -moz-box-sizing: border-box;
    2798         box-sizing: border-box;
    2799         padding: 16px;
    2800         height: 100%;
     2946.edit-attachment-frame .attachment-info .thumbnail {
     2947        float: none;
     2948        max-width: none;
     2949        max-height: 70%;
     2950        margin-right: 0;
    28012951}
    28022952
    2803 .edit-attachment-frame .attachment-media-view img {
    2804         display: block;
    2805         margin-bottom: 16px;
     2953.edit-attachment-frame .attachment-info .thumbnail-image img {
     2954        margin: 0;
     2955}
     2956
     2957.edit-attachment-frame .attachment-info .thumbnail-image:after {
     2958        -webkit-box-shadow: none;
     2959                box-shadow: none;
     2960}
     2961
     2962.edit-attachment-frame .attachment-info .thumbnail img {
    28062963        max-width: 100%;
    2807         max-height: -webkit-calc( 100% - 42px );
    2808         max-height: calc( 100% - 42px ); /* leave space for actions underneath */
     2964        max-height: 100%;
    28092965}
    28102966
    2811 .edit-attachment-frame .delete-attachment {
    2812         float: right;
    2813         margin-top: 7px;
     2967.edit-attachment-frame .attachment-info .details {
     2968        float: none;
    28142969}
    28152970
    28162971.edit-attachment-frame .wp-media-wrapper {
     
    28172972        margin-bottom: 12px;
    28182973}
    28192974
    2820 .edit-attachment-frame .attachment-info {
    2821         overflow: auto;
    2822         -webkit-box-sizing: border-box;
    2823         -moz-box-sizing: border-box;
    2824         box-sizing: border-box;
    2825         margin-bottom: 0;
    2826         padding: 12px 16px 0;
    2827         width: 35%;
    2828         height: 100%;
    2829         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2830         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
    2831         border-bottom: 0;
    2832         border-left: 1px solid #ddd;
    2833         background: #f3f3f3;
     2975.edit-attachment-frame .attachment-fields {
     2976        bottom: 0;
     2977        padding: 2% 4%;
     2978        position: absolute;
     2979        top: 0;
     2980        left: 50%;
     2981        right: 0;
    28342982}
    28352983
    2836 .edit-attachment-frame .attachment-info .details,
    2837 .edit-attachment-frame .attachment-info .settings {
    2838         overflow: hidden;
    2839         float: none;
    2840         margin-bottom: 15px;
    2841         padding-bottom: 15px;
    2842         border-bottom: 1px solid #ddd;
    2843 }
    2844 
    2845 .edit-attachment-frame .attachment-info .setting {
     2984.edit-attachment-frame .attachment-fields .setting {
    28462985        display: block;
    28472986        float: left;
    28482987        width: 100%;
     
    28492988        margin: 1px 0;
    28502989}
    28512990
    2852 .edit-attachment-frame .attachment-info .setting label {
     2991.edit-attachment-frame .attachment-fields .setting label {
    28532992        display: block;
    28542993}
    28552994
    2856 .edit-attachment-frame .attachment-info .setting .link-to-custom {
     2995.edit-attachment-frame .attachment-fields .setting .link-to-custom {
    28572996        margin: 3px 0;
    28582997}
    28592998
    2860 .edit-attachment-frame .attachment-info .setting .name {
     2999.edit-attachment-frame .attachment-fields .setting .name {
    28613000        min-width: 30%;
    28623001        margin-right: 4%;
    28633002        font-size: 12px;
     
    28643003        text-align: right;
    28653004}
    28663005
    2867 .edit-attachment-frame .attachment-info .setting select {
     3006.edit-attachment-frame .attachment-fields .setting select {
    28683007        max-width: 65%;
    28693008}
    28703009
    2871 .edit-attachment-frame .attachment-info .setting input[type="checkbox"],
    2872 .edit-attachment-frame .attachment-info .field input[type="checkbox"] {
     3010.edit-attachment-frame .attachment-fields .setting input[type="checkbox"],
     3011.edit-attachment-frame .attachment-fields .field input[type="checkbox"] {
    28733012        width: 16px;
    28743013        float: none;
    28753014        margin: 8px 3px 0;
     
    28763015        padding: 0;
    28773016}
    28783017
    2879 .edit-attachment-frame .attachment-info .setting span {
     3018.edit-attachment-frame .attachment-fields .setting span {
    28803019        float: left;
    28813020        min-height: 22px;
    28823021        padding-top: 8px;
     
    28853024        color: #666;
    28863025}
    28873026
    2888 .edit-attachment-frame .attachment-info .setting input[type="text"],
    2889 .edit-attachment-frame .attachment-info .setting input[type="password"],
    2890 .edit-attachment-frame .attachment-info .setting input[type="number"],
    2891 .edit-attachment-frame .attachment-info .setting input[type="search"],
    2892 .edit-attachment-frame .attachment-info .setting input[type="email"],
    2893 .edit-attachment-frame .attachment-info .setting input[type="url"],
    2894 .edit-attachment-frame .attachment-info .setting textarea,
    2895 .edit-attachment-frame .attachment-info .setting .value {
     3027.edit-attachment-frame .attachment-fields .setting input[type="text"],
     3028.edit-attachment-frame .attachment-fields .setting input[type="password"],
     3029.edit-attachment-frame .attachment-fields .setting input[type="number"],
     3030.edit-attachment-frame .attachment-fields .setting input[type="search"],
     3031.edit-attachment-frame .attachment-fields .setting input[type="email"],
     3032.edit-attachment-frame .attachment-fields .setting input[type="url"],
     3033.edit-attachment-frame .attachment-fields .setting textarea,
     3034.edit-attachment-frame .attachment-fields .setting .value {
    28963035        margin: 1px;
    28973036        width: 65%;
    28983037        float: right;
     
    29023041        box-sizing: border-box;
    29033042}
    29043043
    2905 .edit-attachment-frame .attachment-info .setting textarea {
     3044.edit-attachment-frame .attachment-fields .setting textarea {
    29063045        height: 62px;
    29073046        resize: vertical;
    29083047}
    29093048
    2910 .edit-attachment-frame .attachment-info select {
     3049.edit-attachment-frame .attachment-fields select {
    29113050        margin-top: 3px;
    29123051}
    29133052
  • src/wp-includes/js/media-views.js

     
    17471747                template:  media.template('media-frame'),
    17481748                regions:   ['menu','title','content','toolbar','router'],
    17491749
     1750                events: {
     1751                        'click a.media-frame-menu-toggle': 'toggleMenu'
     1752                },
     1753
    17501754                /**
    17511755                 * @global wp.Uploader
    17521756                 */
     
    18401844                                controller: this
    18411845                        });
    18421846                },
     1847
     1848                toggleMenu: function( event ) {
     1849                        console.log( 'clicked' );
     1850                        event.preventDefault();
     1851                        this.$el.find( '.media-menu' ).toggleClass( 'visible' );
     1852
     1853                },
    18431854                /**
    18441855                 * @param {Object} toolbar
    18451856                 * @this wp.media.controller.Region
     
    32213232                                };
    32223233                        }
    32233234
     3235                        $( 'body' ).addClass( 'in-modal' );
    32243236                        $el.show().focus();
    32253237                        return this.propagate('open');
    32263238                },
     
    32363248                                return this;
    32373249                        }
    32383250
     3251                        $( 'body' ).removeClass( 'in-modal' );
     3252
    32393253                        // Hide modal and remove restricted media modal tab focus once it's closed
    32403254                        this.$el.hide().undelegate( 'keydown' );
    32413255
     
    44294443        });
    44304444
    44314445        /**
    4432          * wp.media.view.Menu
    4433          *
    4434          * @constructor
    4435          * @augments wp.media.view.PriorityList
    4436          * @augments wp.media.View
    4437          * @augments wp.Backbone.View
    4438          * @augments Backbone.View
    4439          */
     4446        * wp.media.view.Menu
     4447        *
     4448        * @constructor
     4449        * @augments wp.media.view.PriorityList
     4450        * @augments wp.media.View
     4451        * @augments wp.Backbone.View
     4452        * @augments Backbone.View
     4453        */
    44404454        media.view.Menu = media.view.PriorityList.extend({
    44414455                tagName:   'div',
    44424456                className: 'media-menu',
     
    44434457                property:  'state',
    44444458                ItemView:  media.view.MenuItem,
    44454459                region:    'menu',
     4460
     4461                initialize: function( options ) {
     4462                        media.view.PriorityList.prototype.initialize.apply( this, arguments );
     4463                        this.controller = options.controller;
     4464                        this.listenTo( this.controller, 'deactivate', function() {
     4465                                this.$el.removeClass( 'visible' );
     4466                        } );
     4467                },
     4468
    44464469                /**
    44474470                 * @param {Object} options
    44484471                 * @param {string} id
     
    46064629                tagName:   'li',
    46074630                className: 'attachment',
    46084631                template:  media.template('attachment'),
     4632                isTouch: false,
    46094633
    46104634                attributes: {
    46114635                        tabIndex: 0,
     
    46144638
    46154639                events: {
    46164640                        'click .js--select-attachment':   'toggleSelectionHandler',
     4641                        'touchend .attachment-preview':   'setTouch',
    46174642                        'change [data-setting]':          'updateSetting',
    46184643                        'change [data-setting] input':    'updateSetting',
    46194644                        'change [data-setting] select':   'updateSetting',
     
    47304755                                this.$bar.width( this.model.get('percent') + '%' );
    47314756                        }
    47324757                },
     4758
     4759                setTouch: function() {
     4760                        this.isTouch = true;
     4761                },
     4762
    47334763                /**
    47344764                 * @param {Object} event
    47354765                 */
     
    47524782                                method = 'toggle';
    47534783                        }
    47544784
     4785                        if ( this.isTouch ) {
     4786                                this.isTouch = false;
     4787                                method = 'add';
     4788                        }
     4789
    47554790                        this.toggleSelection({
    47564791                                method: method
    47574792                        });
     
    48004835                                selection[ this.selected() ? 'remove' : 'add' ]( model );
    48014836                                selection.single( model );
    48024837                                return;
     4838                        } else if ( 'add' === method ) {
     4839                                selection.add( model );
     4840                                selection.single( model );
     4841                                return;
     4842
    48034843                        }
    48044844
    48054845                        // Fixes bug that loses focus when selecting a featured image
     
    51495189
    51505190                        this.initSortable();
    51515191
    5152                         _.bindAll( this, 'css' );
     5192                        /*_.bindAll( this, 'css' );
    51535193                        this.model.on( 'change:edge change:gutter', this.css, this );
    51545194                        this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
    51555195                        if ( this.options.resize ) {
     
    51585198
    51595199                        // Call this.css() after this view has been rendered in the DOM so
    51605200                        // attachments get proper width applied.
    5161                         _.defer( this.css, this );
     5201                        _.defer( this.css, this );*/
    51625202                },
    51635203
    51645204                dispose: function() {
  • src/wp-includes/media-template.php

     
    130130        </style>
    131131        <![endif]-->
    132132        <script type="text/html" id="tmpl-media-frame">
     133                <a class="media-frame-menu-toggle" href="#">Insert Media<!-- Change this dynamically. --></a>
    133134                <div class="media-frame-menu"></div>
    134135                <div class="media-frame-title"></div>
    135136                <div class="media-frame-router"></div>