Plugin Directory

Changeset 1486009


Ignore:
Timestamp:
08/29/2016 11:28:42 PM (10 years ago)
Author:
codemacher
Message:

ADD: attributes dialog for [css_columns]

Location:
cm-css-columns/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • cm-css-columns/trunk/README.txt

    r1482901 r1486009  
    33Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=C53QMVCECEQPA
    44Tags: css3, multiple columns
    5 Requires at least: 4.0.0
     5Requires at least: 4.5.0
    66Tested up to: 4.6
    77Stable tag: 1.1.0
     
    3636
    3737== Changelog ==
     38
     39= ?? =
     40* attributes dialog for [css_columns]-shortcode
    3841
    3942= 1.1.0 =
  • cm-css-columns/trunk/admin/Admin.php

    r1485899 r1486009  
    22
    33namespace codemacher\CssColumns;
     4
    45require_once plugin_dir_path(dirname(__FILE__)) . 'admin/OptionsView.php';
     6
    57/**
    68 * The admin-specific functionality of the plugin.
     
    111113         * class.
    112114         */
     115        wp_register_script($this->plugin_name, plugin_dir_url(__FILE__) . 'js/admin.js', array('jquery'), $this->version, false);
    113116        wp_enqueue_script('jquery-ui-dialog');
    114         wp_enqueue_script($this->plugin_name, plugin_dir_url(__FILE__) . 'js/admin.js', array('jquery'), $this->version, false);
     117        // transfer the default values to javascript using the localize method
     118        wp_localize_script( $this->plugin_name, 'cm_css_columns_option_values', $this->default_values );
     119        wp_enqueue_script($this->plugin_name);
    115120    }
    116121
     
    247252        fclose($file);
    248253    }
     254
    249255}
  • cm-css-columns/trunk/admin/css/admin.css

    r1482893 r1486009  
    66    z-index:10000 !important;
    77}
     8.ui-dialog-content label {
     9    padding-top:0.8em;
     10}
     11.ui-dialog-content label {
     12    width:60%;
     13    display:inline-block;
     14    margin-bottom: 0.8em;
     15}
     16.ui-dialog-content input, .ui-dialog-content select {
     17    width:35%;
     18    display:inline-block;
     19    margin-bottom: 0.8em;
     20}
  • cm-css-columns/trunk/admin/js/tinymce-cm-css-columns.js

    r1485899 r1486009  
    3636    $.CssColumns = function (editor) {
    3737        var that = this;
     38        console.log($.CssColumns.defaultOptions);
    3839        this.editor = editor;
    3940        this.dialogs = new Array();
     
    4243        this.dialogs['css_no_break'] = _getNewDialog('css_no_break');
    4344
     45
    4446        function _getNewDialog(shortcode) {
    45             var tmp = $('<div id="'+shortcode+'_dialog">'+_getDialogContent(shortcode)+'</div>');
    46             var title = '['+shortcode+'] settings';
     47            var tmp = $('<div id="' + shortcode + '_dialog"></div>');
     48            tmp.append(_getDialogContent(shortcode));
     49            var title = '[' + shortcode + '] attributes';
    4750            tmp.dialog({
    4851                title: title,
     
    5154                width: 350,
    5255                modal: true,
    53                 dialogClass: shortcode+'_dialog',
     56                dialogClass: shortcode + '_dialog',
    5457                buttons: {
    5558                    "Insert shortcode": function () {
    56                         that.insertShortcode(shortcode);
     59                        var options = _getDialogValues(shortcode);
     60                        that.insertShortcode(shortcode, options);
    5761                        that.closeSettingsDialog(shortcode);
    5862                    },
    5963                    Cancel: function () {
     64                        console.log($('#gap', this).val());
    6065                        that.closeSettingsDialog(shortcode);
    6166                    }
    6267                },
    6368                close: function () {
    64                     console.log('dialog close cb for '+shortcode);
     69                    console.log('dialog close cb for ' + shortcode);
    6570                }
    6671            });
     
    6873        }
    6974        ;
    70        
     75
    7176        function _getDialogContent(shortcode) {
    72             var tmp = '';
    73             return tmp;
     77            if (shortcode === 'css_columns') {
     78                var tmp = $('<div class="inner"></div>');
     79                tmp.append($('<label for="count">Number of columns</label>'));
     80                tmp.append($('<input class="ui-corner-all" type="text" name="count" id="count" placeholder="' + $.CssColumns.defaultOptions.css_columns.count + '"/>'));
     81                tmp.append($('<label for="width">Optimal column width</label>'));
     82                tmp.append($('<input class="ui-corner-all" type="text" name="width" id="width" placeholder="' + $.CssColumns.defaultOptions.css_columns.width + '"/>'));
     83                tmp.append($('<label for="gap">Column gap</label>'));
     84                tmp.append($('<input class="ui-corner-all" type="text" name="gap" id="gap" placeholder="' + $.CssColumns.defaultOptions.css_columns.gap + '"/>'));
     85                tmp.append($('<label for="rule_color">Rule color</label>'));
     86                tmp.append($('<input class="ui-corner-all" type="color" name="rule_color" id="rule_color" placeholder="' + $.CssColumns.defaultOptions.css_columns.gap + '"/>'));
     87                var rule_section = $('<div class="rule_section"></div>');
     88               
     89                rule_section.append($('<label for="rule_style">Rule style</label>'));
     90                var rule_style = ($('<select name="rule_style" id="rule_style"></select>'));
     91                rule_style.append($('<option value="none">none</option>'));
     92                rule_style.append($('<option value="hidden">hidden</option>'));
     93                rule_style.append($('<option value="dotted">dotted</option>'));
     94                rule_style.append($('<option value="dashed">dashed</option>'));
     95                rule_style.append($('<option value="solid">solid</option>'));
     96                rule_style.append($('<option value="double">double</option>'));
     97                rule_style.append($('<option value="groove">groove</option>'));
     98                rule_style.append($('<option value="ridge">ridge</option>'));
     99                rule_style.append($('<option value="inset">inset</option>'));
     100                rule_style.append($('<option value="outset">outset</option>'));
     101                rule_style.append($('<option value="initial">initial</option>'));
     102                rule_style.append($('<option value="inherit">inherit</option>'));
     103                rule_section.append(rule_style);
     104
     105                rule_section.append($('<label for="rule_width">Rule width</label>'));
     106                rule_section.append($('<input class="ui-corner-all" type="text" name="rule_width" id="rule_width" placeholder="' + $.CssColumns.defaultOptions.css_columns.rule_width + '"/>'));
     107                tmp.append(rule_section);
     108                return tmp;
     109            }
    74110        }
     111        ;
     112
     113        function _getDialogValues(shortcode) {
     114            var result = new Object();
     115            if (shortcode === 'css_columns') {
     116                var dialog = that.dialogs['css_columns'];
     117                result.count = $('#count', dialog).val();
     118                result.width = $('#width', dialog).val();
     119                result.gap = $('#gap', dialog).val();
     120                result.rule_color = $('#rule_color', dialog).val();
     121                result.rule_style = $('#rule_style', dialog).val();
     122                result.rule_width = $('#rule_width', dialog).val();
     123            }
     124            return result;
     125        }
     126        ;
    75127    };
    76128
    77129    $.CssColumns.prototype = {
    78         insertShortcode: function (shortcode) {
     130        insertShortcode: function (shortcode, options) {
    79131            var orgText = this.editor.selection.getContent();
    80132            this.editor.undoManager.beforeChange();
    81             this.editor.selection.setContent('['+shortcode+']' + orgText + '[/'+shortcode+']');
     133            var scode = '[' + shortcode;
     134
     135            if (shortcode === 'css_columns') {
     136                if (options.count !== '' && options.count !== $.CssColumns.defaultOptions.css_columns.count) {
     137                    scode += ' count=' + options.count;
     138                }
     139                if (options.width !== '' && options.width !== $.CssColumns.defaultOptions.css_columns.width) {
     140                    scode += ' width=' + options.width;
     141                }
     142                if (options.gap !== '' && options.gap !== $.CssColumns.defaultOptions.css_columns.gap) {
     143                    scode += ' gap=' + options.gap;
     144                }
     145                if (options.rule_color !== '' && options.rule_color !== $.CssColumns.defaultOptions.css_columns.rule_color) {
     146                    scode += ' rule_color=' + options.rule_color;
     147                }
     148                if (options.rule_style !== '' && options.rule_style !== $.CssColumns.defaultOptions.css_columns.rule_style) {
     149                    scode += ' rule_style=' + options.rule_style;
     150                }
     151                if (options.rule_width !== '' && options.rule_width !== $.CssColumns.defaultOptions.css_columns.rule_width) {
     152                    scode += ' rule_width=' + options.rule_width;
     153                }
     154
     155            }
     156            scode += ']';
     157            scode += orgText;
     158            scode += '[/' + shortcode + ']';
     159            this.editor.selection.setContent(scode);
    82160        },
    83161        openSettingsDialog: function (shortcode) {
     
    91169    $.CssColumns.defaultOptions = {
    92170        css_columns: {
    93             gap: false,
    94             width: false,
    95             count: false,
    96             rule_color: false,
    97             rule_style: false,
    98             rule_width: false
     171            gap: cm_css_columns_option_values["gap"],
     172            width: cm_css_columns_option_values["width"],
     173            count: cm_css_columns_option_values["count"],
     174            rule_color: cm_css_columns_option_values["rule_color"],
     175            rule_style: cm_css_columns_option_values["rule_style"],
     176            rule_width: cm_css_columns_option_values["rule_width"]
    99177        },
    100178        css_col_span: {
    101             cols: false,
    102             tag: false
     179            cols: cm_css_columns_option_values["span_cols"],
     180            tag: cm_css_columns_option_values["span_tag"]
    103181        },
    104182        css_no_break: {
    105             type: false,
    106             tag: false
     183            type: cm_css_columns_option_values["no_break_type"],
     184            tag: cm_css_columns_option_values["no_break_tag"]
    107185        }
    108186    };
Note: See TracChangeset for help on using the changeset viewer.