WordPress.org

Plugin Directory

Changeset 2727930

Timestamp:
05/22/2022 07:54:25 AM (6 weeks ago)
Author:
hashthemes
Message:
  • Option to Import/Export Settings - Added
Location:
simple-floating-menu
Files:
53 added
21 deleted
5 edited

Legend:

Unmodified
Added
Removed
  • simple-floating-menu/trunk/assets/css/admin-style.css

    r2642953 r2727930  
    184184}
    185185
    186 #sfm-form-wrap form{
     186#sfm-form-wrap {
    187187    width: 65%;
    188188}
     
    657657    background: #3c89d8;
    658658}
     659
     660
     661
     662
     663
     664
     665
     666
     667
     668
     669
     670
     671
     672
     673
     674
     675
     676
     677
     678
     679
     680
     681
     682
     683
     684
     685
     686
     687
     688
     689
     690
     691
     692
     693
     694
     695
     696
     697
     698
     699
     700
     701
     702
     703
     704
     705
     706
     707
     708
     709
     710
     711
     712
     713
     714
     715
     716
     717
     718
     719
     720
     721
     722
     723
     724
     725
     726
     727
     728
     729
     730
     731
     732
     733
     734
     735
     736
     737
     738
     739
     740
  • simple-floating-menu/trunk/assets/js/admin-scripts.js

    r2667907 r2727930  
    11(function ($) {
    2 
    3     $('#sfm-tab-wrapper .sfm-tab').click(function () {
    4         var id = $(this).attr('href');
    5         $(this).parent().find('.sfm-tab').removeClass('sfm-tab-active');
    6         $(this).addClass('sfm-tab-active');
    7 
    8         $('.sfm-form-page').hide();
    9         $(id).fadeIn()
    10         if (id == '#tab-upgrade-pro') {
    11             $('body').find('.sfm-form-row').hide();
    12         } else {
    13             $('body').find('.sfm-form-row').show();
    14         }
    15         return false;
    16     });
    17 
    18     $('body').on('click', '.sfm-add-new-button-fields a', function () {
    19         var $this = $('.sfm-button-repeater');
    20         var count = parseInt($this.attr('data-count'));
    21         $this.attr('data-count', count + 1);
    22 
    23         if (typeof $this != 'undefined') {
    24             var field = $this.find('.sfm-button-fields:first').clone();
    25             field.find('[name]').each(function () {
    26                 var name = $(this).attr('name');
    27                 name = name.split('[');
    28 
    29                 name[2] = name[2].replace(/[0-9]/g, count + 1);
    30                 name = name.join('[');
    31                 $(this).attr('name', name);
    32 
    33                 var defaultVal = $(this).attr('data-default');
    34 
    35                 var checkClasss = $(this).attr('class');
    36                 if (checkClasss == 'sfm-unique-id') {
    37                     var id = 'sfm-' + Date.now();
    38                     $(this).val(id);
    39                 } else {
    40                     if (defaultVal) {
    41                         $(this).val(defaultVal);
     2    "use strict";
     3
     4    $(document).ready(function () {
     5        $('#sfm-tab-wrapper .sfm-tab').click(function () {
     6            var id = $(this).attr('href');
     7            $(this).parent().find('.sfm-tab').removeClass('sfm-tab-active');
     8            $(this).addClass('sfm-tab-active');
     9
     10            $('.sfm-form-page').hide();
     11            $(id).fadeIn()
     12            if (id == '#tab-upgrade-pro' || id == '#tab-sfm-imex') {
     13                $('body').find('.sfm-form-row').hide();
     14            } else {
     15                $('body').find('.sfm-form-row').show();
     16            }
     17            return false;
     18        });
     19
     20        $('body').on('click', '.sfm-add-new-button-fields a', function () {
     21            var $this = $('.sfm-button-repeater');
     22            var count = parseInt($this.attr('data-count'));
     23            $this.attr('data-count', count + 1);
     24
     25            if (typeof $this != 'undefined') {
     26                var field = $this.find('.sfm-button-fields:first').clone();
     27                field.find('[name]').each(function () {
     28                    var name = $(this).attr('name');
     29                    name = name.split('[');
     30
     31                    name[2] = name[2].replace(/[0-9]/g, count + 1);
     32                    name = name.join('[');
     33                    $(this).attr('name', name);
     34
     35                    var defaultVal = $(this).attr('data-default');
     36
     37                    var checkClasss = $(this).attr('class');
     38                    if (checkClasss == 'sfm-unique-id') {
     39                        var id = 'sfm-' + Date.now();
     40                        $(this).val(id);
    4241                    } else {
    43                         $(this).val('');
     42                        if (defaultVal) {
     43                            $(this).val(defaultVal);
     44                        } else {
     45                            $(this).val('');
     46                        }
    4447                    }
    45                 }
    46 
    47             });
    48             field.find('.placeholder').each(function () {
    49                 $(this).removeClass('hidden');
    50             });
    51             field.find('.thumbnail-image').each(function () {
    52                 $(this).html('');
    53             });
    54             field.find('.sfm-color-picker').each(function () {
    55                 $colorPicker = $(this);
    56                 $colorPicker.closest('.wp-picker-container').after($(this));
    57                 $colorPicker.prev('.wp-picker-container').remove();
    58                 $(this).wpColorPicker({
    59                     change: function (event, ui) {
    60                         var $input = $(this);
    61                         if (jQuery('html').hasClass('colorpicker-ready')) {
    62                             setTimeout(function () {
    63                                 $input.trigger('change');
    64                             }, 100);
    65                         }
    66                     },
    67                 });
    68             });
    69             field.find('.sfm-customizer-icon-box').each(function () {
    70                 var iconClass = $(this).find('[name]').attr('data-default');
    71                 $(this).find('.sfm-selected-icon > i').attr('class', iconClass);
    72                 $(this).find('.sfm-icon-search-input').val('');
    73                 $(this).find('.sfm-icon-list li').show();
    74             });
    75             $this.append(field);
    76         }
    77 
    78         var value = sfm_refresh_repeater_values();
    79         sfm_live_preview(value);
    80         return false;
    81     });
    82 
    83     $('body').on('click', '.sfm-remove', function () {
    84         var $el = $(this);
    85         $el.closest('.sfm-button-fields').fadeOut()
    86         setTimeout(function () {
    87             $el.closest('.sfm-button-fields').remove()
     48
     49                });
     50                field.find('.placeholder').each(function () {
     51                    $(this).removeClass('hidden');
     52                });
     53                field.find('.thumbnail-image').each(function () {
     54                    $(this).html('');
     55                });
     56                field.find('.sfm-color-picker').each(function () {
     57                    $colorPicker = $(this);
     58                    $colorPicker.closest('.wp-picker-container').after($(this));
     59                    $colorPicker.prev('.wp-picker-container').remove();
     60                    $(this).wpColorPicker({
     61                        change: function (event, ui) {
     62                            var $input = $(this);
     63                            if (jQuery('html').hasClass('colorpicker-ready')) {
     64                                setTimeout(function () {
     65                                    $input.trigger('change');
     66                                }, 100);
     67                            }
     68                        },
     69                    });
     70                });
     71                field.find('.sfm-customizer-icon-box').each(function () {
     72                    var iconClass = $(this).find('[name]').attr('data-default');
     73                    $(this).find('.sfm-selected-icon > i').attr('class', iconClass);
     74                    $(this).find('.sfm-icon-search-input').val('');
     75                    $(this).find('.sfm-icon-list li').show();
     76                });
     77                $this.append(field);
     78            }
     79
    8880            var value = sfm_refresh_repeater_values();
    8981            sfm_live_preview(value);
    90         }, 1000);
    91     });
    92 
    93     jQuery('.sfm-button-repeater').sortable({
    94         axis: 'y',
    95         helper: 'clone',
    96         cursor: 'move',
    97         handle: '.sfm-button-fields-header',
    98         update: function (event, ui) {
    99             jQuery(this).find('.sfm-button-fields').each(function (index) {
    100                 jQuery(this).find('[name]').each(function () {
    101                     var name = jQuery(this).attr('name');
    102                     name = name.split('[');
    103 
    104                     name[2] = name[2].replace(/[0-9]/g, index + 1);
    105                     name = name.join('[');
    106                     jQuery(this).attr('name', name);
    107                 });
    108 
     82            return false;
     83        });
     84
     85        $('body').on('click', '.sfm-remove', function () {
     86            var $el = $(this);
     87            $el.closest('.sfm-button-fields').fadeOut()
     88            setTimeout(function () {
     89                $el.closest('.sfm-button-fields').remove()
    10990                var value = sfm_refresh_repeater_values();
    11091                sfm_live_preview(value);
     92
     93
     94
     95
     96
     97
     98
     99
     100
     101
     102
     103
     104
     105
     106
     107
     108
     109
     110
     111
     112
     113
     114
     115
     116
     117
     118
     119
     120
     121
     122
     123
     124
     125
     126
     127
     128
     129
     130
     131
     132
     133
     134
     135
     136
     137
     138
     139
     140
     141
     142
     143
     144
     145
     146
     147
     148
     149
     150
     151
     152
     153
     154
     155
     156
     157
     158
     159
     160
     161
     162
     163
     164
     165
     166
     167
     168
     169
     170
     171
     172
     173
     174
     175
     176
     177
     178
     179
     180
     181
     182
     183
     184
     185
     186
     187
     188
     189
     190
     191
     192
     193
     194
     195
     196
     197
     198
     199
     200
     201
     202
     203
     204
     205
     206
     207
     208
     209
     210
     211
     212
     213
     214
     215
     216
     217
     218
     219
     220
     221
     222
     223
     224
     225
     226
     227
     228
     229
     230
     231
     232
     233
     234
     235
     236
     237
     238
     239
     240
     241
     242
     243
     244
     245
     246
     247
     248
     249
     250
     251
     252
     253
     254
     255
     256
     257
     258
     259
     260
     261
     262
     263
     264
     265
     266
     267
     268
     269
     270
     271
     272
     273
     274
     275
     276
     277
    111278            });
    112279        }
     280
     281
     282
     283
     284
     285
     286
     287
     288
     289
     290
     291
     292
     293
     294
     295
     296
     297
     298
     299
     300
     301
     302
     303
     304
     305
     306
     307
     308
     309
     310
     311
     312
     313
     314
     315
     316
     317
     318
     319
     320
     321
     322
     323
     324
     325
     326
     327
     328
     329
     330
     331
     332
     333
     334
     335
     336
     337
     338
     339
     340
     341
     342
     343
     344
     345
     346
     347
     348
     349
     350
     351
     352
     353
     354
     355
     356
     357
     358
     359
     360
     361
     362
     363
     364
     365
     366
     367
     368
     369
     370
     371
    113372    });
    114 
    115     var $viewMap = {
    116         'top-left': $('.sfm-top-offset-wrap, .sfm-left-offset-wrap'),
    117         'top-middle': $('.sfm-top-offset-wrap'),
    118         'top-right': $('.sfm-top-offset-wrap, .sfm-right-offset-wrap'),
    119         'bottom-left': $('.sfm-bottom-offset-wrap, .sfm-left-offset-wrap'),
    120         'bottom-middle': $('.sfm-bottom-offset-wrap'),
    121         'bottom-right': $('.sfm-bottom-offset-wrap, .sfm-right-offset-wrap'),
    122         'middle-left': $('.sfm-left-offset-wrap'),
    123         'middle-right': $('.sfm-right-offset-wrap')
    124     };
    125 
    126     $('.sfm-button-position').change(function () {
    127         // hide all
    128         $.each($viewMap, function () {
    129             this.hide();
    130         });
    131 
    132         // show current
    133         $viewMap[$(this).val()].show();
    134     }).change();
    135 
    136     $('#enable_sfm').change(function () {
    137         if ($(this).is(':checked')) {
    138             $('#enable_sfm_setting').parents('.sfm-form-row').show();
    139         } else {
    140             $('#enable_sfm_setting').parents('.sfm-form-row').hide();
    141         }
    142     }).change();
    143 
    144     $(document).on('change', '.typography_face', function () {
    145         var font_family = $(this).val();
    146         var $this = $(this);
    147         $.ajax({
    148             url: ajaxurl,
    149             data: {
    150                 action: 'get_google_font_variants',
    151                 font_family: font_family,
    152             },
    153             beforeSend: function () {
    154                 $this.closest('.sfm-typography-font-family').next('.sfm-typography-font-style').addClass('typography-loading');
    155             },
    156             success: function (response) {
    157                 $this.closest('.sfm-typography-font-family').next('.sfm-typography-font-style').removeClass('typography-loading');
    158                 $this.closest('.sfm-typography-font-family').next('.sfm-typography-font-style').find('select').html(response).trigger("chosen:updated");
    159             }
    160         });
    161         if (font_family != 'Courier' && font_family != 'Times' && font_family != 'Arial' && font_family != 'Verdana' && font_family != 'Trebuchet' && font_family != 'Georgia' && font_family != 'Tahoma' && font_family != 'Palatino' && font_family != 'Helvetica') {
    162             WebFont.load({
    163                 google: {
    164                     families: [font_family]
    165                 }
    166             });
    167         }
    168     });
    169 
    170     $(".typography_face, .typography_font_style, .typography_text_transform, .typography_text_decoration").chosen({width: "95%"});
    171 
    172     $('.sfm-sticky-button a').click(function (e) {
    173         e.preventDefault();
    174     });
    175 
    176     jQuery('html').addClass('colorpicker-ready');
    177 
    178     $('.sfm-color-picker').wpColorPicker({
    179         change: function (event, ui) {
    180             var $input = $(this);
    181             if (jQuery('html').hasClass('colorpicker-ready')) {
    182                 setTimeout(function () {
    183                     $input.trigger('change');
    184                 }, 100);
    185             }
    186         },
    187     });
    188 
    189     var delay = (function () {
    190         var timer = 0;
    191         return function (callback, ms) {
    192             clearTimeout(timer);
    193             timer = setTimeout(callback, ms);
    194         };
    195     })();
    196 
    197     // FontAwesome Icon Control JS
    198     $('body').on('click', '.sfm-customizer-icon-box .sfm-icon-list li', function () {
    199         var icon_class = $(this).find('i').attr('class');
    200         $(this).closest('.sfm-icon-box').find('.sfm-icon-list li').removeClass('icon-active');
    201         $(this).addClass('icon-active');
    202         $(this).closest('.sfm-icon-box').prev('.sfm-selected-icon').children('i').attr('class', '').addClass(icon_class);
    203         $(this).closest('.sfm-icon-box').next('input').val(icon_class).trigger('change');
    204         $(this).closest('.sfm-icon-box').slideUp();
    205     });
    206 
    207     $('body').on('click', '.sfm-customizer-icon-box .sfm-selected-icon', function () {
    208         $(this).next().slideToggle();
    209     });
    210 
    211     $('body').on('change', '.sfm-customizer-icon-box .sfm-icon-search select', function () {
    212         var $ele = $(this);
    213         var selected = $ele.val();
    214         $ele.next('.sfm-icon-search-input').val('');
    215         $ele.closest('.sfm-icon-box').find('.sfm-icon-list').hide().removeClass('active');
    216         $ele.closest('.sfm-icon-box').find('.' + selected).fadeIn().addClass('active');
    217         $ele.closest('.sfm-icon-box').find('.' + selected).children('li').show();
    218     });
    219 
    220     $('body').on('keyup', '.sfm-customizer-icon-box .sfm-icon-search input', function (e) {
    221         var $input = $(this);
    222         var keyword = $input.val().toLowerCase();
    223         search_criteria = $input.closest('.sfm-icon-box').find('.sfm-icon-list.active i');
    224 
    225         delay(function () {
    226             $(search_criteria).each(function () {
    227                 if ($(this).attr('class').indexOf(keyword) > -1) {
    228                     $(this).parent().show();
    229                 } else {
    230                     $(this).parent().hide();
    231                 }
    232             });
    233         }, 500);
    234     });
    235 
    236     $('.range-input').each(function () {
    237         var $dis = $(this);
    238         var defaultValue = parseFloat($dis.attr('value'));
    239         var handle = $dis.find(".ui-slider-handle");
    240         $dis.slider({
    241             range: "min",
    242             value: defaultValue,
    243             min: parseFloat($dis.attr('data-min')),
    244             max: parseFloat($dis.attr('data-max')),
    245             step: parseFloat($dis.attr('data-step')),
    246             create: function () {
    247                 $dis.find(".ui-slider-handle").html('<span>' + $(this).slider("value") + '</span>');
    248             },
    249             slide: function (event, ui) {
    250                 $dis.siblings(".range-input-selector").val(ui.value).trigger('change');
    251                 $dis.find(".ui-slider-handle").html('<span>' + ui.value + '</span>');
    252             }
    253         });
    254     });
    255 
    256     $('body').on('change', '#sfm-form-wrap [name]', function () {
    257         setTimeout(function () {
    258             var value = sfm_refresh_repeater_values();
    259             sfm_live_preview(value);
    260         }, 1000);
    261     });
    262 
    263     function sfm_live_preview(value) {
    264         $.ajax({
    265             url: ajaxurl,
    266             type: 'POST',
    267             data: {action: 'sfm_live_preview', values: value},
    268             beforeSend: function () {
    269                 $('.sfm-live-demo').addClass('sfm-loading');
    270                 $('.submit .button').attr('disabled', 'disabled');
    271             },
    272             success: function (result) {
    273                 $('.sfm-live-demo').html(result).removeClass('sfm-loading');
    274                 $('.submit .button').removeAttr('disabled', 'disabled');
    275             }
    276         });
    277     }
    278 
    279     function sfm_refresh_repeater_values() {
    280         var values = [];
    281         var $this = $(this);
    282 
    283         $(".sfm-button-repeater").find(".sfm-button-fields").each(function () {
    284             var valueToPush = {};
    285 
    286             $(this).find('[name]').each(function (index) {
    287                 var name = $(this).attr('name');
    288                 name = name.split('[');
    289                 name = name[3].replace(']', '');
    290                 var dataValue = $(this).val();
    291                 valueToPush[name] = dataValue;
    292             });
    293 
    294             values.push(valueToPush);
    295         });
    296 
    297         var valueToPush = {};
    298         $('#tab-sfm-settings').find('[name]').each(function () {
    299             var name = $(this).attr('name');
    300             var dataValue = $(this).val();
    301             name = name.split('[');
    302             name.shift();
    303 
    304             var newname = [];
    305             $.each(name, function (index, value) {
    306                 if (value.indexOf(']') > -1) {
    307                     newname.push(value.replace(']', ''));
    308                 }
    309             });
    310 
    311             var name = newname.join('_');
    312             valueToPush[name] = dataValue;
    313         });
    314         values.push(valueToPush);
    315 
    316         return JSON.stringify(values);
    317     }
    318373})(jQuery);
    319374
  • simple-floating-menu/trunk/inc/google-fonts-list.php

    r2271064 r2727930  
    196196}
    197197
    198 add_action("wp_ajax_get_google_font_variants", "sfm_get_google_font_variants");
     198add_action("wp_ajax_get_google_font_variants", "sfm_get_google_font_variants");
  • simple-floating-menu/trunk/readme.txt

    r2698722 r2727930  
    33Tags: menu, sticky button, floating menu, fixed menu
    44Requires at least: 5.0
    5 Tested up to: 5.9
    6 Stable tag: 1.0.9
     5Tested up to:
     6Stable tag: 1.
    77Requires PHP: 5.0
    88License: GPLv2 or later
     
    5050 
    5151== Changelog ==
     52
     53
     54
    5255= 1.0.9 =  28 Jan, 2022
    5356* Slow loading of font icon list when switching font pack - fixed
  • simple-floating-menu/trunk/simple-floating-menu.php

    r2667907 r2727930  
    44 * Plugin URI: https://github.com/pzstar/simple-floating-menu
    55 * Description: Simple Floating Menu adds a stylish designed menu in your website.
    6  * Version: 1.0.9
     6 * Version: 1.
    77 * Author: HashThemes
    88 * Author URI:  https://hashthemes.com
     
    1616    exit;
    1717
    18 define('SFM_VERSION', '1.0.9');
     18define('SFM_VERSION', '1.');
    1919define('SFM_FILE', __FILE__);
    2020define('SFM_PLUGIN_BASENAME', plugin_basename(SFM_FILE));
     
    6767
    6868            add_action('admin_footer', array($this, 'sfm_dymanic_styles'));
     69
     70
     71
     72
     73
     74
    6975        }
    7076
     
    194200                        </a>
    195201
     202
     203
     204
     205
     206
    196207                        <a id="sfm-upgrade-nav" class="sfm-tab" href="#tab-upgrade-pro">
    197208                            <i class="mdi mdi-arrow-up-bold"></i>
    198209                            <?php esc_html_e('Premium Features', 'simple-floating-menu'); ?>
    199210                            <img src="<?php echo SFM_URL; ?>assets/img/upgrade-pro.png">
    200                         </a>       
     211                        </a>
    201212                    </div>
    202213
     
    209220
    210221                <div id="sfm-form-wrap">
    211                     <form method="POST">
     222                    <">
    212223                        <?php
    213224                        if (isset($_POST['updated']) && $_POST['updated'] === 'true') {
     
    217228                        $sfm_settings = self::get_settings();
    218229                        ?>
    219                         <input type="hidden" name="updated" value="true" />
    220                         <?php wp_nonce_field('sfm_nonce_update', 'sfm_nonce'); ?>
    221 
    222                         <div class="form-row sfm-form-row">
    223                             <label class="form-label"><?php esc_html_e('Enable Floating Menu', 'simple-floating-menu'); ?></label>
    224                             <div class="form-field">
    225                                 <div class="onoff-switch">
    226                                     <?php
    227                                     $enable_sfm = isset($sfm_settings['enable_sfm']) ? $sfm_settings['enable_sfm'] : 'yes';
    228                                     ?>
    229                                     <input type="checkbox" id="enable_sfm" name="sfm_settings[enable_sfm]" class="onoff-switch-checkbox" value="1" <?php checked($enable_sfm, 'yes'); ?>>
    230                                     <label class="onoff-switch-label" for="enable_sfm"></label>
     230                        <form method="POST">
     231                            <input type="hidden" name="updated" value="true" />
     232                            <?php wp_nonce_field('sfm_nonce_update', 'sfm_nonce'); ?>
     233
     234                            <div class="form-row sfm-form-row">
     235                                <label class="form-label"><?php esc_html_e('Enable Floating Menu', 'simple-floating-menu'); ?></label>
     236                                <div class="form-field">
     237                                    <div class="onoff-switch">
     238                                        <?php
     239                                        $enable_sfm = isset($sfm_settings['enable_sfm']) ? $sfm_settings['enable_sfm'] : 'yes';
     240                                        ?>
     241                                        <input type="checkbox" id="enable_sfm" name="sfm_settings[enable_sfm]" class="onoff-switch-checkbox" value="1" <?php checked($enable_sfm, 'yes'); ?>>
     242                                        <label class="onoff-switch-label" for="enable_sfm"></label>
     243                                    </div>
    231244                                </div>
    232245                            </div>
    233                         </div>
    234 
    235                         <div class="form-row sfm-form-row">
    236                             <label class="form-label"><?php esc_html_e('Display Setting Button on Menu', 'simple-floating-menu'); ?><br/><span><?php esc_html_e('Displays for the Administrator only in the Frontend so that you can quickly access the setting page for edit.', 'simple-floating-menu'); ?></span></label>
    237                             <div class="form-field">
    238                                 <div class="onoff-switch">
    239                                     <?php
    240                                     $enable_sfm_setting = isset($sfm_settings['enable_sfm_setting']) ? $sfm_settings['enable_sfm_setting'] : 'yes';
    241                                     ?>
    242                                     <input type="checkbox" id="enable_sfm_setting" name="sfm_settings[enable_sfm_setting]" class="onoff-switch-checkbox" value="1" <?php checked($enable_sfm_setting, 'yes'); ?>>
    243                                     <label class="onoff-switch-label" for="enable_sfm_setting"></label>
     246
     247                            <div class="form-row sfm-form-row">
     248                        >
     249                            >
     250                            ">
     251                               
     252                                   
     253                                   
     254                                    >
     255                                    >
     256                                    <>
    244257                                </div>
    245258                            </div>
    246                         </div>
    247 
    248                         <div id="tab-sfm-buttons" class="sfm-form-page sfm-active">
    249                             <div id="sfm-buttons-settings">
    250                                 <?php
    251                                 $buttons = $sfm_settings['buttons'];
    252                                 $count = count($buttons);
    253                                 ?>
    254                                 <div class="sfm-button-repeater" data-count="<?php echo esc_attr($count); ?>">
     259
     260                            <div id="tab-sfm-buttons" class="sfm-form-page sfm-active">
     261                                <div id="sfm-buttons-settings">
    255262                                    <?php
    256                                     $count = 0;
    257                                     foreach ($buttons as $button) {
    258                                         ?>
    259                                         <div class="sfm-button-fields">
    260                                             <div class="sfm-button-fields-header">
    261                                                 <div class="sfm-drag"><i class="icofont-drag"></i></div>
    262                                                 <?php esc_html_e('Button', 'simple-floating-menu'); ?>
    263                                                 <div class="sfm-remove"><i class="icofont-close-line"></i></div>
    264                                             </div>
    265                                             <div class="form-row">
    266                                                 <label class="form-label"><?php esc_html_e('Choose Icon', 'simple-floating-menu'); ?></label>
    267                                                 <div class="form-field">
    268                                                     <?php
    269                                                     echo '<div class="sfm-customizer-icon-box">';
    270                                                     echo '<div class="sfm-selected-icon">';
    271                                                     echo '<i class="' . esc_attr($button['icon']) . '"></i>';
    272                                                     echo '<span><i class="icofont-simple-down"></i></span>';
    273                                                     echo '</div>';
    274                                                     echo '<div class="sfm-icon-box">';
    275                                                     echo '<div class="sfm-icon-search">';
    276                                                     echo '<select>';
    277 
    278                                                     if (apply_filters('sfm_show_ico_font', true)) {
    279                                                         echo '<option value="icofont-list">' . esc_html__('Ico Font', 'simple-floating-menu') . '</option>';
    280                                                     }
    281 
    282                                                     if (apply_filters('sfm_show_font_awesome', true)) {
    283                                                         echo '<option value="fontawesome-list">' . esc_html__('Font Awesome', 'simple-floating-menu') . '</option>';
    284                                                     }
    285 
    286                                                     if (apply_filters('sfm_show_essential_icon', true)) {
    287                                                         echo '<option value="essential-icon-list">' . esc_html__('Essential Icon', 'simple-floating-menu') . '</option>';
    288                                                     }
    289 
    290                                                     if (apply_filters('sfm_show_material_icon', true)) {
    291                                                         echo '<option value="material-icon-list">' . esc_html__('Material Icon', 'simple-floating-menu') . '</option>';
    292                                                     }
    293 
    294                                                     if (apply_filters('sfm_show_elegant_icon', true)) {
    295                                                         echo '<option value="elegant-icon-list">' . esc_html__('Elegant Icon', 'simple-floating-menu') . '</option>';
    296                                                     }
    297 
    298                                                     echo '</select>';
    299                                                     echo '<input type="text" class="sfm-icon-search-input" placeholder="' . esc_html__('Type to filter', 'simple-floating-menu') . '" />';
    300                                                     echo '</div>';
    301 
    302                                                     if (apply_filters('sfm_show_ico_font', true)) {
    303                                                         echo '<ul class="sfm-icon-list icofont-list clearfix active">';
    304                                                         $sfm_icofont_icon_array = sfm_icofont_icon_array();
    305                                                         foreach ($sfm_icofont_icon_array as $sfm_icofont_icon) {
    306                                                             $icon_class = $button['icon'] == $sfm_icofont_icon ? 'icon-active' : '';
    307                                                             echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_icofont_icon) . '"></i></li>';
     263                                    $buttons = $sfm_settings['buttons'];
     264                                    $count = count($buttons);
     265                                    ?>
     266                                    <div class="sfm-button-repeater" data-count="<?php echo esc_attr($count); ?>">
     267                                        <?php
     268                                        $count = 0;
     269                                        foreach ($buttons as $button) {
     270                                            ?>
     271                                            <div class="sfm-button-fields">
     272                                                <div class="sfm-button-fields-header">
     273                                                    <div class="sfm-drag"><i class="icofont-drag"></i></div>
     274                                                    <?php esc_html_e('Button', 'simple-floating-menu'); ?>
     275                                                    <div class="sfm-remove"><i class="icofont-close-line"></i></div>
     276                                                </div>
     277                                                <div class="form-row">
     278                                                    <label class="form-label"><?php esc_html_e('Choose Icon', 'simple-floating-menu'); ?></label>
     279                                                    <div class="form-field">
     280                                                        <?php
     281                                                        echo '<div class="sfm-customizer-icon-box">';
     282                                                        echo '<div class="sfm-selected-icon">';
     283                                                        echo '<i class="' . esc_attr($button['icon']) . '"></i>';
     284                                                        echo '<span><i class="icofont-simple-down"></i></span>';
     285                                                        echo '</div>';
     286                                                        echo '<div class="sfm-icon-box">';
     287                                                        echo '<div class="sfm-icon-search">';
     288                                                        echo '<select>';
     289
     290                                                        if (apply_filters('sfm_show_ico_font', true)) {
     291                                                            echo '<option value="icofont-list">' . esc_html__('Ico Font', 'simple-floating-menu') . '</option>';
    308292                                                        }
    309                                                         echo '</ul>';
    310                                                     }
    311 
    312                                                     if (apply_filters('sfm_show_font_awesome', true)) {
    313                                                         echo '<ul class="sfm-icon-list fontawesome-list clearfix">';
    314                                                         $sfm_font_awesome_icon_array = sfm_font_awesome_icon_array();
    315                                                         foreach ($sfm_font_awesome_icon_array as $sfm_font_awesome_icon) {
    316                                                             $icon_class = $button['icon'] == $sfm_font_awesome_icon ? 'icon-active' : '';
    317                                                             echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_font_awesome_icon) . '"></i></li>';
     293
     294                                                        if (apply_filters('sfm_show_font_awesome', true)) {
     295                                                            echo '<option value="fontawesome-list">' . esc_html__('Font Awesome', 'simple-floating-menu') . '</option>';
    318296                                                        }
    319                                                         echo '</ul>';
    320                                                     }
    321 
    322                                                     if (apply_filters('sfm_show_essential_icon', true)) {
    323                                                         echo '<ul class="sfm-icon-list essential-icon-list clearfix">';
    324                                                         $sfm_essential_icon_array = sfm_essential_icon_array();
    325                                                         foreach ($sfm_essential_icon_array as $sfm_essential_icon) {
    326                                                             $icon_class = $button['icon'] == $sfm_essential_icon ? 'icon-active' : '';
    327                                                             echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_essential_icon) . '"></i></li>';
     297
     298                                                        if (apply_filters('sfm_show_essential_icon', true)) {
     299                                                            echo '<option value="essential-icon-list">' . esc_html__('Essential Icon', 'simple-floating-menu') . '</option>';
    328300                                                        }
    329                                                         echo '</ul>';
    330                                                     }
    331 
    332                                                     if (apply_filters('sfm_show_material_icon', true)) {
    333                                                         echo '<ul class="sfm-icon-list material-icon-list clearfix">';
    334                                                         $sfm_materialdesignicons_icon_array = sfm_materialdesignicons_array();
    335                                                         foreach ($sfm_materialdesignicons_icon_array as $sfm_materialdesignicons_icon) {
    336                                                             $icon_class = $button['icon'] == $sfm_materialdesignicons_icon ? 'icon-active' : '';
    337                                                             echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_materialdesignicons_icon) . '"></i></li>';
     301
     302                                                        if (apply_filters('sfm_show_material_icon', true)) {
     303                                                            echo '<option value="material-icon-list">' . esc_html__('Material Icon', 'simple-floating-menu') . '</option>';
    338304                                                        }
    339                                                         echo '</ul>';
    340                                                     }
    341 
    342                                                     if (apply_filters('sfm_show_elegant_icon', true)) {
    343                                                         echo '<ul class="sfm-icon-list elegant-icon-list clearfix">';
    344                                                         $sfm_eleganticons_icon_array = sfm_eleganticons_array();
    345                                                         foreach ($sfm_eleganticons_icon_array as $sfm_eleganticons_icon) {
    346                                                             $icon_class = $button['icon'] == $sfm_eleganticons_icon ? 'icon-active' : '';
    347                                                             echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_eleganticons_icon) . '"></i></li>';
     305
     306                                                        if (apply_filters('sfm_show_elegant_icon', true)) {
     307                                                            echo '<option value="elegant-icon-list">' . esc_html__('Elegant Icon', 'simple-floating-menu') . '</option>';
    348308                                                        }
    349                                                         echo '</ul>';
    350                                                     }
    351 
    352                                                     echo '</div>';
    353                                                     echo '<input class="sfm-icon" type="hidden" value="' . esc_attr($button['icon']) . '" name="sfm_settings[buttons][' . $count . '][icon]" data-default="icofont-dart"/>';
    354                                                     echo '</div>';
    355                                                     ?>
    356                                                 </div>
    357                                             </div>
    358 
    359                                             <div class="form-row">
    360                                                 <label class="form-label"><?php esc_html_e('Button Url', 'simple-floating-menu'); ?></label>
    361                                                 <div class="form-field">
    362                                                     <input name="sfm_settings[buttons][<?php echo $count; ?>][url]" type="text" value="<?php echo esc_attr($button['url']); ?>" class="regular-text" data-default="http://" />
    363                                                     <p class="form-description"><?php esc_html_e('Leaving empty will not display the button', 'simple-floating-menu'); ?></p>
    364                                                 </div>
    365                                             </div>
    366                                             <div class="form-row">
    367                                                 <label class="form-label"><?php esc_html_e('Tool Tip Text', 'simple-floating-menu'); ?></label>
    368                                                 <div class="form-field">
    369                                                     <input name="sfm_settings[buttons][<?php echo $count; ?>][tool_tip_text]" type="text" value="<?php echo esc_html($button['tool_tip_text']); ?>" class="regular-text" />
    370                                                     <p class="form-description"><?php esc_html_e('This text will display on hovering the button', 'simple-floating-menu'); ?></p>
    371                                                 </div>
    372                                             </div>
    373                                             <div class="form-row">
    374                                                 <label class="form-label"><?php esc_html_e('Open in New Tab', 'simple-floating-menu'); ?></label>
    375                                                 <div class="form-field">
    376                                                     <label class="form-label">
    377                                                         <?php
    378                                                         $checkbox_val = isset($button['open_new_tab']) ? true : false;
     309
     310                                                        echo '</select>';
     311                                                        echo '<input type="text" class="sfm-icon-search-input" placeholder="' . esc_html__('Type to filter', 'simple-floating-menu') . '" />';
     312                                                        echo '</div>';
     313
     314                                                        if (apply_filters('sfm_show_ico_font', true)) {
     315                                                            echo '<ul class="sfm-icon-list icofont-list clearfix active">';
     316                                                            $sfm_icofont_icon_array = sfm_icofont_icon_array();
     317                                                            foreach ($sfm_icofont_icon_array as $sfm_icofont_icon) {
     318                                                                $icon_class = $button['icon'] == $sfm_icofont_icon ? 'icon-active' : '';
     319                                                                echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_icofont_icon) . '"></i></li>';
     320                                                            }
     321                                                            echo '</ul>';
     322                                                        }
     323
     324                                                        if (apply_filters('sfm_show_font_awesome', true)) {
     325                                                            echo '<ul class="sfm-icon-list fontawesome-list clearfix">';
     326                                                            $sfm_font_awesome_icon_array = sfm_font_awesome_icon_array();
     327                                                            foreach ($sfm_font_awesome_icon_array as $sfm_font_awesome_icon) {
     328                                                                $icon_class = $button['icon'] == $sfm_font_awesome_icon ? 'icon-active' : '';
     329                                                                echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_font_awesome_icon) . '"></i></li>';
     330                                                            }
     331                                                            echo '</ul>';
     332                                                        }
     333
     334                                                        if (apply_filters('sfm_show_essential_icon', true)) {
     335                                                            echo '<ul class="sfm-icon-list essential-icon-list clearfix">';
     336                                                            $sfm_essential_icon_array = sfm_essential_icon_array();
     337                                                            foreach ($sfm_essential_icon_array as $sfm_essential_icon) {
     338                                                                $icon_class = $button['icon'] == $sfm_essential_icon ? 'icon-active' : '';
     339                                                                echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_essential_icon) . '"></i></li>';
     340                                                            }
     341                                                            echo '</ul>';
     342                                                        }
     343
     344                                                        if (apply_filters('sfm_show_material_icon', true)) {
     345                                                            echo '<ul class="sfm-icon-list material-icon-list clearfix">';
     346                                                            $sfm_materialdesignicons_icon_array = sfm_materialdesignicons_array();
     347                                                            foreach ($sfm_materialdesignicons_icon_array as $sfm_materialdesignicons_icon) {
     348                                                                $icon_class = $button['icon'] == $sfm_materialdesignicons_icon ? 'icon-active' : '';
     349                                                                echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_materialdesignicons_icon) . '"></i></li>';
     350                                                            }
     351                                                            echo '</ul>';
     352                                                        }
     353
     354                                                        if (apply_filters('sfm_show_elegant_icon', true)) {
     355                                                            echo '<ul class="sfm-icon-list elegant-icon-list clearfix">';
     356                                                            $sfm_eleganticons_icon_array = sfm_eleganticons_array();
     357                                                            foreach ($sfm_eleganticons_icon_array as $sfm_eleganticons_icon) {
     358                                                                $icon_class = $button['icon'] == $sfm_eleganticons_icon ? 'icon-active' : '';
     359                                                                echo '<li class=' . esc_attr($icon_class) . '><i class="' . esc_attr($sfm_eleganticons_icon) . '"></i></li>';
     360                                                            }
     361                                                            echo '</ul>';
     362                                                        }
     363
     364                                                        echo '</div>';
     365                                                        echo '<input class="sfm-icon" type="hidden" value="' . esc_attr($button['icon']) . '" name="sfm_settings[buttons][' . $count . '][icon]" data-default="icofont-dart"/>';
     366                                                        echo '</div>';
    379367                                                        ?>
    380                                                         <input name="sfm_settings[buttons][<?php echo $count; ?>][open_new_tab]" type="checkbox" value="1" <?php checked($checkbox_val, 1); ?>>
    381                                                         <?php esc_html_e('Open in New Tab', 'simple-floating-menu'); ?>
    382                                                     </label>
    383                                                 </div>
    384                                             </div>
    385                                             <div class="form-row">
    386                                                 <div class="form-flex form-col-2">
    387                                                     <div class="form-col">
    388                                                         <label class="form-label"><?php esc_html_e('Button Background Color', 'simple-floating-menu'); ?></label>
    389                                                         <div class="form-field">
    390                                                             <input class="sfm-color-picker sfm-button-bg-color" name="sfm_settings[buttons][<?php echo $count; ?>][button_bg_color]" type="text" value="<?php echo sanitize_hex_color($button['button_bg_color']); ?>" data-default="#000000"/>
    391                                                         </div>
    392                                                     </div>
    393 
    394                                                     <div class="form-col">
    395                                                         <label class="form-label"><?php esc_html_e('Button Icon Color', 'simple-floating-menu'); ?></label>
    396                                                         <div class="form-field"><input class="sfm-color-picker sfm-icon-color" name="sfm_settings[buttons][<?php echo $count; ?>][button_icon_color]" type="text" value="<?php echo sanitize_hex_color($button['button_icon_color']); ?>" data-default="#FFFFFF" /></div>
    397                                                     </div>
    398                                                     <div class="form-col">
    399                                                         <label class="form-label"><?php esc_html_e('Button Background Color Hover', 'simple-floating-menu'); ?></label>
    400                                                         <div class="form-field"><input class="sfm-color-picker sfm-button-bg-color-hover" name="sfm_settings[buttons][<?php echo $count; ?>][button_bg_color_hover]" type="text" value="<?php echo sanitize_hex_color($button['button_bg_color_hover']); ?>"  data-default="#000000"/></div>
    401                                                     </div>
    402                                                     <div class="form-col">
    403                                                         <label class="form-label"><?php esc_html_e('Button Icon Color Hover', 'simple-floating-menu'); ?></label>
    404                                                         <div class="form-field"><input class="sfm-color-picker sfm-icon-color-hover" name="sfm_settings[buttons][<?php echo $count; ?>][button_icon_color_hover]" type="text" value="<?php echo sanitize_hex_color($button['button_icon_color_hover']); ?>"  data-default="#FFFFFF"/></div>
    405368                                                    </div>
    406369                                                </div>
    407                                             </div>
    408                                             <div class="form-row">
    409                                                 <div class="form-flex form-col-2">
    410                                                     <div class="form-col">
    411                                                         <label class="form-label"><?php esc_html_e('Tool Tip Background Color', 'simple-floating-menu'); ?></label>
    412                                                         <div class="form-field"><input class="sfm-color-picker sfm-tool-tip-bg-color" name="sfm_settings[buttons][<?php echo $count; ?>][tooltip_bg_color]" type="text" value="<?php echo sanitize_hex_color($button['tooltip_bg_color']); ?>" data-default="#000000"/></div>
    413                                                     </div>
    414                                                     <div class="form-col">
    415                                                         <label class="form-label"><?php esc_html_e('Tool Tip Text Color', 'simple-floating-menu'); ?></label>
    416                                                         <div class="form-field"><input class="sfm-color-picker sfm-tool-tip-text-color" name="sfm_settings[buttons][<?php echo $count; ?>][tooltip_text_color]" type="text" value="<?php echo sanitize_hex_color($button['tooltip_text_color']); ?>" data-default="#FFFFFF" /></div>
     370
     371                                                <div class="form-row">
     372                                                    <label class="form-label"><?php esc_html_e('Button Url', 'simple-floating-menu'); ?></label>
     373                                                    <div class="form-field">
     374                                                        <input name="sfm_settings[buttons][<?php echo $count; ?>][url]" type="text" value="<?php echo esc_attr($button['url']); ?>" class="regular-text" data-default="http://" />
     375                                                        <p class="form-description"><?php esc_html_e('Leaving empty will not display the button', 'simple-floating-menu'); ?></p>
    417376                                                    </div>
    418377                                                </div>
     378
     379
     380
     381
     382
     383
     384
     385
     386
     387
     388
     389
     390
     391
     392
     393
     394
     395
     396
     397
     398
     399
     400
     401
     402
     403
     404
     405
     406
     407
     408
     409
     410
     411
     412
     413
     414
     415
     416
     417
     418
     419
     420
     421
     422
     423
     424
     425
     426
     427
     428
     429
     430
     431
     432
    419433                                            </div>
    420                                             <input name="sfm_settings[buttons][<?php echo $count; ?>][id]" type="hidden" class="sfm-unique-id" value="<?php echo esc_attr($button['id']); ?>">
    421                                         </div>
    422                                         <?php
    423                                         $count++;
    424                                     }
    425                                     ?>
     434                                            <
     435                                       
     436                                       
     437                                       
     438                                   
     439                                    >
    426440                                </div>
    427                                 <div class="sfm-add-new-button-fields"><a class="button" href="#"><i class="mdi mdi-plus"></i> <?php esc_html_e('Add New', 'simple-floating-menu'); ?></a></div>
     441                                <p class="submit">
     442                                    <button type="submit" name="submit" class="button button-primary"><i class="mdi mdi-content-save"></i> <?php esc_html_e('Save Settings', 'simple-floating-menu'); ?></button>
     443                                </p>
    428444                            </div>
    429                         </div>
    430 
    431                         <div id="tab-sfm-settings" class="sfm-form-page">
     445
     446                            <div id="tab-sfm-settings" class="sfm-form-page">
     447                                <table class="form-table">
     448                                    <tbody>
     449                                        <tr>
     450                                            <th><label><?php esc_html_e('Button Position', 'simple-floating-menu'); ?></label></th>
     451                                            <td>
     452                                                <select class="sfm-button-position" name="sfm_settings[position]">
     453                                                    <option value="top-left" <?php selected($sfm_settings['position'], 'top-left'); ?>><?php esc_html_e('Top Left', 'simple-floating-menu'); ?></option>
     454                                                    <option value="top-middle" <?php selected($sfm_settings['position'], 'top-middle'); ?>><?php esc_html_e('Top Middle', 'simple-floating-menu'); ?></option>
     455                                                    <option value="top-right" <?php selected($sfm_settings['position'], 'top-right'); ?>><?php esc_html_e('Top Right', 'simple-floating-menu'); ?></option>
     456                                                    <option value="bottom-left" <?php selected($sfm_settings['position'], 'bottom-left'); ?>><?php esc_html_e('Bottom Left', 'simple-floating-menu'); ?></option>
     457                                                    <option value="bottom-middle" <?php selected($sfm_settings['position'], 'bottom-middle'); ?>><?php esc_html_e('Bottom Middle', 'simple-floating-menu'); ?></option>
     458                                                    <option value="bottom-right" <?php selected($sfm_settings['position'], 'bottom-right'); ?>><?php esc_html_e('Bottom Right', 'simple-floating-menu'); ?></option>
     459                                                    <option value="middle-left" <?php selected($sfm_settings['position'], 'middle-left'); ?>><?php esc_html_e('Middle Left', 'simple-floating-menu'); ?></option>
     460                                                    <option value="middle-right" <?php selected($sfm_settings['position'], 'middle-right'); ?>><?php esc_html_e('Middle Right', 'simple-floating-menu'); ?></option>
     461                                                </select>
     462                                            </td>
     463                                        </tr>
     464                                        <tr>
     465                                            <th><label><?php esc_html_e('Orientation', 'simple-floating-menu'); ?></label></th>
     466                                            <td>
     467                                                <select class="sfm-button-orientation" name="sfm_settings[orientation]">
     468                                                    <option value="horizontal" <?php selected($sfm_settings['orientation'], 'horizontal'); ?>><?php esc_html_e('Horizontal', 'simple-floating-menu'); ?></option>
     469                                                    <option value="vertical" <?php selected($sfm_settings['orientation'], 'vertical'); ?>><?php esc_html_e('Vertical', 'simple-floating-menu'); ?></option>
     470                                                </select>
     471                                            </td>
     472                                        </tr>
     473
     474                                        <tr>
     475                                            <th><label><?php esc_html_e('Button Style', 'simple-floating-menu'); ?></label></th>
     476                                            <td>
     477                                                <select class="sfm-button-style" name="sfm_settings[style]">
     478                                                    <option value="sfm-rect" <?php selected($sfm_settings['style'], 'sfm-rect'); ?>><?php esc_html_e('Rectangle', 'simple-floating-menu'); ?></option>
     479                                                    <option value="sfm-round" <?php selected($sfm_settings['style'], 'sfm-round'); ?>><?php esc_html_e('Round', 'simple-floating-menu'); ?></option>
     480                                                    <option value="sfm-triangle" <?php selected($sfm_settings['style'], 'sfm-triangle'); ?>><?php esc_html_e('Triangle', 'simple-floating-menu'); ?></option>
     481                                                    <option value="sfm-rhombus" <?php selected($sfm_settings['style'], 'sfm-rhombus'); ?>><?php esc_html_e('Rhombus', 'simple-floating-menu'); ?></option>
     482                                                    <option value="sfm-pentagon" <?php selected($sfm_settings['style'], 'sfm-pentagon'); ?>><?php esc_html_e('Pentagon', 'simple-floating-menu'); ?></option>
     483                                                    <option value="sfm-hexagon" <?php selected($sfm_settings['style'], 'sfm-hexagon'); ?>><?php esc_html_e('Hexagon', 'simple-floating-menu'); ?></option>
     484                                                    <option value="sfm-star" <?php selected($sfm_settings['style'], 'sfm-star'); ?>><?php esc_html_e('Star', 'simple-floating-menu'); ?></option>
     485                                                    <option value="sfm-rabbet" <?php selected($sfm_settings['style'], 'sfm-rabbet'); ?>><?php esc_html_e('Rabbet', 'simple-floating-menu'); ?></option>
     486                                                    <option value="sfm-oval" <?php selected($sfm_settings['style'], 'sfm-oval'); ?>><?php esc_html_e('Oval', 'simple-floating-menu'); ?></option>
     487                                                </select>
     488                                            </td>
     489                                        </tr>
     490                                        <tr>
     491                                            <td colspan="2" class="sfm-seperator"><hr></td>
     492                                        </tr>
     493                                        <tr>
     494                                            <th><label><?php esc_html_e('Button Height', 'simple-floating-menu'); ?></label></th>
     495                                            <td>
     496                                                <?php
     497                                                echo '<div class="sfm-range-slider">';
     498                                                echo '<div class="range-input"  value="' . absint($sfm_settings['button_height']) . '" data-min="40" data-max="200" data-step="1"></div>';
     499                                                echo '<input class="range-input-selector sfm-button-height" type="hidden" value="' . absint($sfm_settings['button_height']) . '" name="sfm_settings[button_height]"/>';
     500                                                echo '</div>';
     501                                                ?>
     502                                            </td>
     503                                        </tr>
     504                                        <tr>
     505                                            <th><label><?php esc_html_e('Button Width', 'simple-floating-menu'); ?></label></th>
     506                                            <td>
     507                                                <?php
     508                                                echo '<div class="sfm-range-slider">';
     509                                                echo '<div class="range-input"  value="' . absint($sfm_settings['button_width']) . '" data-min="40" data-max="200" data-step="1"></div>';
     510                                                echo '<input class="range-input-selector sfm-button-width" type="hidden" value="' . absint($sfm_settings['button_width']) . '" name="sfm_settings[button_width]"/>';
     511                                                echo '</div>';
     512                                                ?>
     513                                            </td>
     514                                        </tr>
     515                                        <tr>
     516                                            <td colspan="2" class="sfm-seperator"><hr></td>
     517                                        </tr>
     518                                        <tr>
     519                                            <th><label><?php esc_html_e('Icon Size', 'simple-floating-menu'); ?></label></th>
     520                                            <td>
     521                                                <?php
     522                                                echo '<div class="sfm-range-slider">';
     523                                                echo '<div class="range-input"  value="' . absint($sfm_settings['icon_size']) . '" data-min="10" data-max="60" data-step="1"></div>';
     524                                                echo '<input class="range-input-selector sfm-icon-size" type="hidden" value="' . absint($sfm_settings['icon_size']) . '" name="sfm_settings[icon_size]"/>';
     525                                                echo '</div>';
     526                                                ?>
     527                                            </td>
     528                                        </tr>
     529                                        <tr>
     530                                            <th><label><?php esc_html_e('Icon Vertical Position', 'simple-floating-menu'); ?></label></th>
     531                                            <td>
     532                                                <?php
     533                                                echo '<div class="sfm-range-slider">';
     534                                                echo '<div class="range-input"  value="' . absint($sfm_settings['icon_position']) . '" data-min="-40" data-max="40" data-step="1"></div>';
     535                                                echo '<input class="range-input-selector sfm-icon-position" type="hidden" value="' . absint($sfm_settings['icon_position']) . '" name="sfm_settings[icon_position]"/>';
     536                                                echo '</div>';
     537                                                ?>
     538                                            </td>
     539                                        </tr>
     540                                        <tr>
     541                                            <td colspan="2" class="sfm-seperator"><hr></td>
     542                                        </tr>
     543                                        <tr>
     544                                            <th><label><?php esc_html_e('Tool Tip Typography', 'simple-floating-menu'); ?></label></th>
     545                                            <td>
     546                                                <ul class="sfm-typography-fields">
     547                                                    <li class="sfm-typography-font-family">
     548                                                        <div class="form-row">
     549                                                            <label class="form-label"><?php esc_html_e('Font Family', 'simple-floating-menu'); ?></label>
     550
     551                                                            <div class="form-field">
     552                                                                <select name="sfm_settings[tooltip_font][family]" class="typography_face">
     553
     554                                                                    <?php
     555                                                                    $standard_fonts = sfm_get_standard_font_families();
     556                                                                    if ($standard_fonts) {
     557                                                                        ?>
     558                                                                        <optgroup label="Standard Fonts">
     559                                                                            <?php foreach ($standard_fonts as $standard_font) { ?>
     560                                                                                <option value="<?php echo esc_attr($standard_font); ?>" <?php selected($sfm_settings['tooltip_font']['family'], $standard_font); ?> ><?php echo esc_html($standard_font); ?></option>
     561                                                                            <?php } ?>
     562                                                                        </optgroup>
     563                                                                    <?php } ?>
     564
     565                                                                    <?php
     566                                                                    $google_fonts = sfm_get_google_font_families();
     567                                                                    if ($google_fonts) {
     568                                                                        ?>
     569                                                                        <optgroup label="Google Fonts">
     570                                                                            <?php foreach ($google_fonts as $google_font) { ?>
     571                                                                                <option value="<?php echo esc_attr($google_font); ?>" <?php selected($sfm_settings['tooltip_font']['family'], $google_font); ?>><?php echo esc_html($google_font); ?></option>
     572                                                                            <?php } ?>
     573                                                                        </optgroup>
     574                                                                    <?php } ?>
     575
     576                                                                </select>
     577                                                            </div>
     578                                                        </div>
     579                                                    </li>
     580
     581                                                    <li class="sfm-typography-font-style">
     582                                                        <div class="form-row">
     583                                                            <label class="form-label"><?php esc_html_e('Font Style', 'simple-floating-menu'); ?></label>
     584
     585                                                            <div class="form-field">
     586                                                                <?php
     587                                                                $family = $sfm_settings['tooltip_font']['family'];
     588                                                                $font_weights = sfm_get_font_weight_choices($family);
     589                                                                if ($font_weights) {
     590                                                                    ?>
     591                                                                    <select name="sfm_settings[tooltip_font][style]" class="typography_font_style">
     592                                                                        <?php foreach ($font_weights as $font_weight => $font_weight_label) { ?>
     593                                                                            <option value="<?php echo esc_attr($font_weight); ?>" <?php selected($sfm_settings['tooltip_font']['style'], $font_weight); ?>><?php echo esc_html($font_weight_label); ?></option>
     594                                                                        <?php } ?>
     595                                                                    </select>
     596                                                                <?php } ?>
     597                                                            </div>
     598                                                        </div>
     599                                                    </li>
     600
     601                                                    <li class="sfm-typography-text-transform">
     602                                                        <div class="form-row">
     603                                                            <label class="form-label"><?php esc_html_e('Text Transform', 'simple-floating-menu'); ?></label>
     604
     605                                                            <div class="form-field">
     606                                                                <?php
     607                                                                $text_transforms = sfm_get_text_transform_choices();
     608                                                                if ($text_transforms) {
     609                                                                    ?>
     610                                                                    <select name="sfm_settings[tooltip_font][transform]" class="typography_text_transform">
     611                                                                        <?php foreach ($text_transforms as $key => $value) { ?>
     612                                                                            <option value="<?php echo esc_attr($key) ?>" <?php selected($sfm_settings['tooltip_font']['transform'], $key); ?>><?php echo esc_html($value); ?></option>
     613                                                                        <?php } ?>
     614                                                                    </select>
     615                                                                <?php } ?>
     616                                                            </div>
     617                                                        </div>
     618                                                    </li>
     619
     620                                                    <li class="sfm-typography-text-decoration">
     621                                                        <div class="form-row">
     622                                                            <label class="form-label"><?php esc_html_e('Text Decoration', 'simple-floating-menu'); ?></label>
     623
     624                                                            <div class="form-field">
     625                                                                <?php
     626                                                                $text_decorations = sfm_get_text_decoration_choices();
     627                                                                if ($text_decorations) {
     628                                                                    ?>
     629                                                                    <select name="sfm_settings[tooltip_font][decoration]" class="typography_text_decoration">
     630                                                                        <?php foreach ($text_decorations as $key => $value) { ?>
     631                                                                            <option value="<?php echo esc_attr($key) ?>" <?php selected($sfm_settings['tooltip_font']['decoration'], $key); ?>><?php echo esc_html($value); ?></option>
     632                                                                        <?php } ?>
     633                                                                    </select>
     634                                                                <?php } ?>
     635                                                            </div>
     636                                                        </div>
     637                                                    </li>
     638
     639                                                    <li class="sfm-typography-font-size">
     640                                                        <div class="form-row">
     641                                                            <label class="form-label"><?php esc_html_e('Font Size', 'simple-floating-menu'); ?></label>
     642
     643                                                            <div class="form-field">
     644                                                                <div class="sfm-range-slider">
     645                                                                    <div class="range-input"  value="<?php echo absint($sfm_settings['tooltip_font']['size']); ?>" data-min="10" data-max="60" data-step="1"></div>
     646                                                                    <input class="range-input-selector" type="hidden" value="<?php echo absint($sfm_settings['tooltip_font']['size']); ?>" name="sfm_settings[tooltip_font][size]"/>
     647                                                                </div>
     648                                                            </div>
     649                                                        </div>
     650                                                    </li>
     651
     652
     653                                                    <li class="sfm-typography-line-height">
     654                                                        <div class="form-row">
     655                                                            <label class="form-label"><?php esc_html_e('Line Height', 'simple-floating-menu'); ?></label>
     656
     657                                                            <div class="form-field">
     658                                                                <div class="sfm-range-slider">
     659                                                                    <div class="range-input"  value="<?php echo esc_attr($sfm_settings['tooltip_font']['line_height']); ?>" data-min="0.5" data-max="5" data-step="0.1"></div>
     660                                                                    <input class="range-input-selector" type="hidden" value="<?php echo esc_attr($sfm_settings['tooltip_font']['line_height']); ?>" name="sfm_settings[tooltip_font][line_height]"/>
     661                                                                </div>         
     662                                                            </div>
     663                                                        </div>
     664                                                    </li>
     665
     666
     667                                                    <li class="sfm-typography-letter-spacing">
     668                                                        <div class="form-row">
     669                                                            <label class="form-label"><?php esc_html_e('Letter Spacing', 'simple-floating-menu'); ?></label>
     670
     671                                                            <div class="form-field">
     672                                                                <div class="sfm-range-slider">
     673                                                                    <div class="range-input"  value="<?php echo esc_attr($sfm_settings['tooltip_font']['letter_spacing']); ?>" data-min="-5" data-max="5" data-step="0.1"></div>
     674                                                                    <input class="range-input-selector" type="hidden" value="<?php echo esc_attr($sfm_settings['tooltip_font']['letter_spacing']); ?>" name="sfm_settings[tooltip_font][letter_spacing]"/>
     675                                                                </div>   
     676                                                            </div>
     677                                                        </div>
     678                                                    </li>
     679                                                </ul>
     680                                            </td>
     681                                        </tr>
     682                                        <tr>
     683                                            <td colspan="2" class="sfm-seperator"><hr></td>
     684                                        </tr>
     685                                        <tr class="sfm-top-offset-wrap">
     686                                            <th><label><?php esc_html_e('Floating Menu Top Offset', 'simple-floating-menu'); ?></label></th>
     687                                            <td>
     688                                                <?php
     689                                                echo '<div class="sfm-range-slider">';
     690                                                echo '<div class="range-input"  value="' . absint($sfm_settings['top_offset']) . '" data-min="0" data-max="200" data-step="1"></div>';
     691                                                echo '<input class="range-input-selector sfm-top-offset" type="hidden" value="' . absint($sfm_settings['top_offset']) . '" name="sfm_settings[top_offset]"/>';
     692                                                echo '</div>';
     693                                                ?>
     694                                            </td>
     695                                        </tr>
     696
     697                                        <tr class="sfm-bottom-offset-wrap">
     698                                            <th><label><?php esc_html_e('Floating Menu Bottom Offset', 'simple-floating-menu'); ?></label></th>
     699                                            <td>
     700                                                <?php
     701                                                echo '<div class="sfm-range-slider">';
     702                                                echo '<div class="range-input"  value="' . absint($sfm_settings['bottom_offset']) . '" data-min="0" data-max="200" data-step="1"></div>';
     703                                                echo '<input class="range-input-selector sfm-bottom-offset" type="hidden" value="' . absint($sfm_settings['bottom_offset']) . '" name="sfm_settings[bottom_offset]"/>';
     704                                                echo '</div>';
     705                                                ?>
     706                                            </td>
     707                                        </tr>
     708
     709                                        <tr class="sfm-left-offset-wrap">
     710                                            <th><label><?php esc_html_e('Floating Menu Left Offset', 'simple-floating-menu'); ?></label></th>
     711                                            <td>
     712                                                <?php
     713                                                echo '<div class="sfm-range-slider">';
     714                                                echo '<div class="range-input"  value="' . absint($sfm_settings['left_offset']) . '" data-min="0" data-max="200" data-step="1"></div>';
     715                                                echo '<input class="range-input-selector sfm-left-offset" type="hidden" value="' . absint($sfm_settings['left_offset']) . '" name="sfm_settings[left_offset]"/>';
     716                                                echo '</div>';
     717                                                ?>
     718                                            </td>
     719                                        </tr>
     720
     721                                        <tr class="sfm-right-offset-wrap">
     722                                            <th><label><?php esc_html_e('Floating Menu Right Offset', 'simple-floating-menu'); ?></label></th>
     723                                            <td>
     724                                                <?php
     725                                                echo '<div class="sfm-range-slider">';
     726                                                echo '<div class="range-input"  value="' . esc_attr($sfm_settings['right_offset']) . '" data-min="0" data-max="200" data-step="1"></div>';
     727                                                echo '<input class="range-input-selector sfm-right-offset" type="hidden" value="' . esc_attr($sfm_settings['right_offset']) . '" name="sfm_settings[right_offset]"/>';
     728                                                echo '</div>';
     729                                                ?>
     730                                            </td>
     731                                        </tr>
     732                                        <tr>
     733                                            <td colspan="2" class="sfm-seperator"><hr></td>
     734                                        </tr>
     735                                        <tr>
     736                                            <th><label><?php esc_html_e('Spacing Between Buttons', 'simple-floating-menu'); ?></label></th>
     737                                            <td>
     738                                                <?php
     739                                                echo '<div class="sfm-range-slider">';
     740                                                echo '<div class="range-input"  value="' . absint($sfm_settings['button_spacing']) . '" data-min="0" data-max="50" data-step="1"></div>';
     741                                                echo '<input class="range-input-selector sfm-button-spacing" type="hidden" value="' . absint($sfm_settings['button_spacing']) . '" name="sfm_settings[button_spacing]"/>';
     742                                                echo '</div>';
     743                                                ?>
     744                                            </td>
     745                                        </tr>
     746                                        <tr>
     747                                            <th><label><?php esc_html_e('Z Index', 'simple-floating-menu'); ?></label></th>
     748                                            <td>
     749                                                <?php
     750                                                echo '<input class="sfm-z-index" type="text" value="' . absint($sfm_settings['zindex']) . '" name="sfm_settings[zindex]"/>';
     751                                                ?>
     752                                            </td>
     753                                        </tr>
     754                                    </tbody>
     755                                </table>
     756                                <p class="submit">
     757                                    <button type="submit" name="submit" class="button button-primary"><i class="mdi mdi-content-save"></i> <?php esc_html_e('Save Settings', 'simple-floating-menu'); ?></button>
     758                                </p>
     759                            </div>
     760                        </form>
     761
     762                        <div id="tab-sfm-imex" class="sfm-form-page">
    432763                            <table class="form-table">
    433764                                <tbody>
    434765                                    <tr>
    435                                         <th><label><?php esc_html_e('Button Position', 'simple-floating-menu'); ?></label></th>
     766                                        <th><label><?php esc_html_e('', 'simple-floating-menu'); ?></label></th>
    436767                                        <td>
    437                                             <select class="sfm-button-position" name="sfm_settings[position]">
    438                                                 <option value="top-left" <?php selected($sfm_settings['position'], 'top-left'); ?>><?php esc_html_e('Top Left', 'simple-floating-menu'); ?></option>
    439                                                 <option value="top-middle" <?php selected($sfm_settings['position'], 'top-middle'); ?>><?php esc_html_e('Top Middle', 'simple-floating-menu'); ?></option>
    440                                                 <option value="top-right" <?php selected($sfm_settings['position'], 'top-right'); ?>><?php esc_html_e('Top Right', 'simple-floating-menu'); ?></option>
    441                                                 <option value="bottom-left" <?php selected($sfm_settings['position'], 'bottom-left'); ?>><?php esc_html_e('Bottom Left', 'simple-floating-menu'); ?></option>
    442                                                 <option value="bottom-middle" <?php selected($sfm_settings['position'], 'bottom-middle'); ?>><?php esc_html_e('Bottom Middle', 'simple-floating-menu'); ?></option>
    443                                                 <option value="bottom-right" <?php selected($sfm_settings['position'], 'bottom-right'); ?>><?php esc_html_e('Bottom Right', 'simple-floating-menu'); ?></option>
    444                                                 <option value="middle-left" <?php selected($sfm_settings['position'], 'middle-left'); ?>><?php esc_html_e('Middle Left', 'simple-floating-menu'); ?></option>
    445                                                 <option value="middle-right" <?php selected($sfm_settings['position'], 'middle-right'); ?>><?php esc_html_e('Middle Right', 'simple-floating-menu'); ?></option>
    446                                             </select>
     768                                            <div class="sfm-settings-fields">
     769                                                <form method="post">
     770                                                    <input type="hidden" name="sfm_imex_action" value="export_settings" />
     771                                                    <?php wp_nonce_field("sfm_imex_export_nonce", "sfm_imex_export_nonce"); ?>
     772                                                    <button class="button button-primary" id="sfm_export" name="sfm_export"><i class='icofont-download'></i> <?php esc_html_e("Download Settings", "simple-floating-menu") ?></button>
     773                                                </form>
     774                                            </div>
    447775                                        </td>
    448776                                    </tr>
    449777
    450                                 <th><label><?php esc_html_e('Orientation', 'simple-floating-menu'); ?></label></th>
    451                                 <td>
    452                                     <select class="sfm-button-orientation" name="sfm_settings[orientation]">
    453                                         <option value="horizontal" <?php selected($sfm_settings['orientation'], 'horizontal'); ?>><?php esc_html_e('Horizontal', 'simple-floating-menu'); ?></option>
    454                                         <option value="vertical" <?php selected($sfm_settings['orientation'], 'vertical'); ?>><?php esc_html_e('Vertical', 'simple-floating-menu'); ?></option>
    455                                     </select>
    456                                 </td>
    457                                 </tr>
    458 
    459                                 <tr>
    460                                     <th><label><?php esc_html_e('Button Style', 'simple-floating-menu'); ?></label></th>
    461                                     <td>
    462                                         <select class="sfm-button-style" name="sfm_settings[style]">
    463                                             <option value="sfm-rect" <?php selected($sfm_settings['style'], 'sfm-rect'); ?>><?php esc_html_e('Rectangle', 'simple-floating-menu'); ?></option>
    464                                             <option value="sfm-round" <?php selected($sfm_settings['style'], 'sfm-round'); ?>><?php esc_html_e('Round', 'simple-floating-menu'); ?></option>
    465                                             <option value="sfm-triangle" <?php selected($sfm_settings['style'], 'sfm-triangle'); ?>><?php esc_html_e('Triangle', 'simple-floating-menu'); ?></option>
    466                                             <option value="sfm-rhombus" <?php selected($sfm_settings['style'], 'sfm-rhombus'); ?>><?php esc_html_e('Rhombus', 'simple-floating-menu'); ?></option>
    467                                             <option value="sfm-pentagon" <?php selected($sfm_settings['style'], 'sfm-pentagon'); ?>><?php esc_html_e('Pentagon', 'simple-floating-menu'); ?></option>
    468                                             <option value="sfm-hexagon" <?php selected($sfm_settings['style'], 'sfm-hexagon'); ?>><?php esc_html_e('Hexagon', 'simple-floating-menu'); ?></option>
    469                                             <option value="sfm-star" <?php selected($sfm_settings['style'], 'sfm-star'); ?>><?php esc_html_e('Star', 'simple-floating-menu'); ?></option>
    470                                             <option value="sfm-rabbet" <?php selected($sfm_settings['style'], 'sfm-rabbet'); ?>><?php esc_html_e('Rabbet', 'simple-floating-menu'); ?></option>
    471                                             <option value="sfm-oval" <?php selected($sfm_settings['style'], 'sfm-oval'); ?>><?php esc_html_e('Oval', 'simple-floating-menu'); ?></option>
    472                                         </select>
    473                                     </td>
    474                                 </tr>
    475                                 <tr>
    476                                     <td colspan="2" class="sfm-seperator"><hr></td>
    477                                 </tr>
    478                                 <tr>
    479                                     <th><label><?php esc_html_e('Button Height', 'simple-floating-menu'); ?></label></th>
    480                                     <td>
    481                                         <?php
    482                                         echo '<div class="sfm-range-slider">';
    483                                         echo '<div class="range-input"  value="' . absint($sfm_settings['button_height']) . '" data-min="40" data-max="200" data-step="1"></div>';
    484                                         echo '<input class="range-input-selector sfm-button-height" type="hidden" value="' . absint($sfm_settings['button_height']) . '" name="sfm_settings[button_height]"/>';
    485                                         echo '</div>';
    486                                         ?>
    487                                     </td>
    488                                 </tr>
    489                                 <tr>
    490                                     <th><label><?php esc_html_e('Button Width', 'simple-floating-menu'); ?></label></th>
    491                                     <td>
    492                                         <?php
    493                                         echo '<div class="sfm-range-slider">';
    494                                         echo '<div class="range-input"  value="' . absint($sfm_settings['button_width']) . '" data-min="40" data-max="200" data-step="1"></div>';
    495                                         echo '<input class="range-input-selector sfm-button-width" type="hidden" value="' . absint($sfm_settings['button_width']) . '" name="sfm_settings[button_width]"/>';
    496                                         echo '</div>';
    497                                         ?>
    498                                     </td>
    499                                 </tr>
    500                                 <tr>
    501                                     <td colspan="2" class="sfm-seperator"><hr></td>
    502                                 </tr>
    503                                 <tr>
    504                                     <th><label><?php esc_html_e('Icon Size', 'simple-floating-menu'); ?></label></th>
    505                                     <td>
    506                                         <?php
    507                                         echo '<div class="sfm-range-slider">';
    508                                         echo '<div class="range-input"  value="' . absint($sfm_settings['icon_size']) . '" data-min="10" data-max="60" data-step="1"></div>';
    509                                         echo '<input class="range-input-selector sfm-icon-size" type="hidden" value="' . absint($sfm_settings['icon_size']) . '" name="sfm_settings[icon_size]"/>';
    510                                         echo '</div>';
    511                                         ?>
    512                                     </td>
    513                                 </tr>
    514                                 <tr>
    515                                     <th><label><?php esc_html_e('Icon Vertical Position', 'simple-floating-menu'); ?></label></th>
    516                                     <td>
    517                                         <?php
    518                                         echo '<div class="sfm-range-slider">';
    519                                         echo '<div class="range-input"  value="' . absint($sfm_settings['icon_position']) . '" data-min="-40" data-max="40" data-step="1"></div>';
    520                                         echo '<input class="range-input-selector sfm-icon-position" type="hidden" value="' . absint($sfm_settings['icon_position']) . '" name="sfm_settings[icon_position]"/>';
    521                                         echo '</div>';
    522                                         ?>
    523                                     </td>
    524                                 </tr>
    525                                 <tr>
    526                                     <td colspan="2" class="sfm-seperator"><hr></td>
    527                                 </tr>
    528                                 <tr>
    529                                     <th><label><?php esc_html_e('Tool Tip Typography', 'simple-floating-menu'); ?></label></th>
    530                                     <td>
    531                                         <ul class="sfm-typography-fields">
    532                                             <li class="sfm-typography-font-family">
    533                                                 <div class="form-row">
    534                                                     <label class="form-label"><?php esc_html_e('Font Family', 'simple-floating-menu'); ?></label>
    535 
    536                                                     <div class="form-field">
    537                                                         <select name="sfm_settings[tooltip_font][family]" class="typography_face">
    538 
    539                                                             <?php
    540                                                             $standard_fonts = sfm_get_standard_font_families();
    541                                                             if ($standard_fonts) {
    542                                                                 ?>
    543                                                                 <optgroup label="Standard Fonts">
    544                                                                     <?php foreach ($standard_fonts as $standard_font) { ?>
    545                                                                         <option value="<?php echo esc_attr($standard_font); ?>" <?php selected($sfm_settings['tooltip_font']['family'], $standard_font); ?> ><?php echo esc_html($standard_font); ?></option>
    546                                                                     <?php } ?>
    547                                                                 </optgroup>
    548                                                             <?php } ?>
    549 
    550                                                             <?php
    551                                                             $google_fonts = sfm_get_google_font_families();
    552                                                             if ($google_fonts) {
    553                                                                 ?>
    554                                                                 <optgroup label="Google Fonts">
    555                                                                     <?php foreach ($google_fonts as $google_font) { ?>
    556                                                                         <option value="<?php echo esc_attr($google_font); ?>" <?php selected($sfm_settings['tooltip_font']['family'], $google_font); ?>><?php echo esc_html($google_font); ?></option>
    557                                                                     <?php } ?>
    558                                                                 </optgroup>
    559                                                             <?php } ?>
    560 
    561                                                         </select>
     778                                    <tr>
     779                                        <th><label><?php esc_html_e('Import Settings', 'simple-floating-menu'); ?></label></th>
     780                                        <td>
     781                                            <div class="sfm-settings-fields">
     782                                                <form method="post" enctype="multipart/form-data">
     783                                                    <div class="sfm-preview-zone hidden">
     784                                                        <div class="box box-solid">
     785                                                            <div class="box-body"></div>
     786                                                            <button type="button" class="button sfm-remove-preview">
     787                                                                <i class="icofont-close-circled"></i>
     788                                                            </button>
     789                                                        </div>
    562790                                                    </div>
    563                                                 </div>
    564                                             </li>
    565 
    566                                             <li class="sfm-typography-font-style">
    567                                                 <div class="form-row">
    568                                                     <label class="form-label"><?php esc_html_e('Font Style', 'simple-floating-menu'); ?></label>
    569 
    570                                                     <div class="form-field">
    571                                                         <?php
    572                                                         $family = $sfm_settings['tooltip_font']['family'];
    573                                                         $font_weights = sfm_get_font_weight_choices($family);
    574                                                         if ($font_weights) {
    575                                                             ?>
    576                                                             <select name="sfm_settings[tooltip_font][style]" class="typography_font_style">
    577                                                                 <?php foreach ($font_weights as $font_weight => $font_weight_label) { ?>
    578                                                                     <option value="<?php echo esc_attr($font_weight); ?>" <?php selected($sfm_settings['tooltip_font']['style'], $font_weight); ?>><?php echo esc_html($font_weight_label); ?></option>
    579                                                                 <?php } ?>
    580                                                             </select>
    581                                                         <?php } ?>
     791                                                    <div class="sfm-dropzone-wrapper">
     792                                                        <div class="sfm-dropzone-desc">
     793                                                            <i class="icofont-download"></i>
     794                                                            <p><?php esc_html_e("Choose an json file or drag it here", "simple-floating-menu"); ?></p>
     795                                                        </div>
     796                                                        <input type="file" name="sfm_import_file" class="sfm-dropzone">
    582797                                                    </div>
    583                                                 </div>
    584                                             </li>
    585 
    586                                             <li class="sfm-typography-text-transform">
    587                                                 <div class="form-row">
    588                                                     <label class="form-label"><?php esc_html_e('Text Transform', 'simple-floating-menu'); ?></label>
    589 
    590                                                     <div class="form-field">
    591                                                         <?php
    592                                                         $text_transforms = sfm_get_text_transform_choices();
    593                                                         if ($text_transforms) {
    594                                                             ?>
    595                                                             <select name="sfm_settings[tooltip_font][transform]" class="typography_text_transform">
    596                                                                 <?php foreach ($text_transforms as $key => $value) { ?>
    597                                                                     <option value="<?php echo esc_attr($key) ?>" <?php selected($sfm_settings['tooltip_font']['transform'], $key); ?>><?php echo esc_html($value); ?></option>
    598                                                                 <?php } ?>
    599                                                             </select>
    600                                                         <?php } ?>
    601                                                     </div>
    602                                                 </div>
    603                                             </li>
    604 
    605                                             <li class="sfm-typography-text-decoration">
    606                                                 <div class="form-row">
    607                                                     <label class="form-label"><?php esc_html_e('Text Decoration', 'simple-floating-menu'); ?></label>
    608 
    609                                                     <div class="form-field">
    610                                                         <?php
    611                                                         $text_decorations = sfm_get_text_decoration_choices();
    612                                                         if ($text_decorations) {
    613                                                             ?>
    614                                                             <select name="sfm_settings[tooltip_font][decoration]" class="typography_text_decoration">
    615                                                                 <?php foreach ($text_decorations as $key => $value) { ?>
    616                                                                     <option value="<?php echo esc_attr($key) ?>" <?php selected($sfm_settings['tooltip_font']['decoration'], $key); ?>><?php echo esc_html($value); ?></option>
    617                                                                 <?php } ?>
    618                                                             </select>
    619                                                         <?php } ?>
    620                                                     </div>
    621                                                 </div>
    622                                             </li>
    623 
    624                                             <li class="sfm-typography-font-size">
    625                                                 <div class="form-row">
    626                                                     <label class="form-label"><?php esc_html_e('Font Size', 'simple-floating-menu'); ?></label>
    627 
    628                                                     <div class="form-field">
    629                                                         <div class="sfm-range-slider">
    630                                                             <div class="range-input"  value="<?php echo absint($sfm_settings['tooltip_font']['size']); ?>" data-min="10" data-max="60" data-step="1"></div>
    631                                                             <input class="range-input-selector" type="hidden" value="<?php echo absint($sfm_settings['tooltip_font']['size']); ?>" name="sfm_settings[tooltip_font][size]"/>
    632                                                         </div>
    633                                                     </div>
    634                                                 </div>
    635                                             </li>
    636 
    637 
    638                                             <li class="sfm-typography-line-height">
    639                                                 <div class="form-row">
    640                                                     <label class="form-label"><?php esc_html_e('Line Height', 'simple-floating-menu'); ?></label>
    641 
    642                                                     <div class="form-field">
    643                                                         <div class="sfm-range-slider">
    644                                                             <div class="range-input"  value="<?php echo esc_attr($sfm_settings['tooltip_font']['line_height']); ?>" data-min="0.5" data-max="5" data-step="0.1"></div>
    645                                                             <input class="range-input-selector" type="hidden" value="<?php echo esc_attr($sfm_settings['tooltip_font']['line_height']); ?>" name="sfm_settings[tooltip_font][line_height]"/>
    646                                                         </div>         
    647                                                     </div>
    648                                                 </div>
    649                                             </li>
    650 
    651 
    652                                             <li class="sfm-typography-letter-spacing">
    653                                                 <div class="form-row">
    654                                                     <label class="form-label"><?php esc_html_e('Letter Spacing', 'simple-floating-menu'); ?></label>
    655 
    656                                                     <div class="form-field">
    657                                                         <div class="sfm-range-slider">
    658                                                             <div class="range-input"  value="<?php echo esc_attr($sfm_settings['tooltip_font']['letter_spacing']); ?>" data-min="-5" data-max="5" data-step="0.1"></div>
    659                                                             <input class="range-input-selector" type="hidden" value="<?php echo esc_attr($sfm_settings['tooltip_font']['letter_spacing']); ?>" name="sfm_settings[tooltip_font][letter_spacing]"/>
    660                                                         </div>   
    661                                                     </div>
    662                                                 </div>
    663                                             </li>
    664                                         </ul>
    665                                     </td>
    666                                 </tr>
    667                                 <tr>
    668                                     <td colspan="2" class="sfm-seperator"><hr></td>
    669                                 </tr>
    670                                 <tr class="sfm-top-offset-wrap">
    671                                     <th><label><?php esc_html_e('Floating Menu Top Offset', 'simple-floating-menu'); ?></label></th>
    672                                     <td>
    673                                         <?php
    674                                         echo '<div class="sfm-range-slider">';
    675                                         echo '<div class="range-input"  value="' . absint($sfm_settings['top_offset']) . '" data-min="0" data-max="200" data-step="1"></div>';
    676                                         echo '<input class="range-input-selector sfm-top-offset" type="hidden" value="' . absint($sfm_settings['top_offset']) . '" name="sfm_settings[top_offset]"/>';
    677                                         echo '</div>';
    678                                         ?>
    679                                     </td>
    680                                 </tr>
    681 
    682                                 <tr class="sfm-bottom-offset-wrap">
    683                                     <th><label><?php esc_html_e('Floating Menu Bottom Offset', 'simple-floating-menu'); ?></label></th>
    684                                     <td>
    685                                         <?php
    686                                         echo '<div class="sfm-range-slider">';
    687                                         echo '<div class="range-input"  value="' . absint($sfm_settings['bottom_offset']) . '" data-min="0" data-max="200" data-step="1"></div>';
    688                                         echo '<input class="range-input-selector sfm-bottom-offset" type="hidden" value="' . absint($sfm_settings['bottom_offset']) . '" name="sfm_settings[bottom_offset]"/>';
    689                                         echo '</div>';
    690                                         ?>
    691                                     </td>
    692                                 </tr>
    693 
    694                                 <tr class="sfm-left-offset-wrap">
    695                                     <th><label><?php esc_html_e('Floating Menu Left Offset', 'simple-floating-menu'); ?></label></th>
    696                                     <td>
    697                                         <?php
    698                                         echo '<div class="sfm-range-slider">';
    699                                         echo '<div class="range-input"  value="' . absint($sfm_settings['left_offset']) . '" data-min="0" data-max="200" data-step="1"></div>';
    700                                         echo '<input class="range-input-selector sfm-left-offset" type="hidden" value="' . absint($sfm_settings['left_offset']) . '" name="sfm_settings[left_offset]"/>';
    701                                         echo '</div>';
    702                                         ?>
    703                                     </td>
    704                                 </tr>
    705 
    706                                 <tr class="sfm-right-offset-wrap">
    707                                     <th><label><?php esc_html_e('Floating Menu Right Offset', 'simple-floating-menu'); ?></label></th>
    708                                     <td>
    709                                         <?php
    710                                         echo '<div class="sfm-range-slider">';
    711                                         echo '<div class="range-input"  value="' . esc_attr($sfm_settings['right_offset']) . '" data-min="0" data-max="200" data-step="1"></div>';
    712                                         echo '<input class="range-input-selector sfm-right-offset" type="hidden" value="' . esc_attr($sfm_settings['right_offset']) . '" name="sfm_settings[right_offset]"/>';
    713                                         echo '</div>';
    714                                         ?>
    715                                     </td>
    716                                 </tr>
    717                                 <tr>
    718                                     <td colspan="2" class="sfm-seperator"><hr></td>
    719                                 </tr>
    720                                 <tr>
    721                                     <th><label><?php esc_html_e('Spacing Between Buttons', 'simple-floating-menu'); ?></label></th>
    722                                     <td>
    723                                         <?php
    724                                         echo '<div class="sfm-range-slider">';
    725                                         echo '<div class="range-input"  value="' . absint($sfm_settings['button_spacing']) . '" data-min="0" data-max="50" data-step="1"></div>';
    726                                         echo '<input class="range-input-selector sfm-button-spacing" type="hidden" value="' . absint($sfm_settings['button_spacing']) . '" name="sfm_settings[button_spacing]"/>';
    727                                         echo '</div>';
    728                                         ?>
    729                                     </td>
    730                                 </tr>
    731                                 <tr>
    732                                     <th><label><?php esc_html_e('Z Index', 'simple-floating-menu'); ?></label></th>
    733                                     <td>
    734                                         <?php
    735                                         echo '<input class="sfm-z-index" type="text" value="' . absint($sfm_settings['zindex']) . '" name="sfm_settings[zindex]"/>';
    736                                         ?>
    737                                     </td>
    738                                 </tr>
     798                                                    <button class="button button-primary" id="sfm_import" type="submit" name="sfm_import"><i class='icofont-download'></i> <?php esc_html_e("Import", "simple-floating-menu") ?></button>
     799                                                    <input type="hidden" name="sfm_imex_action" value="import_settings" />
     800                                                    <?php wp_nonce_field("sfm_imex_import_nonce", "sfm_imex_import_nonce"); ?>
     801
     802                                                </form>
     803                                            </div>
     804                                        </td>
     805                                    </tr>
    739806                                </tbody>
    740807                            </table>
     
    797864                            <h2>Pre Sales Questions?</h2>
    798865                            <p>If you have any pre sales questions, then feel free to email us at support@hashthemes.com</p>
    799 
    800 
    801866                        </div>
    802 
    803                         <p class="submit">
    804                             <button type="submit" name="submit" class="button button-primary"><i class="mdi mdi-content-save"></i> <?php esc_html_e('Save Settings', 'simple-floating-menu'); ?></button>
    805                         </p>
    806                     </form>
     867                    </div>
    807868
    808869                    <div class="sfm-live-demo">
     
    909970        }
    910971
     972
     973
     974
     975
     976
     977
     978
     979
     980
     981
     982
     983
     984
     985
     986
     987
     988
     989
     990
     991
     992
     993
     994
     995
     996
     997
     998
     999
     1000
     1001
     1002
     1003
     1004
     1005
     1006
     1007
     1008
     1009
     1010
     1011
     1012
     1013
     1014
     1015
     1016
     1017
     1018
     1019
     1020
     1021
     1022
     1023
     1024
     1025
     1026
     1027
     1028
     1029
     1030
     1031
     1032
     1033
     1034
     1035
     1036
     1037
     1038
     1039
     1040
     1041
     1042
     1043
     1044
     1045
     1046
     1047
     1048
     1049
     1050
     1051
     1052
     1053
     1054
     1055
     1056
     1057
     1058
     1059
     1060
     1061
     1062
     1063
     1064
     1065
     1066
     1067
     1068
     1069
     1070
     1071
     1072
     1073
     1074
     1075
     1076
     1077
     1078
     1079
     1080
     1081
     1082
     1083
     1084
     1085
     1086
     1087
     1088
     1089
     1090
     1091
     1092
     1093
    9111094    }
    9121095
Note: See TracChangeset for help on using the changeset viewer.