Make WordPress Core

Ticket #24291: 24291.22.diff

File 24291.22.diff, 12.4 KB (added by DrewAPicture, 12 years ago)

'Drop image file to upload'

  • wp-admin/admin-header.php

     
    8585$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' );
    8686$admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
    8787
     88if ( isset( $post ) && is_a( $post, 'WP_Post' ) )
     89        $admin_body_class .= ' wp-format-' . get_post_format( $post );
     90
    8891if ( wp_is_mobile() )
    8992        $admin_body_class .= ' mobile';
    9093
  • wp-admin/css/wp-admin.css

     
    39683968        margin-bottom: 15px;
    39693969}
    39703970
    3971 .wp-format-gallery .post-formats-fields,
    3972 .wp-format-image .post-formats-fields,
    3973 .wp-format-link .post-formats-fields,
    3974 .wp-format-quote .post-formats-fields,
    3975 .wp-format-video .post-formats-fields,
    3976 .wp-format-audio .post-formats-fields,
    3977 .wp-format-gallery .field.wp-format-gallery,
    3978 .wp-format-image .field.wp-format-image,
    3979 .wp-format-chat .field.wp-format-chat,
    3980 .wp-format-link .field.wp-format-link,
    3981 .wp-format-quote .field.wp-format-quote,
    3982 .wp-format-video .field.wp-format-video,
    3983 .wp-format-audio .field.wp-format-audio {
     3971#post-body-content.wp-format-gallery .post-formats-fields,
     3972#post-body-content.wp-format-image .post-formats-fields,
     3973#post-body-content.wp-format-link .post-formats-fields,
     3974#post-body-content.wp-format-quote .post-formats-fields,
     3975#post-body-content.wp-format-video .post-formats-fields,
     3976#post-body-content.wp-format-audio .post-formats-fields,
     3977#post-body-content.wp-format-gallery .field.wp-format-gallery,
     3978#post-body-content.wp-format-image .field.wp-format-image,
     3979#post-body-content.wp-format-chat .field.wp-format-chat,
     3980#post-body-content.wp-format-link .field.wp-format-link,
     3981#post-body-content.wp-format-quote .field.wp-format-quote,
     3982#post-body-content.wp-format-video .field.wp-format-video,
     3983#post-body-content.wp-format-audio .field.wp-format-audio {
    39843984        display: block;
    39853985}
    39863986
     
    39963996        font-size: 1.2em;
    39973997}
    39983998
    3999 .wp-format-image label,
    4000 .wp-format-video label,
    4001 .wp-format-audio label {
     3999#post-body-content.wp-format-image label,
     4000#post-body-content.wp-format-video label,
     4001#post-body-content.wp-format-audio label {
    40024002        float: left;
    40034003}
    40044004
     
    40074007        overflow: hidden;
    40084008        width: 40%;
    40094009        height: auto;
    4010         padding: 55px 0 20px;
    40114010        border: 1px dashed #dfdfdf;
    40124011        background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
     4012        box-sizing: border-box;
     4013        position:relative;
    40134014}
    40144015
    40154016.wp-format-media-holder:hover {
    40164017        background-color: #eee;
    40174018}
    40184019
     4020.wp-format-media-holder.drag-over {
     4021        background: rgba( 0, 86, 132, 0.9 );
     4022        border-color:transparent;
     4023}
     4024
     4025.wp-format-media-holder div {
     4026        display: none;
     4027}
     4028.wp-format-media-holder.drag-over div {
     4029        position: absolute;
     4030        top: 10px;
     4031        left: 10px;
     4032        right: 10px;
     4033        bottom: 10px;
     4034        border: 1px dashed #fff;
     4035        display:block;
     4036}
     4037
     4038#poststuff .wp-format-media-holder.drag-over div h3 {
     4039
     4040        position: absolute;
     4041        top: 50%;
     4042        left: 0;
     4043        right: 0;
     4044        -webkit-transform: translateY( -50% );
     4045        -moz-transform:    translateY( -50% );
     4046        -ms-transform:     translateY( -50% );
     4047        -o-transform:      translateY( -50% );
     4048        transform:         translateY( -50% );
     4049
     4050        font-size: 20px;
     4051        font-weight: 200;
     4052        color: #fff;
     4053        padding: 0;
     4054        text-align:center;
     4055        font-family: sans-serif;
     4056}
     4057
     4058#post-body-content.wp-format-image .wp-format-media-holder {
     4059        margin-top: 17px;
     4060}
     4061
    40194062.wp-format-media-preview {
    4020         margin-bottom: 20px;
     4063        margin: 20px 0;
    40214064}
    40224065
    4023 .wp-format-status #titlewrap,
    4024 .wp-format-image .wp-media-buttons .insert-media,
    4025 .wp-format-audio .wp-media-buttons .insert-media,
    4026 .wp-format-video .wp-media-buttons .insert-media,
    4027 .wp-format-aside .wp-media-buttons .insert-media,
    4028 .wp-format-status .wp-media-buttons .insert-media {
     4066#image-preview img {
     4067        width: auto;
     4068        max-height: 300px;
     4069}
     4070
     4071#post-body-content .wp-format-image p.use-url-or-html {
     4072        padding-top: 10px;
     4073        clear: both;
     4074        width: 40%;
     4075        text-align: center;
     4076}
     4077
     4078body.wp-format-image .attachment-display-settings {
    40294079        display: none;
    40304080}
    40314081
     4082body.wp-format-status #titlewrap,
     4083body.wp-format-image .wp-media-buttons .insert-media,
     4084body.wp-format-audio .wp-media-buttons .insert-media,
     4085body.wp-format-video .wp-media-buttons .insert-media,
     4086body.wp-format-aside .wp-media-buttons .insert-media,
     4087body.wp-format-status .wp-media-buttons .insert-media {
     4088        display: none;
     4089}
     4090
    40324091.mejs-audio audio,
    40334092.mejs-video video {
    40344093        display: block;
     
    40364095
    40374096.wp-format-media-select {
    40384097        display: block;
    4039         height: 200px;
     4098        height: 20px;
     4099        padding: 55px 0 20px;
    40404100        text-align: center;
    40414101}
    40424102
     
    40454105        max-height: 100%;
    40464106}
    40474107
    4048 .wp-format-media-select {
    4049         height: 20px;
    4050 }
    4051 
    40524108.empty .wp-format-media-metaedit {
    40534109        height: 20px;
    40544110        display: block;
     
    40654121#wp_format_video {
    40664122        float: left;
    40674123        margin-right: 23px;
    4068         max-width: 50%;
     4124        max-width: 40%;
    40694125        min-height: 97px;
    40704126}
    40714127
    4072 #icon-edit.wp-format-standard,
     4128body.wp-format-standard #icon-edit,
    40734129.post-format-options .standard {
    40744130        background: url(../images/post-formats32.png) no-repeat -3px -4px;
    40754131}
    40764132
    4077 #icon-edit.wp-format-image,
     4133body.wp-format-image #icon-edit,
    40784134.post-format-options .image {
    40794135        background: url(../images/post-formats32.png) no-repeat  -43px -4px;
    40804136}
    40814137
    4082 #icon-edit.wp-format-gallery,
     4138body.wp-format-gallery #icon-edit,
    40834139.post-format-options .gallery {
    40844140        background: url(../images/post-formats32.png) no-repeat -83px -4px;
    40854141}
    40864142
    4087 #icon-edit.wp-format-audio,
     4143body.wp-format-audio #icon-edit,
    40884144.post-format-options .audio {
    40894145        background: url(../images/post-formats32.png) no-repeat -123px -4px;
    40904146}
    40914147
    4092 #icon-edit.wp-format-video,
     4148body.wp-format-video #icon-edit,
    40934149.post-format-options .video {
    40944150        background: url(../images/post-formats32.png) no-repeat -163px -4px;
    40954151}
    40964152
    4097 #icon-edit.wp-format-chat,
     4153body.wp-format-chat #icon-edit,
    40984154.post-format-options .chat {
    40994155        background: url(../images/post-formats32.png) no-repeat -202px -4px;
    41004156}
    41014157
    4102 #icon-edit.wp-format-status,
     4158body.wp-format-status #icon-edit,
    41034159.post-format-options .status {
    41044160        background: url(../images/post-formats32.png) no-repeat -242px -4px;
    41054161}
    41064162
    4107 #icon-edit.wp-format-aside,
     4163body.wp-format-aside #icon-edit,
    41084164.post-format-options .aside {
    41094165        background: url(../images/post-formats32.png) no-repeat -282px -4px;
    41104166}
    41114167
    4112 #icon-edit.wp-format-quote,
     4168body.wp-format-quote #icon-edit,
    41134169.post-format-options .quote {
    41144170        background: url(../images/post-formats32.png) no-repeat -322px -4px;
    41154171}
    41164172
    4117 #icon-edit.wp-format-link,
     4173body.wp-format-link #icon-edit,
    41184174.post-format-options .link {
    41194175        background: url(../images/post-formats32.png) no-repeat -362px -4px;
    41204176}
  • wp-admin/includes/post-formats.php

     
    3838                                ?>
    3939                        </div>
    4040                        <?php endif ?>
    41                         <label for="wp_format_image"><?php
    42                                 if ( current_user_can( 'unfiltered_html' ) )
    43                                         _e( 'Image HTML or URL' );
    44                                 else
    45                                         _e( 'Image URL' );
    46                         ?></label>
    47                         <textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
    4841                        <div data-format="image" class="wp-format-media-holder hide-if-no-js">
     42                                <div><h3><?php _e( 'Drop image file to upload' ); ?></h3></div>
    4943                                <a href="#" class="wp-format-media-select"
    5044                                        data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
    5145                                        data-update="<?php esc_attr_e( 'Select Image' ); ?>">
    5246                                        <?php _e( 'Select / Upload Image' ); ?>
    5347                                </a>
    5448                        </div>
     49                        <div class="wp-format-image-textarea hide-if-js">
     50                                <label for="wp_format_image"><?php
     51                                        if ( current_user_can( 'unfiltered_html' ) )
     52                                                _e( 'Image HTML or URL' );
     53                                        else
     54                                                _e( 'Image URL' );
     55                                ?></label>
     56                                <textarea id="wp_format_image" type="text" name="_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
     57                        </div>
     58                        <p class="use-url-or-html hide-if-no-js"><span><?php printf( __( '(or %suse an image URL or HTML%s)' ), '<a href="#">', '</a>' ); ?></span>
     59                                <span style="display: none"><?php printf( __( '(or %sselect/upload an image%s)' ), '<a href="#">', '</a>' ); ?></span></p>
    5560                </div>
    5661
    5762                <div class="field wp-format-link">
  • wp-admin/js/post-formats.js

     
    66        "use strict";
    77
    88        var mediaFrame, insertMediaButton, container, icon, formatField,
     9                body,
    910                lastMimeType,
    1011                classRegex = /\s?\bwp-format-[^ ]+/g,
    1112                shortHeight = 120,
     
    1718                shortContentFormats = ['status', 'aside'],
    1819                noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
    1920
     21        function imageFormatUploadProgress( uploader, file ) {
     22                var $bar = $( '#' + uploader.settings.drop_element + ' .media-progress-bar div' );
     23                $bar.width( file.percent + '%' );
     24        }
     25
     26        function imageFormatUploadStart( uploader ) {
     27                $( '#' + uploader.settings.drop_element + ' .wp-format-media-select' ).append('<div class="media-progress-bar"><div></div></div>');
     28        }
     29
     30        function imageFormatUploadSuccess( attachment ) {
     31                var $holder, $field, html = wp.media.string.image({
     32                        size : 'full',
     33                        align : false,
     34                        link : getUserSetting( 'urlbutton' )
     35                }, attachment.attributes );
     36
     37                $holder = $('.wp-format-media-holder[data-format=image]');
     38                $( '.media-progress-bar', $holder ).remove();
     39                $field = $( '#wp_format_' + $holder.data( 'format' ) );
     40
     41                // set the hidden input's value
     42                $field.val( html );
     43
     44                $( '#image-preview' ).remove();
     45
     46                $holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
     47                        '<img src="', attachment.get('url'), '"',
     48                        attachment.get('width') ? ' width="' + attachment.get('width') + '"' : '',
     49                        attachment.get('height') ? ' height="' + attachment.get('height') + '"' : '',
     50                        ' />',
     51                '</div>'].join( '' ) );
     52        }
     53
     54        var uploader = {
     55                dropzone:  $('.wp-format-media-holder[data-format=image]'),
     56                success:   imageFormatUploadSuccess,
     57                plupload:  {},
     58                params:    {}
     59        };
     60        uploader = new wp.Uploader( uploader );
     61        uploader.uploader.bind( 'BeforeUpload', imageFormatUploadStart );
     62        uploader.uploader.bind( 'UploadProgress', imageFormatUploadProgress );
     63
    2064        function switchFormatClass( format ) {
    2165                formatField.val( format );
    2266
    23                 container
    24                         .prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) )
     67                $.each( [ container, icon, body ], function(i, thing) {
     68                        thing.prop( 'className', thing.prop( 'className' ).replace( classRegex, '' ) )
    2569                        .addClass( 'wp-format-' + format );
    26 
    27                 icon
    28                         .prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) )
    29                         .addClass( 'wp-format-' + format );
     70                });
    3071        }
    3172
    3273        function resizeContent( format, noAnimate ) {
     
    137178        }
    138179
    139180        $(function () {
     181                body = $( 'body' );
    140182                container = $( '#post-body-content' );
    141183                icon = $( '.icon32' );
    142184                formatField = $( '#post_format' );
     
    163205                        switchFormat( $( e.currentTarget ) );
    164206                } );
    165207
     208                // Toggle select/upload and URL/HTML for images
     209                $( '.use-url-or-html' ).on( 'click', 'a', function(e) {
     210                        e.preventDefault();
     211                        $( '.wp-format-media-holder, .wp-format-image-textarea' ).toggle();
     212                        $(this).closest( 'p' ).find( 'span' ).toggle();
     213                });
     214
    166215                // Media selection
    167216                $( '.wp-format-media-select' ).click( function (e) {
    168217                        e.preventDefault();
     
    242291                                        mediaPreview( attachment );
    243292                                } else {
    244293                                        html = wp.media.string.image({
    245                                                 align : getUserSetting( 'align' ),
    246                                                 size : getUserSetting( 'imgsize' ),
     294                                                size: 'full',
     295                                                align : false,
    247296                                                link : getUserSetting( 'urlbutton' )
    248297                                        }, attachment);
    249298
  • wp-includes/script-loader.php

     
    407407                        'comma' => _x( ',', 'tag delimiter' ),
    408408                ) );
    409409
    410                 $scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models' ), false, 1 );
     410                $scripts->add( 'post-formats', "/wp-admin/js/post-formats$suffix.js", array( 'media-models', 'wp-plupload' ), false, 1 );
    411411
    412412                $scripts->add( 'link', "/wp-admin/js/link$suffix.js", array( 'wp-lists', 'postbox' ), false, 1 );
    413413