Skip to content

Commit

Permalink
revert code for a wp.org version
Browse files Browse the repository at this point in the history
  • Loading branch information
andreilupu committed Sep 17, 2016
1 parent 48b2c64 commit 0d435a1
Show file tree
Hide file tree
Showing 7 changed files with 179 additions and 103 deletions.
20 changes: 9 additions & 11 deletions admin/class-gridable-admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ function add_media_button( $editor_id ) {
*/
wp_enqueue_script( 'gridable-editor', plugin_dir_url( __FILE__ ) . 'js/admin-editor.js', array( 'jquery' ), $this->version, true );

wp_localize_script( 'gridable-editor', 'gridable_editor_params', array(
'new_column_content' => 'New column'
) );

global $editor_styles;
$editor_styles = array_merge( $editor_styles, array(
plugin_dir_url( __FILE__ ) . 'css/editor-style.css'
Expand All @@ -87,24 +91,19 @@ function wp_print_grider_tinymce_templates() {
'grid__item'
); ?>
<script type="text/html" id="tmpl-gridable-grider-row">
<div
class="{{data.classes}} <?php echo join( ' ', apply_filters( 'gridable_mce_sh_row_classes', $row_classes ) ); ?>"
{{data.atts}} data-gridable-row="1" data-mce-resize="false" data-mce-placeholder="1">
<div class="{{data.classes}} <?php echo join( ' ', apply_filters( 'gridable_mce_sh_row_classes', $row_classes ) ); ?>" {{data.atts}} data-gridable-row="1" data-mce-resize="false" data-mce-placeholder="1">
{{{data.content}}}
</div>
</script>

<script type="text/html" id="tmpl-gridable-grider-col">
<div
class="{{data.classes}} <?php echo join( ' ', apply_filters( 'gridable_mce_sh_col_classes', $col_classes ) ); ?>"
{{data.atts}} data-mce-resize="false" data-mce-placeholder="1">
<div class="{{data.classes}} <?php echo join( ' ', apply_filters( 'gridable_mce_sh_col_classes', $col_classes ) ); ?>" {{data.atts}} data-mce-resize="false" data-mce-placeholder="1">
<p>{{{data.content}}}</p>
</div>
</script>
<?php }

function add_grider_tinymce_plugin( $plugin_array ) {
$plugin_array['interact'] = plugin_dir_url( __FILE__ ) . 'js/interact.js';
$plugin_array['gridable'] = plugin_dir_url( __FILE__ ) . 'js/gridable.js';

return $plugin_array;
Expand All @@ -115,13 +114,12 @@ function my_add_styles_admin() {

if ( is_admin() ) { ?>
<script type="text/javascript">

var gridable_params = {
sh_col_classes: JSON.parse('<?php echo json_encode( apply_filters( 'gridable_sh_col_attr_size', array() ) ) ?>'),
l10n: JSON.parse('<?php echo json_encode( apply_filters( 'gridable_editor_l10n_labels', array(
'remove_row' => esc_html__( 'Remove Row', 'gridable' ),
'edit_row' => esc_html__( 'Edit Row', 'gridable' ),
'add_column' => esc_html__( 'Add Column', 'gridable' ),
'remove_row' => esc_html__( 'Remove Row', 'gridable' ),
'edit_row' => esc_html__( 'Edit Row', 'gridable' ),
'add_column' => esc_html__( 'Add Column', 'gridable' ),
'new_column_content' => esc_html__( 'The new column', 'gridable' ),
) ) ) ?>')
};
Expand Down
6 changes: 2 additions & 4 deletions admin/css/editor-style.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
.row.gridable-mceItem { background: #ebebeb; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.row.gridable-mceItem { background: #ebebeb; border: 1px dashed #bbb; padding: 5px; position: relative; }

.col.gridable-mceItem { background: #e3e3e3; border-left: 1px solid #333; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.col.gridable-mceItem:last-child { border-right: 1px solid #333; }
.col.gridable-mceItem { position: relative; background: #fefefe; border: 1px dashed #bbb; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

[data-gridable-row] { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; }

Expand Down
2 changes: 1 addition & 1 deletion admin/css/editor-style.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added admin/icons/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 13 additions & 10 deletions admin/js/admin-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,24 @@

var shortcode = '<p>[row cols_nr="1"]</p>';

shortcode += '<p>[col size="12"]</p><p>Our dining atmosphere is casual and comfortable.</p><p>[/col]</p>';
shortcode += '<p>[col size="12"]</p><p>' + gridable_editor_params.new_column_content + '</p><p>[/col]</p>';

shortcode += '<p>[/row]</p>';
shortcode += '<p>[/row]</p><p></p><p></p>';

console.log(shortcode);
shortcode = wpAutoP( shortcode );
console.log(shortcode);
wp.media.editor.insert( shortcode );

clearfix();
});

var wpAutoP = function ( content ) {
if ( switchEditors && switchEditors.wpautop ) {
content = switchEditors.wpautop(content);
}
return content;
var clearfix = function ( ) {
// if ( switchEditors && switchEditors.wpautop ) {
// content = switchEditors.wpautop(content);
// }
// return content;


switchEditors.go( 'content', 'html' );
switchEditors.go( 'content', 'tmce' );
};

})( jQuery );
194 changes: 125 additions & 69 deletions admin/js/gridable.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(function () {
/**
*
* A TinyMCE plugin which handles the rendering of grid shortcodes
*/
tinymce.PluginManager.add('gridable', function ( editor, url ) {

Expand All @@ -10,26 +10,6 @@
var toolbar,
l10n = gridable_params.l10n;


function dragMoveListener( event ) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';

// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}

// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;

// the bix X button that removes the entre row shortcode
editor.addButton('gridable_row_remove', {
tooltip: l10n.remove_row,
Expand Down Expand Up @@ -109,38 +89,15 @@
node = editor.dom.create('DIV', {}, tmp);

wrap[0].appendChild(node.children[0]);

// target elements with the "draggable" class
interact( columns[0] )
.origin('self')
.resizable({
onmove: function ( e ) {
console.log(e);
},
// max : Number,
// maxPerElement: Number,
// manualStart : Boolean,
// snap : {/* ... */},
// restrict : {/* ... */},
// inertia : {/* ... */},
// autoScroll : {/* ... */},
//
// square : true || false,
edges: {
top : false, // Use pointer coords to check for resize.
left : true, // Disable resizing from left edge.
bottom: false,// Resize if pointer target matches selector
right : true // Resize if pointer target is the given Element
}
});
clearfix();
}
});

editor.once('preinit', function () {
if ( editor.wp && editor.wp._createToolbar ) {
toolbar = editor.wp._createToolbar([
'gridable_add_col',
'gridable_edit_row',
// 'gridable_edit_row',
'gridable_row_remove'
]);
}
Expand All @@ -160,9 +117,11 @@
}
});


function replaceShortcodes( content ) {

// first remove s
content = removeAutoP(content);

var new_content = wp.shortcode.replace('row', content, function ( args ) {
return getRowTemplate(args);
});
Expand All @@ -171,36 +130,28 @@
return getColTemplate(args);
});

new_content = wpAutoP( new_content );

return new_content;
}

/**
* This function must restore the shortcodes from the rendering state
*
* Since we are handling html we rather create a DOM element and use its innerHTML as parsing method
*
* @param content
* @returns {*|string}
*/
function restoreShortcodes( content ) {

if ( typeof( window.QTags ) !== 'undefined' ) {
window.QTags.closeAllTags('content');
}

var div = document.createElement('div');

div.innerHTML = content;

// first restore back the row shortcodes
var rows = div.querySelectorAll('.row.gridable-mceItem'),
to_replaceR = '';

for ( var indexR = 0; indexR < rows.length; indexR++ ) {

var row_atts = '';

if ( typeof rows[indexR].getAttribute('data-sh-attr-cols_nr') !== "null" ) {
row_atts += ' cols_nr="' + rows[indexR].getAttribute('data-sh-attr-cols_nr') + '"';
}

to_replaceR = '<p>[row' + row_atts + ']</p>' + rows[indexR].innerHTML + '<p>[/row]</p>';

content = content.replace(rows[indexR].outerHTML, to_replaceR);
}

var cols = div.querySelectorAll('.col.gridable-mceItem'),
to_replaceC = '';

Expand All @@ -213,27 +164,120 @@
}

to_replaceC = '<p>[col' + col_atts + ']</p><p>' + cols[indexC].innerHTML + '</p><p>[/col]</p>';
div.innerHTML = div.innerHTML.replace( cols[indexC].outerHTML , to_replaceC);
}

// first restore back the row shortcodes
var rows = div.querySelectorAll('.row.gridable-mceItem'),
to_replaceR = '';

for ( var indexR = 0; indexR < rows.length; indexR++ ) {

var row_atts = '';

if ( typeof rows[indexR].getAttribute('data-sh-row-attr-cols_nr') !== "null" ) {
row_atts += ' cols_nr="' + rows[indexR].getAttribute('data-sh-row-attr-cols_nr') + '"';
}

content = content.replace(cols[indexC].outerHTML, to_replaceC);
to_replaceR = '<p>[row' + row_atts + ']</p>' + rows[indexR].innerHTML + '<p>[/row]</p>';

div.innerHTML = div.innerHTML.replace(rows[indexR].outerHTML, to_replaceR);
}

return content;
return div.innerHTML;
}

editor.on('BeforeSetContent', function ( event ) {
event.content = removeAutoP(event.content);
event.content = replaceShortcodes(event.content);
event.content = wpAutoP(event.content);
});


//
// editor.on('SetContent', function ( event ) {
//
// var startMovingTheControl = function ( e ) {
// console.log( 'moving now' );
// // var new_left = parseInt( e.target.style.left.replace('px', '') ) + e.movementX;
// // e.target.setAttribute('style', 'left: ' + new_left + 'px;' );
// };
//
// var gridableControlOnMouseDown = function ( e ) {
// e.target.parentElement.style.pointerEvents = false;
//
// if ( e.target.className.indexOf('resize_control') > -1 ) {
// // console.log( 'down');
// e.target.addEventListener('mousemove', startMovingTheControl );
// }
// };
//
// var gridableControlOnMouseUp = function ( e ) {
// e.target.removeEventListener('mousemove', startMovingTheControl );
// console.log('remove moving');
// };
//
// var gridableControlOnMouseOut = function ( ev ) {
// console.log('remove moving');
// // console.log('out the FUCK!!!!! of the element');
//
// ev.target.removeEventListener('mousemove', startMovingTheControl );
//
// //this is the original element the event handler was assigned to
// var e = ev.toElement || ev.relatedTarget;
// if (e.parentNode == this || e == this) {
// return;
// }
//
// };
//
// setTimeout( function ( ) {
//
// var columns = editor.$('.col.gridable-mceItem');
//
// // make each col resizable
// columns.each(function ( i, column ) {
//
// if ( i < columns.length - 1 ) {
//
// var control_span = document.createElement('span');
// control_span.classList.add('resize_control');
// control_span.setAttribute('contenteditable', false );
// control_span.setAttribute('draggable', true );
//
// var ps = column.getBoundingClientRect();
// var new_left = ps.width - 5;
//
// // control_span.setAttribute('style', 'left: ' + new_left + 'px;' );
// control_span.style.left = new_left + 'px';
// // column.appendChild( control_span );
// column.parentNode.insertBefore(control_span, column.nextSibling);
//
// editor.dom.bind( control_span, 'mousedown', gridableControlOnMouseDown);
// editor.dom.bind( control_span, 'mouseup', gridableControlOnMouseUp);
// // editor.dom.bind( control_span, 'mouseout', gridableControlOnMouseOut);
// }
// });
// }, 600 );
// });

//
// editor.on('ObjectResized', function ( e ) {
// console.log('this was a resize');
// });
//
// editor.on('ObjectSelected', function ( e ) {
// console.log('this is a resize');
// });

editor.on('PostProcess', function ( event ) {
if ( event.content ) {
event.content = restoreShortcodes(event.content);
// clearfix();
}
});

//helper functions
function getRowTemplate( args ) {

var rowSh = wp.template("gridable-grider-row"),
atts = get_attrs_string('row', args);

Expand All @@ -258,6 +302,7 @@
/**
* First get all the attributes and save them from cols_nr="4" into `data-attr-sh-cols_nr="4"`
*
* @param tag
* @param atts
* @returns {string}
*/
Expand Down Expand Up @@ -294,5 +339,16 @@
}
return content;
};

var clearfix = function ( ) {
// if ( switchEditors && switchEditors.wpautop ) {
// content = switchEditors.wpautop(content);
// }
// return content;


switchEditors.go( 'content', 'html' );
switchEditors.go( 'content', 'tmce' );
};
});
})();
Loading

0 comments on commit 0d435a1

Please sign in to comment.