WordPress.org
Get WordPress

Plugin Directory

Changeset 2062123


Ignore:
Timestamp:
04/03/2019 08:36:02 AM (7 years ago)
Author:
heremobilitydemand
Message:

Added width&height settings

Location:
here-mobility/trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • here-mobility/trunk/css/auto-complete.css

    r1980502 r2062123  
    2626    border-radius: 4px;
    2727    background-color: rgba(0, 0, 0, .5);
    28     -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
     28    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    2929}
    3030

  • here-mobility/trunk/css/mce-here-button.css

    r2041749 r2062123  
    99
    1010.mce-here-popup .mce-abs-layout {
    11     height: 105px;
     11    height: 240px;
     12    width: 500px;
    1213}
    1314
    … …  
    2324
    2425.wp-here_panel {
    25     max-width: 700px;
     26    max-width: 500px;
    2627}

  • here-mobility/trunk/heremobility.php

    r2049373 r2062123  
    88The Web Widget supports pickup location, destination, and required departure time, in addition, your users can also  customize their ride according to any special requirements they have from suitcases to number of passengers.
    99The HERE Mobility Web Widget connects to the Mobility Marketplace to find the most relevant rides matching your users' requests and displays them to your users to choose from and book. To activate your Web Widget, please create an account(https://developer.mobility.here.com/signup) and request your app credentials.
    10  * Version: 1.0.8
     10 * Version: 1.0.10
    1111 * Author: HERE Mobility
    1212 * Author URI: https://mobility.here.com/
    … …  
    1717class HereMobility
    1818{
    19     const PLUGIN_VERSION = '1.0.8';
     19    const PLUGIN_VERSION = '1.0.10';
    2020    const SHORTCODE_WIDGET_TAG = 'here_panel';
    2121    const SHORTCODE_LINK_TAG = 'here_link';
    … …  
    179179                'id' => '',
    180180                'appkey' => '',
    181                 'appsecret' => ''
     181                'appsecret' => '',
     182                'width' => '',
     183                'height' => '',
     184                'unit' => 'px',
     185                'position' => 'center'
    182186            ),
    183187            array_change_key_case($attrs, CASE_LOWER)
    … …  
    215219                'post_id' => get_the_ID()
    216220            ]);
    217             return "<div class='wordpress-hmw' id='" . $attrs['id'] . "'></div><div id='table-booking-date'></div>";
     221
     222            if ($attrs['width'] || $attrs['height']) {
     223                $unit = $attrs['unit'] ? : 'px';
     224                $clear = '';
     225                $positionAttr = $attrs['position'] ? : 'center';
     226
     227                switch ($positionAttr) {
     228                    case 'left':
     229                        $position = 'float: left;';
     230                        $clear = 'style="clear:both;"';
     231                        break;
     232                    case 'right':
     233                        $position = 'float: right;';
     234                        $clear = 'style="clear:both;"';
     235                        break;
     236                    default:
     237                        $position = 'margin: 0 auto;';
     238                }
     239
     240                $width = $attrs['width'] ? "width:{$attrs['width']}{$unit};" : '';
     241                $height = $attrs['height'] ? "height:{$attrs['height']}{$unit};" : '';
     242                $style = "{$width}{$height}{$position}";
     243
     244                return sprintf("<div class='wordpress-hmw-container'><div class='wordpress-hmw' id='%s' style='%s'></div><div id='table-booking-date' %s></div></div>",
     245                    $attrs['id'], $style, $clear);
     246            } else {
     247                return sprintf("<div class='wordpress-hmw-container'><div class='wordpress-hmw' id='%s'></div><div id='table-booking-date'></div></div>", $attrs['id']);
     248            }
    218249        }
    219250

  • here-mobility/trunk/js/gutenberg-here-widget.js

    r1995227 r2062123  
    305305var _wp$components = wp.components,
    306306    RadioControl = _wp$components.RadioControl,
    307     TextControl = _wp$components.TextControl;
     307    TextControl = _wp$components.TextControl,
     308    SelectControl = _wp$components.SelectControl;
    308309
    309310
    … …  
    386387            type: 'string',
    387388            default: null
     389        },
     390        display: {
     391            type: 'string',
     392            default: 'default'
     393        },
     394        width: {
     395            type: 'string',
     396            default: null
     397        },
     398        height: {
     399            type: 'string',
     400            default: null
     401        },
     402        unit: {
     403            type: 'string',
     404            default: 'px'
     405        },
     406        position: {
     407            type: 'string',
     408            default: 'center'
    388409        }
    389410    },
    … …  
    396417
    397418
     419        var settingDefaultAttributes = {
     420            pickup: '',
     421            destination: '',
     422            appKey: '',
     423            appSecret: ''
     424        };
     425
     426        var displayDefaultAttributes = {
     427            width: '',
     428            height: '',
     429            unit: 'px',
     430            position: 'center'
     431        };
     432
    398433        if (!attributes.id) {
    399434            setAttributes({
    … …  
    404439        var onChangeSettings = function onChangeSettings(value) {
    405440            if (value === 'default') {
    406                 for (var key in attributes) {
    407                     setAttributes(_defineProperty({}, key, ''));
     441                for (var key in settingDefaultAttributes) {
     442                    setAttributes(_defineProperty({}, key, settingDefaultAttributes[key]));
    408443                }
    409444            }
    410445
    411             setAttributes({
    412                 settings: value
    413             });
     446            onChangeAttribute('settings')(value);
    414447        };
    415448
    … …  
    419452            };
    420453        };
     454
     455        var onChangeDisplay = function onChangeDisplay(value) {
     456            if (value === 'default') {
     457                for (var key in displayDefaultAttributes) {
     458                    setAttributes(_defineProperty({}, key, displayDefaultAttributes[key]));
     459                }
     460            }
     461
     462            onChangeAttribute('display')(value);
     463        };
     464
     465        // if (!attributes.width && !attributes.height) {
     466        //   onChangeDisplay('default');
     467        // }
    421468
    422469        return [isSelected && wp.element.createElement(
    … …  
    426473                'div',
    427474                null,
     475                wp.element.createElement(
     476                    'h2',
     477                    null,
     478                    ' Settings '
     479                ),
    428480                (attributes.appKey && !attributes.appSecret || !attributes.appKey && attributes.appSecret) && wp.element.createElement(
    429481                    'div',
    … …  
    461513                    value: attributes.appSecret,
    462514                    onChange: onChangeAttribute('appSecret')
     515                })
     516            ),
     517            wp.element.createElement(
     518                'div',
     519                null,
     520                wp.element.createElement(
     521                    'h2',
     522                    null,
     523                    ' Widget Display '
     524                ),
     525                wp.element.createElement(
     526                    'p',
     527                    null,
     528                    'You can use the default size of the widget or set a custom size. Please note that HERE Mobility The widget\u2019s minimum size is ',
     529                    wp.element.createElement(
     530                        'b',
     531                        null,
     532                        '360x 450'
     533                    ),
     534                    '\u202Fpixels and its maximum size is ',
     535                    wp.element.createElement(
     536                        'b',
     537                        null,
     538                        '1200x450'
     539                    ),
     540                    ' pixels. The HERE web widget is mobile-responsive in portrait mode  below the break point of ',
     541                    wp.element.createElement(
     542                        'b',
     543                        null,
     544                        '512*450'
     545                    ),
     546                    ' pixels.'
     547                ),
     548                wp.element.createElement(RadioControl, {
     549                    selected: attributes.display,
     550                    options: [{ label: 'Use Default Size', value: 'default' }, { label: 'Set custom size', value: 'custom' }],
     551                    onChange: onChangeDisplay
     552                })
     553            ),
     554            attributes.display === 'custom' && wp.element.createElement(
     555                'div',
     556                null,
     557                wp.element.createElement(TextControl, {
     558                    label: 'Width',
     559                    type: 'number',
     560                    value: attributes.width,
     561                    onChange: onChangeAttribute('width')
     562                }),
     563                wp.element.createElement(TextControl, {
     564                    label: 'Height',
     565                    type: 'number',
     566                    value: attributes.height,
     567                    onChange: onChangeAttribute('height')
     568                }),
     569                wp.element.createElement(SelectControl, {
     570                    label: 'Unit',
     571                    value: attributes.unit,
     572                    options: [{ label: 'px', value: 'px' }, { label: '%', value: '%' }, { label: 'rem', value: 'rem' }],
     573                    onChange: onChangeAttribute('unit')
     574                }),
     575                wp.element.createElement(RadioControl, {
     576                    label: 'Position',
     577                    selected: attributes.position,
     578                    options: [{ label: 'Left', value: 'left' }, { label: 'Center', value: 'center' }, { label: 'Right', value: 'right' }],
     579                    onChange: onChangeAttribute('position')
    463580                })
    464581            )

  • here-mobility/trunk/js/here-widget-button.js

    r1995227 r2062123  
    6161                        label: '',
    6262                        html:  '<div> \
     63                                <h2>Settings</h2>\
    6364                                <input type="radio" name="settings" value="default" id="settings_default"> \
    6465                                <label for="settings_default">Use default settings</label> \
    … …  
    106107                        value: params.appSecret,
    107108                        classes: 'app-secret'
    108                     }
     109                    },
     110          {
     111            type: 'container',
     112            name: 'display',
     113            label: '',
     114            html:  '<div> \
     115                                <h2>Widget Display</h2>\
     116                                <p style="white-space: pre-line; font-style: italic; color: #ccc;">\
     117                        You can use the default size of the widget or set a custom size. \
     118                      Please note that HERE Mobility The widget’s minimum size is <b>360x 450</b> pixels\
     119                      and its maximum size is <b>1200x450</b> pixels.\
     120                            The HERE web widget is mobile-responsive in portrait mode below the break point of <b>512*450</b> pixels.\
     121                          </p>\
     122                                <input type="radio" name="display" value="default" id="display_default"> \
     123                    <label for="display_default">Default</label> \
     124                    <input type="radio" name="display" value="custom" id="display_custom"> \
     125                    <label for="display_custom">Custom</label> \
     126                        </div>'
     127          },
     128              {
     129                type: 'textbox',
     130              name: 'width',
     131                label: 'Width',
     132                value: params.width,
     133                classes: 'width'
     134              },
     135              {
     136                type: 'textbox',
     137              name: 'height',
     138                label: 'Height',
     139                value: params.height,
     140                classes: 'height'
     141              },
     142              {
     143                type: 'listbox',
     144                name: 'unit',
     145                label: 'Unit',
     146            values : [
     147              { text: 'px', value: 'px' },
     148              { text: '%', value: '%' },
     149                { text: 'rem', value: 'rem' }
     150            ],
     151            value: params.unit,
     152                classes: 'unit'
     153              },
     154              {
     155                type: 'listbox',
     156              name: 'position',
     157                label: 'Position',
     158            values : [
     159              { text: 'left', value: 'left' },
     160              { text: 'center', value: 'center' },
     161              { text: 'right', value: 'right' }
     162            ],
     163                  value: params.position,
     164                classes: 'position'
     165              }
    109166                ],
    110167                onSubmit: function (event) {
    … …  
    122179
    123180                    data.id  = data.id || generateId();
    124                     data.settings = params.settings == 'default' ? 'default': 'specific';
     181                    data.settings = params.settings === 'default' ? 'default': 'specific';
    125182
    126183                    for(var prop in data) {
    … …  
    142199                },
    143200                onOpen: function () {
     201
     202
     203
    144204                    setTimeout(function () {
    145205                        jQuery('.mce-pickup').autoComplete({
    … …  
    156216                            jQuery('#settings_default').prop('checked', true);
    157217
    158                             jQuery('.mce-abs-layout-item').each(function (index) {
    159                                 var elem = jQuery(this);
    160                                 if (!elem.hasClass('mce-first')) {
    161                                     elem.hide();
    162                                 }
    163                             });
    164                         } else {
     218              [
     219                '.mce-destination',
     220                '.mce-pickup',
     221                '.mce-app-key',
     222                '.mce-app-secret'
     223              ].forEach(function (childClass) {
     224                jQuery(childClass).closest('.mce-abs-layout-item.mce-container').hide();
     225              });
     226
     227              jQuery('#settings_default').prop('checked', true);
     228
     229            } else {
    165230                            jQuery('#settings_specific').prop('checked', true);
    166231                        }
     232
     233            if (params.display === 'default') {
     234              [
     235                '.mce-width',
     236                '.mce-height',
     237                '.mce-unit',
     238                '.mce-position'
     239              ].forEach(function (childClass) {
     240                jQuery(childClass).closest('.mce-abs-layout-item.mce-container').hide();
     241              });
     242              jQuery('#display_default').prop('checked', true);
     243
     244            } else {
     245              jQuery('#display_custom').prop('checked', true);
     246            }
    167247
    168248                        jQuery('input[name="settings"]').change(function (event) {
    … …  
    175255                                jQuery('.mce-app-secret').val('');
    176256
    177                                 jQuery('.mce-abs-layout-item').each(function (index) {
    178                                     var elem = jQuery(this);
    179                                     if (!elem.hasClass('mce-first')) {
    180                                         elem.hide();
    181                                     }
    182                                 });
     257                [
     258                  '.mce-destination',
     259                  '.mce-pickup',
     260                  '.mce-app-key',
     261                  '.mce-app-secret'
     262                ].forEach(function (childClass) {
     263                  jQuery(childClass).closest('.mce-abs-layout-item.mce-container').hide();
     264                });
     265
    183266                                params.settings = 'default';
    184267                            } else {
    185                                 jQuery('.mce-abs-layout-item').each(function (index) {
    186                                     var elem = jQuery(this);
    187                                     if (!elem.hasClass('mce-first') && !elem.hasClass('mce-attr-id')) {
    188                                         elem.show();
    189                                     }
    190                                 });
     268                [
     269                  '.mce-destination',
     270                  '.mce-pickup',
     271                  '.mce-app-key',
     272                  '.mce-app-secret'
     273                ].forEach(function (childClass) {
     274                  jQuery(childClass).closest('.mce-abs-layout-item.mce-container').show();
     275                });
     276
    191277                                params.settings = 'specific';
    192278                            }
    193279                        });
     280
     281            jQuery('input[name="display"]').change(function (event) {
     282              if (event.target.getAttribute('value') === 'default') {
     283
     284                jQuery('.mce-width').val('');
     285                jQuery('.mce-height').val('');
     286                jQuery('.mce-unit').val('px');
     287                jQuery('.mce-position').val('center');
     288
     289                [
     290                  '.mce-width',
     291                  '.mce-height',
     292                  '.mce-unit',
     293                  '.mce-position'
     294                ].forEach(function (childClass) {
     295                  jQuery(childClass).closest('.mce-abs-layout-item.mce-container').hide();
     296                });
     297
     298                params.display = 'default';
     299              } else {
     300
     301                [
     302                  '.mce-width',
     303                  '.mce-height',
     304                  '.mce-unit',
     305                  '.mce-position'
     306                ].forEach(function (childClass) {
     307                  jQuery(childClass).closest('.mce-abs-layout-item.mce-container').show();
     308                });
     309
     310                params.settings = 'custom';
     311              }
     312            });
    194313                    });
    195314                },
    … …  
    211330                    appKey: '',
    212331                    appSecret: '',
    213                     settings: 'default'
     332                    settings: 'default',
     333                    display: 'default',
     334                    width: '',
     335                    height: '',
     336                    unit: 'px',
     337                    position: 'center'
    214338                });
    215339            }
    … …  
    238362                    appKey: getAttr(title, 'appKey'),
    239363                    appSecret: getAttr(title, 'appSecret'),
    240                     settings: getAttr(title, 'settings')
     364                    settings: getAttr(title, 'settings'),
     365                    width: getAttr(title, 'width'),
     366                    height: getAttr(title, 'height'),
     367                    position: getAttr(title, 'position'),
     368                    unit: getAttr(title, 'unit'),
     369                    display: getAttr(title, 'display'),
    241370                });
    242371            }

  • here-mobility/trunk/readme.txt

    r2049373 r2062123  
    66Requires at least: 4.0
    77Tested up to: 5.0.8
    8 Stable tag: 1.0.8
     8Stable tag: 1.0.10
    99License: GPLv2 or later
    1010License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Note: See TracChangeset for help on using the changeset viewer.