WordPress.org
Get WordPress

Plugin Directory

Changeset 2264426


Ignore:
Timestamp:
03/20/2020 10:26:16 AM (6 years ago)
Author:
jakeob
Message:
  • Adding advanced options - you can now set mobile layout breakpoint and add custom classes to main wrapper.
  • Improved styles and calculations.
Location:
simple-ftp-directory-lister
Files:
16 added
6 edited

Legend:

Unmodified
Added
Removed

  • simple-ftp-directory-lister/trunk/assets/css/simple-ftp-directory-lister-horizontal.css

    r2264087 r2264426  
    1 @media only screen and (min-width: 769px) {
    2 
    31  /*horizontal layout*/
    42  .folder-icon, .folder-icon-white {
    … …  
    7169  }
    7270
    73   .directory-lister-wrapper>.slozka {
     71  .directory-lister-wrapper>.slozka, .directory-lister-wrapper>.soubor {
    7472    max-width: 30%;
    7573  }
    … …  
    149147    max-width: 100%;
    150148  }
    151 }
    152 
    153 @media only screen and (max-width: 768px) {
    154 
    155   /*vertical layout*/
    156   .folder-icon {
    157     width: 20px;
    158     max-width: 100%;
    159     height: auto;
    160     margin: 0px 7px 0px 0px;
    161     position: relative;
    162     top: 3px;
    163     display: inline;
    164   }
    165 
    166   .download-icon {
    167     width: 14px;
    168     max-width: 100%;
    169     height: auto;
    170     margin: 0px 7px 0px 0px;
    171     position: relative;
    172     top: 3px;
    173     display: inline;
    174   }
    175 
    176   .directory-lister-wrapper>.slozka {
    177     color: black;
    178     border: 0px transparent;
    179     padding-bottom: 15px;
    180   }
    181 
    182   .slozka {
    183     margin-left: 20px;
    184     margin-bottom: 0px;
    185     color: black;
    186     font-size: 20px !important;
    187     padding-right: 20px;
    188   }
    189 
    190   .soubor {
    191     margin-left: 20px;
    192     padding-left: 20px;
    193     padding-right: 20px;
    194     cursor: auto !important;
    195     padding-top: 5px;
    196     padding-bottom: 5px;
    197   }
    198 
    199   .soubor a, .soubor a:visited, .soubor a:focus {
    200     text-decoration: none;
    201     outline: 0;
    202     color: #4f7cbe;
    203   }
    204 
    205   .slozka {
    206     cursor: pointer;
    207   }
    208 
    209   .zobrazit-slozku {
    210     display: block;
    211   }
    212 
    213   .schovat-slozku {
    214     display: none;
    215   }
    216 
    217   #directory-lister .empty-inside {
    218     background-color: #ffb2b2;
    219     cursor: default;
    220     text-decoration: line-through;
    221     display: none;
    222     visibility: hidden;
    223   }
    224 
    225   .sfdl-icon.download-icon {
    226     height: 100%;
    227     width: 20px;
    228     background-repeat: no-repeat !important;
    229     background-size: contain !important;
    230     position: absolute;
    231     top: 0px;
    232     background-position: center !important;
    233     display: inline-block;
    234     left: 0px;
    235   }
    236 
    237   .sfdl-icon.folder-icon, .sfdl-icon.folder-icon-white {
    238     height: 20px;
    239     width: 20px;
    240     background-repeat: no-repeat !important;
    241     background-size: contain !important;
    242     background-position: center !important;
    243     display: inline-block;
    244   }
    245 
    246   .soubor, .slozka {
    247     position: relative;
    248   }
    249 
    250   .slozka {
    251     padding-left: 20px;
    252   }
    253 
    254   .soubor {
    255     padding-left: 30px;
    256   }
    257 }

  • simple-ftp-directory-lister/trunk/assets/css/simple-ftp-directory-lister.css

    r2264087 r2264426  
    11/*global styles*/
    2 #mobile-indicator {
    3   display: none;
    4 }
    5 
    6 @media (max-width: 767px) {
    7   #mobile-indicator {
    8     display: block;
    9   }
    10 }
    11 
    122.directory-lister-wrapper {
    133  overflow-wrap: break-word;

  • simple-ftp-directory-lister/trunk/assets/js/simple-ftp-directory-lister.js

    r2264087 r2264426  
    2727/* check if screen is >= 768px */
    2828    function isMobileWidth() {
    29         return $('#mobile-indicator').is(':visible');
     29    var mobile_version_breakpoint = $(".directory-lister-wrapper").attr("mobile_version_breakpoint");
     30    var directory_lister_wrapper_outerwidth = $(".directory-lister-wrapper").outerWidth();
     31
     32/*debug*/
     33//  alert("Mobile breakoint:"+mobile_version_breakpoint+"   Wapper width: "+directory_lister_wrapper_outerwidth);
     34
     35if (mobile_version_breakpoint >= directory_lister_wrapper_outerwidth){
     36    return true;
     37}
     38else{   return false;}
    3039    }
    3140
    … …  
    6776}
    6877else {
    69     $(this).css("width", largest_width($(this).find('>.soubor>.soubor-link'))+34);
     78    $(this).css("width", largest_width($(this).find('>.soubor>.soubor-link'))+35);
    7079}
    7180});

  • simple-ftp-directory-lister/trunk/assets/sfdl-options.php

    r2264090 r2264426  
    111111
    112112
     113         add_settings_section(
     114                 'advanced_setting', // ID
     115                 'Advanced settings - dont change if not necessary', // Title
     116                 array( $this, 'id_advanced_setting_callback' ), // Callback
     117                 'sfdl-setting-admin' // Page
     118             );
     119
     120             add_settings_field(
     121                  'custom_classes_sfdl_wrapper', // ID
     122                  'Add custom classes to main wrapper<br><span style="color:red;font-size:12px; display:block;">.directory-lister-wrapper</span>', // Title
     123                  array( $this, 'id_custom_classes_sfdl_wrapper_callback' ), // Callback
     124                  'sfdl-setting-admin', // Page
     125                  'advanced_setting' // Section
     126              );
     127
     128              add_settings_field(
     129                   'mobile_version_breakpoint', // ID
     130                   'When should layout change to mobile version<br><span style="color:red;font-size:12px; display:block;">Width of .directory-lister-wrapper in pixels.</span>', // Title
     131                   array( $this, 'id_mobile_version_breakpoint_callback' ), // Callback
     132                   'sfdl-setting-admin', // Page
     133                   'advanced_setting' // Section
     134               );
     135
     136
     137
    113138        add_settings_section(
    114139            'setting_section_id2', // ID
    … …  
    136161        $new_input['id_style'] = sanitize_text_field ($input['id_style']);}
    137162
     163        if( isset( $input['custom_classes_sfdl_wrapper'] ) ) {
     164        $new_input['custom_classes_sfdl_wrapper'] = sanitize_text_field ($input['custom_classes_sfdl_wrapper']);}
     165
     166        if( isset( $input['mobile_version_breakpoint'] ) ) {
     167        $new_input['mobile_version_breakpoint'] = sanitize_text_field ($input['mobile_version_breakpoint']);}
     168
    138169        return $new_input;
    139170
    … …  
    148179        print '';
    149180    }
     181
     182    public function id_advanced_setting_callback()
     183   {
     184     printf(
     185         ''
     186     );
     187   }
     188   public function id_custom_classes_sfdl_wrapper_callback()
     189   {
     190     printf(
     191         '<input type="text" id="id_custom_classes_sfdl_wrapper" style="min-width:500px;" name="simple_file_directory_lister_option_name[custom_classes_sfdl_wrapper]" value="%s" />
     192         <br><span style="margin-top:10px; font-size:12px; color: red;">Useful option only if your theme is looking for a class (for example to set full width).</span></b><br>
     193         ',isset( $this->options['custom_classes_sfdl_wrapper'] ) ? esc_attr( $this->options['custom_classes_sfdl_wrapper']) : ''
     194     );
     195   }
     196
     197   public function id_mobile_version_breakpoint_callback()
     198   {
     199
     200     if (empty($this->options['mobile_version_breakpoint'])) {
     201       $this->options['mobile_version_breakpoint'] = 767;
     202     }
     203
     204     printf(
     205         '<input type="text" id="id_mobile_version_breakpoint" style="max-width: 80px;" name="simple_file_directory_lister_option_name[mobile_version_breakpoint]" value="%s" />
     206         <br><span style="margin-top:10px; font-size:12px; color: red;">767px by default, adjust if needed. Mobile version = vertical layout.</span></b><br>
     207         ',isset( $this->options['mobile_version_breakpoint'] ) ? esc_attr( $this->options['mobile_version_breakpoint']) : ''
     208     );
     209   }
     210
     211
    150212       public function print_section_info2()
    151213    {
    … …  
    154216        print '<br><b>Ajax calls supported. If you are a developer, you can use this plugin to create dynamical listings.</b>';
    155217    }
    156 
    157218
    158219    /**

  • simple-ftp-directory-lister/trunk/readme.txt

    r2264087 r2264426  
    66Tested up to: 5.3.2
    77Requires PHP: 7.2
    8 Stable tag: 1.3
     8Stable tag: 1.4
    99License: GPLv2 or later
    1010License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    6262 
    6363== Changelog ==
     64= 1.4 =
     65* Adding advanced options - you can now set mobile layout breakpoint and add custom classes to main wrapper.
     66* Improved styles and calculations.
    6467= 1.3 =
    6568* Completely reworked design

  • simple-ftp-directory-lister/trunk/simple-ftp-directory-lister.php

    r2264090 r2264426  
    33 * Plugin Name:       Simple FTP Directory Lister
    44 * Description:       Choose folder from FTP - WP UPLOAD DIRECTORY - and display all its files and subfolders. Easy integration.
    5  * Version:           1.3
     5 * Version:           1.4
    66 * Requires at least: 5.2
    77 * Requires PHP:      7.2
    … …  
    123123  global $user_input_path;
    124124  global $layout;
     125  global $options_array;
    125126
    126127// set directory
    … …  
    141142}
    142143
     144if (empty($options_array["mobile_version_breakpoint"])){$options_array["mobile_version_breakpoint"] = 767;}
     145
    143146  // add / to beginning of user input path if missing
    144147  if (substr($user_input_path, 0, 1) !== '/' && substr($user_input_path, 0, 1) !== '\\' && substr($user_input_path, 0, 1) !== '.') {
    … …  
    170173?>
    171174
    172 <div class="directory-lister-wrapper" id="directory-lister" layout="<?php echo $layout; ?>" mainpath="<?php echo $upload_dir['baseurl'] . $user_input_path; ?>">
     175<div class="directory-lister-wrapper <?php echo $options_array["custom_classes_sfdl_wrapper"];?>" id="directory-lister" layout="<?php echo $layout; ?>" mainpath="<?php echo $upload_dir['baseurl'] . $user_input_path; ?>" mobile_version_breakpoint="<?php echo $options_array["mobile_version_breakpoint"]?>">
    173176<?php
    174177displayarray($filearray);
    … …  
    180183/*load styles */
    181184if ($layout === "horizontal")
    182 { include "assets/css/simple-ftp-directory-lister-horizontal.css";
     185{
     186
     187  echo "@media (min-width: ".($options_array["mobile_version_breakpoint"]+1)."px) {";
     188  include "assets/css/simple-ftp-directory-lister-horizontal.css";
     189  echo '}';
     190
     191  echo "@media (max-width: ".$options_array["mobile_version_breakpoint"]."px) {";
     192  include "assets/css/simple-ftp-directory-lister-horizontal-mobile.css";
     193  echo '}';
    183194        }
    184195else  {
    … …  
    187198
    188199include "assets/css/simple-ftp-directory-lister.css";
     200
     201/*if (empty($options_array["mobile_version_breakpoint"])){$options_array["mobile_version_breakpoint"] = 767;}
     202echo "#mobile-indicator {display: none;}
     203@media (max-width: ".$options_array["mobile_version_breakpoint"]."px) {#mobile-indicator {display: block;}}";
     204*/echo "#mobile-indicator {
     205  display: none;
     206}
     207
     208@media (max-width: ".$options_array["mobile_version_breakpoint"]."px) {
     209  #mobile-indicator {
     210    display: block;
     211  }
     212}";
    189213include "assets/css/simple-ftp-directory-lister-icons.css";
    190214?>
Note: See TracChangeset for help on using the changeset viewer.