Skip to content

Commit

Permalink
Merge pull request #213 from linchpin/issue/52
Browse files Browse the repository at this point in the history 
#52 Adding the ability to center 1 column templates on the backend an…
  • Loading branch information
@aaronware
aaronware committed May 9, 2018
2 parents d347b7b + d79e91c commit 9d3247a
Show file tree
Hide file tree
Showing 16 changed files with 329 additions and 85 deletions.
4 changes: 2 additions & 2 deletions .codeclimate.yml
View file
Expand Up @@ -22,7 +22,7 @@ engines:
csslint:
enabled: false
duplication:
enabled: true
enabled: false
config:
languages:
- javascript
Expand All @@ -33,7 +33,7 @@ engines:
fixme:
enabled: true
markdownlint:
enabled: true
enabled: false
phpcodesniffer:
enabled: true
config:
Expand Down
78 changes: 55 additions & 23 deletions admin/section-blocks.php
View file
Expand Up @@ -11,6 +11,10 @@
if ( ! function_exists( 'add_action' ) ) {
exit;
}

$mesh_controls = new Mesh_Controls();
$block_settings = $mesh_controls->get_block_settings();

?>
<div class="mesh-row">
<?php
Expand All @@ -29,11 +33,13 @@

$offsets_available = 9;

$default_block_columns = 12 / $section_blocks;
$default_block_columns = $block_settings['max_columns'] / $section_blocks;

// Loop through the blocks needed for this template.
$block_increment = 0;

$remaining_columns = $block_settings['max_columns'];

while ( $block_increment < $section_blocks ) :

if ( empty( $blocks[ $block_increment ] ) ) {
Expand All @@ -46,15 +52,30 @@
* Get how wide our column is. If no width is defined fall back to the default for that template.
* If no blocks are defined fall back to a 12 column.
*/
if ( empty( $block_columns ) || 1 === $templates[ $selected_template ]['blocks'] ) {
if ( empty( $block_columns ) ) {
$block_columns = $default_block_columns;
}

if ( $block_columns > $remaining_columns ) {
$block_columns = $remaining_columns;
}

$block_classes = array(
'mesh-section-block',
'columns',
'mesh-columns-' . intval( $block_columns ),
);

$block_css_class = get_post_meta( $blocks[ $block_increment ]->ID, '_mesh_css_class', true );
$block_offset = (int) get_post_meta( $blocks[ $block_increment ]->ID, '_mesh_offset', true );
$block_offset = (int) get_post_meta( $blocks[ $block_increment ]->ID, '_mesh_offset', true );
$block_centered = (bool) get_post_meta( $blocks[ $block_increment ]->ID, '_mesh_centered', true );

if ( $block_centered && 1 === $section_blocks ) {
$block_classes[] = 'mesh-block-centered';
}

?>
<div class="mesh-section-block mesh-columns-<?php echo esc_attr( $block_columns ); ?> columns" data-mesh-block-id="<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>">
<div class="<?php echo esc_attr( implode( ' ', $block_classes ) ); ?>" data-mesh-block-id="<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>">
<div class="drop-target">
<div class="block" id="mesh-block-editor-<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>" data-mesh-block-id="<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>">
<div class="block-header">
Expand All @@ -66,26 +87,36 @@
$block_offset = 0;
}
?>
<div class="mesh-columns-12 mesh-block-options-toggle-container">
<span class="the-mover hndle ui-sortable-handle left mesh-hide-for-small"><span></span></span>
<div class="mesh-clean-edit left mesh-column-title-container">
<input id="<?php echo esc_attr( 'mesh-sections-' . $section->ID . '-' . $blocks[ $block_increment ]->ID . '-title' ); ?>" type="text" class="mesh-column-title mesh-clean-edit-element widefat left" name="mesh-sections[<?php echo esc_attr( $section->ID ); ?>][blocks][<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>][post_title]" value="<?php echo esc_attr( $blocks[ $block_increment ]->post_title ); ?>"/>
<span class="close-title-edit left"><?php esc_html_e( 'Done', 'mesh' ); ?></span>
<span class="handle-title mesh-section-title-text mesh-column-title-text"><?php echo esc_attr( $blocks[ $block_increment ]->post_title ); ?></span>
</div>
<div class="mesh-columns-12 mesh-block-options-toggle-container">
<span class="the-mover hndle ui-sortable-handle left mesh-hide-for-small"><span></span></span>
<div class="mesh-clean-edit left mesh-column-title-container">
<input id="<?php echo esc_attr( 'mesh-sections-' . $section->ID . '-' . $blocks[ $block_increment ]->ID . '-title' ); ?>" type="text" class="mesh-column-title mesh-clean-edit-element widefat left" name="mesh-sections[<?php echo esc_attr( $section->ID ); ?>][blocks][<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>][post_title]" value="<?php echo esc_attr( $blocks[ $block_increment ]->post_title ); ?>"/>
<span class="close-title-edit left"><?php esc_html_e( 'Done', 'mesh' ); ?></span>
<span class="handle-title mesh-section-title-text mesh-column-title-text"><?php echo esc_attr( $blocks[ $block_increment ]->post_title ); ?></span>
</div>

<a href="#" class="slide-toggle-element mesh-more-section-options right slide-toggle-meta-dropdown mesh-hide-for-small" data-toggle=".mesh-block-meta-dropdown-<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'More', 'mesh' ); ?></span></a>
</div>
</div>

<div class="mesh-columns-12 mesh-block-meta-dropdown mesh-block-meta-dropdown-<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?> hide">
<div class="left mesh-columns-12">
<?php mesh_block_controls( $blocks[ $block_increment ], $section_blocks ) ?>
</div>
</div>
<div class="mesh-columns-12 mesh-block-meta-dropdown mesh-block-meta-dropdown-<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?> hide">
<div class="left mesh-columns-12">
<?php mesh_block_controls( $blocks[ $block_increment ], $section_blocks ); ?>
</div>
</div>
</div>
</div>

<div class="block-content<?php if ( 4 !== $section_blocks && $block_offset ) { echo esc_attr( ' mesh-has-offset mesh-offset-' . $block_offset ); } ?>">
<?php
$block_content_classes = array(
'block-content',
'mesh-has-offset',
);

if ( 4 !== $section_blocks && $block_offset ) {
$block_content_classes[] = 'mesh-offset-' . $block_offset;
}
?>
<div class="<?php echo esc_attr( implode( ' ', $block_content_classes ) ); ?>">
<?php

$tiny_mce_options = array(
Expand Down Expand Up @@ -119,17 +150,18 @@

$revisions = wp_get_post_revisions( $blocks[ $block_increment ]->ID );

if ( ! empty( $revisions ) ) : ?>
if ( ! empty( $revisions ) ) :
?>
<div class="misc-pub-section misc-pub-revisions">
<?php esc_attr_e( 'Revisions: ', 'mesh' ); ?>
<a class="hide-if-no-js" href="<?php echo esc_url( get_edit_post_link( reset( $revisions )->ID ) ); ?>"><b><?php echo esc_html( number_format_i18n( count( $revisions ) ) ); ?></b> <span class="screen-reader-text"><?php esc_html_e( 'Browse revisions', 'mesh' ); ?></span></a>
</div>
<?php endif; ?>
<input type="hidden" class="column-width" name="mesh-sections[<?php echo esc_attr( $section->ID ); ?>][blocks][<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>][columns]" value="<?php echo esc_attr( $block_columns ); ?>"/>
<input type="hidden" class="block-menu-order" name="mesh-sections[<?php echo esc_attr( $section->ID ); ?>][blocks][<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>][menu_order]" value="<?php echo esc_attr( $blocks[ $block_increment ]->menu_order ); ?>"/>
</div>
</div>
</div>
<?php $block_increment++;
endwhile; ?>
<?php
$block_increment++;
endwhile;
?>
</div>
11 changes: 8 additions & 3 deletions admin/section-column-resize.php
View file
Expand Up @@ -14,6 +14,9 @@
exit;
}

$mesh_controls = new Mesh_Controls();
$block_settings = $mesh_controls->get_block_settings();

// If the template doesn't have any blocks make sure it has 1.
$section_blocks = intval( $templates[ $selected_template ]['blocks'] );

Expand All @@ -25,7 +28,7 @@

if ( $section_blocks > 1 ) {

$default_block_columns = 12 / $section_blocks; // @todo should 12 be filterable to create different grid sizes?
$default_block_columns = $block_settings['max_columns'] / $section_blocks;

$block_increment = 0;

Expand All @@ -37,7 +40,7 @@
// Get how wide our column is.
// If no width is defined fall back to the default for that template.
// If no blocks are defined fall back to a 12 column.
if ( empty( $block_columns ) || 1 === absint( $templates[ $selected_template ]['blocks'] ) ) {
if ( empty( $block_columns ) || 1 === $section_blocks ) {
$block_columns = $default_block_columns;
}

Expand All @@ -48,6 +51,8 @@
}

if ( $section_blocks > 1 && $section_blocks < 4 ) : ?>
<div class="wp-slider column-slider mesh-hide-for-small" data-mesh-blocks="<?php echo esc_attr( $section_blocks ); ?>" data-mesh-columns="<?php echo esc_attr( wp_json_encode( $block_sizes ) ); ?>"><span class="ui-slider-handle ui-state-default ui-corner-all fade-in-on-create hide" tabindex="0"></span></div>
<div class="wp-slider column-slider mesh-hide-for-small" data-mesh-blocks="<?php echo esc_attr( $section_blocks ); ?>" data-mesh-columns="<?php echo esc_attr( wp_json_encode( $block_sizes ) ); ?>">
<span class="ui-slider-handle ui-state-default ui-corner-all fade-in-on-create hide" tabindex="0"></span>
</div>
<?php
endif;
2 changes: 1 addition & 1 deletion admin/section-container.php
View file
Expand Up @@ -43,7 +43,7 @@
<option value="publish" <?php selected( $section->post_status, 'publish' ); ?>><?php esc_html_e( 'Published', 'mesh' ); ?></option>
</select>
<span class="close-title-edit right"><?php esc_html_e( 'Done', 'mesh' ); ?></span>
<span class="handle-title mesh-section-status-text"><?php echo esc_html( 'publish' === $section->post_status ? __( 'Status: Published', 'mesh' ) : __( 'Status: Draft', 'mesh' ) ); ?></span>
<span class="handle-title mesh-section-status-text"><?php echo esc_html( 'publish' === $section->post_status ? esc_html__( 'Status: Published', 'mesh' ) : esc_html__( 'Status: Draft', 'mesh' ) ); ?></span>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion assets/css/admin-mesh.css
View file

Large diffs are not rendered by default.

65 changes: 48 additions & 17 deletions assets/js/admin-mesh-blocks.js
View file
Expand Up @@ -36,12 +36,26 @@ mesh.blocks = function ($) {
.on('blur', '.mesh-clean-edit-element:not(select)', self.hide_field)
.on('click', '.close-title-edit', self.hide_field)
.on('click', '.slide-toggle-element', self.slide_toggle_element)
.on('change', '.mesh-column-offset', self.display_offset);
.on('change', '.mesh-column-offset', self.display_offset)
.on('change', 'input.mesh-section-centered', self.display_centered);

self.setup_resize_slider();
self.setup_resizing();
self.setup_sortable();
},

display_centered: function ( event ) {

var $tgt = $(this),
$section = $tgt.parents('.mesh-section-block'),
$center_class = 'mesh-block-centered';

if ( $tgt.is(':checked') ) {
$section.addClass( $center_class );
} else {
$section.removeClass( $center_class );
}
},

/**
* Setup sorting of blocks in the admin
*
Expand Down Expand Up @@ -73,7 +87,7 @@ mesh.blocks = function ($) {
$column_slider.fadeOut('fast');

$('.mesh-section-block:not(.ui-sortable-placeholder)', this).each(function () {
column_order.push($(this).attr('class'));
column_order.push( $(this).attr('class') );
});
},

Expand Down Expand Up @@ -113,15 +127,22 @@ mesh.blocks = function ($) {
* @param ui
* @since 1.0.0
*/
change_block_widths: function (event, ui) {
var $tgt = $(event.target),
$columns = $tgt.parent().parent().parent().find('.mesh-editor-blocks').find('.mesh-row:first .columns').addClass('dragging'),
change_block_widths: function ( event, ui ) {

var $tgt = $(event.target);

if ( typeof( ui ) === 'undefined' ) {
ui = {};
ui.values = [ parseInt( $tgt.val() ) ];
}

var $columns = $tgt.parents('.mesh-section').find('.mesh-editor-blocks').find('.mesh-row:first .columns').addClass('dragging'),
column_length = $columns.length,
column_total = 12,
column_total = parseInt( mesh_data.max_columns ),
column_values = [],
slider_values = ui.values,
post_data = {
post_id: parseInt(mesh_data.post_id),
post_id: parseInt( mesh_data.post_id ),
section_id: parseInt($tgt.closest('.mesh-section').attr('data-mesh-section-id')),
blocks: {}
};
Expand All @@ -131,7 +152,7 @@ mesh.blocks = function ($) {
// -> col 1 = val1 = 3
// -> col 2 = (val2 - val1) = (9 - 3) = 6
// -> col 3 = (avail - val2) = (12 - 9) = 3
if (3 == column_length) {
if ( 3 === column_length ) {
for (var i = 0; i <= column_length; i++) {
switch (i) {
case 0:
Expand All @@ -153,9 +174,13 @@ mesh.blocks = function ($) {
// If returned value is [4]
// -> col 1 = val1 = 4
// -> col 2 = (avail - val1) = (12 - 4) = 8
if (2 == column_length) {
column_values.push(slider_values[0]);
column_values.push(column_total - slider_values[0]);
if ( 2 === column_length ) {
column_values.push( slider_values[0] );
column_values.push( column_total - slider_values[0] );
}

if ( 1 === column_length ) {
column_values.push( $tgt.val() );
}

// Custom class removal based on regex pattern
Expand All @@ -173,7 +198,7 @@ mesh.blocks = function ($) {
$offset_select.children('option').remove();

for (var i = 0; i <= max_offset; i++) {
$offset_select.append($('<option></option>').attr('value', i).text(i));
$offset_select.append( $('<option></option>').attr('value', i).text(i) );
}

if (selected_offset > max_offset) {
Expand All @@ -185,21 +210,27 @@ mesh.blocks = function ($) {
// Reset column width classes and save post data
$this.addClass('mesh-columns-' + column_value);

if (block_id && column_values[index]) {
if ( block_id && column_values[index] ) {
$column_input.val(column_value);
post_data.blocks[block_id.toString()] = column_value;
post_data.blocks[ block_id.toString() ] = column_value;
}
});


self.rerender_blocks($columns.find('.wp-editor-area'));
},

setup_resizing : function() {
$body.on( 'change', '.mesh-block-columns', self.change_block_widths );
self.setup_resize_slider();
},

/**
* Setup Resize Slider
*/
setup_resize_slider: function () {

var column_spacing = [];

$('.column-slider').addClass('ui-slider-horizontal').each(function () {
var $this = $(this),
blocks = parseInt($this.attr('data-mesh-blocks')),
Expand All @@ -208,7 +239,7 @@ mesh.blocks = function ($) {
data = {
range: is_range,
min: 0,
max: 12,
max: parseInt( mesh_data.max_columns ),
step: 1,
left: 3,
right: 9,
Expand Down
2 changes: 1 addition & 1 deletion assets/js/admin-mesh-core.js
View file
Expand Up @@ -547,7 +547,7 @@ mesh.admin = function ($) {

var $publish_draft = $current_section.find('.mesh-section-publish, .mesh-section-save-draft');

if ('publish' == $post_status_field.val()) {
if ( 'publish' === $post_status_field.val() ) {
$button.removeClass('hidden');
$publish_draft.addClass('hidden');
} else {
Expand Down

0 comments on commit 9d3247a

Please sign in to comment.