Skip to content

Commit

Permalink
Customizer grid nv controls (#426)
Browse files Browse the repository at this point in the history 
* refactor: use neve controls and add new components

* chore: added HTML control

References #413 #409 #414

* setup basic templating engine for hfg.

* chore: setting and control cleanup

* chore: fix for partial

* chore: replaced more controls and partial refresh

* fix: not reverting to neve defaults when hfg disabled
  • Loading branch information
@selul @preda-bogdan
selul authored and preda-bogdan committed Mar 19, 2019
1 parent e609d1a commit 28c1802
Show file tree
Hide file tree
Showing 42 changed files with 983 additions and 607 deletions.
2 changes: 2 additions & 0 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
assets/js/*.min.js
assets/js/jquery.fitvids.js
26 changes: 26 additions & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
module.exports = {
root: true,
env: {
browser: true,
node: true
},
plugins: [
'html',
],
rules: {
"indent": ["error", "tab"],
"no-tabs": 0,
"space-in-parens": ["error", "always"],
"camelcase": [2,{"properties":"never"}],
},
"parserOptions":{
"parser": "babel-eslint",
"ecmaVersion": 2017,
"sourceType": "module",
"ecmaFeatures": {
"modules": true,
"experimentalObjectRestSpread": true
}
},
globals: {}
}
2 changes: 1 addition & 1 deletion assets/js/customizer-controls.min.js
View file

Large diffs are not rendered by default.

142 changes: 85 additions & 57 deletions header-footer-grid/Core/Builder/Abstract_Builder.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
namespace HFG\Core\Builder;

use HFG\Core\Components\Abstract_Component;
use HFG\Core\Customizer\Image_Radio_Control;
use HFG\Core\Customizer\Responsive_Setting;
use HFG\Core\Customizer\Responsive_Slider_Control;
use HFG\Core\Customizer\Select_Control;
use HFG\Core\Customizer\Customize_Setting;
use HFG\Core\Customizer\Settings_Manager;
use HFG\Core\Interfaces\Builder;
use HFG\Core\Interfaces\Component;
use HFG\Core\Settings;
use HFG\Traits\Core;
use Neve\Customizer\Controls\Radio_Image;
use Neve\Customizer\Controls\Range;
use WP_Customize_Manager;

/**
Expand All @@ -29,6 +29,7 @@
*/
abstract class Abstract_Builder implements Builder {
use Core;

/**
* Internal pointer for current device id.
*
Expand Down Expand Up @@ -128,6 +129,12 @@ abstract class Abstract_Builder implements Builder {
*/
protected $builder_components = array();

public static $settings_manager = null;

public function __construct() {
$this->init();
self::$settings_manager = new Settings_Manager();
}
/**
* Returns current builder id.
*
Expand All @@ -137,6 +144,8 @@ public static function get_current_builder() {
return self::$current_builder;
}

protected abstract function init();

/**
* Method to get protected properties for class.
*
Expand Down Expand Up @@ -177,9 +186,7 @@ protected function inline_builder_styles() {
);
}
}
$style .= $this->css_array_to_css( $style_array );

return $style;
return $style . $this->css_array_to_css( $style_array );
}

/**
Expand Down Expand Up @@ -310,13 +317,12 @@ protected function set_property( $key = '', $value = '' ) {
*
* @param WP_Customize_Manager $wp_customize The Customize Manager.
*/
protected function add_rows_controls( WP_Customize_Manager $wp_customize ) {
protected function add_rows_controls( $wp_customize ) {
$rows = $this->get_rows();
if ( empty( $rows ) ) {
return;
}

$settings = Settings::get_instance();
foreach ( $rows as $row_id => $row_label ) {
$partial_settings = array();
$wp_customize->add_section(
Expand All @@ -327,75 +333,97 @@ protected function add_rows_controls( WP_Customize_Manager $wp_customize ) {
)
);

$wp_customize->add_setting(
$this->control_id . '_' . $row_id, array(
'default' => '',
'transport' => 'postMessage',
)
);
$setting = new Customize_Setting( array(
'id' => $this->control_id . '_' . $row_id,
'transport' => 'postMessage',
'default' => '',
) );
self::$settings_manager->register( $setting );

$wp_customize->add_setting( $setting->id, $setting->setting_args() );

$responsive_setting = new Responsive_Setting( $this->control_id . '_' . $row_id . '_layout', 'layout-full-contained', false );
$partial_settings = array_merge( $partial_settings, $responsive_setting->get_settings_id_array() );
$setting = new Customize_Setting( array(
'id' => $this->control_id . '_' . $row_id . '_layout',
'transport' => 'postMessage',
'default' => 'layout-full-contained',
) );
$wp_customize->add_setting( $setting->id, $setting->setting_args() );
array_push( $partial_settings, $setting->id );
$wp_customize->add_control(
new Select_Control(
$wp_customize,
$this->control_id . '_' . $row_id . '_layout',
[
'responsive' => $responsive_setting,
'label' => __( 'Layout', 'hfg-module' ),
'section' => $this->control_id . '_' . $row_id,
'input_attrs' => array(
'placeholder' => __( 'Select layout type ...', 'hfg-module' ),
'multiselect' => false,
),
'choices' => array(
'layout-full-contained' => __( 'Full Width - Contained', 'hfg-module' ),
'layout-fullwidth' => __( 'Full Width', 'hfg-module' ),
'layout-contained' => __( 'Contained', 'hfg-module' ),
),
]
)
$this->control_id . '_' . $row_id . '_layout',
[
'label' => __( 'Layout', 'hfg-module' ),
'type' => 'select',
'section' => $this->control_id . '_' . $row_id,
'choices' => array(
'layout-full-contained' => __( 'Full Width - Contained', 'hfg-module' ),
'layout-fullwidth' => __( 'Full Width', 'hfg-module' ),
'layout-contained' => __( 'Contained', 'hfg-module' ),
),
]
);

$responsive_setting = new Responsive_Setting( $this->control_id . '_' . $row_id . '_height', 0, array(
'desktop',
'mobile'
$setting = new Customize_Setting( array(
'id' => $this->control_id . '_' . $row_id . '_height',
'default' => '{ "mobile": "0", "tablet": "0", "desktop": "0" }',
'transport' => 'postMessage',
) );
$partial_settings = array_merge( $partial_settings, $responsive_setting->get_settings_id_array() );
$wp_customize->add_setting( $setting->id, $setting->setting_args() );
array_push( $partial_settings, $setting->id );
$wp_customize->add_control(
new Responsive_Slider_Control(
new Range(
$wp_customize,
$this->control_id . '_' . $row_id . '_height',
[
'responsive' => $responsive_setting,
'label' => esc_html__( 'Row Height' ),
array(
'label' => esc_html__( 'Container width (px)', 'neve' ),
'section' => $this->control_id . '_' . $row_id,
'input_attrs' => array(
'min' => 0,
'max' => 300,
'step' => 1,
'type' => 'range-value',
'media_query' => true,
'step' => 1,
'input_attr' => array(
'mobile' => array(
'min' => 0,
'max' => 350,
'default' => 0,
),
'tablet' => array(
'min' => 0,
'max' => 350,
'default' => 0,
),
'desktop' => array(
'min' => 0,
'max' => 350,
'default' => 0,
),
),
]
'priority' => 25,
)
)
);

$responsive_setting = new Responsive_Setting( $this->control_id . '_' . $row_id . '_skin', 'light-mode', false );
$partial_settings = array_merge( $partial_settings, $responsive_setting->get_settings_id_array() );
$setting = new Customize_Setting( array(
'id' => $this->control_id . '_' . $row_id . '_skin',
'default' => 'light-mode',
'transport' => 'postMessage',
) );
$wp_customize->add_setting( $setting->id, $setting->setting_args() );
array_push( $partial_settings, $setting->id );
$wp_customize->add_control(
new Image_Radio_Control(
new Radio_Image(
$wp_customize,
$this->control_id . '_' . $row_id . '_skin',
[
'responsive' => $responsive_setting,
'label' => __( 'Skin Mode' ),
'section' => $this->control_id . '_' . $row_id,
'choices' => array(
'label' => __( 'Skin Mode', 'neve' ),
'section' => $this->control_id . '_' . $row_id,
'priority' => 10,
'choices' => array(
'light-mode' => array(
'image' => $settings->url . '/assets/images/customizer/text_mode_dark.svg',
'url' => Settings::get_instance()->url . '/assets/images/customizer/text_mode_dark.svg',
'name' => __( 'Light Mode' ),
),
'dark-mode' => array(
'image' => $settings->url . '/assets/images/customizer/text_mode_light.svg',
'url' => Settings::get_instance()->url . '/assets/images/customizer/text_mode_light.svg',
'name' => __( 'Dark Mode' ),
),
),
Expand Down
2 changes: 1 addition & 1 deletion header-footer-grid/Core/Builder/Footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class Footer extends Abstract_Builder {
* @since 1.0.0
* @access public
*/
public function __construct() {
public function init() {
$this->set_property( 'title', __( 'HFG Footer', 'hfg-module' ) );
$this->set_property( 'control_id', 'hfg_footer_layout' );
$this->set_property( 'panel', 'hfg_footer' );
Expand Down
27 changes: 2 additions & 25 deletions header-footer-grid/Core/Builder/Header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ class Header extends Abstract_Builder {
const BUILDER_NAME = 'header';

/**
* Header constructor.
* Header init.
*
* @since 1.0.0
* @access public
*/
public function __construct() {
public function init() {
$this->set_property( 'title', __( 'HFG Header', 'hfg-module' ) );
$this->set_property( 'control_id', 'hfg_header_layout' );
$this->set_property( 'panel', 'hfg_header' );
Expand Down Expand Up @@ -83,7 +83,6 @@ public function render_row( $device_id, $row_id, $row_details ) {
}

Main::get_instance()->load( 'row-wrapper', $name );

}

/**
Expand All @@ -101,26 +100,4 @@ protected function get_rows() {
'sidebar' => 'Menu Sidebar',
];
}

/**
* Utility function to sort items by x.
*
* @since 1.0.0
* @access private
*
* @param array $items List of items.
*
* @return array
*/
private function _sort_items_by_position( $items = array() ) {
$ordered_items = array();

foreach ( $items as $key => $item ) {
$ordered_items[ $key ] = $item['x'];
}

array_multisort( $ordered_items, SORT_ASC, $items );

return $items;
}
}
40 changes: 21 additions & 19 deletions header-footer-grid/Core/Components/Abstract_Component.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

namespace HFG\Core\Components;

use HFG\Core\Customizer\Customize_Setting;
use HFG\Core\Customizer\Heading_Control;
use HFG\Core\Customizer\Select_Control;
use HFG\Core\Interfaces\Component;
Expand Down Expand Up @@ -180,26 +181,27 @@ public function customize_register( WP_Customize_Manager $wp_customize ) {
'transport' => 'postMessage',
)
);

$setting = new Customize_Setting( array(
'id' => $this->id . '_merge',
'transport' => 'postMessage',
'default' => 'no',
) );
$wp_customize->add_setting( $setting->id, $setting->setting_args() );
//array_push( $partial_settings, $setting->id );
$wp_customize->add_control(
new Select_Control(
$wp_customize,
$this->id . '_merge',
[
'label' => __( 'Merge Component', 'hfg-module' ),
'description' => esc_html__( 'If you choose to merge this item, the alignment setting will inherit from the item you are merging.', 'hfg-module' ),
'priority' => 801,
'section' => $this->section,
'input_attrs' => array(
'placeholder' => __( 'Select merge type ...', 'hfg-module' ),
'multiselect' => false,
),
'choices' => array(
'no' => __( 'No', 'hfg-module' ),
'right' => __( 'Merge Right', 'hfg-module' ),
'left' => __( 'Merge Left', 'hfg-module' ),
),
]
)
$this->id . '_merge',
[
'label' => __( 'Layout', 'hfg-module' ),
'type' => 'select',
'priority' => 801,
'section' => $this->section,
'choices' => array(
'no' => __( 'No', 'hfg-module' ),
'right' => __( 'Merge Right', 'hfg-module' ),
'left' => __( 'Merge Left', 'hfg-module' ),
),
]
);

return $wp_customize;
Expand Down
1 change: 0 additions & 1 deletion header-footer-grid/Core/Components/Abstract_FooterWidget.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ public function customize_register( WP_Customize_Manager $wp_customize ) {
return parent::customize_register( $wp_customize );
}


/**
* The render method.
*
Expand Down
Loading

0 comments on commit 28c1802

Please sign in to comment.