Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Implement the drag & drop layout manager option #105

Closed
wants to merge 7 commits into from

3 participants

@vauvarin

Hello Devin,

This is an implementation of a drag & drop layout manager. The original code come from this fork of options-framework-plugin: https://github.com/sy4mil/Options-Framework
Documentation here: http://aquagraphite.com/2011/11/smof-documentation/
Go down in the page to see a screenshot of the layout manager.

I have picked the code up of the layout manager (sy4mil/Options-Framework) and adapt it to run in options-framework-plugin (devinsays / options-framework-plugin).

Hope this code will enhance options-framework-plugin.
Sincerly

@devinsays
Owner

Looks interesting. It may take me a while to go through all the code and see how it works. Thanks for submitting the pull.

@vauvarin

Devin, i think you should maybe check the sanitize function in my code. For the moment this function (of_sanitize_sorter( $input, $option )) just input > output the data with no particular processing. I had no ideas what to do here but the filter (of_sanitize_sorter) is avalaible if needed.

@devinsays
Owner

No worries. I do a heavy code check and testing all on all pull requests.

@vauvarin

Just for information, I tried to implement the Drag and Drop feature in the Theme version of Options Framework and it works like a charm.

@blobaugh

I am curious as to what the point of this is? It has a certain wow factor, but the options.php file is most likely setup by someone who knows how to utilize an array in PHP. Why not simply rearrange the elements in the PHP directly?

@devinsays devinsays referenced this pull request
Open

Extensible Options #133

@devinsays
Owner

Apologies this has taken so long to get to. I'm closing this pull request, and wrapping it under the "Extensible Options" issue as I don't want to add/support it in the core plugin at this time- but would like developers to be able to hook it in if they choose.

#133

@devinsays devinsays closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 7, 2012
  1. Implement the layout manager option

    Gilles Vauvarin authored
  2. Add a filter to the array of sorter's data

    Gilles Vauvarin authored
  3. Fix code error: delete ] caracter line 208 in options-interface.php a…

    Gilles Vauvarin authored
    …nd line 28 in options-custom.js
  4. Add a argument to the of_array_sorter filter line 198 in options-inte…

    Gilles Vauvarin authored
    …rface.php
This page is out of date. Refresh to see the latest.
View
298 css/admin-style.css
@@ -0,0 +1,298 @@
+/*-------------------------------------------------------------------------------------------*/
+/* OptionsFramework Admin Styles */
+/*-------------------------------------------------------------------------------------------*/
+
+.updated {
+ max-width:764px;
+ margin-bottom:0px !important;
+}
+#optionsframework {
+ position:relative;
+ z-index: 0;
+ max-width:780px;
+ background:#fff;
+}
+#optionsframework h3 {
+ cursor: default;
+}
+#optionsframework p {
+ margin-bottom:0;
+ padding-bottom:10px;
+ line-height: 1.4em;
+}
+#optionsframework .section {
+ padding:10px 10px 0;
+}
+#optionsframework .group {
+ padding-bottom:40px;
+}
+#optionsframework .section .heading {
+ padding:10px 0px;
+ margin:0 0 15px;
+ border-bottom: 1px solid #dfdfdf;
+}
+#optionsframework .section .controls {
+ float: left;
+ min-width:350px;
+ width: 54%;
+ padding-right:2%;
+}
+#optionsframework .section .explain {
+ max-width:38%;
+ float: left;
+ font-size: 12px;
+ line-height:16px;
+ color: #777;
+}
+#optionsframework .section-checkbox .controls {
+ width: 98%;
+}
+#optionsframework .section-checkbox .explain {
+ max-width:94%;
+}
+#optionsframework .section-color .controls {
+ min-width:125px;
+ width:125px
+}
+#optionsframework .controls input, #optionsframework .controls select, #optionsframework .controls textarea {
+ margin-bottom:10px;
+ width:100%;
+}
+#optionsframework .section-radio label, #optionsframework .section-multicheck label {
+ float:left;
+ max-width:90%;
+ line-height: 16px;
+ margin-bottom: 5px;
+}
+#optionsframework input.checkbox, #optionsframework input.of-radio {
+ width: 30px;
+ margin-top:2px;
+ float:left;
+ clear:both;
+}
+#optionsframework .controls .of-color {
+ float:left;
+ width: 80px;
+ margin-left:5px;
+ margin-right:5px;
+}
+#optionsframework .controls .of-typography-size {
+ width:80px;
+ margin-left:5px;
+ float:left
+}
+#optionsframework .controls .of-typography-unit {
+ width:50px;
+ margin-left:5px;
+ float:left
+}
+#optionsframework .controls .of-typography-face {
+ width:100px;
+ margin-left:5px;
+ float:left
+}
+#optionsframework .controls .of-typography-style {
+ width:80px;
+ margin-left:5px;
+ margin-right:5px;
+ float:left
+}
+#optionsframework .of-background-properties {
+ clear:both;
+ margin-top: 18px;
+}
+#optionsframework .controls .of-background-repeat {
+ width:125px;
+ margin-right:5px;
+ float:left
+}
+#optionsframework .controls .of-background-position {
+ width:125px;
+ margin-right:5px;
+ float:left
+}
+#optionsframework .controls .of-background-attachment {
+ width:125px;
+ margin-right:5px;
+ float:left
+}
+#optionsframework div.section-background .controls input.upload {
+ width:47%;
+}
+#optionsframework .controls .of-radio-img-img {
+ border:3px solid #f9f9f9;
+ margin:0 5px 10px 0;
+ display:none;
+ cursor:pointer;
+ float:left;
+}
+#optionsframework .controls .of-radio-img-selected {
+ border:3px solid #ccc
+}
+#optionsframework .controls .of-radio-img-img:hover {
+ opacity:.8;
+}
+#optionsframework .controls .of-border-width {
+ width:80px;
+ float:left
+}
+#optionsframework .controls .of-border-style {
+ width:120px;
+ float:left
+}
+#optionsframework .hide {
+ display:none;
+}
+#optionsframework .of-option-image {
+ max-width:340px;
+ margin:3px 0 18px 0;
+}
+#optionsframework .mini .controls select, #optionsframework .section .mini .controls {
+ width: 140px;
+}
+#optionsframework .mini .controls input, #optionsframework .mini .controls {
+ min-width:140px;
+ width: 140px;
+}
+#optionsframework .mini .explain {
+ max-width:74%;
+}
+
+/* Editor */
+
+#optionsframework .section-editor .explain {
+ max-width: 98%;
+ float:none;
+ margin-bottom:5px;
+}
+
+/* Image Uploader */
+
+#optionsframework .controls input.upload {
+ width:80%;
+}
+#optionsframework .controls input.upload_button {
+ float:right;
+ width:45px;
+ border-color:#BBBBBB;
+ cursor:pointer;
+ height:16px;
+}
+#optionsframework .controls input.upload_button:hover {
+ border-color:#666666;
+ color:#000;
+}
+#optionsframework .screenshot {
+ float:left;
+ margin-left:1px;
+ position:relative;
+ width:344px;
+ margin-top:3px;
+}
+#optionsframework .screenshot img {
+ background:#FAFAFA;
+ border-color:#ccc #eee #eee #ccc;
+ border-style:solid;
+ border-width:1px;
+ float:left;
+ max-width:334px;
+ padding:4px;
+ margin-bottom:10px;
+}
+#optionsframework .screenshot .mlu_remove {
+ background:url("../images/ico-delete.png") no-repeat;
+ border:medium none;
+ bottom:4px;
+ display:block;
+ float:left;
+ height:16px;
+ padding:0;
+ position:absolute;
+ left:-4px;
+ text-indent:-9999px;
+ width:16px;
+}
+#optionsframework .screenshot .no_image .file_link {
+ margin-left: 20px;
+}
+#optionsframework .screenshot .no_image .mlu_remove {
+ bottom: 0px;
+}
+#optionsframework .reset-button {
+ float:left;
+ cursor:pointer;
+}
+
+/* Sorter */
+
+#optionsframework .sorter {margin-right: -20px;}
+#optionsframework .sorter ul {
+ background: #F9F9F9;
+ border: 1px dashed #E3E3E3;
+ min-height: 40px;
+ padding: 10px 10px 0;
+ width: 175px;
+ float: left;
+ margin: 0 15px 0 0;
+}
+#optionsframework .sorter ul h3 {
+ margin: 0 0 10px;
+ text-align: center;
+ color: #777;
+ text-transform: capitalize;
+}
+#optionsframework .disabled {
+ color: #aaa;
+}
+#optionsframework .sorter ul li {
+ border: 1px solid #DFDFDF;
+ cursor: move;
+ font-weight: bold;
+ margin-bottom:10px;
+ padding:0 10px;
+ height: 40px;
+ line-height: 40px;
+ background-color: #F1F1F1;
+ background-image: -ms-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -moz-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -o-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ececec));
+ background-image: -webkit-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: linear-gradient(top,#f9f9f9,#ececec);
+ overflow: hidden;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: inset 0 1px 0 #fff;
+ -webkit-box-shadow: inset 0 1px 0 #fff;
+ box-shadow: inset 0 1px 0 #fff;
+ text-align:center;
+}
+#optionsframework .section-sorter li.placeholder {
+ background:#f9f9f9;
+ border-width:1px;
+ border-style:dashed;
+ height:40px;
+ }
+
+/* Bottom Section */
+
+#optionsframework-submit {
+ padding: 7px 10px;
+ border-top: 1px solid #ECECEC;
+ background-color: #F1F1F1;
+ background-image: -moz-linear-gradient(center top , #F9F9F9, #ECECEC);
+}
+#optionsframework .button-primary {
+ float:right;
+}
+
+/* Bottom Section */
+
+#optionsframework .section:before, #optionsframework .section:after {
+ content: "";
+ display: table;
+}
+#optionsframework .section:after {
+ clear: both;
+}
View
52 css/optionsframework.css
@@ -223,6 +223,58 @@
cursor:pointer;
}
+/* Sorter */
+
+#optionsframework .sorter {margin-right: -20px;}
+#optionsframework .sorter ul {
+ background: #F9F9F9;
+ border: 1px dashed #E3E3E3;
+ min-height: 40px;
+ padding: 10px 10px 0;
+ width: 175px;
+ float: left;
+ margin: 0 15px 0 0;
+}
+#optionsframework .sorter ul h3 {
+ margin: 0 0 10px;
+ text-align: center;
+ color: #777;
+ text-transform: capitalize;
+}
+#optionsframework .disabled {
+ color: #aaa;
+}
+#optionsframework .sorter ul li {
+ border: 1px solid #DFDFDF;
+ cursor: move;
+ font-weight: bold;
+ margin-bottom:10px;
+ padding:0 10px;
+ height: 40px;
+ line-height: 40px;
+ background-color: #F1F1F1;
+ background-image: -ms-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -moz-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -o-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ececec));
+ background-image: -webkit-linear-gradient(top,#f9f9f9,#ececec);
+ background-image: linear-gradient(top,#f9f9f9,#ececec);
+ overflow: hidden;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: inset 0 1px 0 #fff;
+ -webkit-box-shadow: inset 0 1px 0 #fff;
+ box-shadow: inset 0 1px 0 #fff;
+ text-align:center;
+}
+#optionsframework .section-sorter li.placeholder {
+ background:#f9f9f9;
+ border-width:1px;
+ border-style:dashed;
+ height:40px;
+ }
+
/* Bottom Section */
#optionsframework-submit {
View
24 js/options-custom.js
@@ -7,6 +7,30 @@ jQuery(document).ready(function($) {
// Fade out the save message
$('.fade').delay(1000).fadeOut(1000);
+
+ // Sorter (Layout Manager)
+ jQuery('.sorter').each( function() {
+ var id = jQuery(this).attr('id');
+ $('#'+ id).find('ul').sortable({
+ items: 'li',
+ placeholder: "placeholder",
+ connectWith: '.sortlist_' + id,
+ opacity: 0.6,
+ update: function() {
+ $(this).find('.position').each( function() {
+
+ var listID = $(this).parent().attr('id');
+ var parentID = $(this).parent().parent().attr('id');
+ parentID = parentID.replace(id + '_', '');
+ var optionID = $(this).parent().parent().parent().attr('id');
+ var nameTheme = $(this).attr('class');
+ nameTheme = nameTheme.replace('position ', '');
+ $(this).prop("name", nameTheme + '[' + optionID + '][' + parentID + '][' + listID + ']');
+
+ });
+ }
+ });
+ });
// Color Picker
$('.colorSelector').each(function(){
View
57 options-check/index.php
@@ -77,6 +77,63 @@
<img src="<?php echo of_get_option('example_uploader'); ?>" />
<?php } ?>
</dl>
+
+ <dl>
+ <dt>type: sorter</dt>
+ <dd>of_get_option('example_sorter'):
+ <?php $sorter = of_get_option('example_sorter' , 'none' ); ?>
+ <?php
+ echo '<pre>';
+ print_r($sorter);
+ echo '</pre>';
+ ?>
+ </dd>
+ <?php
+ $layout = of_get_option('example_sorter', 'none');
+ $layout = $layout['enabled'];
+
+ if ($layout):
+ foreach ($layout as $key=>$value) {
+ switch($key) {
+ case 'block_one':
+ ?>
+ <strong>Block One</strong>
+ <br />
+ <?php
+ break;
+
+ case 'block_two':
+ ?>
+ <strong>Block Two</strong>
+ <br />
+ <?php
+ break;
+
+ case 'block_three':
+ ?>
+ <strong>Block Three</strong>
+ <br />
+ <?php
+ break;
+
+ case 'block_four':
+ ?>
+ <strong>Block Four</strong>
+ <br />
+ <?php
+ break;
+
+ case 'block_five':
+ ?>
+ <strong>Block Five</strong>
+ <br />
+ <?php
+ break;
+ }
+ }
+ endif;
+ ?>
+ </dl>
<dl>
<dt>type: image</dt>
View
21 options-check/options.php
@@ -51,6 +51,21 @@ function optionsframework_options() {
'five' => '1'
);
+ // Sorter
+ $sorter_array = array(
+ "disabled" => array (
+ "placebo" => "placebo", //REQUIRED!
+ "block_four" => "Block Four",
+ "block_five" => "Block Five",
+ ),
+ "enabled" => array (
+ "placebo" => "placebo", //REQUIRED!
+ "block_one" => "Block One",
+ "block_two" => "Block Two",
+ "block_three" => "Block Three",
+ ),
+ );
+
// Background Defaults
$background_defaults = array(
'color' => '',
@@ -195,6 +210,12 @@ function optionsframework_options() {
'id' => 'example_uploader',
'type' => 'upload');
+ $options[] = array( "name" => "Homepage Layout Manager",
+ "desc" => "Organize how you want the layout to appear on the homepage",
+ "id" => "example_sorter",
+ "std" => $sorter_array,
+ "type" => "sorter" );
+
$options[] = array(
'name' => "Example Image Selector",
'desc' => "Images for layout.",
View
1  options-framework.php
@@ -274,6 +274,7 @@ function optionsframework_load_scripts($hook) {
// Enqueued scripts
wp_enqueue_script('jquery-ui-core');
+ wp_enqueue_script('jquery-ui-sortable');
wp_enqueue_script('color-picker', OPTIONS_FRAMEWORK_URL .'js/colorpicker.js', array('jquery'));
wp_enqueue_script('options-custom', OPTIONS_FRAMEWORK_URL .'js/options-custom.js', array('jquery'));
View
25 options-interface.php
@@ -191,6 +191,31 @@ function optionsframework_fields() {
}
break;
+ // Sorter - Drag & Drop block manager
+ case 'sorter':
+ $sortlists = array();
+ $sortlists = $val;
+ $sortlists = apply_filters( 'of_array_sorter', $sortlists, $sortlists );
+ $output .= '<div id="'.$value['id'].'" class="sorter">';
+ if ($sortlists) {
+ foreach ($sortlists as $group=>$sortlist) {
+ $output .= '<ul id="'.$value['id'].'_'.$group.'" class="sortlist_'.$value['id'].' '.$group.' ">';
+ $output .= '<h3>'.$group.'</h3>';
+ foreach ($sortlist as $key => $list) {
+ $output .= '<input class="sorter-placebo" type="hidden" name="' . esc_attr( $option_name . '[' . $value['id'] . ']['.$group.'][placebo]' ) . '" value="placebo">';
+ if ($key != "placebo") {
+ $output .= '<li id="'.$key.'" class="sortee">';
+ $output .= '<input class="position ' . $option_name .'" name="' . esc_attr( $option_name.'['.$value['id'].']['.$group.']['.$key.']').'" type="hidden" value="' . esc_attr( $list ) . '" />';
+ $output .= $list;
+ $output .= '</li>';
+ }
+ }
+ $output .= '</ul>';
+ }
+ }
+ $output .= '</div>';
+ break;
+
// Color picker
case "color":
$output .= '<div id="' . esc_attr( $value['id'] . '_picker' ) . '" class="colorSelector"><div style="' . esc_attr( 'background-color:' . $val ) . '"></div></div>';
View
12 options-sanitize.php
@@ -14,6 +14,10 @@ function of_sanitize_textarea($input) {
add_filter( 'of_sanitize_textarea', 'of_sanitize_textarea' );
+/* Sorter */
+
+add_filter( 'of_sanitize_sorter', 'of_sanitize_sorter', 10, 2);
+
/* Select */
add_filter( 'of_sanitize_select', 'of_sanitize_enum', 10, 2);
@@ -115,6 +119,14 @@ function of_sanitize_enum( $input, $option ) {
return $output;
}
+/* Sorter */
+
+function of_sanitize_sorter( $input, $option ) {
+ $output = '';
+ $output = $input;
+ return $output;
+}
+
/* Background */
function of_sanitize_background( $input ) {
Something went wrong with that request. Please try again.