/**
* Field Render Function.
*
* Takes the vars and outputs the HTML for the field in the settings
*
* @since Redux_Options 1.0.0
*/
function render()
{
$tmp = @explode(":", $this->value['font']);
$this->value['font_readable'] = '';
$this->value['style'] = '';
$this->value['weight'] = '';
if (isset($tmp[0])) {
$this->value['font_readable'] = trim(str_replace(array("_safe_", "+"), " ", $tmp[0]));
}
if (isset($tmp[1])) {
if (strpos("regular", $tmp[1]) !== false) {
$tmp[1] = str_replace("regular", "", $tmp[1]);
} else {
if (strpos("italic", $tmp[1]) !== false) {
$this->value['style'] = "italic";
$tmp[1] = str_replace("italic", "", $tmp[1]);
}
}
if (!empty($tmp[1])) {
$this->value['weight'] = $tmp[1];
}
}
?>
<table id="<?php
echo $this->field['id'];
?>
-wrap" class="redux-typography-table">
<tr>
<td colspan="2">
<?php
echo '<input type="hidden" id="' . $this->field['id'] . '-font_readable" name="' . $this->args['opt_name'] . '[' . $this->field['id'] . '][font_readable]" ' . 'value="' . esc_attr($this->value['font_readable']) . '" />';
echo '<input type="hidden" id="' . $this->field['id'] . '-style" name="' . $this->args['opt_name'] . '[' . $this->field['id'] . '][style]" ' . 'value="' . esc_attr($this->value['style']) . '" />';
echo '<input type="text" id="' . $this->field['id'] . '" name="' . $this->args['opt_name'] . '[' . $this->field['id'] . '][font]" class="fontselect" ' . 'value="' . esc_attr(@$this->value['font']) . '" />';
echo '<input type="button" id="' . $this->field['id'] . '-smaller" class="redux-font-select fs-size button" value="A-" />';
echo '<input type="button" id="' . $this->field['id'] . '-bigger" class="redux-font-select fs-size button" value="A+" />';
echo '<br /><textarea id="' . $this->field['id'] . '-example" class="redux-font-select fs-example">Lorem Ipsum is simply dummy text</textarea>';
?>
</td>
</tr>
<tr>
<td>
<?php
echo '<label>' . __('Text Align', IRON_TEXT_DOMAIN) . '</label> ';
$field_id = "align";
$field = new Redux_Options_select(array('id' => $this->field['id'] . '-' . $field_id, 'class' => 'redux-typography-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'options' => array('' => 'Default', 'left' => 'left', 'center' => 'center', 'right' => 'right')), '', '');
$field->value = @$this->value[$field_id];
$field->render();
?>
</td>
<td>
<?php
echo '<label>' . __('Font Size', IRON_TEXT_DOMAIN) . '</label> ';
$field_id = "size";
$field = new Redux_Options_text(array('id' => $this->field['id'] . '-' . $field_id, 'class' => 'small-text redux-typography-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'validate' => 'numeric'), '', '');
$field->value = @$this->value[$field_id];
$field->render();
?>
</td>
</tr>
<tr>
<td>
<?php
echo '<label>' . __('Transform', IRON_TEXT_DOMAIN) . '</label> ';
$field_id = "transform";
$field = new Redux_Options_select(array('id' => $this->field['id'] . '-' . $field_id, 'class' => 'redux-typography-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'options' => array('' => 'Default', 'none' => 'None', 'capitalize' => 'Capitalize', 'uppercase' => 'Uppercase', 'lowercase' => 'Lowercase')), '', '');
$field->value = @$this->value[$field_id];
$field->render();
?>
</td>
<td>
<?php
echo '<label>' . __('Line Height', IRON_TEXT_DOMAIN) . '</label> ';
$field_id = "height";
$field = new Redux_Options_text(array('id' => $this->field['id'] . '-' . $field_id, 'class' => 'small-text redux-typography-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'validate' => 'numeric'), '', '');
$field->value = @$this->value[$field_id];
$field->render();
?>
</td>
</tr>
<tr>
<td>
<?php
echo '<label>' . __('Font Weight', IRON_TEXT_DOMAIN) . '</label> ';
$field_id = "weight";
$field = new Redux_Options_select(array('id' => $this->field['id'] . '-' . $field_id, 'class' => 'redux-typography-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'options' => array('' => 'Default', 'none' => 'None', 'bold' => 'Bold', 'bolder' => 'Bolder', 'lighter' => 'Lighter', '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800', '900' => '900', 'inherit' => 'Inherit')), '', '');
$field->value = $this->value[$field_id];
$field->render();
?>
</td>
<td>
<?php
?>
</td>
</tr>
<tr>
<td>
<?php
echo '<label>Font Color</label> ';
$field_id = "color";
$field = new Redux_Options_color(array('id' => $this->field['id'] . '-' . $field_id, 'class' => 'redux-typography-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'std' => ''), '', '');
$field->value = @$this->value[$field_id];
$field->enqueue();
$field->render();
?>
</td>
<td>
<?php
echo '<label>' . __('Background', IRON_TEXT_DOMAIN) . '</label> ';
$field_id = "bgcolor";
$field = new Redux_Options_color(array('id' => $this->field['id'] . '-' . $field_id, 'class' => 'redux-typography-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'std' => ''), '', '');
$field->value = @$this->value[$field_id];
$field->enqueue();
$field->render();
?>
</td>
</tr>
</table>
<?php
echo '<br><br>';
echo isset($this->field['desc']) && !empty($this->field['desc']) ? ' <span class="description">' . $this->field['desc'] . '</span>' : '';
}
/**
* Field Render Function.
*
* Takes the vars and outputs the HTML for the field in the settings
*
* @since Redux_Options 1.0.0
*/
function render()
{
$class = isset($this->field['class']) ? $this->field['class'] : 'regular-text';
echo '<table class="redux-background-table"><tr><td>';
echo '<input type="hidden" id="' . $this->field['id'] . '-file" name="' . $this->args['opt_name'] . '[' . $this->field['id'] . '][file]" value="' . @$this->value['file'] . '" class="' . $class . '" />';
echo '<img class="redux-opts-screenshot" id="redux-opts-screenshot-' . $this->field['id'] . '" src="' . @$this->value['file'] . '" />';
if (@$this->value['file'] == '') {
$remove = ' style="display:none;"';
$upload = '';
} else {
$remove = '';
$upload = ' style="display:none;"';
}
echo ' <a data-update="Select File" data-choose="Choose a File" href="javascript:void(0);"class="redux-opts-upload button-secondary"' . $upload . ' rel-id="' . $this->field['id'] . '-file">' . __('Upload', Redux_TEXT_DOMAIN) . '</a>';
echo ' <a href="javascript:void(0);" class="redux-opts-upload-remove"' . $remove . ' rel-id="' . $this->field['id'] . '-file">' . __('Remove Upload', Redux_TEXT_DOMAIN) . '</a>';
echo '<br><br>';
echo '<label>' . __('Upload Background Image', IRON_TEXT_DOMAIN) . '</label> ';
echo isset($this->field['desc']) && !empty($this->field['desc']) ? '<br/><span class="description">' . $this->field['desc'] . '</span>' : '';
echo '</td>';
echo '<td>';
$field_id = "repeat";
if (!in_array($field_id, $this->hide)) {
$info = '<p><strong><code>repeat</code> : </strong> The background image will be repeated both vertically and horizontally.</p>' . '<p><strong><code>repeat-x</code> : </strong> The background image will be repeated only horizontally.</p>' . '<p><strong><code>repeat-y</code> : </strong> The background image will be repeated only vertically.</p>' . '<p><strong><code>no-repeat</code> : </strong> The background-image will not be repeated.</p>';
echo '<i class="help icon-info-sign icon-large" data-placement="bottom" data-content="' . esc_attr($info) . '"></i> <label>' . __('Background Repeat', IRON_TEXT_DOMAIN) . '</label> ';
$args = array('id' => $this->field['id'] . '-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'options' => array('' => 'Default', 'repeat' => 'Repeat', 'no-repeat' => 'No Repeat', 'repeat-x' => 'Repeat X', 'repeat-y' => 'Repeat Y', 'inherit' => 'Inherit'), 'std' => !empty($this->field['std']['repeat']) ? $this->field['std']['repeat'] : '');
$field = new Redux_Options_select($args, '', '');
$field->value = @$this->value[$field_id];
$field->render();
echo '<br><br>';
}
$field_id = "size";
if (!in_array($field_id, $this->hide)) {
$info = '<p><strong><code>cover</code> : </strong> Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area</p>' . '<p><strong><code>contain</code> : </strong> Scale the image to the largest size such that both its width and its height can fit inside the content area</p>';
echo '<i class="help icon-info-sign icon-large" data-placement="bottom" data-content="' . esc_attr($info) . '"></i> <label>' . __('Background Size', IRON_TEXT_DOMAIN) . '</label> ';
$field = new Redux_Options_select(array('id' => $this->field['id'] . '-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'options' => array('' => 'Default', 'cover' => 'Cover', 'contain' => 'Contain', 'inherit' => 'Inherit'), 'std' => !empty($this->field['std']['size']) ? $this->field['std']['size'] : ''), '', '');
$field->value = @$this->value[$field_id];
$field->render();
echo '<br><br>';
}
$field_id = "position";
if (!in_array($field_id, $this->hide)) {
$info = '<p>The position property sets the starting position of a background image</p>';
echo '<i class="help icon-info-sign icon-large" data-placement="bottom" data-content="' . esc_attr($info) . '"></i> <label>' . __('Background Position', IRON_TEXT_DOMAIN) . '</label> ';
$field = new Redux_Options_select(array('id' => $this->field['id'] . '-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'options' => array('' => 'Default', 'left top' => 'left top', 'left center' => 'left center', 'left bottom' => 'left bottom', 'right top' => 'right top', 'right center' => 'right center', 'right bottom' => 'right bottom', 'center top' => 'center top', 'center center' => 'center center', 'center bottom' => 'center bottom', 'inherit' => 'Inherit'), 'std' => !empty($this->field['std']['position']) ? $this->field['std']['position'] : ''), '', '');
$field->value = @$this->value[$field_id];
$field->render();
echo '<br><br>';
}
$field_id = "attachment";
if (!in_array($field_id, $this->hide)) {
$info = '<p><strong><code>scroll</code> : </strong> The background image scrolls with the rest of the page</p>' . '<p><strong><code>fixed</code> : </strong> The background image is fixed</p>';
echo '<i class="help icon-info-sign icon-large" data-placement="bottom" data-content="' . esc_attr($info) . '"></i> <label>' . __('Background Attachment', IRON_TEXT_DOMAIN) . '</label> ';
$field = new Redux_Options_select(array('id' => $this->field['id'] . '-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'options' => array('' => 'Default', 'scroll' => 'Scroll', 'fixed' => 'Fixed', 'inherit' => 'Inherit'), 'std' => !empty($this->field['std']['attachment']) ? $this->field['std']['attachment'] : ''), '', '');
$field->value = @$this->value[$field_id];
$field->render();
echo '<br><br>';
}
$field_id = "color";
if (!in_array($field_id, $this->hide)) {
$info = '<p>The color property sets the background color of an element</p>';
echo '<i class="help icon-info-sign icon-large" data-placement="bottom" data-content="' . esc_attr($info) . '"></i> <label>' . __('Background Color', IRON_TEXT_DOMAIN) . '</label> ';
$field = new Redux_Options_color(array('id' => $this->field['id'] . '-' . $field_id, 'name' => $this->args['opt_name'] . '[' . $this->field['id'] . '][' . $field_id . ']', 'std' => !empty($this->field['std']['color']) ? $this->field['std']['color'] : ''), '', '');
$field->value = @$this->value[$field_id];
$field->enqueue();
$field->render();
echo '<p style="margin-top:10px; margin-left:18px;"><small>Background Images will not be shown on mobile.<br>Please set a background color instead</small></p>';
}
echo '</td></tr></table>';
}
