Browse files

added media upload controls for theme options

  • Loading branch information...
1 parent 91d5c1e commit 6b550d1e3e9c0353309c063d4df57c2171418f05 @zyml committed Dec 17, 2012
Showing with 93 additions and 8 deletions.
  1. +22 −0 css/theme-options.css
  2. +44 −0 js/theme-options.js
  3. +27 −8 library/admin/admin.php
View
22 css/theme-options.css
@@ -202,6 +202,28 @@
font-style: normal;
}
+#ar2-theme-options .media-upload img {
+ display: block;
+ margin: 0 0 1em;
+ width: 50%;
+ border: 1px solid #F5F5F5;
+ height: auto;
+ border-radius: 3px;
+ padding: 1em;
+}
+#ar2-theme-options .media-upload input[type=text] {
+ display: none;
+}
+#ar2-theme-options .media-upload-remove {
+ color: #FF0000;
+ margin-left: 1em;
+}
+#ar2-theme-options .media-upload-remove:hover {
+ color: #FFF;
+ background: #FF0000;
+ margin-left: 1em;
+}
+
.ie8 #ar2-theme-options .switch {
margin: 0;
}
View
44 js/theme-options.js
@@ -4,6 +4,8 @@ var ar2Admin;
ar2Admin = {
init : function() {
+
+ var curMediaUploadId;
$( '.form-table input, .form-table select' ).live( 'change', function() {
window.onbeforeunload = function() {
@@ -43,6 +45,48 @@ ar2Admin = {
$( '#ar2-theme-options' ).tabs();
+ $( '.media-upload-add' ).click( function() {
+
+ curMediaUploadId = $( this ).attr( 'data-upload-field' );
+
+ if ( ar2Admin_l10n.isNewMediaManager ) {
+ var sendAttachmentBackup = wp.media.editor.send.attachment;
+
+ wp.media.editor.send.attachment = function( props, attachment ) {
+ $( '#media-upload-' + curMediaUploadId ).val( attachment.url );
+ $( '#media-upload-img-' + curMediaUploadId ).attr( 'src', attachment.url );
+
+ wp.media.editor.send.attachment = sendAttachmentBackup;
+ }
+ wp.media.editor.open( curMediaUploadId );
+ } else {
+ tb_show( ar2Admin_l10n.uploadMediaTitle, 'media-upload.php?referer=ar2-theme-options&type=image&TB_iframe=true&post_id=0', false );
+ }
+
+ return false;
+ } );
+
+ $( '.media-upload-remove' ).click( function() {
+
+ var id = $( this ).attr( 'data-upload-field' );
+ $( '#media-upload-' + id ).val( null );
+ $( '#media-upload-img-' + id ).attr( 'src', null );
+ return false;
+
+ } );
+
+ if ( !ar2Admin_l10n.isNewMediaManager ) {
+ window.send_to_editor = function( html ) {
+ var imageUrl = $( 'img', html ).attr( 'src' );
+
+ $( '#media-upload-' + curMediaUploadId ).val( imageUrl );
+ $( '#media-upload-img-' + curMediaUploadId ).attr( 'src', imageUrl );
+
+ tb_remove();
+ curMediaUploadId = null;
+ }
+ }
+
},
initTokenInput : function( input ) {
View
35 library/admin/admin.php
@@ -190,14 +190,13 @@ function ar2_theme_options_default_fields() {
'description' => __( 'Check this to allow the theme to automatically retrieve the first attached image from the post as featured image when no image is specified.', 'ar2' )
),
- /* Layouts */
+ /* Overall Design */
'layout' => array (
'type' => 'dropdown',
'title' => __( 'No of Columns', 'ar2' ),
'section' => 'ar2_design_overall',
'options' => $ar2_styles->get_layouts(),
- ),
-
+ ),
/* Import / Export Options */
'import_theme_options' => array (
@@ -358,6 +357,15 @@ function ar2_theme_options_enqueue_scripts( $hook_suffix ) {
global $wp_styles;
$current = isset( $_GET[ 'opt_type' ] ) ? esc_attr( $_GET['opt_type'] ) : '';
+
+ // for media uploading functionality.
+ if ( function_exists( 'wp_enqueue_media' ) ) {
+ wp_enqueue_media();
+ } else {
+ wp_enqueue_script( 'thickbox' );
+ wp_enqueue_style( 'thickbox' );
+ wp_enqueue_script( 'media-upload' );
+ }
wp_enqueue_style( 'ar2-theme-options', get_template_directory_uri() . '/css/theme-options.css', null, '2011-07-29' );
@@ -385,15 +393,17 @@ function ar2_theme_options_localize_vars() {
$current = isset( $_GET[ 'opt_type' ] ) ? esc_attr( $_GET['opt_type'] ) : '';
$_vars = array (
- 'changedConfirmation' => __( 'If you have made any changes in the fields without submitting, all changes will be lost.', 'ar2' )
- );
-
- $_vars = array_merge( $_vars, array (
+ 'changedConfirmation' => __( 'If you have made any changes in the fields without submitting, all changes will be lost.', 'ar2' ),
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'hintText' => __( 'Start by entering a term here.', 'ar2' ),
'noResultsText' => __( 'No results.', 'ar2' ),
'searchingText' => __( 'Searching...', 'ar2' ),
- ) );
+ 'uploadMediaTitle' => __( 'Upload Media', 'ar2' ),
+ 'isNewMediaManager' => false,
+ );
+
+ if ( function_exists( 'wp_enqueue_media' ) )
+ $_vars[ 'isNewMediaManager' ] = true;
$_fields = ar2_theme_options_default_fields();
@@ -842,6 +852,15 @@ function ar2_theme_options_render_field( $args = array() ) {
}
echo '</div>';
break;
+
+ case 'media-upload' :
+ echo '<div class="media-upload">';
+ echo '<p><img id="media-upload-img-' . $id . '" src="' . $value . '" alt="" /></p>';
+ echo ar2_form_input( 'ar2_theme_options[' . $id . ']', $value, 'id="media-upload-' . $id . '"' );
+ echo '<input type="button" data-upload-field="' . $id . '" class="button media-upload-add" value="' . __( 'Add Image', 'ar2' ) . '" />';
+ echo '<a href="#" data-upload-field="' . $id . '" class="media-upload-remove">' . __( 'Remove', 'ar2' ) . '</a>';
+ echo '</div>';
+ break;
case 'input' :
echo ar2_form_input( 'ar2_theme_options[' . $id . ']', $value, $extras );

0 comments on commit 6b550d1

Please sign in to comment.