/web/app/plugins/ml-slider-pro/modules/theme_editor/theme_editor.php
PHP | 1602 lines | 1188 code | 214 blank | 200 comment | 194 complexity | d0d8de97708ff419d226b747ea120e19 MD5 | raw file
Possible License(s): Apache-2.0, LGPL-2.1
Large files files are truncated, but you can click here to view the full file
- <?php
- // disable direct access
- if ( ! defined( 'ABSPATH' ) ) exit;
- /**
- * Theme Editor
- */
- class MetaSliderThemeEditor {
- private $theme = array();
- private $theme_slug = "";
- private $slider_id = 0;
- private $slider_settings = array();
- /**
- * Constructor
- */
- public function __construct() {
- add_filter( 'metaslider_css', array( $this, 'get_theme_css' ), 15, 3 );
- add_filter( 'metaslider_css_classes', array( $this, 'get_theme_css_classes' ), 10, 3 );
- add_action( 'admin_menu', array( $this, 'register_theme_editor_menu' ), 9556 );
- add_filter( 'metaslider_get_available_themes', array( $this, 'get_theme_select_options' ), 10, 2 );
- }
- /**
- * Append the shadow effect type onto the list of classes applied to a slideshow
- */
- public function get_theme_css_classes( $classes, $id, $settings ) {
- $theme = isset( $settings['theme'] ) ? $settings['theme'] : 'default';
- // if we're using the theme editor, always use the currently selected theme
- if ( is_admin() && isset( $_REQUEST['theme_slug'] ) ) {
- $theme = $_REQUEST['theme_slug'];
- }
- // bail out if we're not using a custom theme
- if ( substr( $theme, 0, strlen( '_theme' ) ) !== '_theme' ) {
- return $classes;
- }
- // bail out if thumbnails are enabled
- if ( isset( $settings['navigation'] ) && $settings['navigation'] == 'thumbs' ) {
- return $classes;
- }
- // bail out if filmstrip is enabled
- if ( isset( $settings['navigation'] ) && $settings['navigation'] == 'filmstrip' ) {
- return $classes;
- }
- if ( $this->load_theme( $theme ) && isset( $this->theme['shadow'] ) && $this->theme['shadow'] != 'none' ) {
- return $classes .= " " . $this->theme['shadow'];
- }
- return $classes;
- }
- /**
- * Append custom themes to the list of theme options on the slideshow edit page.
- */
- public function get_theme_select_options( $themes, $selected_theme ) {
- $custom_themes = $this->get_themes();
- if ( !is_array( $custom_themes ) ) {
- return $themes;
- }
- foreach ( $custom_themes as $slug => $theme ) {
- $themes .= "<option value='{$slug}' class='option nivo flex responsive coin'";
- if ( $slug == $selected_theme ) {
- $themes .= " selected=selected";
- }
- $themes .= ">{$theme['title']}</option>";
- }
- return $themes;
- }
- /**
- * Add the theme editor menu option to WordPress
- */
- public function register_theme_editor_menu() {
- $page = add_submenu_page( 'metaslider', __( 'Theme Editor', 'metasliderpro' ), __( 'Theme Editor', 'metasliderpro' ), 'manage_options', 'metaslider-theme-editor', array( $this, 'process_admin_page' ) );
- // ensure our JavaScript is only loaded on the Meta Slider admin page
- add_action( 'admin_print_scripts-' . $page, array( $this, 'register_theme_editor_scripts' ) );
- add_action( 'admin_print_styles-' . $page, array( $this, 'register_theme_editor_styles' ) );
- }
- /**
- * Admin styles
- */
- public function register_theme_editor_styles() {
- wp_enqueue_style( 'metaslider-admin-styles', METASLIDER_ASSETS_URL . 'metaslider/admin.css', false, METASLIDER_VERSION );
- wp_enqueue_style( 'metasliderpro-theme-editor-styles', plugins_url( 'assets/style.css' , __FILE__ ), false, METASLIDERPRO_VERSION );
- wp_enqueue_style( 'metasliderpro-spectrum-style', plugins_url( 'assets/spectrum/spectrum.css' , __FILE__ ), false, METASLIDERPRO_VERSION );
- }
- /**
- * Admin scripts
- */
- public function register_theme_editor_scripts() {
- wp_enqueue_script( 'metasliderpro-spectrum', plugins_url( 'assets/spectrum/spectrum.js' , __FILE__ ), array(), METASLIDERPRO_VERSION );
- wp_enqueue_script( 'metasliderpro-themeEditor-script', plugins_url( 'assets/themeEditor.js' , __FILE__ ), array( 'jquery', 'metasliderpro-spectrum' ), METASLIDERPRO_VERSION );
- }
- /**
- * Create a new theme
- */
- public function create_theme() {
- $slug = '_theme_' . time();
- // load existing themes
- $themes = get_option( 'metaslider-themes' );
- // create a new blank theme
- $themes[$slug] = $this->get_theme_defaults();
- // save
- update_option( 'metaslider-themes', $themes );
- // load it up
- $this->load_theme( $slug );
- $_REQUEST['theme_slug'] = $slug;
- }
- /**
- * Return an array of all created themes
- */
- public function get_themes() {
- $themes = get_option( 'metaslider-themes' );
- return $themes;
- }
- /**
- * Return true if the user has created themes
- */
- private function themes_available() {
- $themes = $this->get_themes();
- return !empty( $themes );
- }
- /**
- * Save changes to an existing theme
- *
- * @param string $slug
- * @param array $themes
- */
- public function save_theme( $slug, $theme ) {
- foreach ( array( 'enable_custom_caption', 'enable_custom_arrows', 'enable_custom_navigation', 'arrows_always_show' ) as $checkbox ) {
- if ( isset( $theme[$checkbox] ) && $theme[$checkbox] == 'on' ) {
- $theme[$checkbox] = 'enabled';
- } else {
- $theme[$checkbox] = 'disabled';
- }
- }
- $themes = get_option( 'metaslider-themes' );
- $themes[$slug] = $theme;
- update_option( 'metaslider-themes', $themes );
- }
- /**
- * Save changes to an existing theme
- *
- * @param string $slug
- */
- public function delete_theme( $slug ) {
- $themes = get_option( 'metaslider-themes' );
- if ( isset( $themes[$slug] ) ) {
- unset( $themes[$slug] );
- update_option( 'metaslider-themes', $themes );
- $this->load_default_theme();
- return true;
- }
- return false;
- }
- /**
- * Load an existing theme, identified by the slug
- *
- * @param string slug
- * @return bool - true if theme successfully loaded
- */
- public function load_theme( $slug ) {
- $themes = get_option( 'metaslider-themes' );
- if ( isset( $themes[$slug] ) ) {
- $this->theme = $themes[$slug];
- $this->theme_slug = $slug;
- return true;
- }
- return false;
- }
- /**
- * Load an existing theme, identified by the slug
- *
- * @return bool - true if default theme found and loaded
- */
- public function load_default_theme() {
- $themes = get_option( 'metaslider-themes' );
- if ( is_array( $themes ) && count( $themes ) ) {
- foreach ( $themes as $theme => $vals ) {
- $this->theme = $vals;
- $this->theme_slug = $theme;
- $_REQUEST['theme_slug'] = $theme;
- return true; // theme loaded
- }
- }
- return false; // no themes found
- }
- /**
- * Contains all the settings for a default (new) theme
- *
- * @return array default theme values
- */
- private function get_theme_defaults() {
- $defaults = array(
- 'title' => 'New Theme',
- 'dot_fill_colour_start' => 'rgba(0,0,0,0.5)',
- 'dot_fill_colour_end' => 'rgba(0,0,0,0.5)',
- 'dot_border_colour' => 'rgba(0,0,0,1)',
- 'dot_border_width' => 0,
- 'dot_border_radius' => 10,
- 'dot_size' => 12,
- 'dot_spacing' => 4,
- 'active_dot_fill_colour_start' => 'rgba(0,0,0,1)',
- 'active_dot_fill_colour_end' => 'rgba(0,0,0,1)',
- 'active_dot_border_colour' => 'rgba(0,0,0,1)',
- 'nav_position' => 'default',
- 'nav_vertical_margin' => 10,
- 'nav_horizontal_margin' => 0,
- 'arrow_type' => 1,
- 'arrow_colour' => 'black',
- 'arrow_indent' => 5,
- 'arrow_opacity' => 70,
- 'outer_border_radius' => 0,
- 'shadow' => 'default',
- 'caption_position' => 'bottomLeft',
- 'caption_width' => 100,
- 'caption_align' => 'left',
- 'caption_vertical_margin' => 0,
- 'caption_horizontal_margin' => 0,
- 'caption_background_colour' => 'rgba(0,0,0,0.7)',
- 'caption_text_colour' => 'rgba(255,255,255,1)',
- 'caption_border_radius' => 0,
- 'enable_custom_caption' => 'enabled',
- 'enable_custom_navigation' => 'enabled',
- 'enable_custom_arrows' => 'enabled',
- 'custom_arrow_next' => 0,
- 'custom_arrow_prev' => 0,
- 'arrow_always_show' => 'disabled'
- );
- return $defaults;
- }
- /**
- * Get the theme setting. Fall back to returning the default theme setting.
- *
- * @param string $name
- */
- private function get_setting( $name ) {
- // try and get a saved setting
- if ( isset( $this->theme[$name] ) ) {
- return $this->theme[$name];
- }
- // fall back to default values
- $defaults = $this->get_theme_defaults();
- if ( isset( $defaults[$name] ) ) {
- return $defaults[$name];
- }
- return false;
- }
- /**
- * Return all available sliders
- *
- * @return array
- */
- private function get_sliders_for_preview() {
- $sliders = false;
- // list the tabs
- $args = array(
- 'post_type' => 'ml-slider',
- 'post_status' => 'publish',
- 'orderby' => 'date',
- 'order' => 'ASC',
- 'posts_per_page' => -1
- );
- $the_query = new WP_Query( $args );
- while ( $the_query->have_posts() ) {
- $the_query->the_post();
- $sliders[] = array(
- 'title' => get_the_title(),
- 'id' => $the_query->post->ID
- );
- }
- return $sliders;
- }
- /**
- * Work out which slider to use for the preview
- *
- * @return int|bool - ID of slideshow or false
- */
- private function get_preview_slider_id() {
- if ( isset( $_REQUEST['slider_id'] ) ) {
- return $_REQUEST['slider_id'];
- }
- $all_sliders = $this->get_sliders_for_preview();
- if ( is_array( $all_sliders ) && isset( $all_sliders[0]['id'] ) ) {
- return $all_sliders[0]['id'];
- }
- return false;
- }
- /**
- * Handle deleting/saving themes etc
- */
- private function process() {
- if ( isset( $_REQUEST['save_theme'] ) ) {
- $slug = $_REQUEST['theme_slug'];
- $theme = $_REQUEST['theme'];
- $this->save_theme( $slug, $theme );
- }
- if ( isset( $_REQUEST['delete_theme'] ) ) {
- $slug = $_REQUEST['theme_slug'];
- $this->delete_theme( $slug );
- }
- if ( isset( $_REQUEST['theme_slug'] ) ) {
- $this->load_theme( $_REQUEST['theme_slug'] );
- } else {
- $this->load_default_theme();
- }
- if ( isset( $_REQUEST['add'] ) ) {
- $this->create_theme();
- }
- $this->slider_id = $this->get_preview_slider_id();
- $this->slider_settings = get_post_meta( $this->slider_id, 'ml-slider_settings', true );
- }
- /**
- * Render the admin page
- */
- public function process_admin_page() {
- $this->process();
- // media library dependencies
- wp_enqueue_media();
- $arrow_style = $this->get_arrow_options();
- $arrow_colour = $this->get_arrow_colours();
- ?>
- <div class='metaslider metaslider_themeEditor'>
- <?php
- if ( isset( $_REQUEST['save_theme'] ) ) {
- echo "<div class='updated'><p>" . __( "Theme Saved. To apply the theme to a slideshow, edit the slideshow and select this theme from the theme dropdown menu.", "metasliderpro" ) . "</p></div>";
- }
- if ( $sliders = $this->get_sliders_for_preview() ) {
- echo "<form style='position: absolute; right: 20px; top: 27px;' accept-charset='UTF-8' action='?page=metaslider-theme-editor' method='post'>";
- echo "<input type='hidden' name='theme_slug' value='{$this->theme_slug}' />";
- echo "<select name='slider_id'>";
- foreach ( $sliders as $slider ) {
- $selected = $slider['id'] == $this->slider_id ? 'selected=selected' : '';
- echo "<option value='{$slider['id']}' {$selected}>{$slider['title']}</option>";
- }
- echo "</select>";
- echo "<input type='submit' class='button button-secondary' value='" . __( "Switch Preview Slider", "metasliderpro" ) . "' /></form>";
- }
- ?>
- <form accept-charset='UTF-8' action='?page=metaslider-theme-editor' method='post'>
- <h3 class="nav-tab-wrapper">
- <?php
- if ( $this->themes_available() ) {
- foreach ( $this->get_themes() as $slug => $theme ) {
- if ( $this->theme_slug == $slug ) {
- echo "<div class='nav-tab nav-tab-active'><input type='text' name='theme[title]' value='" . $theme['title'] . "' onfocus='this.style.width = ((this.value.length + 1) * 9) + \"px\"' /></div>";
- } else {
- echo "<a href='?page=metaslider-theme-editor&theme_slug={$slug}' class='nav-tab'>{$theme['title']}</a>";
- }
- }
- }
- ?>
- <a href="?page=metaslider-theme-editor&add=true" id="create_new_tab" class="nav-tab">+</a>
- </h3>
- <?php if ( !$this->theme_slug ) {
- // bail out if we have no themes
- return;
- } ?>
- <div class='theme_editor_left'>
- <input type='hidden' name='theme_slug' value='<?php echo $this->theme_slug ?>' />
- <input type='hidden' name='slider_id' value='<?php echo $this->slider_id ?>' />
- <table class='widefat settings'>
- <thead>
- <tr>
- <th width='40%'><?php _e( "Theme Settings", 'metasliderpro' ) ?></th>
- <th><input type='submit' name='save_theme' value='<?php _e( "Save", "metasliderpro" ) ?>' class='alignright button button-primary' /></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td colspan='2' class='highlight'>
- <?php _e( "Slideshow", 'metasliderpro' ) ?>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Outer Border Radius", 'metasliderpro' ) ?></td>
- <td>
- <input class='number' type='number' min='0' max='50' id='theme_outer_border_radius' name='theme[outer_border_radius]' value='<?php echo $this->get_setting( 'outer_border_radius' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span>
- </td>
- </tr>
- <tr>
- <td><?php _e( "CSS3 Shadow", 'metasliderpro' ) ?><br />
- <small><i><?php _e( "Note: Not compatible with 'thumbnail' navigation type", 'metasliderpro' ) ?></i></small>
- </td>
- <td>
- <select id='shadow' name='theme[shadow]'>
- <option value='none' <?php if ( $this->get_setting( 'shadow' ) == 'none' ) echo 'selected=selected'?>><?php _e( "None", "metasliderpro" ) ?></option>
- <option value='effect0' <?php if ( $this->get_setting( 'shadow' ) == 'effect0' ) echo 'selected=selected'?>><?php _e( "Default", "metasliderpro" ) ?></option>
- <option value='effect1' <?php if ( $this->get_setting( 'shadow' ) == 'effect1' ) echo 'selected=selected'?>><?php _e( "Bottom", "metasliderpro" ) ?></option>
- <option value='effect2' <?php if ( $this->get_setting( 'shadow' ) == 'effect2' ) echo 'selected=selected'?>><?php _e( "Page Curl", "metasliderpro" ) ?></option>
- <option value='effect3' <?php if ( $this->get_setting( 'shadow' ) == 'effect3' ) echo 'selected=selected'?>><?php _e( "Bottom Curve", "metasliderpro" ) ?></option>
- <option value='effect4' <?php if ( $this->get_setting( 'shadow' ) == 'effect4' ) echo 'selected=selected'?>><?php _e( "Top and Bottom Curve", "metasliderpro" ) ?></option>
- <option value='effect5' <?php if ( $this->get_setting( 'shadow' ) == 'effect5' ) echo 'selected=selected'?>><?php _e( "Sides", "metasliderpro" ) ?></option>
- </select><br />
- </td>
- </tr>
- <tr>
- <td colspan='2' class='highlight'>
- <?php _e( "Caption", 'metasliderpro' ) ?>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Enable Custom Caption", 'metasliderpro' ) ?></td>
- <td>
- <input type='checkbox' id='enable_custom_caption' name='theme[enable_custom_caption]' <?php if ( $this->get_setting( 'enable_custom_caption' ) == 'enabled' ) echo 'checked=checked'?> />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Position", 'metasliderpro' ) ?></td>
- <td>
- <select id='caption_position' name='theme[caption_position]'>
- <option value='bottomLeft' <?php if ( $this->get_setting( 'caption_position' ) == 'bottomLeft' ) echo 'selected=selected'?>><?php _e( "Bottom Left", 'metasliderpro' ) ?></option>
- <option value='bottomRight' <?php if ( $this->get_setting( 'caption_position' ) == 'bottomRight' ) echo 'selected=selected'?>><?php _e( "Bottom Right", 'metasliderpro' ) ?></option>
- <option value='topLeft' <?php if ( $this->get_setting( 'caption_position' ) == 'topLeft' ) echo 'selected=selected'?>><?php _e( "Top Left", 'metasliderpro' ) ?></option>
- <option value='topRight' <?php if ( $this->get_setting( 'caption_position' ) == 'topRight' ) echo 'selected=selected'?>><?php _e( "Top Right", 'metasliderpro' ) ?></option>
- <option value='underneath' <?php if ( $this->get_setting( 'caption_position' ) == 'underneath' ) echo 'selected=selected'?>><?php _e( "Underneath", 'metasliderpro' ) ?></option>
- </select>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Width", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='100' id='theme_caption_width' name='theme[caption_width]' value='<?php echo $this->get_setting( 'caption_width' ); ?>' /><span class='after'>%</span></td>
- </tr>
- <tr>
- <td><?php _e( "Border Radius", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='100' id='theme_caption_border_radius' name='theme[caption_border_radius]' value='<?php echo $this->get_setting( 'caption_border_radius' ); ?>' /><span class='after'>px</span></td>
- </tr>
- <tr>
- <td><?php _e( "Text Color", 'metasliderpro' ) ?></td>
- <td>
- <input type='text' class='colorpicker' id='colourpicker-caption-text-colour' name='theme[caption_text_colour]' value='<?php echo $this->get_setting( 'caption_text_colour' ); ?>' />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Text Align", 'metasliderpro' ) ?></td>
- <td>
- <select id='caption_align' name='theme[caption_align]'>
- <option value='left' <?php if ( $this->get_setting( 'caption_align' ) == 'left' ) echo 'selected=selected'?>><?php _e( "Left", 'metasliderpro' ) ?></option>
- <option value='center' <?php if ( $this->get_setting( 'caption_align' ) == 'center' ) echo 'selected=selected'?>><?php _e( "Center", 'metasliderpro' ) ?></option>
- <option value='right' <?php if ( $this->get_setting( 'caption_align' ) == 'right' ) echo 'selected=selected'?>><?php _e( "Right", 'metasliderpro' ) ?></option>
- </select>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Background Color", 'metasliderpro' ) ?></td>
- <td>
- <input type='text' class='colorpicker' id='colourpicker-caption-background-colour' name='theme[caption_background_colour]' value='<?php echo $this->get_setting( 'caption_background_colour' ) ?>' />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Vertical Margin", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='500' id='theme_caption_vertical_margin' name='theme[caption_vertical_margin]' value='<?php echo $this->get_setting( 'caption_vertical_margin' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- <tr>
- <td><?php _e( "Horizontal Margin", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='500' id='theme_caption_horizontal_margin' name='theme[caption_horizontal_margin]' value='<?php echo $this->get_setting( 'caption_horizontal_margin' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- <tr>
- <td colspan='2' class='highlight'>
- <?php _e( "Arrows", 'metasliderpro' ) ?>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Enable Custom Arrows", 'metasliderpro' ) ?></td>
- <td>
- <input type='checkbox' id='enable_custom_arrows' name='theme[enable_custom_arrows]' <?php if ( $this->get_setting( 'enable_custom_arrows' ) == 'enabled' ) echo 'checked=checked'?> />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Built In Styles", 'metasliderpro' ) ?></td>
- <td>
- <select id='arrow_style' name='theme[arrow_type]'><?php echo $arrow_style ?></select>
- <select id='arrow_colour' name='theme[arrow_colour]'><?php echo $arrow_colour ?></select>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Custom Prev Arrow", 'metasliderpro' ) ?></td>
- <td>
- <?php
- $custom_prev_arrow = $this->get_setting( 'custom_prev_arrow' );
- if ( $custom_prev_arrow > 0 ) {
- $url = wp_get_attachment_image_src( $custom_prev_arrow , 'full' );
- echo "<button id='open_media_manager_prev' style='display: none;'>" . __( "Select", 'metasliderpro' ) . "</button>";
- echo "<button id='remove_custom_prev_arrow'>" . __( "Remove", 'metasliderpro' ) . "</button>";
- echo "<div id='custom_prev_arrow'><img src='{$url[0]}' width='{$url[1]}' height='{$url[2]}' /></div>";
- echo "<input type='hidden' id='custom_prev_arrow_input' name='theme[custom_prev_arrow]' value='{$custom_prev_arrow}'>";
- } else {
- echo "<button id='open_media_manager_prev'>" . __( "Select", 'metasliderpro' ) . "</button>";
- echo "<button id='remove_custom_prev_arrow' style='display: none;'>" . __( "Remove", 'metasliderpro' ) . "</button>";
- echo "<div id='custom_prev_arrow'></div>";
- echo "<input type='hidden' id='custom_prev_arrow_input' name='theme[custom_prev_arrow]' value='0'>";
- }
- ?>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Custom Next Arrow", 'metasliderpro' ) ?></td>
- <td>
- <?php
- $custom_next_arrow = $this->get_setting( 'custom_next_arrow' );
- if ( $custom_next_arrow > 0 ) {
- $url = wp_get_attachment_image_src( $custom_next_arrow , 'full' );
- echo "<button id='open_media_manager_next' style='display: none;'>" . __( "Select", 'metasliderpro' ) . "</button>";
- echo "<button id='remove_custom_next_arrow'>" . __( "Remove", 'metasliderpro' ) . "</button>";
- echo "<div id='custom_next_arrow'><img src='{$url[0]}' width='{$url[1]}' height='{$url[2]}' /></div>";
- echo "<input type='hidden' id='custom_next_arrow_input' name='theme[custom_next_arrow]' value='{$custom_next_arrow}'>";
- } else {
- echo "<button id='open_media_manager_next'>" . __( "Select", 'metasliderpro' ) . "</button>";
- echo "<button id='remove_custom_next_arrow' style='display: none;'>" . __( "Remove", 'metasliderpro' ) . "</button>";
- echo "<div id='custom_next_arrow'></div>";
- echo "<input type='hidden' id='custom_next_arrow_input' name='theme[custom_next_arrow]' value='0'>";
- }
- ?>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Opacity", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='100' step='1' id='theme_arrow_opacity' name='theme[arrow_opacity]' value='<?php echo $this->get_setting( 'arrow_opacity' ); ?>' /><span class='after'>%</span></td>
- </tr>
- <tr>
- <td><?php _e( "Distance from edge", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='-50' max='50' id='theme_arrow_indent' name='theme[arrow_indent]' value='<?php echo $this->get_setting( 'arrow_indent' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- <tr>
- <td><?php _e( "Always show", 'metasliderpro' ) ?></td>
- <td>
- <input type='checkbox' id='arrows_always_show' name='theme[arrows_always_show]' <?php if ( $this->get_setting( 'arrows_always_show' ) == 'enabled' ) echo 'checked=checked'?> />
- </td>
- </tr>
- <tr>
- <tr>
- <td colspan='2' class='highlight'>
- <?php _e( "Navigation", 'metasliderpro' ) ?>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Enable Custom Navigation", 'metasliderpro' ) ?></td>
- <td>
- <input type='checkbox' id='enable_custom_navigation' name='theme[enable_custom_navigation]' <?php if ( $this->get_setting( 'enable_custom_navigation' ) == 'enabled' ) echo 'checked=checked'?> />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Position", 'metasliderpro' ) ?></td>
- <td>
- <select id='nav_position' name='theme[nav_position]'>
- <option value='default' <?php if ( $this->get_setting( 'nav_position' ) == 'default' ) echo 'selected=selected'?>><?php _e( "Default", 'metasliderpro' ) ?></option>
- <option value='topLeft' <?php if ( $this->get_setting( 'nav_position' ) == 'topLeft' ) echo 'selected=selected'?>><?php _e( "Top Left", 'metasliderpro' ) ?></option>
- <option value='topCenter' <?php if ( $this->get_setting( 'nav_position' ) == 'topCenter' ) echo 'selected=selected'?>><?php _e( "Top Center", 'metasliderpro' ) ?></option>
- <option value='topRight' <?php if ( $this->get_setting( 'nav_position' ) == 'topRight' ) echo 'selected=selected'?>><?php _e( "Top Right", 'metasliderpro' ) ?></option>
- <option value='bottomLeft' <?php if ( $this->get_setting( 'nav_position' ) == 'bottomLeft' ) echo 'selected=selected'?>><?php _e( "Bottom Left", 'metasliderpro' ) ?></option>
- <option value='bottomCenter' <?php if ( $this->get_setting( 'nav_position' ) == 'bottomCenter' ) echo 'selected=selected'?>><?php _e( "Bottom Center", 'metasliderpro' ) ?></option>
- <option value='bottomRight' <?php if ( $this->get_setting( 'nav_position' ) == 'bottomRight' ) echo 'selected=selected'?>><?php _e( "Bottom Right", 'metasliderpro' ) ?></option>
- </select>
- </td>
- </tr>
- <tr>
- <td><?php _e( "Vertical Margin", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='500' id='theme_nav_vertical_margin' name='theme[nav_vertical_margin]' value='<?php echo $this->get_setting( 'nav_vertical_margin' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- <tr>
- <td><?php _e( "Horizontal Margin", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='500' id='theme_nav_horizontal_margin' name='theme[nav_horizontal_margin]' value='<?php echo $this->get_setting( 'nav_horizontal_margin' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- <tr>
- <td><?php _e( "Fill Color", 'metasliderpro' ) ?></td>
- <td>
- <input type='text' class='colorpicker' id='colourpicker-fill-start' name='theme[dot_fill_colour_start]' value='<?php echo $this->get_setting( 'dot_fill_colour_start' ); ?>' />
- <input type='text' class='colorpicker' id='colourpicker-fill-end' name='theme[dot_fill_colour_end]' value='<?php echo $this->get_setting( 'dot_fill_colour_end' ); ?>' />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Fill Color (Active)", 'metasliderpro' ) ?></td>
- <td>
- <input type='text' class='colorpicker' id='colourpicker-active-fill-start' name='theme[active_dot_fill_colour_start]' value='<?php echo $this->get_setting( 'active_dot_fill_colour_start' ); ?>' />
- <input type='text' class='colorpicker' id='colourpicker-active-fill-end' name='theme[active_dot_fill_colour_end]' value='<?php echo $this->get_setting( 'active_dot_fill_colour_end' ); ?>' />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Border Color", 'metasliderpro' ) ?></td>
- <td>
- <input type='text' class='colorpicker' id='colourpicker-border-colour' name='theme[dot_border_colour]' value='<?php echo $this->get_setting( 'dot_border_colour' ); ?>' />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Border Color (Active)", 'metasliderpro' ) ?></td>
- <td>
- <input type='text' class='colorpicker' id='colourpicker-active-border-colour' name='theme[active_dot_border_colour]' value='<?php echo $this->get_setting( 'active_dot_border_colour' ); ?>' />
- </td>
- </tr>
- <tr>
- <td><?php _e( "Size", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='50' id='theme_dot_size' name='theme[dot_size]' value='<?php echo $this->get_setting( 'dot_size' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- <tr>
- <td><?php _e( "Spacing", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='50' id='theme_dot_spacing' name='theme[dot_spacing]' value='<?php echo $this->get_setting( 'dot_spacing' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- <tr>
- <td><?php _e( "Border Width", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='50' id='theme_dot_border_width' name='theme[dot_border_width]' value='<?php echo $this->get_setting( 'dot_border_width' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- <tr>
- <td><?php _e( "Border Radius", 'metasliderpro' ) ?></td>
- <td><input class='number' type='number' min='0' max='50' id='theme_dot_border_radius' name='theme[dot_border_radius]' value='<?php echo $this->get_setting( 'dot_border_radius' ); ?>' /><span class='after'><?php _e( "px", 'metasliderpro' ) ?></span></td>
- </tr>
- </tbody>
- </table>
- <input type='submit' class='confirm button button-secondary' name='delete_theme' value='<?php _e("Delete Theme", "metasliderpro"); ?>' />
- </div>
- <div class='theme_editor_right'>
- <div style='width: 90%'>
- <?php echo do_shortcode( "[metaslider id=" . $this->slider_id . "]" ) ?>
- </div>
- </div>
- </form>
- </div>
- <?php
- }
- /**
- * The different arrow types are stored as a sprite, this function
- * returns an array containing the details required to position the
- * sprite correctly
- */
- public function get_arrows() {
- $arrows[1] = array( 'height' => 51, 'width' => 23, 'offset' => 0 );
- $arrows[2] = array( 'height' => 39, 'width' => 22, 'offset' => 54 );
- $arrows[3] = array( 'height' => 37, 'width' => 20, 'offset' => 95 );
- $arrows[4] = array( 'height' => 30, 'width' => 21, 'offset' => 135 );
- $arrows[5] = array( 'height' => 27, 'width' => 26, 'offset' => 167 );
- $arrows[6] = array( 'height' => 31, 'width' => 31, 'offset' => 194 );
- $arrows[7] = array( 'height' => 25, 'width' => 25, 'offset' => 226 );
- $arrows[8] = array( 'height' => 29, 'width' => 28, 'offset' => 251 );
- $arrows[9] = array( 'height' => 40, 'width' => 21, 'offset' => 282 );
- $arrows[10] = array( 'height' => 31, 'width' => 21, 'offset' => 325 );
- $arrows[11] = array( 'height' => 23, 'width' => 17, 'offset' => 362 );
- $arrows[12] = array( 'height' => 17, 'width' => 12, 'offset' => 391 );
- $arrows[13] = array( 'height' => 18, 'width' => 22, 'offset' => 411 );
- $arrows[14] = array( 'height' => 25, 'width' => 21, 'offset' => 429 );
- $arrows[15] = array( 'height' => 34, 'width' => 34, 'offset' => 459 );
- $arrows[16] = array( 'height' => 34, 'width' => 34, 'offset' => 498 );
- return $arrows;
- }
- /**
- *
- */
- private function get_selected_arrow() {
- $arrows = $this->get_arrows();
- $selected_arrow_type = $this->get_setting( 'arrow_type' );
- $arrow = $arrows[$selected_arrow_type];
- $url = plugins_url( 'assets/arrows/' , __FILE__ ) . $this->get_setting( 'arrow_colour' ) . ".png";
- $selected_arrow['prev'] = array(
- 'url' => $url,
- 'width' => $arrow['width'],
- 'height' => $arrow['height'],
- 'position' => "0 -" . intval( $arrow['offset'] ) . "px"
- );
- $selected_arrow['next'] = array(
- 'url' => $url,
- 'width' => $arrow['width'],
- 'height' => $arrow['height'],
- 'position' => "100% -" . intval( $arrow['offset'] ) . "px"
- );
- $custom_prev_arrow = $this->get_setting( 'custom_prev_arrow' );
- if ( $custom_prev_arrow > 0 ) {
- $img = wp_get_attachment_image_src( $custom_prev_arrow , 'full' );
- $selected_arrow['prev'] = array(
- 'url' => $img[0],
- 'width' => $img[1],
- 'height' => $img[2],
- 'position' => "0 0"
- );
- }
- $custom_next_arrow = $this->get_setting( 'custom_next_arrow' );
- if ( $custom_next_arrow > 0 ) {
- $img = wp_get_attachment_image_src( $custom_next_arrow , 'full' );
- $selected_arrow['next'] = array(
- 'url' => $img[0],
- 'width' => $img[1],
- 'height' => $img[2],
- 'position' => "0 0"
- );
- }
- return $selected_arrow;
- }
- /**
- * Return the CSS for the theme.
- */
- public function get_theme_css( $css, $settings, $id ) {
- $this->slider_id = $id;
- $this->slider_settings = get_post_meta( $id, 'ml-slider_settings', true );
- $theme_slug = $settings['theme'];
- // theme_slug is used for the preview in the back end. This causes the theme to load
- // even if the preview slideshow isn't set to use this theme
- if ( isset( $_REQUEST['theme_slug'] ) ) {
- $theme_slug = $_REQUEST['theme_slug'];
- }
- if ( substr( $theme_slug, 0, strlen( '_theme' ) ) !== '_theme' ) {
- return $css; // we're not using a custom theme
- }
- if ( !$this->load_theme( $theme_slug ) ) {
- return $css; // the theme doesn't exist (deleted maybe)
- }
- $arrow = $this->get_selected_arrow();
- switch ( $settings['type'] ) {
- case "coin":
- $theme_css = $this->get_coin_theme( $arrow );
- break;
- case "flex":
- $theme_css = $this->get_flex_theme( $arrow );
- break;
- case "nivo":
- $theme_css = $this->get_nivo_theme( $arrow );
- break;
- case "responsive":
- $theme_css = $this->get_responsive_theme( $arrow );
- break;
- }
- $theme_css = $this->tidy_css( $theme_css . $this->get_container_margin() );
- return $css . $theme_css;
- }
- /**
- * Properly indent the CSS for output.
- */
- private function tidy_css( $css ) {
- $selector = apply_filters( "metaslider_theme_editor_css_selector", $this->get_default_css_selector(), $this->slider_id );
- // remove all spaces
- $css = str_replace( " ", "", $css );
- // remove all line breaks
- $css = str_replace( "\n", "", $css );
- // remove all tabs
- $css = str_replace( "\t", "", $css );
- // add a blank line between each selector
- $css = str_replace( "}", "\n\t}\n", $css );
- // break each selector onto a new line
- $css = str_replace( "[metaslider]", "\n\t{$selector}", $css );
- // break each rule onto a new line
- $css = str_replace( ";", ";\n\t\t", $css );
- // break each set of rules onto a new line
- $css = str_replace( "{", "{\n\t\t", $css );
- // clean up blank lines
- $css = str_replace( "\t\t\n", "", $css );
- return "\n" . $css;
- }
- /**
- * @todo: detect themes that use #content and prepend selector
- */
- private function get_default_css_selector() {
- return ".metaslider-{$this->slider_id}";
- }
- /**
- * Work out the correct margin value to apply to the bottom of the slideshow
- */
- public function get_container_margin() {
- $position = $this->get_setting( 'nav_position' );
- if ( $position == 'default' ) {
- $margin = ( $this->get_setting( 'nav_vertical_margin' ) * 2 ) + $this->get_setting( 'dot_size' );
- return "[metaslider] {
- margin-bottom: {$margin}px;
- }";
- }
- }
- /**
- * Return CSS rules for the navigation positioning
- */
- public function get_nav_position_css( $important = false ) {
- $position = $this->get_setting( 'nav_position' );
- $navPosition['width'] = 'auto';
- $navPosition['top'] = 'auto';
- $navPosition['right'] = 'auto';
- $navPosition['bottom'] = 'auto';
- $navPosition['left'] = 'auto';
- $navPosition['position'] = 'absolute';
- if ( $position == 'topCenter' || $position == 'bottomCenter' || $position == 'default' ) {
- $navPosition['text-align'] = 'center';
- }
- if ( $position == 'topCenter' || $position == 'bottomCenter' ) {
- $navPosition['width'] = '100%';
- }
- if ( $position == 'topRight' || $position == 'topCenter' ) {
- $navPosition['top'] = 0;
- $navPosition['right'] = 0;
- }
- if ( $position == 'topLeft' ) {
- $navPosition['top'] = 0;
- $navPosition['left'] = 0;
- }
- if ( $position == 'bottomLeft' || $position == 'bottomCenter' ) {
- $navPosition['bottom'] = 0;
- $navPosition['left'] = 0;
- }
- if ( $position == 'bottomRight' ) {
- $navPosition['bottom'] = 0;
- $navPosition['right'] = 0;
- }
- if ( $position == 'default' ) {
- $navPosition['width'] = '100%';
- $navPosition['top'] = 'auto';
- $navPosition['right'] = 'auto';
- $navPosition['bottom'] = 'auto';
- $navPosition['left'] = 'auto';
- }
- $important = $important ? ' !important' : '';
- foreach ( $navPosition as $key => $value ) {
- $rules[] = $key . ": " . $value . $important . ";";
- }
- return implode( "\n ", $rules );
- }
- /**
- * Return the CSS required to apply the theme to nivo slider.
- *
- * @param array $settings slideshow settings
- * @param array $arrow arrow information
- * @return string theme CSS
- */
- private function get_nivo_theme( $arrow ) {
- $theme = "";
- if ( $this->get_setting( 'outer_border_radius' ) > 0 ) {
- $theme .= " [metaslider] .nivoSlider,
- [metaslider] .nivoSlider img {
- border-radius: {$this->get_setting( 'outer_border_radius' )}px;
- -webkit-border-radius: {$this->get_setting( 'outer_border_radius' )}px;
- -moz-border-radius: {$this->get_setting( 'outer_border_radius' )}px;
- }";
- }
- if ( $this->slider_settings['navigation'] != 'hidden' && $this->get_setting( 'enable_custom_navigation' ) == 'enabled' ) {
- $theme .= " [metaslider] .theme-default .nivo-controlNav a {
- padding: 0;
- box-shadow: none;
- border-style: solid;
- border-color: {$this->get_setting( 'dot_border_colour' )};
- border-radius: {$this->get_setting( 'dot_border_radius' )}px;
- -webkit-border-radius: {$this->get_setting( 'dot_border_radius' )}px;
- -moz-border-radius: {$this->get_setting( 'dot_border_radius' )}px;
- border-width: {$this->get_setting( 'dot_border_width' )}px;
- border: {$this->get_setting( 'dot_border_width' )}px solid {$this->get_setting( 'dot_border_colour' )};
- line-height: {$this->get_setting( 'dot_size' )}px;
- width: {$this->get_setting( 'dot_size' )}px;
- height: {$this->get_setting( 'dot_size' )}px;
- margin-left: {$this->get_setting( 'dot_spacing' )}px;
- margin-right: {$this->get_setting( 'dot_spacing' )}px;
- background: {$this->rgba_to_rgb( 'dot_fill_colour_start' )};
- background: {$this->get_setting( 'dot_fill_colour_start' )};
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from({$this->get_setting( 'dot_fill_colour_start' )}), to({$this->get_setting( 'dot_fill_colour_end' )}));
- background: -webkit-linear-gradient(top, {$this->get_setting( 'dot_fill_colour_start' )}, {$this->get_setting( 'dot_fill_colour_end' )});
- background: -moz-linear-gradient(top, {$this->get_setting( 'dot_fill_colour_start' )}, {$this->get_setting( 'dot_fill_colour_end' )});
- background: -ms-linear-gradient(top, {$this->get_setting( 'dot_fill_colour_start' )}, {$this->get_setting( 'dot_fill_colour_end' )});
- background: -o-linear-gradient(top, {$this->get_setting( 'dot_fill_colour_start' )}, {$this->get_setting( 'dot_fill_colour_end' )});
- background: linear-gradient(top, {$this->get_setting( 'dot_fill_colour_start' )}, {$this->get_setting( 'dot_fill_colour_end' )});
- }
- [metaslider] .theme-default .nivo-controlNav a.active {
- border: {$this->get_setting( 'dot_border_width' )}px solid {$this->get_setting( 'active_dot_border_colour' )};
- background: {$this->rgba_to_rgb( 'active_dot_fill_colour_start' )};
- background: {$this->get_setting( 'active_dot_fill_colour_start' )};
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from({$this->get_setting( 'active_dot_fill_colour_start' )}), to({$this->get_setting( 'active_dot_fill_colour_end' )}));
- background: -webkit-linear-gradient(top, {$this->get_setting( 'active_dot_fill_colour_start' )}, {$this->get_setting( 'active_dot_fill_colour_end' )});
- background: -moz-linear-gradient(top, {$this->get_setting( 'active_d…
Large files files are truncated, but you can click here to view the full file