<?php
class DesignSkinsPanel extends HeadwayVisualEditorPanelAPI
{
public $id = 'skins';
public $name = 'Skins';
public $mode = 'design';
public $tabs = array('import' => 'Import', 'export' => 'Export');
public $tab_notices = array('import' => 'Skins are simple files that you may upload to get a rapid start designing your site. Once you import a skin, you may customize it to your likings.', 'export' => 'Simply click the Export button below to export your Design Editor settings as a skin. Feel free to share this skin with other Headway users!<br /><br /><strong>Notice:</strong> Instances and layout-specific customizations are <strong>NOT</strong> included in a skin export.');
public $inputs = array('import' => array('skin-import-live-css' => array('type' => 'checkbox', 'name' => 'skin-import-live-css', 'label' => 'Overwrite Live CSS with Skin\'s Live CSS', 'value' => true, 'no-save' => true), 'skin-import-layout-templates' => array('type' => 'checkbox', 'name' => 'skin-import-layout-templates', 'label' => 'Include Skin Layout Templates', 'value' => true, 'no-save' => true), 'skin-import-file' => array('type' => 'import-file', 'name' => 'skin-import-file', 'label' => 'Import', 'button-label' => 'Select File & Apply Skin', 'no-save' => true, 'callback' => 'initiateSkinImport(input);')), 'export' => array('skin-export-name' => array('type' => 'text', 'name' => 'skin-export-name', 'label' => 'Skin Name', 'placeholder' => 'Unnamed', 'no-save' => true), 'skin-export-live-css' => array('type' => 'checkbox', 'name' => 'skin-export-live-css', 'label' => 'Include Live CSS', 'value' => true, 'no-save' => true), 'skin-export-templates' => array('type' => 'multi-select', 'name' => 'skin-export-templates', 'label' => 'Included Layout Templates', 'no-save' => true, 'options' => 'get_templates()'), 'skin-export' => array('type' => 'button', 'name' => 'skin-export', 'label' => 'Export', 'button-label' => 'Download Skin File', 'no-save' => true, 'callback' => 'exportSkinButtonCallback(input);')));
function get_templates()
{
return HeadwayLayout::get_templates();
}
}
headway_register_visual_editor_panel('DesignSkinsPanel');
<?php
class DefaultsDesignEditorPanel extends HeadwayVisualEditorPanelAPI
{
public $id = 'defaults';
public $name = 'Defaults';
public $mode = 'design';
function panel_content($args = false)
{
echo '
<div class="design-editor-element-selector-container">';
echo '<ul id="design-editor-default-elements" class="sub-tabs element-selector">';
echo '</ul><!-- #design-editor-default-elements -->';
echo '</div><!-- .design-editor-default-element-selector-container -->
<div class="design-editor-options-container">
<div class="design-editor-info" style="display: none;">
<h4>Editing: <span></span> <strong>(Default Element)</strong></h4>
</div><!-- .design-editor-info -->
<div class="design-editor-options" style="display:none;"></div><!-- .design-editor-options -->
<div class="design-editor-options-instructions sub-tab-notice">' . __('Please select a default element to the left.', 'headway') . '</div>
</div><!-- .design-editor-options-container -->
';
}
}
headway_register_visual_editor_panel('DefaultsDesignEditorPanel');
<?php
class GridSetupPanel extends HeadwayVisualEditorPanelAPI
{
public $id = 'setup';
public $name = 'Setup';
public $mode = 'grid';
public $tabs = array('grid' => 'Grid', 'responsive-grid' => 'Responsive Grid');
public $tab_notices = array('grid' => '<strong>Note:</strong> the content in the grid above will not reflect how your site actually looks. The content inside the blocks is to give you a general reference while you wireframe and build the layout to your site.<br /><br />The settings below are <strong>global</strong> and are not customized on a per-layout basis.', 'responsive-grid' => 'The Headway Responsive Grid allows the powerful grid in Headway Base to be custom-tailored depending on the device that the visitor is viewing the site from. Please note: some sites may benefit from having the responsive grid enabled while other will not. As the designer of the website, it is up to you to decide. The responsive grid can be enabled or disabled at any time.');
public $inputs = array('grid' => array('columns' => array('type' => 'slider', 'name' => 'columns', 'label' => 'Default Column Count', 'default' => 24, 'tooltip' => 'The column width is the amount of space inside of each column. This is represented by the grey regions on the grid.', 'slider-min' => 6, 'slider-max' => 24, 'slider-interval' => 1, 'callback' => 'Headway.defaultGridColumnCount = value.toString();updateGridWidthInput($(input).parents(".sub-tabs-content"));'), 'column-width' => array('type' => 'slider', 'name' => 'column-width', 'label' => 'Global Column Width', 'default' => 20, 'tooltip' => 'The column width is the amount of space inside of each column. This is represented by the grey regions on the grid.', 'unit' => 'px', 'slider-min' => 10, 'slider-max' => 80, 'slider-interval' => 1, 'callback' => 'Headway.globalGridColumnWidth = value.toString();$i("div.wrapper:not(.independent-grid)").each(function() { $(this).headwayGrid("updateGridCSS"); });updateGridWidthInput($(input).parents(".sub-tabs-content"));'), 'gutter-width' => array('type' => 'slider', 'name' => 'gutter-width', 'label' => 'Global Gutter Width', 'default' => 20, 'tooltip' => 'The gutter width is the amount of space between each column. This is the space between each of the grey regions on the grid.', 'unit' => 'px', 'slider-min' => 0, 'slider-max' => 40, 'slider-interval' => 1, 'callback' => 'Headway.globalGridGutterWidth = value.toString();$i("div.wrapper:not(.independent-grid)").each(function() { $(this).headwayGrid("updateGridCSS"); });updateGridWidthInput($(input).parents(".sub-tabs-content"));'), 'grid-width' => array('type' => 'integer', 'unit' => 'px', 'default' => 940, 'name' => 'grid-width', 'label' => 'Global Grid Width', 'readonly' => true)), 'responsive-grid' => array('enable-responsive-grid' => array('type' => 'checkbox', 'name' => 'enable-responsive-grid', 'label' => 'Enable Responsive Grid', 'default' => false, 'tooltip' => 'If Headway\'s responsive grid is enabled, the grid will automatically adjust depending on the visitor\'s device (computer, iPhone, iPad, etc). Enabling the responsive grid can be extremely beneficial for some websites, but may not be worthwhile for other websites. If the responsive grid is enabled, the user will always have the option to disable the responsive grid via a link in the footer block.<br /><br /><strong>Please Note:</strong> with the responsive grid enabled, the exact pixel widths of blocks may differ very slightly from when it is <em>disabled</em>.'), 'responsive-video-resizing' => array('type' => 'checkbox', 'name' => 'responsive-video-resizing', 'label' => 'Responsive Video Resizing', 'default' => true, 'tooltip' => 'If the Responsive Grid is enabled and the user visits the site when there are YouTube, Vimeo, or any other videos, then the videos will not resize properly unless then is checked.')));
}
headway_register_visual_editor_panel('GridSetupPanel');
<div class="design-editor-options-container">
<div class="design-editor-info" style="display: none;">
<h4>Editing: <span></span> <strong></strong> <code class="tooltip" title="">{}</code></h4>
<div class="design-editor-info-right">
<div class="select-container instances">
<select class="instances">
</select>
</div><!-- .select-container -->
<div class="select-container states">
<select class="states">
</select>
</div><!-- .select-container -->
<span class="button button-small design-editor-info-button customize-element-for-layout">Customize For Current Layout</span>
<span class="button button-small design-editor-info-button customize-for-regular-element">Customize Regular Element</span>
</div>
</div><!-- .design-editor-info -->
<div class="design-editor-options" style="display:none;"></div><!-- .design-editor-options -->
<div class="design-editor-options-instructions sub-tab-notice">' . __('Please select an element to the left.', 'headway') . '</div>
</div><!-- .design-editor-options-container -->
';
}
}
headway_register_visual_editor_panel('EditorPanel');
