diff --git a/scratch-parent/framework-customizations/theme/options/demo-2.php b/scratch-parent/framework-customizations/theme/options/demo-2.php
index 17a7ed06..b15c42e3 100644
--- a/scratch-parent/framework-customizations/theme/options/demo-2.php
+++ b/scratch-parent/framework-customizations/theme/options/demo-2.php
@@ -641,7 +641,7 @@
'demo_text' => array(
'label' => __('Text', 'fw'),
'type' => 'text',
- 'value' => 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium',
+ 'value' => 'Lorem ipsum dolor sit amet',
'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
'help' => sprintf("%s \n\n'\"
\n\n %s",
__('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
@@ -659,6 +659,7 @@
),
),
),
+ 'template' => '{{=demo_text}}',
),
'demo_group_2' => array(
'type' => 'group',
diff --git a/scratch-parent/framework-customizations/theme/options/demo.php b/scratch-parent/framework-customizations/theme/options/demo.php
index 2a3d4604..3d249653 100644
--- a/scratch-parent/framework-customizations/theme/options/demo.php
+++ b/scratch-parent/framework-customizations/theme/options/demo.php
@@ -639,7 +639,7 @@
'demo_text' => array(
'label' => __('Text', 'fw'),
'type' => 'text',
- 'value' => 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium',
+ 'value' => 'Lorem ipsum dolor sit amet',
'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
'help' => sprintf("%s \n\n'\"
\n\n %s",
__('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
@@ -657,6 +657,7 @@
),
),
),
+ 'template' => '{{=demo_text}}',
'limit' => 3,
),
'demo_group' => array(
diff --git a/scratch-parent/framework-customizations/theme/options/taxonomies/category.php b/scratch-parent/framework-customizations/theme/options/taxonomies/category.php
index 517fdfd5..a893e8a4 100644
--- a/scratch-parent/framework-customizations/theme/options/taxonomies/category.php
+++ b/scratch-parent/framework-customizations/theme/options/taxonomies/category.php
@@ -520,6 +520,94 @@
'defaultTime' => '12:00'
)
),
+ 'demo_addable_popup' => array(
+ 'label' => __('Addable Popup', 'fw'),
+ 'type' => 'addable-popup',
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'template' => '{{=demo_text}}',
+ 'popup-options' => array(
+ 'demo_text' => array(
+ 'label' => __('Text', 'fw'),
+ 'type' => 'text',
+ 'value' => 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium',
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'help' => sprintf("%s \n\n'\"
\n\n %s",
+ __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'fw')
+ ),
+ ),
+ 'demo_image_picker' => array(
+ 'label' => __('Image Picker', 'fw'),
+ 'type' => 'image-picker',
+ 'value' => '',
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'choices' => array(
+ 'choice-1' => array(
+ 'label' => __('First Image', 'fw'),
+ 'small' => array(
+ 'height' => 70,
+ 'src' => get_template_directory_uri() .'/images/image-picker-demo/thumb1.jpg'
+ ),
+ 'large' => array(
+ 'height' => 214,
+ 'src' => get_template_directory_uri() .'/images/image-picker-demo/tooltip1.jpg'
+ ),
+ ),
+ 'choice-2' => array(
+ 'label' => __('Second Image', 'fw'),
+ 'small' => array(
+ 'height' => 70,
+ 'src' => get_template_directory_uri() .'/images/image-picker-demo/thumb2.jpg'
+ ),
+ 'large' => array(
+ 'height' => 214,
+ 'src' => get_template_directory_uri() .'/images/image-picker-demo/tooltip2.jpg'
+ ),
+ ),
+ ),
+ 'help' => sprintf("%s \n\n'\"
\n\n %s",
+ __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'fw')
+ ),
+ ),
+ 'demo_upload_images' => array(
+ 'label' => __('Single Upload (Images Only)', 'fw'),
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'type' => 'upload',
+ 'help' => sprintf("%s \n\n'\"
\n\n %s",
+ __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'fw')
+ ),
+ ),
+ 'demo_addable_popup_inner' => array(
+ 'label' => __('Addable Popup', 'fw'),
+ 'type' => 'addable-popup',
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'template' => 'Title color-picker value : {{=demo_color_picker}}',
+ 'popup-options' => array(
+ 'demo_multi_upload_images' => array(
+ 'label' => __('Multi Upload (images only)', 'fw'),
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'type' => 'multi-upload',
+ 'help' => sprintf("%s \n\n'\"
\n\n %s",
+ __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'fw')
+ ),
+ ),
+ 'demo_color_picker' => array(
+ 'label' => __('Color Picker', 'fw'),
+ 'type' => 'color-picker',
+ 'value' => '',
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'help' => sprintf("%s \n\n'\"
\n\n %s",
+ __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'fw')
+ ),
+ )
+ )
+ ),
+ ),
+ ),
'demo_addable_option' => array(
'label' => __('Addable Option', 'fw'),
'type' => 'addable-option',
@@ -533,4 +621,41 @@
__('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'fw')
)
),
+ 'demo_addable_box' => array(
+ 'label' => __('Addable Box', 'fw'),
+ 'type' => 'addable-box',
+ 'value' => array(),
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'help' => sprintf("%s \n\n'\"
\n\n %s",
+ __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'fw')
+ ),
+ 'box-controls' => array(
+ //'custom' => '',
+ ),
+ 'box-options' => array(
+ 'demo_text' => array(
+ 'label' => __('Text', 'fw'),
+ 'type' => 'text',
+ 'value' => 'Lorem ipsum dolor sit amet',
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'help' => sprintf("%s \n\n'\"
\n\n %s",
+ __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', 'fw')
+ ),
+ ),
+ 'demo_textarea' => array(
+ 'label' => __('Textarea', 'fw'),
+ 'type' => 'textarea',
+ 'value' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ 'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'fw'),
+ 'help' => array(
+ 'icon' => 'video',
+ 'html' => ''
+ ),
+ ),
+ ),
+ 'template' => '{{=demo_text}}',
+ 'limit' => 3,
+ ),
);
\ No newline at end of file
diff --git a/scratch-parent/framework/core/components/backend.php b/scratch-parent/framework/core/components/backend.php
index 42219461..1e2afbe2 100644
--- a/scratch-parent/framework/core/components/backend.php
+++ b/scratch-parent/framework/core/components/backend.php
@@ -696,7 +696,7 @@ public function _action_ajax_options_get_values()
wp_send_json_success(array(
'values' => fw_get_options_values_from_input(
$options,
- FW_Request::POST($name_prefix, array())
+ FW_Request::POST(fw_html_attr_name_to_array_multi_key($name_prefix), array())
)
));
}
diff --git a/scratch-parent/framework/includes/option-types/addable-box/class-fw-option-type-addable-box.php b/scratch-parent/framework/includes/option-types/addable-box/class-fw-option-type-addable-box.php
index ed0b941d..da8a7e71 100644
--- a/scratch-parent/framework/includes/option-types/addable-box/class-fw-option-type-addable-box.php
+++ b/scratch-parent/framework/includes/option-types/addable-box/class-fw-option-type-addable-box.php
@@ -36,6 +36,19 @@ protected function _enqueue_static($id, $option, $data)
return true;
}
+ /*
+ * Puts each option into a separate array
+ * to keep their order inside the modal dialog
+ */
+ private function transform_options($options)
+ {
+ $new_options = array();
+ foreach ($options as $id => $option) {
+ $new_options[] = array($id => $option);
+ }
+ return $new_options;
+ }
+
/**
* @internal
* {@inheritdoc}
@@ -50,7 +63,7 @@ protected function _render($id, $option, $data)
{
$controls = array_merge(
array(
- 'delete' => ''
+ 'delete' => ''
),
$option['box-controls']
);
@@ -66,11 +79,25 @@ protected function _render($id, $option, $data)
}
}
+ // Use only groups and options
+ {
+ $collected = array();
+ fw_collect_first_level_options($collected, $option['box-options']);
+ $box_options =& $collected['groups_and_options'];
+ unset($collected);
+ }
+
+ $option['attr']['data-for-js'] = base64_encode(json_encode(array(
+ 'options' => $this->transform_options($box_options),
+ 'template' => $option['template'],
+ )));
+
return fw_render_view(fw_get_framework_directory('/includes/option-types/'. $this->get_type() .'/view.php'), array(
- 'id' => $id,
- 'option' => $option,
- 'data' => $data,
- 'controls' => $controls,
+ 'id' => $id,
+ 'option' => $option,
+ 'data' => $data,
+ 'controls' => $controls,
+ 'box_options' => $box_options,
));
}
@@ -120,6 +147,7 @@ protected function _get_defaults()
'box-controls' => array(),
'box-options' => array(),
'limit' => 0,
+ 'template' => '',
);
}
}
diff --git a/scratch-parent/framework/includes/option-types/addable-box/static/css/styles.css b/scratch-parent/framework/includes/option-types/addable-box/static/css/styles.css
index 5e1e7117..a0ea516e 100644
--- a/scratch-parent/framework/includes/option-types/addable-box/static/css/styles.css
+++ b/scratch-parent/framework/includes/option-types/addable-box/static/css/styles.css
@@ -4,6 +4,7 @@
.fw-option-type-addable-box > .fw-option-boxes.ui-sortable > .fw-option-box > .fw-postbox > h3.hndle {
cursor: move !important; /* to rewrite .fw-postbox h3.hndle */
+ word-break: break-all; /* if box text is too long, do not move controls outside box */
}
#wpbody-content .fw-option-type-addable-box .metabox-holder {
@@ -19,6 +20,10 @@
content: '\00a0'; /* - when title is empty, box has too small (broken) height */
}
+.fw-option-type-addable-box > .fw-option-boxes.ui-sortable > .fw-option-box > .fw-postbox > h3.hndle img {
+ vertical-align: middle;
+}
+
/* Controls */
diff --git a/scratch-parent/framework/includes/option-types/addable-box/static/js/scripts.js b/scratch-parent/framework/includes/option-types/addable-box/static/js/scripts.js
index b8dae550..e07cfc0d 100644
--- a/scratch-parent/framework/includes/option-types/addable-box/static/js/scripts.js
+++ b/scratch-parent/framework/includes/option-types/addable-box/static/js/scripts.js
@@ -97,6 +97,119 @@ jQuery(document).ready(function ($) {
}
};
+ /**
+ * Update box title using the 'template' option parameter and box option values
+ */
+ var titleUpdater = {
+ pendingClass: 'fw-option-type-addable-box-pending-title-update',
+ isBusy: false,
+ template: function(template, vars) {
+ try {
+ /**
+ * may throw error in in template is used an option id added after some items was already saved
+ */
+ return _.template(
+ $.trim(template),
+ vars,
+ {
+ evaluate: /\{\{(.+?)\}\}/g,
+ interpolate: /\{\{=(.+?)\}\}/g,
+ escape: /\{\{-(.+?)\}\}/g
+ }
+ );
+ } catch (e) {
+ return '[Template Error] '+ e.message;
+ }
+ },
+ /**
+ * Update the given box title, or find a pending box
+ * @public
+ */
+ update: function($box) {
+ if (this.isBusy) {
+ return;
+ }
+
+ if (typeof $box == 'undefined') {
+ $box = $(optionTypeClass +' .'+ this.pendingClass +':first');
+ }
+
+ if (!$box.length) {
+ return;
+ }
+
+ var data = JSON.parse(atob(
+ $box.closest(optionTypeClass).attr('data-for-js')
+ ));
+
+ data.template = $.trim(data.template);
+
+ if (!data.template.length) {
+ delete data;
+ return;
+ }
+
+ var $dataWrapper = $box.closest('.fw-option-box');
+
+ var values = $dataWrapper.attr('data-values');
+
+ if (values) {
+ // box after refresh
+ $dataWrapper.removeAttr('data-values');
+
+ $box.removeClass(titleUpdater.pendingClass);
+
+ $box.find('> h3.hndle span:not([class])').first().text(
+ this.template(data.template, JSON.parse(values))
+ );
+
+ delete data;
+ this.update();
+ return;
+ }
+
+ this.isBusy = true;
+
+ $.ajax({
+ url: ajaxurl,
+ type: 'POST',
+ data: [
+ 'action=fw_backend_options_get_values',
+ 'options='+ encodeURIComponent(JSON.stringify(data.options)),
+ 'name_prefix='+ encodeURIComponent($dataWrapper.attr('data-name-prefix')),
+ $box.find('> .inside > .fw-option-box-options').find('input, select, textarea').serialize()
+ ].join('&'),
+ dataType: 'json'
+ }).done(_.bind(function (response, status, xhr) {
+ this.isBusy = false;
+ $box.removeClass(titleUpdater.pendingClass);
+
+ var template = '';
+
+ if (response.success) {
+ template = this.template(data.template, response.data.values);
+ } else {
+ template = '[Ajax Error] '+ response.data.message
+ }
+
+ $box.find('> h3.hndle span:not([class])').first().text(template);
+
+ delete data;
+
+ this.update();
+ }, this)).fail(_.bind(function (xhr, status, error) {
+ this.isBusy = false;
+ $box.removeClass(titleUpdater.pendingClass);
+
+ $box.find('> h3.hndle span:not([class])').first().text('[Server Error] '+ status +': '+ error.message);
+
+ delete data;
+
+ this.update();
+ }, this));
+ }
+ };
+
fwEvents.on('fw:options:init', function (data) {
var $elements = data.$elements.find(optionTypeClass +':not(.fw-option-initialized)');
@@ -145,6 +258,19 @@ jQuery(document).ready(function ($) {
// close postboxes and attach event listener
$elements.find('> .fw-option-boxes > .fw-option-box > .fw-postbox').addClass('closed');
+ $elements.on('fw:box:close', '> .fw-option-boxes > .fw-option-box > .fw-postbox', function(){
+ // later a script will pick it by this class and will update the title via ajax
+ $(this).addClass(titleUpdater.pendingClass);
+
+ /*
+ $(this).find('> h3.hndle span:not([class])').first().html(
+ $('').attr('src', fw.img.loadingSpinner)
+ );
+ */
+
+ titleUpdater.update($(this));
+ });
+
methods.initControls($elements);
$elements.each(function(){
@@ -168,5 +294,7 @@ jQuery(document).ready(function ($) {
})
});
}, 100);
+
+ titleUpdater.update();
});
});
\ No newline at end of file
diff --git a/scratch-parent/framework/includes/option-types/addable-box/view.php b/scratch-parent/framework/includes/option-types/addable-box/view.php
index 155bde78..932d869c 100644
--- a/scratch-parent/framework/includes/option-types/addable-box/view.php
+++ b/scratch-parent/framework/includes/option-types/addable-box/view.php
@@ -4,20 +4,13 @@
* @var array $option
* @var array $data
* @var array $controls
+ * @var array $box_options
*/
$attr = $option['attr'];
unset($attr['name']);
unset($attr['value']);
-// Use only groups and options
-{
- $collected = array();
- fw_collect_first_level_options($collected, $option['box-options']);
- $box_options =& $collected['groups_and_options'];
- unset($collected);
-}
-
// generate controls html
{
ob_start(); ?>
@@ -34,13 +27,15 @@