public static function ui( MEOW_Field $field ) {
global $wf;
$prop_inputs = self::prop_inputs($field, "attachment_id");
$fileurl = "";
$thumb = "";
$width = "";
$height = "";
$filesize = "";
$summary_thumb = "";
$filename = "";
$filetype = "";
$empty = "";
$orientation = "";
$no_image = __("( no image )", MASTERPRESS_DOMAIN);
$view_image = __("View Image", MASTERPRESS_DOMAIN);
// setup defaults for an empty image
list($tw, $th) = array(120, 90);
list($stw, $sth) = array(82, 39);
$empty = "empty";
$orientation = "square";
$thumb = WOOF_Image::empty_mp_thumb(array("w" => $tw, "h" => $th, "no_image" => $no_image, "class" => "managed thumb") );
$summary_thumb = WOOF_Image::empty_mp_thumb(array("w" => $stw, "h" => $sth, "no_image" => $no_image, "class" => "managed summary-thumb" ) );
if (!$field->blank()) {
$image = $field->file();
if ($image->exists()) {
$empty = "";
$width = $image->width();
$height = $image->height();
$orientation = $height == $width ? "square" : ( $height > $width ? "portrait" : "landscape" );
list($tw, $th) = self::thumb_wh($width, $height);
list($stw, $sth) = self::summary_thumb_wh($width, $height);
$filesize = $image->filesize();
$filename = $image->basename();
$filetype = $image->filetype();
if ($image->is_external()) {
$fileurl = $field->value();
$source_url = $fileurl;
} else {
$fileurl = $image->permalink();
}
$thumb = $image->mp_thumb(array("w" => $tw, "h" => $th, "no_image" => $no_image, "class" => "thumb managed", "href" => $fileurl));
$summary_thumb = $image->mp_thumb(array("w" => $stw, "h" => $sth, "no_image" => $no_image, "class" => "managed summary-thumb", "thumb_only" => true ) );
}
} else {
$empty = "empty";
$orientation = "square";
}
if (isset($source_url)) {
$prop_source_url = $source_url;
} else {
$prop_source_url = $field->prop("source_url");
}
$prop_alt = esc_attr( $field->prop("alt") );
$prop_title = esc_attr( $field->prop("title") );
$replace_image_label = __("Replace Image:", MASTERPRESS_DOMAIN);
$choose_image_label = __("Choose Image:", MASTERPRESS_DOMAIN);
$attributes_label = __("Attributes", MASTERPRESS_DOMAIN);
$attributes_title = __("Edit HTML attributes (alternate text / title)", MASTERPRESS_DOMAIN);
$url_label = __("Enter Image URL:", MASTERPRESS_DOMAIN);
$alt_label = __("Alternate Text:", MASTERPRESS_DOMAIN);
$title_label = __("Title:", MASTERPRESS_DOMAIN);
$attributes_title = __("Image Tag Attributes", MASTERPRESS_DOMAIN);
$button_replace_label = __("Replace Image…", MASTERPRESS_DOMAIN);
$button_from_computer_label = __("From Computer…", MASTERPRESS_DOMAIN);
$button_from_media_library_label = __("From Media Library…", MASTERPRESS_DOMAIN);
$button_from_url_label = __("From URL…", MASTERPRESS_DOMAIN);
$button_from_existing_uploads_label = __("From Existing Uploads…", MASTERPRESS_DOMAIN);
$button_from_media_library_data_library = MasterPress::use_new_media() ? "new" : "legacy";
$button_clear_label = __("Clear", MASTERPRESS_DOMAIN);
$button_delete_label = __("Delete", MASTERPRESS_DOMAIN);
$button_download_label = __("Download", MASTERPRESS_DOMAIN);
$button_cancel_label = __("Cancel", MASTERPRESS_DOMAIN);
$button_clear_title = __("Clear field without deleting the image file", MASTERPRESS_DOMAIN);
$button_delete_title = __("Clear field AND delete the image file", MASTERPRESS_DOMAIN);
$w_times_h = __("width × height", MASTERPRESS_DOMAIN);
$drop_label = __("Drop image<br />file here<br />to upload", MASTERPRESS_DOMAIN);
$base_url = MASTERPRESS_CONTENT_URL;
$dir = 'uploads/';
$media_library_progress_message = __("Fetching URL from Media Library...", MASTERPRESS_DOMAIN);
$upload_progress_message = __("Uploading...", MASTERPRESS_DOMAIN);
$fetching_info_message = __("Fetching Image Information...", MASTERPRESS_DOMAIN);
$dowloading_progress_message = __("Downloading Image...", MASTERPRESS_DOMAIN);
$href = ' href="'.$fileurl.'" ';
if ($fileurl == "") {
$href = "";
}
// populate the media library dialog
// $media_library_dialog
$upload_html = "";
$download_html = "";
$clear_html = "";
$labels_html = "";
$ml_html = "";
$choose_html = "";
$readonly = WOOF_HTML::readonly_attr( !$field->is_editable() );
if ($wf->the_user->can("upload_files") && $field->is_editable()) {
$choose_html = <<<HTML
<div class="choose-controls">
<h5 class="replace-label">{$replace_image_label}</h5>
<h5 class="choose-label">{$choose_image_label}</h5>
<div class="buttons">
<div class="file-uploader { input: '#{{id}}', inputName: '{{id}}_file', ids: { drop: '{{id}}_drop_area' }, base_url: '{$base_url}', params: { dir: '{$dir}' }, limit: 1, lang: { buttonChoose: '{$button_from_computer_label}', buttonReplace: '{$button_from_computer_label}' } }">
<input id="{{id}}" name="{{name}}" value="{$fileurl}" type="hidden" class="value" autocomplete="off" />
<div class="uploader-ui"></div>
</div>
<!-- /.file-uploader -->
<button type="button" class="button button-small button-from-url">{$button_from_url_label}</button>
<button type="button" class="button button-small button-from-media-library" data-library="{$button_from_media_library_data_library}">{$button_from_media_library_label}</button>
</div>
</div>
<!-- /.choose-controls -->
HTML;
$clear_html = <<<HTML
<ul class="controls">
<li><button title="{$button_clear_title}" type="button" class="text with-icon clear">{$button_clear_label}</button></li>
</ul>
HTML;
} else {
$choose_html = <<<HTML
<input id="{{id}}" name="{{name}}" value="{$fileurl}" type="hidden" class="value" autocomplete="off" />
HTML;
}
$html = <<<HTML
<div class="ui-state {$empty}">
{$prop_inputs}
<div class="thumbs {$orientation}">
<div id="{{id}}_drop_area" class="drop-area">{$drop_label}</div>
{$summary_thumb}
{$thumb}
</div>
<!-- /.thumbs -->
<div class="info-controls">
<div class="name-controls">
<h5><a target="_blank" href="{$fileurl}" tabindex="-1" title="{$filename}" class="fancybox file-link with-icon"><span class="filename">{$view_image}</span></a></h5>
{$clear_html}
</div>
<ul class="prop">
<li class="filetype">{$filetype}</li>
<li class="dimensions" title="{$w_times_h}"><span class="width">{$width}</span> × <span class="height">{$height}</span></li>
<li class="filesize">{$filesize}</li>
<li class="attributes"><button type="button" class="text with-icon attributes" title="{$attributes_title}">{$attributes_label}</button></li>
</ul>
{$choose_html}
<div class="media-library-progress">
<span class="fetching-message progress-message">{$media_library_progress_message}</span>
<span class="fetching-info-message progress-message">{$fetching_info_message}</span>
</div>
<!-- /.media-library-progress -->
<div class="upload-progress">
<span class="name"></span>
<div class="progress-bar-with-val">
<div class="progress-bar"><div class="border"><div><span class="bar"> </span></div></div></div>
<div class="val">0%</div>
</div>
<span class="uploading-message progress-message">{$upload_progress_message}</span>
<span class="fetching-info-message progress-message">{$fetching_info_message}</span>
</div>
<!-- /.upload-progress -->
<div class="from-url-ui">
<label for="{{id}}-url">{$url_label}</label>
<input id="{{prop_id}}-source_url" name="{{prop_name}}[source_url]" type="text" value="{$prop_source_url}" class="text url" />
<div class="buttons">
<button type="button" class="button button-small download">{$button_download_label}</button>
<button type="button" class="button button-small cancel">{$button_cancel_label}</button>
</div>
</div>
<!-- /.from-url -->
<div class="download-progress">
<span class="downloading-message progress-message">{$dowloading_progress_message}</span>
<span class="fetching-info-message progress-message">{$fetching_info_message}</span>
</div>
<!-- /.download-progress -->
</div>
<!-- /.info-controls -->
<div class="dialogs">
<div class="mpft-image-attributes-dialog mp-dialog mpv" data-title="{$attributes_title}">
<div class="pad">
<div class="f">
<label for="{{prop_id}}-alt">{$alt_label}</label>
<div class="fw">
<input id="{{prop_id}}-alt" $readonly name="{{prop_name}}[alt]" value="{$prop_alt}" type="text" class="text alt" />
</div>
<!-- /.fw -->
</div>
<!-- /.f -->
<div class="f">
<label for="{{prop_id}}-title">{$title_label}</label>
<div class="fw">
<input id="{{prop_id}}-title" $readonly name="{{prop_name}}[title]" value="{$prop_title}" type="text" class="text title" />
</div>
<!-- /.fw -->
</div>
<!-- /.f -->
</div>
<!-- /.pad -->
</div>
</div>
<!-- /.dialogs -->
</div>
<!-- /.ui-state -->
HTML;
return $html;
}
