class-redux-slides.php (14869B)
1 <?php 2 /** 3 * Slides Field 4 * 5 * @package ReduxFramework/Fields 6 * @author Dovy Paukstys & Kevin Provance (kprovance) 7 * @version 4.0.0 8 */ 9 10 defined( 'ABSPATH' ) || exit; 11 12 // Don't duplicate me! 13 if ( ! class_exists( 'Redux_Slides', false ) ) { 14 15 /** 16 * Main Redux_slides class 17 * 18 * @since 1.0.0 19 */ 20 class Redux_Slides extends Redux_Field { 21 22 /** 23 * Set field and value defaults. 24 */ 25 public function set_defaults() { 26 $defaults = array( 27 'show' => array( 28 'title' => true, 29 'description' => true, 30 'url' => true, 31 ), 32 'content_title' => esc_html__( 'Slide', 'redux-framework' ), 33 ); 34 35 $this->field = wp_parse_args( $this->field, $defaults ); 36 } 37 38 /** 39 * Field Render Function. 40 * Takes the vars and outputs the HTML for the field in the settings 41 * 42 * @since 1.0.0 43 * @access public 44 * @return void 45 */ 46 public function render() { 47 // translators: New accordion title. 48 echo '<div class="redux-slides-accordion" data-new-content-title="' . esc_attr( sprintf( __( 'New %s', 'redux-framework' ), $this->field['content_title'] ) ) . '">'; 49 50 $x = 0; 51 52 $multi = ( isset( $this->field['multi'] ) && $this->field['multi'] ) ? ' multiple="multiple"' : ''; 53 54 if ( isset( $this->value ) && is_array( $this->value ) && ! empty( $this->value ) ) { 55 $slides = $this->value; 56 57 foreach ( $slides as $slide ) { 58 if ( empty( $slide ) ) { 59 continue; 60 } 61 62 $defaults = array( 63 'title' => '', 64 'description' => '', 65 'sort' => '', 66 'url' => '', 67 'image' => '', 68 'thumb' => '', 69 'attachment_id' => '', 70 'height' => '', 71 'width' => '', 72 'select' => array(), 73 ); 74 75 $slide = wp_parse_args( $slide, $defaults ); 76 77 if ( empty( $slide['thumb'] ) && ! empty( $slide['attachment_id'] ) ) { 78 $img = wp_get_attachment_image_src( $slide['attachment_id'], 'full' ); 79 $slide['image'] = $img[0]; 80 $slide['width'] = $img[1]; 81 $slide['height'] = $img[2]; 82 } 83 84 echo '<div class="redux-slides-accordion-group"><fieldset class="redux-field" data-id="' . esc_attr( $this->field['id'] ) . '"><h3><span class="redux-slides-header">' . esc_html( $slide['title'] ) . '</span></h3><div>'; 85 86 $hide = ''; 87 if ( empty( $slide['image'] ) ) { 88 $hide = ' hide'; 89 } 90 91 $alt = wp_prepare_attachment_for_js( $slide['attachment_id'] ); 92 $alt = $alt['alt'] ?? ''; 93 94 echo '<div class="screenshot' . esc_attr( $hide ) . '">'; 95 echo '<a class="of-uploaded-image" href="' . esc_url( $slide['image'] ) . '">'; 96 echo '<img 97 class="redux-slides-image" 98 id="image_image_id_' . esc_attr( $x ) . '" src="' . esc_url( $slide['thumb'] ) . '" 99 alt="' . esc_attr( $alt ) . '" 100 target="_blank" rel="external" />'; 101 102 echo '</a>'; 103 echo '</div>'; 104 105 echo '<div class="redux_slides_add_remove">'; 106 107 echo '<span class="button media_upload_button" id="add_' . esc_attr( $x ) . '">' . esc_html__( 'Upload', 'redux-framework' ) . '</span>'; 108 109 $hide = ''; 110 if ( empty( $slide['image'] ) || '' === $slide['image'] ) { 111 $hide = ' hide'; 112 } 113 114 echo '<span 115 class="button remove-image' . esc_attr( $hide ) . '" 116 id="reset_' . esc_attr( $x ) . '" 117 rel="' . esc_attr( $slide['attachment_id'] ) . '">' . 118 esc_html__( 'Remove', 'redux-framework' ) . '</span>'; 119 120 echo '</div>' . "\n"; 121 122 echo '<ul id="' . esc_attr( $this->field['id'] ) . '-ul" class="redux-slides-list">'; 123 124 if ( $this->field['show']['title'] ) { 125 $title_type = 'text'; 126 } else { 127 $title_type = 'hidden'; 128 } 129 130 $placeholder = ( isset( $this->field['placeholder']['title'] ) ) ? esc_attr( $this->field['placeholder']['title'] ) : __( 'Title', 'redux-framework' ); 131 echo '<li>'; 132 echo '<input 133 type="' . esc_attr( $title_type ) . '" 134 id="' . esc_attr( $this->field['id'] ) . '-title_' . esc_attr( $x ) . '" 135 name="' . esc_attr( $this->field['name'] . '[' . $x . '][title]' . $this->field['name_suffix'] ) . '" 136 value="' . esc_attr( $slide['title'] ) . '" 137 placeholder="' . esc_attr( $placeholder ) . '" class="full-text slide-title" />'; 138 139 echo '</li>'; 140 141 if ( $this->field['show']['description'] ) { 142 $placeholder = ( isset( $this->field['placeholder']['description'] ) ) ? esc_attr( $this->field['placeholder']['description'] ) : __( 'Description', 'redux-framework' ); 143 echo '<li>'; 144 echo '<textarea 145 name="' . esc_attr( $this->field['name'] . '[' . $x . '][description]' . $this->field['name_suffix'] ) . '" 146 id="' . esc_attr( $this->field['id'] ) . '-description_' . esc_attr( $x ) . '" 147 placeholder="' . esc_attr( $placeholder ) . '" 148 class="large-text" 149 rows="6">' . esc_textarea( $slide['description'] ) . '</textarea>'; 150 151 echo '</li>'; 152 } 153 154 $placeholder = ( isset( $this->field['placeholder']['url'] ) ) ? esc_attr( $this->field['placeholder']['url'] ) : __( 'URL', 'redux-framework' ); 155 if ( $this->field['show']['url'] ) { 156 $url_type = 'text'; 157 } else { 158 $url_type = 'hidden'; 159 } 160 161 echo '<li>'; 162 echo '<input 163 type="' . esc_attr( $url_type ) . '" 164 id="' . esc_attr( $this->field['id'] . '-url_' ) . esc_attr( $x ) . '" 165 name="' . esc_attr( $this->field['name'] . '[' . esc_attr( $x ) . '][url]' . $this->field['name_suffix'] ) . '" 166 value="' . esc_attr( $slide['url'] ) . '" 167 class="full-text" placeholder="' . esc_attr( $placeholder ) . '" />'; 168 echo '</li>'; 169 170 echo '<li>'; 171 echo '<input 172 type="hidden" 173 class="slide-sort" 174 name="' . esc_attr( $this->field['name'] . '[' . $x . '][sort]' . $this->field['name_suffix'] ) . '" 175 id="' . esc_attr( $this->field['id'] ) . '-sort_' . esc_attr( $x ) . '" 176 value="' . esc_attr( $slide['sort'] ) . '" />'; 177 178 echo '<li>'; 179 echo '<input 180 type="hidden" 181 class="upload-id" 182 name="' . esc_attr( $this->field['name'] . '[' . $x . '][attachment_id]' . $this->field['name_suffix'] ) . '" 183 id="' . esc_attr( $this->field['id'] ) . '-image_id_' . esc_attr( $x ) . '" 184 value="' . esc_attr( $slide['attachment_id'] ) . '" />'; 185 186 echo '<input 187 type="hidden" 188 class="upload" name="' . esc_attr( $this->field['name'] . '[' . $x . '][image]' . $this->field['name_suffix'] ) . '" 189 id="' . esc_attr( $this->field['id'] ) . '-image_url_' . esc_attr( $x ) . '" 190 value="' . esc_attr( $slide['image'] ) . '" readonly="readonly" />'; 191 192 echo '<input 193 type="hidden" 194 class="upload-height" 195 name="' . esc_attr( $this->field['name'] . '[' . $x . '][height]' . $this->field['name_suffix'] ) . '" 196 id="' . esc_attr( $this->field['id'] ) . '-image_height_' . esc_attr( $x ) . '" 197 value="' . esc_attr( $slide['height'] ) . '" />'; 198 199 echo '<input 200 type="hidden" 201 class="upload-width" 202 name="' . esc_attr( $this->field['name'] . '[' . $x . '][width]' . $this->field['name_suffix'] ) . '" 203 id="' . esc_attr( $this->field['id'] ) . '-image_width_' . esc_attr( $x ) . '" 204 value="' . esc_attr( $slide['width'] ) . '" />'; 205 206 echo '</li>'; 207 208 echo '<input 209 type="hidden" 210 class="upload-thumbnail" 211 name="' . esc_attr( $this->field['name'] . '[' . $x . '][thumb]' . $this->field['name_suffix'] ) . '" 212 id="' . esc_attr( $this->field['id'] ) . '-thumb_url_' . esc_attr( $x ) . '" 213 value="' . esc_attr( $slide['thumb'] ) . '" readonly="readonly" />'; 214 echo '</li>'; 215 216 echo '<li>'; 217 echo '<a href="javascript:void(0);" class="button deletion redux-slides-remove">' . esc_html__( 'Delete', 'redux-framework' ) . '</a>'; 218 echo '</li>'; 219 220 echo '</ul>'; 221 echo '</div>'; 222 echo '</fieldset>'; 223 echo '</div>'; 224 225 $x ++; 226 } 227 } 228 229 if ( 0 === $x ) { 230 echo '<div class="redux-slides-accordion-group">'; 231 echo '<fieldset class="redux-field" data-id="' . esc_attr( $this->field['id'] ) . '">'; 232 echo '<h3>'; 233 234 // translators: Content title for new accordion. 235 echo '<span class="redux-slides-header">' . esc_html( sprintf( __( 'New %s', 'redux-framework' ), esc_attr( $this->field['content_title'] ) ) ) . '</span>'; 236 echo '</h3>'; 237 echo '<div>'; 238 239 $hide = ' hide'; 240 241 echo '<div class="screenshot' . esc_attr( $hide ) . '">'; 242 echo '<a class="of-uploaded-image" href="">'; 243 echo '<img class="redux-slides-image" id="image_image_id_' . esc_attr( $x ) . '" src="" alt="placeholder" target="_blank" rel="external" />'; 244 echo '</a>'; 245 echo '</div>'; 246 247 // Upload controls DIV. 248 echo '<div class="upload_button_div">'; 249 250 // If the user has WP3.5+ show upload/remove button. 251 echo '<span class="button media_upload_button" id="add_' . esc_attr( $x ) . '">' . esc_html__( 'Upload', 'redux-framework' ) . '</span>'; 252 253 echo '<span class="button remove-image' . esc_attr( $hide ) . '" id="reset_' . esc_attr( $x ) . '" rel="' . esc_attr( $this->parent->args['opt_name'] . '[' . $this->field['id'] ) . '][attachment_id]">' . esc_html__( 'Remove', 'redux-framework' ) . '</span>'; 254 255 echo '</div>' . "\n"; 256 257 echo '<ul id="' . esc_attr( $this->field['id'] ) . '-ul" class="redux-slides-list">'; 258 259 if ( $this->field['show']['title'] ) { 260 $title_type = 'text'; 261 } else { 262 $title_type = 'hidden'; 263 } 264 265 $placeholder = ( isset( $this->field['placeholder']['title'] ) ) ? esc_attr( $this->field['placeholder']['title'] ) : __( 'Title', 'redux-framework' ); 266 267 echo '<li>'; 268 echo '<input 269 type="' . esc_attr( $title_type ) . '" 270 id="' . esc_attr( $this->field['id'] . '-title_' . $x ) . '" 271 name="' . esc_attr( $this->field['name'] . '[' . $x . '][title]' . $this->field['name_suffix'] ) . '" 272 value="" 273 placeholder="' . esc_attr( $placeholder ) . '" 274 class="full-text slide-title" />'; 275 echo '</li>'; 276 277 if ( $this->field['show']['description'] ) { 278 $placeholder = ( isset( $this->field['placeholder']['description'] ) ) ? esc_attr( $this->field['placeholder']['description'] ) : __( 'Description', 'redux-framework' ); 279 280 echo '<li>'; 281 echo '<textarea 282 name="' . esc_attr( $this->field['name'] . '[' . $x . '][description]' . $this->field['name_suffix'] ) . '" 283 id="' . esc_attr( $this->field['id'] . '-description_' . $x ) . '" 284 placeholder="' . esc_attr( $placeholder ) . '" 285 class="large-text" 286 rows="6"></textarea>'; 287 echo '</li>'; 288 } 289 290 $placeholder = ( isset( $this->field['placeholder']['url'] ) ) ? esc_attr( $this->field['placeholder']['url'] ) : __( 'URL', 'redux-framework' ); 291 292 if ( $this->field['show']['url'] ) { 293 $url_type = 'text'; 294 } else { 295 $url_type = 'hidden'; 296 } 297 298 echo '<li>'; 299 echo '<input 300 type="' . esc_attr( $url_type ) . '" 301 id="' . esc_attr( $this->field['id'] . '-url_' . $x ) . '" 302 name="' . esc_attr( $this->field['name'] . '[' . $x . '][url]' . $this->field['name_suffix'] ) . '" 303 value="" class="full-text" placeholder="' . esc_attr( $placeholder ) . '" />'; 304 echo '</li>'; 305 306 echo '<li>'; 307 echo '<input 308 type="hidden" 309 class="slide-sort" 310 name="' . esc_attr( $this->field['name'] . '[' . $x . '][sort]' . $this->field['name_suffix'] ) . '" 311 id="' . esc_attr( $this->field['id'] . '-sort_' . $x ) . '" 312 value="' . esc_attr( $x ) . '" />'; 313 314 echo '<li>'; 315 echo '<input 316 type="hidden" 317 class="upload-id" 318 name="' . esc_attr( $this->field['name'] . '[' . $x . '][attachment_id]' . $this->field['name_suffix'] ) . '" 319 id="' . esc_attr( $this->field['id'] . '-image_id_' . $x ) . '" 320 value="" />'; 321 322 echo '<input 323 type="hidden" 324 class="upload" 325 name="' . esc_attr( $this->field['name'] . '[' . $x . '][image]' . $this->field['name_suffix'] ) . '" 326 id="' . esc_attr( $this->field['id'] . '-image_url_' . $x ) . '" 327 value="" readonly="readonly" />'; 328 329 echo '<input 330 type="hidden" 331 class="upload-height" 332 name="' . esc_attr( $this->field['name'] . '[' . $x . '][height]' . $this->field['name_suffix'] ) . '" 333 id="' . esc_attr( $this->field['id'] . '-image_height_' . $x ) . '" 334 value="" />'; 335 336 echo '<input 337 type="hidden" 338 class="upload-width" 339 name="' . esc_attr( $this->field['name'] . '[' . $x . '][width]' . $this->field['name_suffix'] ) . '" 340 id="' . esc_attr( $this->field['id'] . '-image_width_' . $x ) . '" 341 value="" />'; 342 echo '</li>'; 343 344 echo '<input 345 type="hidden" 346 class="upload-thumbnail" 347 name="' . esc_attr( $this->field['name'] . '[' . $x . '][thumb]' . $this->field['name_suffix'] ) . '" 348 id="' . esc_attr( $this->field['id'] . '-thumb_url_' . $x ) . '" 349 value="" />'; 350 echo '</li>'; 351 352 echo '<li>'; 353 echo '<a href="javascript:void(0);" class="button deletion redux-slides-remove">' . esc_html__( 'Delete', 'redux-framework' ) . '</a>'; 354 echo '</li>'; 355 356 echo '</ul>'; 357 echo '</div>'; 358 echo '</fieldset>'; 359 echo '</div>'; 360 } 361 362 echo '</div>'; 363 364 // translators: Content title for accordion. 365 echo '<a href="javascript:void(0);" class="button redux-slides-add button-primary" rel-id="' . esc_attr( $this->field['id'] ) . '-ul" rel-name="' . esc_attr( $this->field['name'] . '[title][]' . $this->field['name_suffix'] ) . '">' . esc_html( sprintf( __( 'Add %s', 'redux-framework' ), esc_html( $this->field['content_title'] ) ) ) . '</a>'; 366 echo '<br/>'; 367 } 368 369 /** 370 * Enqueue Function. 371 * If this field requires any scripts, or css define this function and register/enqueue the scripts/css 372 * 373 * @since 1.0.0 374 * @access public 375 * @return void 376 */ 377 public function enqueue() { 378 if ( function_exists( 'wp_enqueue_media' ) ) { 379 wp_enqueue_media(); 380 } else { 381 wp_enqueue_script( 'media-upload' ); 382 } 383 384 if ( $this->parent->args['dev_mode'] ) { 385 wp_enqueue_style( 'redux-field-media-css' ); 386 387 wp_enqueue_style( 388 'redux-field-slides-css', 389 Redux_Core::$url . 'inc/fields/slides/redux-slides.css', 390 array(), 391 $this->timestamp 392 ); 393 } 394 395 wp_enqueue_script( 396 'redux-field-media-js', 397 Redux_Core::$url . 'assets/js/media/media' . Redux_Functions::is_min() . '.js', 398 array( 'jquery', 'redux-js' ), 399 $this->timestamp, 400 true 401 ); 402 403 wp_enqueue_script( 404 'redux-field-slides-js', 405 Redux_Core::$url . 'inc/fields/slides/redux-slides' . Redux_Functions::is_min() . '.js', 406 array( 'jquery', 'jquery-ui-core', 'jquery-ui-accordion', 'jquery-ui-sortable', 'redux-field-media-js' ), 407 $this->timestamp, 408 true 409 ); 410 } 411 } 412 } 413 414 class_alias( 'Redux_Slides', 'ReduxFramework_Slides' );