Merge pull request #80 from Codeinwp/development

Reorganize customize layout

functions.php

@@ -84,7 +84,7 @@ function oblique_setup() {
 			'default-color' => '1c1c1c',
 		) ) );
 
-		require_once( get_template_directory() . '/inc/customizer-info/class/class-singleton-customizer-info-section.php' );
+		require_once( trailingslashit( get_template_directory() ) . 'inc/class/class-customizer-theme-info-control/class-customizer-theme-info-root.php' );
 	}
 endif; // oblique_setup
 add_action( 'after_setup_theme', 'oblique_setup' );

inc/class/class-customizer-theme-info-control/class-customizer-theme-info-control.php

@@ -0,0 +1,113 @@
+<?php
+/**
+ *  Oblique Upsell Theme Info Class
+ *
+ * @package Oblique
+ */
+
+if ( ! class_exists( 'Oblique_Control_Upsell_Theme_Info' ) ) :
+
+	/**
+	 * Oblique_Control_Upsell_Theme_Info class.
+	 */
+	class Oblique_Control_Upsell_Theme_Info extends WP_Customize_Control {
+
+		/**
+		 * Control type
+		 *
+		 * @var string control type
+		 */
+		public $type = 'themeisle-control-upsell';
+
+		/**
+		 * Button text
+		 *
+		 * @var string button text
+		 */
+		public $button_text = '';
+
+		/**
+		 * Button link
+		 *
+		 * @var string button url
+		 */
+		public $button_url = '#';
+
+		/**
+		 * List of features
+		 *
+		 * @var array theme features / options
+		 */
+		public $options = array();
+
+		/**
+		 * List of explanations
+		 *
+		 * @var array additional info
+		 */
+		public $explained_features = array();
+
+		/**
+		 * Oblique_Control_Upsell_Theme_Info constructor.
+		 *
+		 * @param WP_Customize_Manager $manager the customize manager class.
+		 * @param string               $id id.
+		 * @param array                $args customizer manager parameters.
+		 */
+		public function __construct( WP_Customize_Manager $manager, $id, array $args ) {
+			$this->button_text;
+			$manager->register_control_type( 'Oblique_Control_Upsell_Theme_Info' );
+			parent::__construct( $manager, $id, $args );
+
+		}
+		/**
+		 * Enqueue resources for the control
+		 */
+		public function enqueue() {
+			wp_enqueue_style( 'themeisle-upsell-style', get_template_directory_uri() . '/inc/class/class-customizer-theme-info-control/css/style.css', '1.0.0' );
+		}
+
+		/**
+		 * Json conversion
+		 */
+		public function to_json() {
+			parent::to_json();
+			$this->json['button_text']  = $this->button_text;
+			$this->json['button_url']   = $this->button_url;
+			$this->json['options']      = $this->options;
+			$this->json['explained_features'] = $this->explained_features;
+		}
+
+		/**
+		 * Control content
+		 */
+		public function content_template() {
+	?>
+			<div class="themeisle-upsell">
+				<# if ( data.options ) { #>
+					<ul class="themeisle-upsell-features">
+						<# for (option in data.options) { #>
+							<li><span class="upsell-pro-label"></span>{{ data.options[option] }}
+							</li>
+							<# } #>
+					</ul>
+					<# } #>
+
+						<# if ( data.button_text && data.button_url ) { #>
+							<a target="_blank" href="{{ data.button_url }}" class="button button-primary" target="_blank">{{
+								data.button_text }}</a>
+							<# } #>
+
+								<# if ( data.explained_features.length > 0 ) { #>
+									<hr />
+
+									<ul class="themeisle-upsell-feature-list">
+										<# for (requirement in data.explained_features) { #>
+											<li>* {{{ data.explained_features[requirement] }}}</li>
+											<# } #>
+									</ul>
+									<# } #>
+			</div>
+		<?php }
+	}
+endif;

inc/class/class-customizer-theme-info-control/class-customizer-theme-info-root.php

@@ -0,0 +1,100 @@
+<?php
+/**
+ * Singleton class file.
+ *
+ * @package oblique
+ */
+
+/**
+ * Singleton class for handling the theme's customizer integration.
+ *
+ * @since  1.0.0
+ * @access public
+ */
+final class Oblique_Customizer_Upsell {
+
+	/**
+	 * Returns the instance.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 * @return object
+	 */
+	public static function get_instance() {
+
+		static $instance = null;
+
+		if ( is_null( $instance ) ) {
+			$instance = new self;
+			$instance->setup_actions();
+		}
+
+		return $instance;
+	}
+
+	/**
+	 * Constructor method.
+	 *
+	 * @since  1.0.0
+	 * @access private
+	 * @return void
+	 */
+	private function __construct() {}
+
+	/**
+	 * Sets up initial actions.
+	 *
+	 * @since  1.0.0
+	 * @access private
+	 * @return void
+	 */
+	private function setup_actions() {
+
+		// Register panels, sections, settings, controls, and partials.
+		add_action( 'customize_register', array( $this, 'sections' ) );
+
+		// Register scripts and styles for the controls.
+		add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_control_scripts' ), 0 );
+	}
+
+	/**
+	 * Sets up the customizer sections.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 * @param  object $manager Customizer manager.
+	 * @return void
+	 */
+	public function sections( $manager ) {
+
+		// Load custom sections.
+		require_once( trailingslashit( get_template_directory() ) . 'inc/class/class-customizer-theme-info-control/class-oblique-customize-theme-info-main.php' );
+
+		// Register custom section types.
+		$manager->register_section_type( 'Oblique_Customizer_Theme_Info_Main' );
+
+		// Main Documentation Link In Customizer Root.
+		$manager->add_section( new Oblique_Customizer_Theme_Info_Main( $manager, 'oblique-theme-info', array(
+			'theme_info_title' => __( 'Oblique', 'oblique' ),
+			'label_url'        => esc_url( 'http://docs.themeisle.com/article/294-oblique-documentation' ),
+			'label_text'       => __( 'Documentation', 'oblique' ),
+		) ) );
+	}
+
+	/**
+	 * Loads theme customizer CSS.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 * @return void
+	 */
+	public function enqueue_control_scripts() {
+
+		wp_enqueue_script( 'oblique-upsell-js', trailingslashit( get_template_directory_uri() ) . 'inc/class/class-customizer-theme-info-control/js/oblique-upsell-customize-controls.js', array( 'customize-controls' ) );
+
+		wp_enqueue_style( 'oblique-theme-info-style', trailingslashit( get_template_directory_uri() ) . 'inc/class/class-customizer-theme-info-control/css/style.css' );
+
+	}
+}
+
+Oblique_Customizer_Upsell::get_instance();

inc/class/class-customizer-theme-info-control/class-oblique-customize-theme-info-main.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * The customizer upsell.
+ *
+ * Pro customizer section.
+ *
+ * @package WordPress
+ * @subpackage Oblique
+ */
+
+/**
+ * Class Oblique_Customizer_Theme_Info_Main
+ *
+ * @since  1.0.0
+ * @access public
+ */
+class Oblique_Customizer_Theme_Info_Main extends WP_Customize_Section {
+
+	/**
+	 * The type of customize section being rendered.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 * @var    string
+	 */
+	public $type = 'oblique-theme-info';
+
+	/**
+	 * Upsell title to output.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 * @var    string
+	 */
+	public $theme_info_title = '';
+
+	/**
+	 * Label text to output.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 * @var    string
+	 */
+	public $label_text = '';
+
+	/**
+	 * Label URL.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 * @var    string
+	 */
+	public $label_url = '';
+
+	/**
+	 * Add custom parameters to pass to the JS via JSON.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 */
+	public function json() {
+		$json = parent::json();
+
+		$json['theme_info_title'] = $this->theme_info_title;
+		$json['label_text']   = $this->label_text;
+		$json['label_url']    = esc_url( $this->label_url );
+
+		return $json;
+	}
+
+	/**
+	 * Outputs the Underscore.js template.
+	 *
+	 * @since  1.0.0
+	 * @access public
+	 * @return void
+	 */
+	protected function render_template() {
+		?>
+
+		<li id="accordion-section-{{ data.id }}"
+		    class="accordion-section control-section control-section-{{ data.type }} cannot-expand">
+			<h3 class="accordion-section-title">
+				{{data.theme_info_title}}
+				<# if ( data.label_text && data.label_url ) { #>
+					<a class="button button-secondary alignright" href="{{data.label_url}}" target="_blank">
+						{{data.label_text}}
+					</a>
+					<# } #>
+			</h3>
+		</li>
+		<?php
+	}
+}

inc/class/class-customizer-theme-info-control/css/style.css

@@ -0,0 +1,74 @@
+.themeisle-upsell {
+	padding: 21px;
+	border-radius: 3px;
+	background: #fff;
+}
+
+.themeisle-upsell .upsell-pro-label {
+	margin-right: 10px;
+	padding: 2px 6px 2px 7px;
+	border-radius: 3px;
+	color: #fff;
+	background: #a7a7a7;
+	font-size: 12px;
+	font-weight: bold;
+	letter-spacing: 0.1px;
+	text-transform: uppercase;
+}
+
+.themeisle-upsell-features li {
+	margin-bottom: 23px;
+	font-size: 14px;
+}
+
+.themeisle-upsell-features li:last-child {
+	margin-bottom: 28px;
+}
+
+.themeisle-upsell .button {
+	width: 100%;
+	margin-right: 21px;
+	text-align: center;
+	letter-spacing: 0.2px;
+}
+
+.themeisle-upsell hr {
+	margin-top: 22px;
+	margin-bottom: 16px;
+}
+
+.themeisle-upsell-feature-list li:before {
+	line-height: 37px;
+}
+
+.themeisle-upsell-feature-list li {
+	margin-bottom: 6px;
+	font-size: 14px;
+	font-style: italic;
+	line-height: 22px;
+}
+
+.themeisle-upsell-feature-list li:last-child {
+	margin-bottom: 0;
+}
+
+.frontpage-sections-upsell {
+	padding: 10px 10px 11px 14px;
+}
+
+.themeisle-boxed-section {
+	margin: 12px;
+}
+
+#customize-controls #accordion-section-oblique_theme_info_main_section.control-section .accordion-section-title:hover {
+	color: #fff;
+	background-color: #0073aa;
+}
+
+#customize-controls #accordion-section-oblique_theme_info_main_section.control-section .accordion-section-title:hover:after {
+	color: #fff;
+}
+
+.upsell-pro-label:before {
+	content: "pro";
+}