ContentPanel.php (19422B)
1 <?php 2 3 namespace Materialis\Customizer\Panels; 4 5 class ContentPanel extends \Materialis\Customizer\BasePanel 6 { 7 8 private $popupTemplatesLoaded = false; 9 10 public function init() 11 { 12 $this->companion()->customizer()->registerScripts(array($this, 'addScripts')); 13 $this->companion()->customizer()->previewInit(array($this, '__addPreviewScripts')); 14 add_action('cloudpress\customizer\global_scripts', array($this, '__popupsTemplates')); 15 add_action('cloudpress\customizer\preview_scripts', array($this, 'loadWPEditor')); 16 17 $this->addSections( 18 array( 19 "page_layout_reorder" => array( 20 "wp_data" => array( 21 "title" => __('Reorder and remove sections', 'materialis-companion'), 22 "panel" => $this->id, 23 ), 24 ), 25 "page_content_section" => array( 26 "wp_data" => array( 27 "title" => __('Add sections into page', 'materialis-companion'), 28 "panel" => $this->id, 29 ), 30 ), 31 "page_content_settings" => array( 32 "wp_data" => array( 33 "panel" => $this->id, 34 ), 35 ), 36 ) 37 ); 38 $this->addSettings( 39 array( 40 "page_content" => array( 41 "class" => "Materialis\\Customizer\\Settings\\ContentSetting", 42 "section" => "page_content_section", 43 "wp_data" => array( 44 "transport" => "postMessage", 45 "default" => array(), 46 ), 47 "control" => array( 48 "class" => "Materialis\\Customizer\\Controls\\ContentSectionsListControl", 49 "insertText" => __('Add Section', 'materialis-companion'), 50 "selection" => "check", 51 "wp_data" => array(), 52 "dataSource" => "data:sections", 53 ), 54 ), 55 ) 56 ); 57 } 58 59 60 public function addScripts() 61 { 62 $jsUrl = $this->companion()->assetsRootURL() . "/js/customizer/"; 63 64 if (apply_filters('\cloudpress\customizer\load_bundled_version', true)) { 65 66 } else { 67 wp_enqueue_script('cp-customizer-content', $jsUrl . "customizer-content.js", array('customizer-base'), false, true); 68 wp_enqueue_script('cp-customizer-content-tpls', $jsUrl . "customizer-content-tpls.js", array('customizer-base'), false, true); 69 wp_enqueue_script('cp-customizer-content-handles', $jsUrl . "customizer-content-handles.js", array('customizer-base'), false, true); 70 wp_enqueue_script('customizer-content-sections-overlays', $jsUrl . "customizer-content-sections-overlays.js", array('customizer-base'), false, true); 71 wp_enqueue_script('cp-customizer-menu', $jsUrl . "customizer-menu.js", array('customizer-base'), false, true); 72 } 73 } 74 75 public function __addPreviewScripts() 76 { 77 $jsUrl = $this->companion()->assetsRootURL() . "/js/customizer/"; 78 } 79 80 public function loadWPEditor() 81 { 82 wp_enqueue_script('tinymce_js', includes_url('js/tinymce/') . 'wp-tinymce.php', array('jquery'), false, true); 83 } 84 85 public function __popupsTemplates() 86 { 87 if ($this->popupTemplatesLoaded) { 88 return; 89 } 90 91 $this->popupTemplatesLoaded = true; 92 93 ?> 94 <!--suppress JSAnnotator --> 95 <div id="cp-container-editor" style="display:none"> 96 <ul id="cp-items"> 97 </ul> 98 <div id="cp-items-footer"> 99 <button type="button" class="button button-large" id="cp-item-cancel"><?php _e('Cancel', 'materialis-companion'); ?></button> 100 <button type="button" class="button button-large button-primary" id="cp-item-ok"><?php _e('Apply Changes', 'materialis-companion'); ?></button> 101 </div> 102 </div> 103 104 <script id="toolbar-template" type="text/template"> 105 <div class="overlay-tooltip-panel fixed-overlay"> 106 <div class="overlay-toolbar"> 107 <div class="name-group overlay-tooltip-group fixed-overlay"> 108 <div class="tab_text"> 109 <i class="overlay-toolbar-element-type"> 110 </i> 111 </div> 112 </div> 113 <div class="options-group cog overlay-tooltip-group fixed-overlay"> 114 <div class="overlay-contextual-menu"> 115 </div> 116 </div> 117 <div style="clear:both;width:0px"> 118 </div> 119 </div> 120 </div> 121 </script> 122 123 <script id="cp-content-templates-text" type="text/template"> 124 <li class="customize-control customize-control-text"> 125 <label> 126 <span class="customize-control-title">{{{ label }}}</span> 127 <input type="text" value="{{{ value }}}" id="{{{ id }}}"> 128 </label> 129 </li> 130 </script> 131 132 133 <script id="cp-content-templates-text-with-checkbox" type="text/template"> 134 <li class="customize-control customize-control-checkbox"> 135 <# if (canHide) { #> 136 <label for="{{ id }}__visible"> 137 <input id="{{ id }}__visible" type="checkbox"> 138 {{ enableLabel }} 139 </label> 140 <# if (description) { #> 141 <span class="description customize-control-description"> 142 {{ description }} 143 </span> 144 <# } #> 145 <# } #> 146 </li> 147 <li class="customize-control customize-control-text"> 148 <label id="{{ id }}_container"> 149 <span class="customize-control-title">{{{ label }}}</span> 150 <input type="text" value="{{{ value.value }}}" id="{{{ id }}}"> 151 </label> 152 <inline-script> 153 jQuery("#{{ id }}__visible").prop("checked", {{ value.visible }}); 154 jQuery("#{{ id }}__visible").change(function(){ 155 if (jQuery(this).prop("checked")) { 156 jQuery("#{{ id }}_container").show(); 157 } else { 158 jQuery("#{{ id }}_container").hide(); 159 } 160 }) 161 jQuery("#{{ id }}__visible").trigger("change"); 162 </inline-script> 163 </li> 164 </script> 165 166 167 <script id="cp-content-templates-link" type="text/template"> 168 <li class="customize-control customize-control-text"> 169 <label class="link-options-group"> 170 <div class="link-option"> 171 <span class="customize-control-title">{{{ label }}}</span> 172 <input type="text" value="{{{ value.link }}}" id="{{ id }}__link"> 173 </div> 174 <# if (value.target ) { #> 175 <div class="target-option"> 176 <span class="customize-control-title"><?php _e('Target', 'materialis-companion') ?></span> 177 <select type="text" id="{{ id }}__target"> 178 <option value="_self"> <?php _e('Same tab', 'materialis-companion') ?></option> 179 <option value="_blank"><?php _e('New tab', 'materialis-companion') ?></option> 180 <# if(CP_Customizer.IS_PRO) { #> 181 <option style="display:{{ (CP_Customizer.IS_PRO?'':'none') }}" value="lightbox"><?php _e('Lightbox', 'materialis-companion') ?></option> 182 <# } #> 183 </select> 184 <inline-script> 185 jQuery("#{{ id }}__target").val("{{{ value.target }}}") 186 </inline-script> 187 </div> 188 <# } #> 189 </label> 190 </li> 191 </script> 192 193 <script id="cp-content-templates-list" type="text/template"> 194 <li class="customize-control customize-control-text"> 195 <div class="list-control list" id="{{{ id }}}"> 196 <# _.each(value, function(item, index) { #> 197 <div class="section-list-item"> 198 <div class="handle reorder-handler"></div> 199 <input class="item-editor" type="text" value="{{{ item.value }}}"> 200 <div class="item-actions"> 201 <span class="item-remove" title="<?php _e('Delete section from page', 'materialis-companion') ?>" onClick='jQuery(this).parents(".section-list-item").remove()'></span> 202 </div> 203 </div> 204 <# }); #> 205 </div> 206 <a class="add-item button-primary" id="add_{{ id }}"><?php _e('Add Item', 'materialis-companion') ?></a> 207 <inline-script> 208 jQuery("#{{ id }}").sortable({"axis" : "y"}); 209 jQuery("#add_{{ id }}").click(function(){ 210 var list = jQuery("#{{ id }}"); 211 var $item = list.children().first().clone(); 212 list.append($item); 213 }) 214 </inline-script> 215 </li> 216 </script> 217 <script id="cp-content-templates-image" type="text/template"> 218 <li class="customize-control customize-control-text" style="display: list-item;"> 219 <label> 220 <span class="customize-control-title">{{{ label }}}</span> 221 222 <div class="image-wrapper"> 223 <img id="preview-{{ id }}" src="{{{ value }}}"> 224 </div> 225 <div class="image-controls"> 226 <input type="text" value="{{{ value }}}" id="{{{ id }}}"> 227 <button type="button" onClick='CP_Customizer.openMediaBrowser("{{{ mediaType }}}", jQuery("#{{ id }}"), {{ JSON.stringify(mediaData) }})' class="button upload-button cp-image-select" data-cp-src="{{{ id }}}"> <?php _e("Browse Image", 'materialis-companion') ?> </button> 228 </div> 229 <inline-script> 230 jQuery("#{{ id }}").change(function(){ jQuery("#preview-{{ id }}").attr("src",this.value)}) 231 </inline-script> 232 </label> 233 </li> 234 </script> 235 236 <script id="cp-content-templates-linked-icon" type="text/template"> 237 <li class="customize-control customize-control-text" style="display: list-item;"> 238 <div class="label"> 239 <span class="customize-control-title">{{{ label }}}</span> 240 <div class="image-wrapper"> 241 <i id="preview-icon-{{ id }}" class="mdi {{ value.icon }}"></i> 242 <# if (canHide) { #> 243 <label for="{{ id }}__visible"> 244 <input id="{{ id }}__visible" type="checkbox" {{ (value.visible?"checked='true'":"") }}> 245 <?php _e("Visible", 'materialis-companion') ?> 246 </label> 247 <# } #> 248 </div> 249 <div class="image-controls"> 250 <div style="float: left;width: calc( 100% - 110px);box-sizing: border-box;"> 251 <span class="customize-control-title"> <?php _e("Link", 'materialis-companion') ?> </span> 252 <input type="text" value="{{{ value.link }}}" id="{{ id }}__link"> 253 </div> 254 255 <div style="float: left;width: 110px;padding-left: 4px;box-sizing: border-box;<# if (!value.target) { #>display:none<# } #>"> 256 <span class="customize-control-title"><?php _e("Target", 'materialis-companion') ?> </span> 257 <select type="text" id="{{ id }}__target"> 258 <option value="_self"><?php _e("Same tab", 'materialis-companion') ?> </option> 259 <option value="_blank"><?php _e("New tab", 'materialis-companion') ?> </option> 260 <# if(CP_Customizer.IS_PRO) { #> 261 <option style="display:{{ (CP_Customizer.IS_PRO?'':'none') }}" value="lightbox"><?php _e("Lightbox", 'materialis-companion') ?> </option> 262 <# } #> 263 </select> 264 </div> 265 266 <input type="hidden" value="{{{ value.icon }}}" id="{{ id }}__icon"> 267 <button type="button" onClick='CP_Customizer.openMediaBrowser("{{{ mediaType }}}", jQuery("#{{ id }}__icon"), {{ JSON.stringify(mediaData) }})' 268 class="button upload-button cp-mdi-select" data-cp-src="{{ id }}__icon"><?php _e('Browse Icon', 'materialis-companion') ?> 269 </button> 270 </div> 271 </div> 272 <inline-script> 273 jQuery("#{{ id }}__target").val("{{{ value.target }}}") 274 jQuery("#{{ id }}__icon").change(function(){ jQuery("#preview-icon-{{ id }}").attr("class","mdi " + this.value)}) 275 </inline-script> 276 </li> 277 </script> 278 279 <script id="cp-content-templates-icon" type="text/template"> 280 <li class="customize-control customize-control-text" style="display: list-item;"> 281 <div> 282 <span class="customize-control-title">{{{ label }}}</span> 283 <div class="image-wrapper"> 284 <i id="preview-icon-{{ id }}" class="mdi {{ value.icon }}"></i> 285 <# if (canHide) { #> 286 <label for="{{ id }}__visible"> 287 <input id="{{ id }}__visible" type="checkbox" {{ (value.visible?"checked='true'":"") }}> 288 <?php _e("Visible", 'materialis-companion') ?> 289 </label> 290 <# } #> 291 </div> 292 <div class="image-controls"> 293 <input type="hidden" value="{{{ value.icon }}}" id="{{ id }}__icon"> 294 <button type="button" onClick='CP_Customizer.openMediaBrowser("{{{ mediaType }}}", 295 jQuery("#{{ id }}__icon"), {{ JSON.stringify(mediaData) }})' class="button upload-button cp-mdi-select" data-cp-src="{{ id }}__icon"><?php _e("Browse Icon", 'materialis-companion') ?> </button> 296 <div> 297 <# if(typeof styles !== 'undefined') { #> 298 <div style="float: left;width: 180px;"> 299 <span class="customize-control-title" style="margin:0.5rem 0"><?php _e("Icon Style", 'materialis-companion') ?></span> 300 <select type="text" id="{{ id }}__style"> 301 <# _.each(styles, function(item, index) { #> 302 <option 303 <# value.style == item.value ? print('selected="true"'):print('') #> value="{{{ item.value }}}">{{ item.label }}</option> 304 <# }) #> 305 </select> 306 <inline-script> 307 try{ 308 jQuery("[id={{ id }}__style").val("{{{ value.style }}}") 309 } catch(e){} 310 </inline-script> 311 </div> 312 313 <# } #> 314 315 <# if(typeof sizes !== 'undefined') { #> 316 <div style="float: left;margin-left: 10px;width: 130px;"> 317 <span class="customize-control-title" style="margin:0.5rem 0"><?php _e("Icon Size", 'materialis-companion') ?></span> 318 <select type="text" id="{{ id }}__size"> 319 <# _.each(sizes, function(item, index) { #> 320 <option 321 <# value.size == item.value ? print('selected="true"'):print('') #> value="{{{ item.value }}}">{{ item.label }}</option> 322 <# }) #> 323 </select> 324 <inline-script> 325 try{ 326 jQuery("[id={{ id }}__size").val("{{{ value.size }}}") 327 } catch(e){} 328 </inline-script> 329 </div> 330 <# } #> 331 </div> 332 333 </div> 334 </div> 335 <inline-script> 336 jQuery("#{{ id }}__icon").change(function(){ jQuery("#preview-icon-{{ id }}").attr("class","mdi " + this.value)}) 337 </inline-script> 338 </li> 339 </script> 340 341 342 <?php 343 344 } 345 346 public function render_template() 347 { 348 349 $settings_ids = apply_filters('cloudpress\customizer\page_settings', array()); 350 ?> 351 <li id="accordion-panel-{{ data.id }}" data-name="{{{ data.id }}}" class="accordion-section control-section control-panel control-panel-{{ data.type }}"> 352 <h3 class="accordion-section-title no-chevron" tabindex="0"> 353 {{ data.title }} 354 355 <span title="<?php _e('Add Section', 'materialis-companion') ?>" class="add-section-plus section-icon"></span> 356 <span data-settings="<?php echo esc_attr(implode(',', $settings_ids)); ?>" title="<?php _e('Page Settings', 'materialis-companion') ?>" class="section-icon setting page-settings"></span> 357 </h3> 358 359 360 <div class="sections-list-reorder"> 361 <span class="customize-control-title"><?php _e('Manage page sections', 'materialis-companion'); ?></span> 362 <ul id="page_full_rows" class="list list-order"> 363 <li class="empty"><?php _e('No section added', 'materialis-companion') ?></li> 364 </ul> 365 <div class="add-section-container"> 366 <a class="cp-add-section available-item-hover-button button-primary"><?php _e('Add Section', 'materialis-companion'); ?></a> 367 </div> 368 </div> 369 </li> 370 <?php ; 371 } 372 }