Collapse-O-Matic - Version 1.8.0

Version Description

  • improved collapse-commander integration
  • improved method of adding custom css
  • options passed using wp_localize_script
  • escaped options to improve security
Download this release

Release Info

Developer baden03
Plugin Icon 128x128 Collapse-O-Matic
Version 1.8.0
Comparing to
See all releases

Code changes from version 1.7.14 to 1.8.0

Files changed (5) hide show
  1. README.md +3 -3
  2. collapse-o-matic.php +73 -70
  3. js/admin_codemirror.js +6 -0
  4. js/collapse.js +9 -9
  5. readme.txt +13 -4
README.md CHANGED
@@ -2,9 +2,9 @@
2
  * Contributors: twinpictures, baden03
3
  * Donate link: https://plugins.twinpictures.de/plugins/collapse-o-matic/
4
  * Tags: collapse, expand, collapsible, expandable, expandable content, collapsable content, shortcode, hidden, hide, display, accordion, accordion, jQuery, javascript, roll-your-own, twinpictures, read me, read more, more, plugin oven
5
- * Requires at least: 4.7
6
- * Tested up to: 5.7.0
7
- * Stable tag: 1.7.14a
8
  * Requires PHP: 7.2
9
  * License: GPLv2 or later
10
  * License URI: https://www.gnu.org/licenses/gpl-2.0.html
2
  * Contributors: twinpictures, baden03
3
  * Donate link: https://plugins.twinpictures.de/plugins/collapse-o-matic/
4
  * Tags: collapse, expand, collapsible, expandable, expandable content, collapsable content, shortcode, hidden, hide, display, accordion, accordion, jQuery, javascript, roll-your-own, twinpictures, read me, read more, more, plugin oven
5
+ * Requires at least: 4.9
6
+ * Tested up to: 5.8.1
7
+ * Stable tag: 1.8.0
8
  * Requires PHP: 7.2
9
  * License: GPLv2 or later
10
  * License URI: https://www.gnu.org/licenses/gpl-2.0.html
collapse-o-matic.php CHANGED
@@ -4,7 +4,7 @@ Plugin Name: Collapse-O-Matic
4
  Text Domain: jquery-collapse-o-matic
5
  Plugin URI: https://pluginoven.com/plugins/collapse-o-matic/
6
  Description: Collapse-O-Matic adds an [expand] shortcode that wraps content into a lovely, jQuery collapsible div.
7
- Version: 1.7.14
8
  Author: twinpictures, baden03
9
  Author URI: https://twinpictures.de/
10
  License: GPL2
@@ -29,7 +29,7 @@ class WP_Collapse_O_Matic {
29
  * Current version
30
  * @var string
31
  */
32
- var $version = '1.7.14';
33
 
34
  /**
35
  * Used as prefix for options entry
@@ -91,17 +91,12 @@ class WP_Collapse_O_Matic {
91
 
92
  //load the script and style if viewing the front-end
93
  add_action('wp_enqueue_scripts', array( $this, 'collapsTronicInit' ) );
 
94
 
95
  // add actions
96
  add_action( 'admin_menu', array( $this, 'admin_menu' ) );
97
  add_action( 'plugin_action_links_' . plugin_basename(__FILE__), array( $this, 'plugin_actions' ) );
98
  add_action( 'admin_init', array( $this, 'admin_init' ) );
99
- if($this->options['script_location'] == 'footer' ){
100
- add_action( 'wp_footer', array( $this, 'colomat_js_vars' ) );
101
- }
102
- else{
103
- add_action('wp_head', array( $this, 'colomat_js_vars' ) );
104
- }
105
  add_shortcode('expand', array($this, 'shortcode'));
106
  add_shortcode('colomat', array($this, 'shortcode'));
107
 
@@ -114,21 +109,6 @@ class WP_Collapse_O_Matic {
114
  add_filter('widget_text', 'do_shortcode');
115
  }
116
 
117
- //global javascript vars
118
- function colomat_js_vars(){
119
- echo "<script type='text/javascript'>\n";
120
- echo "var colomatduration = '".$this->options['duration']."';\n";
121
- echo "var colomatslideEffect = '".$this->options['slideEffect']."';\n";
122
- echo "var colomatpauseInit = '".$this->options['pauseinit']."';\n";
123
- echo "var colomattouchstart = '".$this->options['touch_start']."';\n";
124
- echo "</script>";
125
- if( !empty( $this->options['custom_css'] ) ){
126
- echo "\n<style>\n";
127
- echo $this->options['custom_css'];
128
- echo "\n</style>\n";
129
- }
130
- }
131
-
132
  /**
133
  * Callback init
134
  */
@@ -138,7 +118,17 @@ class WP_Collapse_O_Matic {
138
  if($this->options['script_location'] == 'footer' ){
139
  $load_in_footer = true;
140
  }
141
- wp_register_script('collapseomatic-js', plugins_url('js/collapse.js', __FILE__), array('jquery'), '1.6.23', $load_in_footer);
 
 
 
 
 
 
 
 
 
 
142
  if( empty($this->options['script_check']) ){
143
  wp_enqueue_script('collapseomatic-js');
144
  }
@@ -146,12 +136,34 @@ class WP_Collapse_O_Matic {
146
  //css
147
  if ($this->options['style'] !== 'none') {
148
  wp_register_style( 'collapseomatic-css', plugins_url('/'.$this->options['style'].'_style.css', __FILE__) , array (), '1.6' );
 
 
 
149
  if( empty($this->options['css_check']) ){
150
  wp_enqueue_style( 'collapseomatic-css' );
151
  }
152
  }
153
  }
154
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
155
  /**
156
  * Callback admin_menu
157
  */
@@ -224,20 +236,6 @@ class WP_Collapse_O_Matic {
224
  if( !empty($cid) && is_plugin_active( 'collapse-commander/collapse-commander.php') ){
225
  $meta_values = WP_CollapseCommander::meta_grabber($cid);
226
  extract(shortcode_atts($meta_values, $atts));
227
-
228
- $args = array(
229
- 'post_type' => 'expand-element',
230
- 'p' => $cid,
231
- );
232
- $query_commander = new WP_Query( $args );
233
- if ( $query_commander->have_posts() ) {
234
- while ( $query_commander->have_posts() ) {
235
- $query_commander->the_post();
236
- $title = get_the_title();
237
- $content = get_the_content();
238
- }
239
- }
240
- wp_reset_postdata();
241
  }
242
 
243
  if(!empty($triggertext)){
@@ -260,6 +258,13 @@ class WP_Collapse_O_Matic {
260
  $content .= '<div class="com_edit_link"><a class="post-edit-link" href="'.get_edit_post_link($cid).'">'.__('Edit').'</a></div>';
261
  }
262
 
 
 
 
 
 
 
 
263
  //id does not allow spaces
264
  $id = preg_replace('/\s+/', '_', $id);
265
 
@@ -493,7 +498,6 @@ class WP_Collapse_O_Matic {
493
  $like_it = $like_it_arr[$rand_key];
494
  ?>
495
  <div class="wrap">
496
- <div class="icon32" id="icon-options-custom" style="background:url( <?php echo plugins_url( 'images/collapse-o-matic-icon.png', __FILE__ ) ?> ) no-repeat 50% 50%"><br></div>
497
  <h2>Collapse-O-Matic</h2>
498
  </div>
499
 
@@ -512,7 +516,7 @@ class WP_Collapse_O_Matic {
512
  <table class="form-table">
513
  <tr>
514
  <th><?php _e( 'Style', 'jquery-collapse-o-matic' ) ?>:</th>
515
- <td><label><select id="<?php echo $this->options_name ?>[style]" name="<?php echo $this->options_name ?>[style]">
516
  <?php
517
  if(empty($options['style'])){
518
  $options['style'] = 'light';
@@ -527,7 +531,7 @@ class WP_Collapse_O_Matic {
527
  if($options['style'] == $value){
528
  $selected = 'SELECTED';
529
  }
530
- echo '<option value="'.$value.'" '.$selected.'>'.$key.'</option>';
531
  }
532
  ?>
533
  </select>
@@ -538,7 +542,7 @@ class WP_Collapse_O_Matic {
538
  <?php if( is_plugin_active( 'collapse-commander/collapse-commander.php' ) ) : ?>
539
  <tr>
540
  <th><?php _e( 'CID Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
541
- <td><label><input type="text" id="<?php echo $this->options_name ?>[cid]" name="<?php echo $this->options_name ?>[cid]" value="<?php echo $options['cid']; ?>" />
542
  <br /><span class="description"><?php printf( __('Default %sCollapse Commander%s ID', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/premium-plugins/collapse-commander/" target="_blank">', '</a>'); ?></span></label>
543
  </td>
544
  </tr>
@@ -552,56 +556,56 @@ class WP_Collapse_O_Matic {
552
 
553
  <tr>
554
  <th><?php _e( 'Tag Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
555
- <td><label><input type="text" id="<?php echo $this->options_name ?>[tag]" name="<?php echo $this->options_name ?>[tag]" value="<?php echo $options['tag']; ?>" />
556
  <br /><span class="description"><?php printf(__('HTML tag use to wrap the trigger text. See %sTag Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#tag-attribute" target="_blank">', '</a>'); ?></span></label>
557
  </td>
558
  </tr>
559
 
560
  <tr>
561
  <th><?php _e( 'Trigclass Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
562
- <td><label><input type="text" id="<?php echo $this->options_name ?>[trigclass]" name="<?php echo $this->options_name ?>[trigclass]" value="<?php echo $options['trigclass']; ?>" />
563
  <br /><span class="description"><?php printf(__('Default class assigned to the trigger element. See %sTrigclass Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#trigclass-attribute" target="_blank">', '</a>'); ?></span></label>
564
  </td>
565
  </tr>
566
 
567
  <tr>
568
  <th><?php _e( 'Tabindex Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
569
- <td><label><input type="text" id="<?php echo $this->options_name ?>[tabindex]" name="<?php echo $this->options_name ?>[tabindex]" value="<?php echo $options['tabindex']; ?>" />
570
  <br /><span class="description"><?php printf(__('Default tabindex value to be assigned to the trigger element. See %sTabindex Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#tabindex-attribute" target="_blank">', '</a>'); ?></span></label>
571
  </td>
572
  </tr>
573
 
574
  <tr>
575
  <th><?php _e( 'Targtag Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
576
- <td><label><input type="text" id="<?php echo $this->options_name ?>[targtag]" name="<?php echo $this->options_name ?>[targtag]" value="<?php echo $options['targtag']; ?>" />
577
  <br /><span class="description"><?php printf(__('HTML tag use for the target element. See %sTargtag Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#targtag-attribute" target="_blank">', '</a>'); ?></span></label>
578
  </td>
579
  </tr>
580
 
581
  <tr>
582
  <th><?php _e( 'Targclass Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
583
- <td><label><input type="text" id="<?php echo $this->options_name ?>[targclass]" name="<?php echo $this->options_name ?>[targclass]" value="<?php echo $options['targclass']; ?>" />
584
  <br /><span class="description"><?php printf(__('Default class assigned to the target element. See %sTargclass Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#targclass-attribute" target="_blank">', '</a>'); ?></span></label>
585
  </td>
586
  </tr>
587
 
588
  <tr>
589
  <th><?php _e( 'No Title', 'jquery-collapse-o-matic' ) ?>:</th>
590
- <td><label><input type="checkbox" id="<?php echo $this->options_name ?>[notitle]" name="<?php echo $this->options_name ?>[notitle]" value="1" <?php echo checked( $options['notitle'], 1 ); ?> /> <?php _e('No Title', 'jquery-collapse-o-matic'); ?>
591
  <br /><span class="description"><?php _e('Do not use title tags by default.', 'jquery-collapse-o-matic'); ?></span></label>
592
  </td>
593
  </tr>
594
 
595
  <tr>
596
  <th><?php _e( 'Add touchstart', 'jquery-collapse-o-matic' ) ?>:</th>
597
- <td><label><input type="checkbox" id="<?php echo $this->options_name ?>[touch_start]" name="<?php echo $this->options_name ?>[touch_start]" value="1" <?php echo checked( $options['touch_start'], 1 ); ?> /> <?php _e('Add touchstart', 'jquery-collapse-o-matic'); ?>
598
  <br /><span class="description"><?php _e('Add jQuery touchstart binding to triggers.', 'jquery-collapse-o-matic'); ?></span></label>
599
  </td>
600
  </tr>
601
 
602
  <tr>
603
  <th><?php _e( 'Initial Pause', 'jquery-collapse-o-matic' ) ?>:</th>
604
- <td><label><input type="number" id="<?php echo $this->options_name ?>[pauseinit]" name="<?php echo $this->options_name ?>[pauseinit]" value="<?php echo $options['pauseinit']; ?>" />
605
  <br /><span class="description"><?php _e('Amount of time in milliseconds to pause before the initial collapse is triggered on page load.', 'jquery-collapse-o-matic'); ?></span></label>
606
  </td>
607
  </tr>
@@ -613,14 +617,14 @@ class WP_Collapse_O_Matic {
613
  }
614
  ?>
615
  <th><?php _e( 'Collapse/Expand Duration', 'jquery-collapse-o-matic' ) ?>:</th>
616
- <td><label><input type="text" id="<?php echo $this->options_name ?>[duration]" name="<?php echo $this->options_name ?>[duration]" value="<?php echo $options['duration']; ?>" />
617
  <br /><span class="description"><?php printf(__('A string or number determining how long the animation will run. See %sDuration%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/#duration" target="_blank">', '</a>'); ?></span></label>
618
  </td>
619
  </tr>
620
 
621
  <tr>
622
  <th><?php _e( 'Animation Effect', 'jquery-collapse-o-matic' ) ?>:</th>
623
- <td><label><select id="<?php echo $this->options_name ?>[slideEffect]" name="<?php echo $this->options_name ?>[slideEffect]">
624
  <?php
625
  if(empty($options['slideEffect'])){
626
  $options['slideEffect'] = 'slideFade';
@@ -634,7 +638,7 @@ class WP_Collapse_O_Matic {
634
  if($options['slideEffect'] == $value){
635
  $selected = 'SELECTED';
636
  }
637
- echo '<option value="'.$value.'" '.$selected.'>'.$key.'</option>';
638
  }
639
  ?>
640
  </select>
@@ -644,14 +648,14 @@ class WP_Collapse_O_Matic {
644
 
645
  <tr>
646
  <th><?php _e( 'Custom Style', 'jquery-collapse-o-matic' ) ?>:</th>
647
- <td><label><textarea id="<?php echo $this->options_name ?>[custom_css]" name="<?php echo $this->options_name ?>[custom_css]" style="width: 100%; height: 150px;"><?php echo $options['custom_css']; ?></textarea>
648
  <br /><span class="description"><?php _e( 'Custom CSS style for <em>ultimate flexibility</em>', 'jquery-collapse-o-matic' ) ?></span></label>
649
  </td>
650
  </tr>
651
 
652
  <tr>
653
  <th><?php _e( 'Content Filter', 'jquery-collapse-o-matic' ) ?>:</th>
654
- <td><label><input type="checkbox" id="<?php echo $this->options_name ?>[filter_content]" name="<?php echo $this->options_name ?>[filter_content]" value="1" <?php echo checked( $options['filter_content'], 1 ); ?> /> <?php _e('Apply filter', 'jquery-collapse-o-matic'); ?>
655
  <br /><span class="description"><?php _e('Apply the_content filter to target content.', 'jquery-collapse-o-matic'); ?></span></label>
656
  </td>
657
  </tr>
@@ -662,14 +666,14 @@ class WP_Collapse_O_Matic {
662
  ?>
663
  <tr>
664
  <th><?php _e( 'Display ID', 'colpromat' ) ?>:</th>
665
- <td><label><input type="checkbox" id="<?php echo $this->options_name ?>[cc_display_id]" name="<?php echo $this->options_name ?>[cc_display_id]" value="1" <?php echo checked( $options['cc_display_id'], 1 ); ?> /> <?php _e('Display ID', 'colpromat'); ?>
666
  <br /><span class="description"><?php _e('Display custom ID attribute in shortcodes if set for easier shortcode managment.', 'colpromat'); ?></span></label>
667
  </td>
668
  </tr>
669
 
670
  <tr>
671
  <th><?php _e( 'Display Title', 'colpromat' ) ?>:</th>
672
- <td><label><input type="checkbox" id="<?php echo $this->options_name ?>[cc_display_title]" name="<?php echo $this->options_name ?>[cc_display_title]" value="1" <?php echo checked( $options['cc_display_title'], 1 ); ?> /> <?php _e('Display Title', 'colpromat'); ?>
673
  <br /><span class="description"><?php _e('Display custom eT attribute in shortcodes that shows expand title for easier shortcode managment.', 'colpromat'); ?></span></label>
674
  </td>
675
  </tr>
@@ -677,21 +681,21 @@ class WP_Collapse_O_Matic {
677
 
678
  <tr>
679
  <th><?php _e( 'Shortcode Loads Scripts', 'jquery-collapse-o-matic' ) ?>:</th>
680
- <td><label><input type="checkbox" id="<?php echo $this->options_name ?>[script_check]" name="<?php echo $this->options_name ?>[script_check]" value="1" <?php echo checked( $options['script_check'], 1 ); ?> /> <?php _e('Only load scripts with shortcode.', 'jquery-collapse-o-matic'); ?>
681
  <br /><span class="description"><?php _e('Only load Collapse-O-Matic scripts if [expand] shortcode is used.', 'jquery-collapse-o-matic'); ?></span></label>
682
  </td>
683
  </tr>
684
 
685
  <tr>
686
  <th><?php _e( 'Shortcode Loads CSS', 'jquery-collapse-o-matic' ) ?>:</th>
687
- <td><label><input type="checkbox" id="<?php echo $this->options_name ?>[css_check]" name="<?php echo $this->options_name ?>[css_check]" value="1" <?php echo checked( $options['css_check'], 1 ); ?> /> <?php _e('Only load CSS with shortcode.', 'jquery-collapse-o-matic'); ?>
688
  <br /><span class="description"><?php _e('Only load Collapse-O-Matic CSS if [expand] shortcode is used.', 'jquery-collapse-o-matic'); ?></span></label>
689
  </td>
690
  </tr>
691
 
692
  <tr>
693
  <th><?php _e( 'Script Load Location', 'jquery-collapse-o-matic' ) ?>:</th>
694
- <td><label><select id="<?php echo $this->options_name ?>[script_location]" name="<?php echo $this->options_name ?>[script_location]">
695
  <?php
696
  if(empty($options['script_location'])){
697
  $options['script_location'] = 'footer';
@@ -705,7 +709,7 @@ class WP_Collapse_O_Matic {
705
  if($options['script_location'] == $value){
706
  $selected = 'SELECTED';
707
  }
708
- echo '<option value="'.$value.'" '.$selected.'>'.$key.'</option>';
709
  }
710
  ?>
711
  </select>
@@ -742,9 +746,8 @@ class WP_Collapse_O_Matic {
742
  <div class="handlediv" title="<?php _e( 'Click to toggle', 'jquery-collapse-o-matic' ) ?>"><br/></div>
743
  <h3 class="hndle"><?php _e( 'About' ) ?></h3>
744
  <div class="inside">
745
- <h4><img src="<?php echo plugins_url( 'images/collapse-o-matic-icon.png', __FILE__ ) ?>" width="16" height="16"/> Collapse-O-Matic Version <?php echo $this->version; ?></h4>
746
  <p><?php _e( 'Remove clutter, save space. Display and hide additional content in a SEO friendly way. Wrap any content&mdash;including other shortcodes&mdash;into a lovely jQuery expanding and collapsing element.', 'jquery-collapse-o-matic') ?></p>
747
- <?php /*<p style="padding: 5px; border: 1px dashed #cccc66; background: #EEE;"><strong>Last Chance for 2015 Prices:</strong> <a href="https://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/?utm_source=collapse-o-matic&utm_medium=plugin-settings-page&utm_content=collapse-pro-matic&utm_campaign=collapse-pro-year-end">Update to Collapse-Pro-Matic</a> before January 2016 to take advantage of 2015 pricing.</p> */ ?>
748
  <ul>
749
  <li><?php printf( __( '%sDetailed documentation%s, complete with working demonstrations of all shortcode attributes, is available for your instructional enjoyment.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/" target="_blank">', '</a>'); ?></li>
750
  <li><?php printf( __( '%sFree Opensource Support%s', 'jquery-collapse-o-matic'), '<a href="https://wordpress.org/support/plugin/jquery-collapse-o-matic" target="_blank">', '</a>'); ?></li>
@@ -776,8 +779,8 @@ class WP_Collapse_O_Matic {
776
  <tbody>
777
  <tr>
778
  <th><?php _e( 'License Key', 'colpromat' ) ?>:</th>
779
- <td><label for="<?php echo $this->license_name ?>[collapse_commander_license_key]"><input type="text" id="<?php echo $this->license_name ?>[collapse_commander_license_key]" name="<?php echo $this->license_name ?>[collapse_commander_license_key]" value="<?php esc_attr_e( $cc_licence ); ?>" style="width: 100%" />
780
- <br /><span class="description"><?php _e('Enter your license key', 'colpromat'); ?></span></label>
781
  </td>
782
 
783
  </tr>
@@ -788,14 +791,14 @@ class WP_Collapse_O_Matic {
788
  <td>
789
  <?php if( isset($options['collapse_commander_license_status']) && $options['collapse_commander_license_status'] == 'valid' ) { ?>
790
  <span style="color:green;"><?php _e('active'); ?></span><br/>
791
- <input type="submit" class="button-secondary" name="edd_cc_license_deactivate" value="<?php _e('Deactivate License'); ?>"/>
792
  <?php } else {
793
  if( isset($options['collapse_commander_license_status']) ){ ?>
794
- <span style="color: red"><?php echo $options['collapse_commander_license_status']; ?></span><br/>
795
  <?php } else { ?>
796
- <span style="color: grey">inactive</span><br/>
797
  <?php } ?>
798
- <input type="submit" class="button-secondary" name="edd_cc_license_activate" value="<?php _e('Activate License'); ?>"/>
799
  <?php } ?>
800
  </td>
801
  </tr>
@@ -803,7 +806,7 @@ class WP_Collapse_O_Matic {
803
  </tbody>
804
  </table>
805
  </fieldset>
806
- <?php submit_button( __( 'Register', 'colpromat') ); ?>
807
  </form>
808
  </div>
809
  </div>
4
  Text Domain: jquery-collapse-o-matic
5
  Plugin URI: https://pluginoven.com/plugins/collapse-o-matic/
6
  Description: Collapse-O-Matic adds an [expand] shortcode that wraps content into a lovely, jQuery collapsible div.
7
+ Version: 1.8.0
8
  Author: twinpictures, baden03
9
  Author URI: https://twinpictures.de/
10
  License: GPL2
29
  * Current version
30
  * @var string
31
  */
32
+ var $version = '1.8.0';
33
 
34
  /**
35
  * Used as prefix for options entry
91
 
92
  //load the script and style if viewing the front-end
93
  add_action('wp_enqueue_scripts', array( $this, 'collapsTronicInit' ) );
94
+ add_action('admin_enqueue_scripts', array( $this, 'codemirror_enqueue_scripts') );
95
 
96
  // add actions
97
  add_action( 'admin_menu', array( $this, 'admin_menu' ) );
98
  add_action( 'plugin_action_links_' . plugin_basename(__FILE__), array( $this, 'plugin_actions' ) );
99
  add_action( 'admin_init', array( $this, 'admin_init' ) );
 
 
 
 
 
 
100
  add_shortcode('expand', array($this, 'shortcode'));
101
  add_shortcode('colomat', array($this, 'shortcode'));
102
 
109
  add_filter('widget_text', 'do_shortcode');
110
  }
111
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  /**
113
  * Callback init
114
  */
118
  if($this->options['script_location'] == 'footer' ){
119
  $load_in_footer = true;
120
  }
121
+ wp_register_script('collapseomatic-js', plugins_url('js/collapse.js', __FILE__), array('jquery'), '1.7.0', $load_in_footer);
122
+
123
+ //localize with options
124
+ $com_options = array(
125
+ 'colomatduration' => $this->options['duration'],
126
+ 'colomatslideEffect' => $this->options['slideEffect'],
127
+ 'colomatpauseInit' => $this->options['pauseinit'],
128
+ 'colomattouchstart' => $this->options['touch_start']
129
+ );
130
+ wp_localize_script('collapseomatic-js', 'com_options', $com_options );
131
+
132
  if( empty($this->options['script_check']) ){
133
  wp_enqueue_script('collapseomatic-js');
134
  }
136
  //css
137
  if ($this->options['style'] !== 'none') {
138
  wp_register_style( 'collapseomatic-css', plugins_url('/'.$this->options['style'].'_style.css', __FILE__) , array (), '1.6' );
139
+ if( !empty( $this->options['custom_css'] ) ){
140
+ wp_add_inline_style( 'collapseomatic-css', $this->options['custom_css'] );
141
+ }
142
  if( empty($this->options['css_check']) ){
143
  wp_enqueue_style( 'collapseomatic-css' );
144
  }
145
  }
146
  }
147
 
148
+ function codemirror_enqueue_scripts($hook) {
149
+ if($hook == 'settings_page_collapse-o-matic-options'){
150
+ wp_register_script('cm_js', plugins_url('js/admin_codemirror.js', __FILE__), array('jquery'), '0.1.0', true);
151
+ $cm_settings = wp_enqueue_code_editor(
152
+ [
153
+ 'type' => 'text/css',
154
+ 'codemirror' => [
155
+ 'lineNumbers' => false,
156
+ 'autoRefresh' => true
157
+ ]
158
+ ]
159
+ );
160
+ wp_localize_script('cm_js', 'cm_settings', $cm_settings);
161
+ wp_enqueue_script( 'cm_js' );
162
+ wp_enqueue_script( 'wp-theme-plugin-editor' );
163
+ wp_enqueue_style( 'wp-codemirror' );
164
+ }
165
+ }
166
+
167
  /**
168
  * Callback admin_menu
169
  */
236
  if( !empty($cid) && is_plugin_active( 'collapse-commander/collapse-commander.php') ){
237
  $meta_values = WP_CollapseCommander::meta_grabber($cid);
238
  extract(shortcode_atts($meta_values, $atts));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
239
  }
240
 
241
  if(!empty($triggertext)){
258
  $content .= '<div class="com_edit_link"><a class="post-edit-link" href="'.get_edit_post_link($cid).'">'.__('Edit').'</a></div>';
259
  }
260
 
261
+ if( !empty($sub_cids) ){
262
+ foreach($sub_cids as $sub_cid){
263
+ $args = array('cid' => $sub_cid);
264
+ $content .= $this->shortcode($args);
265
+ }
266
+ }
267
+
268
  //id does not allow spaces
269
  $id = preg_replace('/\s+/', '_', $id);
270
 
498
  $like_it = $like_it_arr[$rand_key];
499
  ?>
500
  <div class="wrap">
 
501
  <h2>Collapse-O-Matic</h2>
502
  </div>
503
 
516
  <table class="form-table">
517
  <tr>
518
  <th><?php _e( 'Style', 'jquery-collapse-o-matic' ) ?>:</th>
519
+ <td><label><select id="style" name="<?php echo esc_attr($this->options_name); ?>[style]">
520
  <?php
521
  if(empty($options['style'])){
522
  $options['style'] = 'light';
531
  if($options['style'] == $value){
532
  $selected = 'SELECTED';
533
  }
534
+ echo '<option value="'.esc_attr($value).'" '.$selected.'>'.esc_attr($key).'</option>';
535
  }
536
  ?>
537
  </select>
542
  <?php if( is_plugin_active( 'collapse-commander/collapse-commander.php' ) ) : ?>
543
  <tr>
544
  <th><?php _e( 'CID Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
545
+ <td><label><input type="text" id="cid" name="<?php echo esc_attr($this->options_name); ?>[cid]" value="<?php echo esc_attr($options['cid']); ?>" />
546
  <br /><span class="description"><?php printf( __('Default %sCollapse Commander%s ID', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/premium-plugins/collapse-commander/" target="_blank">', '</a>'); ?></span></label>
547
  </td>
548
  </tr>
556
 
557
  <tr>
558
  <th><?php _e( 'Tag Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
559
+ <td><label><input type="text" id="tag" name="<?php echo esc_attr($this->options_name); ?>[tag]" value="<?php echo esc_attr($options['tag']); ?>" />
560
  <br /><span class="description"><?php printf(__('HTML tag use to wrap the trigger text. See %sTag Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#tag-attribute" target="_blank">', '</a>'); ?></span></label>
561
  </td>
562
  </tr>
563
 
564
  <tr>
565
  <th><?php _e( 'Trigclass Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
566
+ <td><label><input type="text" id="trigclass" name="<?php echo esc_attr($this->options_name); ?>[trigclass]" value="<?php echo esc_attr($options['trigclass']); ?>" />
567
  <br /><span class="description"><?php printf(__('Default class assigned to the trigger element. See %sTrigclass Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#trigclass-attribute" target="_blank">', '</a>'); ?></span></label>
568
  </td>
569
  </tr>
570
 
571
  <tr>
572
  <th><?php _e( 'Tabindex Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
573
+ <td><label><input type="text" id="tabindex" name="<?php echo esc_attr($this->options_name); ?>[tabindex]" value="<?php echo esc_attr($options['tabindex']); ?>" />
574
  <br /><span class="description"><?php printf(__('Default tabindex value to be assigned to the trigger element. See %sTabindex Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#tabindex-attribute" target="_blank">', '</a>'); ?></span></label>
575
  </td>
576
  </tr>
577
 
578
  <tr>
579
  <th><?php _e( 'Targtag Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
580
+ <td><label><input type="text" id="targtag" name="<?php echo esc_attr($this->options_name); ?>[targtag]" value="<?php echo esc_attr($options['targtag']); ?>" />
581
  <br /><span class="description"><?php printf(__('HTML tag use for the target element. See %sTargtag Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#targtag-attribute" target="_blank">', '</a>'); ?></span></label>
582
  </td>
583
  </tr>
584
 
585
  <tr>
586
  <th><?php _e( 'Targclass Attribute', 'jquery-collapse-o-matic' ) ?>:</th>
587
+ <td><label><input type="text" id="targclass" name="<?php echo esc_attr($this->options_name); ?>[targclass]" value="<?php echo esc_attr($options['targclass']); ?>" />
588
  <br /><span class="description"><?php printf(__('Default class assigned to the target element. See %sTargclass Attribute%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/#targclass-attribute" target="_blank">', '</a>'); ?></span></label>
589
  </td>
590
  </tr>
591
 
592
  <tr>
593
  <th><?php _e( 'No Title', 'jquery-collapse-o-matic' ) ?>:</th>
594
+ <td><label><input type="checkbox" id="notitle" name="<?php echo esc_attr($this->options_name); ?>[notitle]" value="1" <?php echo checked( $options['notitle'], 1 ); ?> /> <?php _e('No Title', 'jquery-collapse-o-matic'); ?>
595
  <br /><span class="description"><?php _e('Do not use title tags by default.', 'jquery-collapse-o-matic'); ?></span></label>
596
  </td>
597
  </tr>
598
 
599
  <tr>
600
  <th><?php _e( 'Add touchstart', 'jquery-collapse-o-matic' ) ?>:</th>
601
+ <td><label><input type="checkbox" id="touch_start" name="<?php echo esc_attr($this->options_name); ?>[touch_start]" value="1" <?php echo checked( $options['touch_start'], 1 ); ?> /> <?php _e('Add touchstart', 'jquery-collapse-o-matic'); ?>
602
  <br /><span class="description"><?php _e('Add jQuery touchstart binding to triggers.', 'jquery-collapse-o-matic'); ?></span></label>
603
  </td>
604
  </tr>
605
 
606
  <tr>
607
  <th><?php _e( 'Initial Pause', 'jquery-collapse-o-matic' ) ?>:</th>
608
+ <td><label><input type="number" id="pauseinit" name="<?php echo esc_attr($this->options_name); ?>[pauseinit]" value="<?php echo esc_attr($options['pauseinit']); ?>" />
609
  <br /><span class="description"><?php _e('Amount of time in milliseconds to pause before the initial collapse is triggered on page load.', 'jquery-collapse-o-matic'); ?></span></label>
610
  </td>
611
  </tr>
617
  }
618
  ?>
619
  <th><?php _e( 'Collapse/Expand Duration', 'jquery-collapse-o-matic' ) ?>:</th>
620
+ <td><label><input type="text" id="duration" name="<?php echo esc_attr($this->options_name); ?>[duration]" value="<?php echo esc_attr($options['duration']); ?>" />
621
  <br /><span class="description"><?php printf(__('A string or number determining how long the animation will run. See %sDuration%s in the documentation for more info.', 'jquery-collapse-o-matic'), '<a href="https://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/#duration" target="_blank">', '</a>'); ?></span></label>
622
  </td>
623
  </tr>
624
 
625
  <tr>
626
  <th><?php _e( 'Animation Effect', 'jquery-collapse-o-matic' ) ?>:</th>
627
+ <td><label><select id="slideEffect" name="<?php echo esc_attr($this->options_name); ?>[slideEffect]">
628
  <?php
629
  if(empty($options['slideEffect'])){
630
  $options['slideEffect'] = 'slideFade';
638
  if($options['slideEffect'] == $value){
639
  $selected = 'SELECTED';
640
  }
641
+ echo '<option value="'.esc_attr($value).'" '.$selected.'>'.esc_attr($key).'</option>';
642
  }
643
  ?>
644
  </select>
648
 
649
  <tr>
650
  <th><?php _e( 'Custom Style', 'jquery-collapse-o-matic' ) ?>:</th>
651
+ <td><label><textarea id="custom_css" name="<?php echo esc_attr($this->options_name); ?>[custom_css]"><?php echo esc_textarea($options['custom_css']); ?></textarea>
652
  <br /><span class="description"><?php _e( 'Custom CSS style for <em>ultimate flexibility</em>', 'jquery-collapse-o-matic' ) ?></span></label>
653
  </td>
654
  </tr>
655
 
656
  <tr>
657
  <th><?php _e( 'Content Filter', 'jquery-collapse-o-matic' ) ?>:</th>
658
+ <td><label><input type="checkbox" id="filter_content" name="<?php echo esc_attr($this->options_name); ?>[filter_content]" value="1" <?php echo checked( $options['filter_content'], 1 ); ?> /> <?php _e('Apply filter', 'jquery-collapse-o-matic'); ?>
659
  <br /><span class="description"><?php _e('Apply the_content filter to target content.', 'jquery-collapse-o-matic'); ?></span></label>
660
  </td>
661
  </tr>
666
  ?>
667
  <tr>
668
  <th><?php _e( 'Display ID', 'colpromat' ) ?>:</th>
669
+ <td><label><input type="checkbox" id="cc_display_id" name="<?php echo esc_attr($this->options_name); ?>[cc_display_id]" value="1" <?php echo checked( $options['cc_display_id'], 1 ); ?> /> <?php _e('Display ID', 'colpromat'); ?>
670
  <br /><span class="description"><?php _e('Display custom ID attribute in shortcodes if set for easier shortcode managment.', 'colpromat'); ?></span></label>
671
  </td>
672
  </tr>
673
 
674
  <tr>
675
  <th><?php _e( 'Display Title', 'colpromat' ) ?>:</th>
676
+ <td><label><input type="checkbox" id="cc_display_title" name="<?php echo esc_attr($this->options_name); ?>[cc_display_title]" value="1" <?php echo checked( $options['cc_display_title'], 1 ); ?> /> <?php _e('Display Title', 'colpromat'); ?>
677
  <br /><span class="description"><?php _e('Display custom eT attribute in shortcodes that shows expand title for easier shortcode managment.', 'colpromat'); ?></span></label>
678
  </td>
679
  </tr>
681
 
682
  <tr>
683
  <th><?php _e( 'Shortcode Loads Scripts', 'jquery-collapse-o-matic' ) ?>:</th>
684
+ <td><label><input type="checkbox" id="script_check" name="<?php echo esc_attr($this->options_name); ?>[script_check]" value="1" <?php echo checked( $options['script_check'], 1 ); ?> /> <?php _e('Only load scripts with shortcode.', 'jquery-collapse-o-matic'); ?>
685
  <br /><span class="description"><?php _e('Only load Collapse-O-Matic scripts if [expand] shortcode is used.', 'jquery-collapse-o-matic'); ?></span></label>
686
  </td>
687
  </tr>
688
 
689
  <tr>
690
  <th><?php _e( 'Shortcode Loads CSS', 'jquery-collapse-o-matic' ) ?>:</th>
691
+ <td><label><input type="checkbox" id="css_check" name="<?php echo esc_attr($this->options_name); ?>[css_check]" value="1" <?php echo checked( $options['css_check'], 1 ); ?> /> <?php _e('Only load CSS with shortcode.', 'jquery-collapse-o-matic'); ?>
692
  <br /><span class="description"><?php _e('Only load Collapse-O-Matic CSS if [expand] shortcode is used.', 'jquery-collapse-o-matic'); ?></span></label>
693
  </td>
694
  </tr>
695
 
696
  <tr>
697
  <th><?php _e( 'Script Load Location', 'jquery-collapse-o-matic' ) ?>:</th>
698
+ <td><label><select id="script_location" name="<?php echo esc_attr($this->options_name); ?>[script_location]">
699
  <?php
700
  if(empty($options['script_location'])){
701
  $options['script_location'] = 'footer';
709
  if($options['script_location'] == $value){
710
  $selected = 'SELECTED';
711
  }
712
+ echo '<option value="'.esc_attr($value).'" '.$selected.'>'.esc_attr($key).'</option>';
713
  }
714
  ?>
715
  </select>
746
  <div class="handlediv" title="<?php _e( 'Click to toggle', 'jquery-collapse-o-matic' ) ?>"><br/></div>
747
  <h3 class="hndle"><?php _e( 'About' ) ?></h3>
748
  <div class="inside">
749
+ <h4><img src="<?php echo plugins_url( 'images/collapse-o-matic-icon.png', __FILE__ ) ?>" width="16" height="16"/> Collapse-O-Matic Version <?php echo esc_attr($this->version); ?></h4>
750
  <p><?php _e( 'Remove clutter, save space. Display and hide additional content in a SEO friendly way. Wrap any content&mdash;including other shortcodes&mdash;into a lovely jQuery expanding and collapsing element.', 'jquery-collapse-o-matic') ?></p>
 
751
  <ul>
752
  <li><?php printf( __( '%sDetailed documentation%s, complete with working demonstrations of all shortcode attributes, is available for your instructional enjoyment.', 'jquery-collapse-o-matic'), '<a href="https://pluginoven.com/plugins/collapse-o-matic/documentation/" target="_blank">', '</a>'); ?></li>
753
  <li><?php printf( __( '%sFree Opensource Support%s', 'jquery-collapse-o-matic'), '<a href="https://wordpress.org/support/plugin/jquery-collapse-o-matic" target="_blank">', '</a>'); ?></li>
779
  <tbody>
780
  <tr>
781
  <th><?php _e( 'License Key', 'colpromat' ) ?>:</th>
782
+ <td><label for="collapse_commander_license_key"><input type="text" id="collapse_commander_license_key" name="<?php echo esc_attr($this->license_name); ?>[collapse_commander_license_key]" value="<?php echo esc_attr( $cc_licence ); ?>" style="width: 100%" />
783
+ <br /><span class="description"><?php _e('Enter your license key', 'jquery-collapse-o-matic'); ?></span></label>
784
  </td>
785
 
786
  </tr>
791
  <td>
792
  <?php if( isset($options['collapse_commander_license_status']) && $options['collapse_commander_license_status'] == 'valid' ) { ?>
793
  <span style="color:green;"><?php _e('active'); ?></span><br/>
794
+ <input type="submit" class="button-secondary" name="edd_cc_license_deactivate" value="<?php _e('Deactivate License', 'jquery-collapse-o-matic'); ?>"/>
795
  <?php } else {
796
  if( isset($options['collapse_commander_license_status']) ){ ?>
797
+ <span style="color: red"><?php echo esc_attr($options['collapse_commander_license_status']); ?></span><br/>
798
  <?php } else { ?>
799
+ <span style="color: grey"><?php _e('inactive', 'jquery-collapse-o-matic'); ?></span><br/>
800
  <?php } ?>
801
+ <input type="submit" class="button-secondary" name="edd_cc_license_activate" value="<?php _e('Activate License', 'jquery-collapse-o-matic'); ?>"/>
802
  <?php } ?>
803
  </td>
804
  </tr>
806
  </tbody>
807
  </table>
808
  </fieldset>
809
+ <?php submit_button( __( 'Register', 'jquery-collapse-o-matic') ); ?>
810
  </form>
811
  </div>
812
  </div>
js/admin_codemirror.js ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
1
+ /*
2
+ * * CodeMirrorJavaScript v0.1.0
3
+ */
4
+ jQuery(document).ready(function($) {
5
+ wp.codeEditor.initialize($('#custom_css'), cm_settings);
6
+ })
js/collapse.js CHANGED
@@ -1,8 +1,8 @@
1
  /*!
2
- * Collapse-O-Matic JavaSctipt v1.6.23
3
- * http://plugins.twinpictures.de/plugins/collapse-o-matic/
4
  *
5
- * Copyright 2020, Twinpictures
6
  *
7
  * Permission is hereby granted, free of charge, to any person obtaining a copy
8
  * of this software and associated documentation files (the "Software"), to deal
@@ -23,6 +23,7 @@
23
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
24
  * THE SOFTWARE.
25
  */
 
26
  function collapse_init() {
27
  //force collapse
28
  jQuery('.force_content_collapse').each(function(index) {
@@ -87,8 +88,8 @@ function toggleState (obj, id, maptastic, trig_id) {
87
  }
88
 
89
  //reset effect and duration to default
90
- com_effect = colomatslideEffect;
91
- com_duration = colomatduration;
92
 
93
  //effect override
94
  if( obj.attr('data-animation_effect') ){
@@ -400,14 +401,13 @@ function colomat_collapseall(loop_items){
400
 
401
 
402
  jQuery(document).ready(function() {
403
- //console.log(colomatduration, colomatslideEffect, colomatpauseInit);
404
  com_binding = 'click';
405
- if (typeof colomattouchstart !== 'undefined' && colomattouchstart) {
406
  com_binding = 'click touchstart';
407
  }
408
 
409
- if (typeof colomatpauseInit !== 'undefined' && colomatpauseInit) {
410
- init_pause = setTimeout(collapse_init, colomatpauseInit);
411
  }
412
  else{
413
  collapse_init();
1
  /*!
2
+ * Collapse-O-Matic JavaSctipt v1.7.0
3
+ * https://pluginoven.com/plugins/collapse-o-matic/
4
  *
5
+ * Copyright 2021, Twinpictures
6
  *
7
  * Permission is hereby granted, free of charge, to any person obtaining a copy
8
  * of this software and associated documentation files (the "Software"), to deal
23
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
24
  * THE SOFTWARE.
25
  */
26
+
27
  function collapse_init() {
28
  //force collapse
29
  jQuery('.force_content_collapse').each(function(index) {
88
  }
89
 
90
  //reset effect and duration to default
91
+ com_effect = com_options.colomatslideEffect;
92
+ com_duration = com_options.colomatduration;
93
 
94
  //effect override
95
  if( obj.attr('data-animation_effect') ){
401
 
402
 
403
  jQuery(document).ready(function() {
 
404
  com_binding = 'click';
405
+ if (typeof com_options.colomattouchstart !== 'undefined' && com_options.colomattouchstart) {
406
  com_binding = 'click touchstart';
407
  }
408
 
409
+ if (typeof com_options.colomatpauseInit !== 'undefined' && com_options.colomatpauseInit) {
410
+ init_pause = setTimeout(collapse_init, com_options.colomatpauseInit);
411
  }
412
  else{
413
  collapse_init();
readme.txt CHANGED
@@ -3,9 +3,9 @@
3
  Contributors: twinpictures, baden03
4
  Donate link: https://plugins.twinpictures.de/plugins/collapse-o-matic/
5
  Tags: collapse, expand, collapsible, expandable, expandable content, collapsable content, shortcode, hidden, hide, display, accordion, accordion, jQuery, javascript, roll-your-own, twinpictures, read me, read more, more, plugin oven
6
- Requires at least: 4.7
7
- Tested up to: 5.9-alpha-51872
8
- Stable tag: 1.7.14
9
  Requires PHP: 7.2
10
  License: GPLv2 or later
11
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -51,6 +51,12 @@ No. Not even close.
51
 
52
  == Changelog ==
53
 
 
 
 
 
 
 
54
  = 1.7.14 =
55
  * tried to fixed spacing issue by forcing elwraptag as a div, but this will effect inline expands. Will need to add elwraptag as an option.
56
  * fully tested with WordPress 5.8.1
@@ -390,4 +396,7 @@ Fixed auto-expand of urls with id-anchors
390
  * The plug-in came to be.
391
 
392
  == Upgrade Notice ==
393
- * removed outdated extract method for shortcode atts
 
 
 
3
  Contributors: twinpictures, baden03
4
  Donate link: https://plugins.twinpictures.de/plugins/collapse-o-matic/
5
  Tags: collapse, expand, collapsible, expandable, expandable content, collapsable content, shortcode, hidden, hide, display, accordion, accordion, jQuery, javascript, roll-your-own, twinpictures, read me, read more, more, plugin oven
6
+ Requires at least: 4.9
7
+ Tested up to: 5.8.1
8
+ Stable tag: 1.8.0
9
  Requires PHP: 7.2
10
  License: GPLv2 or later
11
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
51
 
52
  == Changelog ==
53
 
54
+ = 1.8.0 =
55
+ * improved collapse-commander integration
56
+ * improved method of adding custom css
57
+ * options passed using wp_localize_script
58
+ * escaped options to improve security
59
+
60
  = 1.7.14 =
61
  * tried to fixed spacing issue by forcing elwraptag as a div, but this will effect inline expands. Will need to add elwraptag as an option.
62
  * fully tested with WordPress 5.8.1
396
  * The plug-in came to be.
397
 
398
  == Upgrade Notice ==
399
+ * improved collapse-commander integration
400
+ * improved method of adding custom css
401
+ * options passed using wp_localize_script
402
+ * escaped options to improve security