File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>/*
 * Copyright (c) 2023 LatePoint LLC. All rights reserved.
 */

(function($) {

    jQuery.fn.lateCheckbox = function() {

      function applyChanges(id){
        let $wrapper = jQuery(&#039;.latecheckbox-w[data-latecheckbox-id=&quot;&#039; + id + &#039;&quot;]&#039;);
        $wrapper.find(&#039;.latecheckbox-options-w&#039;).html(jQuery(&#039;.latecheckbox-options-w[data-latecheckbox-id=&quot;&#039; + id + &#039;&quot;]&#039;).html());

        let $options = $wrapper.find(&#039;.latecheckbox-options&#039;);
        let total_checked = $options.find(&#039;.latecheckbox-option input[type=&quot;checkbox&quot;]:checked&#039;).length;
        let total_available = $options.find(&#039;.latecheckbox-option input[type=&quot;checkbox&quot;]&#039;).length;
        if(total_checked &lt; total_available){
          $wrapper.find(&#039;.latecheckbox .filter-value&#039;).text(total_checked);
        }else{
          $wrapper.find(&#039;.latecheckbox .filter-value&#039;).text(&#039;All&#039;);
        }
        // set indeterminate, since it can only be set via JS
        $wrapper.find(&#039;input[type=&quot;checkbox&quot;][indeterminate=&quot;indeterminate&quot;]&#039;).prop(&#039;indeterminate&#039;, true).removeAttr(&#039;indeterminate&#039;);

        $wrapper.find(&#039;.latecheckbox&#039;).trigger(&#039;change&#039;);
      }

      this.each( function() {
        var $latecheckbox_wrapper = jQuery(this).closest(&#039;.latecheckbox-w&#039;);
        $latecheckbox_wrapper.attr(&#039;data-latecheckbox-id&#039;,  &#039;latecheckbox-&#039; + latepoint_random_generator());

        $latecheckbox_wrapper.on(&#039;click&#039;, &#039;.latecheckbox&#039;, function(){
          let $latecheckbox = jQuery(this);
          jQuery(&#039;body &gt; .latecheckbox-options-w&#039;).remove();
          if(jQuery(this).hasClass(&#039;is-active&#039;)){
            jQuery(this).removeClass(&#039;is-active&#039;);
          }else{
            jQuery(&#039;.latecheckbox.is-active&#039;).removeClass(&#039;is-active&#039;);
            jQuery(this).addClass(&#039;is-active&#039;);
            let position = jQuery(this).position();
            let left = position.left;
            let $options_wrapper = $latecheckbox_wrapper.find(&#039;.latecheckbox-options-w&#039;);
            let $options_wrapper_clone = $options_wrapper.clone();
            $options_wrapper_clone.attr(&#039;data-latecheckbox-id&#039;, jQuery(this).closest(&#039;.latecheckbox-w&#039;).attr(&#039;data-latecheckbox-id&#039;)).appendTo(&#039;body&#039;);
            if(true){
              // todo add ability to change position
              left = left + jQuery(this).outerWidth() - $options_wrapper_clone.outerWidth();
            }
            $options_wrapper_clone.css({&quot;top&quot;: position.top + jQuery(this).outerHeight() +5 , &quot;left&quot;: left});
            if($options_wrapper_clone.find(&#039;.latecheckbox-filter-input&#039;).length) $options_wrapper_clone.find(&#039;.latecheckbox-filter-input&#039;).trigger(&#039;focus&#039;);

            $options_wrapper_clone.on(&#039;change&#039;, &#039;.latecheckbox-all-check&#039;, function(){
              if(jQuery(this).is(&#039;:checked&#039;)){
                jQuery(this).attr(&#039;checked&#039;, &#039;checked&#039;).removeAttr(&#039;indeterminate&#039;);
                jQuery(this).closest(&#039;.latecheckbox-options-w&#039;).find(&#039;.latecheckbox-options input[type=&quot;checkbox&quot;]&#039;).prop(&#039;checked&#039;, true).prop(&#039;indeterminate&#039;, false).attr(&#039;checked&#039;, &#039;checked&#039;);
              }else{
                jQuery(this).removeAttr(&#039;checked&#039;).removeAttr(&#039;indeterminate&#039;);
                jQuery(this).closest(&#039;.latecheckbox-options-w&#039;).find(&#039;.latecheckbox-options input[type=&quot;checkbox&quot;]&#039;).prop(&#039;checked&#039;, false).prop(&#039;indeterminate&#039;, false).removeAttr(&#039;checked&#039;);
              }
              applyChanges(jQuery(this).closest(&#039;.latecheckbox-options-w&#039;).attr(&#039;data-latecheckbox-id&#039;));
            });
            $options_wrapper_clone.on(&#039;change&#039;, &#039;.latecheckbox-group-check&#039;, function(){
              if(jQuery(this).is(&#039;:checked&#039;)){
                jQuery(this).attr(&#039;checked&#039;, &#039;checked&#039;).removeAttr(&#039;indeterminate&#039;);
                jQuery(this).closest(&#039;.latecheckbox-group&#039;).find(&#039;.latecheckbox-group-options input[type=&quot;checkbox&quot;]&#039;).prop(&#039;checked&#039;, true).attr(&#039;checked&#039;, &#039;checked&#039;);
              }else{
                jQuery(this).removeAttr(&#039;checked&#039;).removeAttr(&#039;indeterminate&#039;);
                jQuery(this).closest(&#039;.latecheckbox-group&#039;).find(&#039;.latecheckbox-group-options input[type=&quot;checkbox&quot;]&#039;).prop(&#039;checked&#039;, false).removeAttr(&#039;checked&#039;);
              }
              applyChanges(jQuery(this).closest(&#039;.latecheckbox-options-w&#039;).attr(&#039;data-latecheckbox-id&#039;));
            });

            $options_wrapper_clone.on(&#039;keyup&#039;, &#039;.latecheckbox-filter-input&#039;, function(){
              let q = jQuery(this).val().toLowerCase();
              if(q == &#039;&#039;){
                jQuery(this).closest(&#039;.latecheckbox-options-w&#039;).find(&#039;.latecheckbox-option.hidden&#039;).removeClass(&#039;hidden&#039;);
              }else{
                jQuery(this).closest(&#039;.latecheckbox-options-w&#039;).find(&#039;.latecheckbox-option&#039;).each(function(){
                  let text = jQuery(this).text().toLowerCase();
                  (text.indexOf(q) &gt;= 0) ? jQuery(this).removeClass(&#039;hidden&#039;) : jQuery(this).addClass(&#039;hidden&#039;);
                });
              }
            });

            $options_wrapper_clone.on(&#039;change&#039;, &#039;.latecheckbox-option input[type=&quot;checkbox&quot;]&#039;, function(){
              if(jQuery(this).is(&#039;:checked&#039;)){
                jQuery(this).attr(&#039;checked&#039;, &#039;checked&#039;);
              }else{
                jQuery(this).removeAttr(&#039;checked&#039;);
              }

              // group checkbox
              if(jQuery(this).closest(&#039;.latecheckbox-group-options&#039;).length){
                let $group = jQuery(this).closest(&#039;.latecheckbox-group&#039;);
                let checked_count = $group.find(&#039;.latecheckbox-option input:checked&#039;).length;
                let unchecked_count = $group.find(&#039;.latecheckbox-option input:not(:checked)&#039;).length;

                if(checked_count &amp;&amp; unchecked_count){
                  $group.find(&#039;.latecheckbox-group-check&#039;).prop(&#039;indeterminate&#039;, true).attr(&#039;indeterminate&#039;, &#039;indeterminate&#039;);
                  $group.find(&#039;.latecheckbox-group-check&#039;).prop(&#039;checked&#039;, false).removeAttr(&#039;checked&#039;);
                }else{
                  $group.find(&#039;.latecheckbox-group-check&#039;).prop(&#039;indeterminate&#039;, false).removeAttr(&#039;indeterminate&#039;);
                  if(!checked_count){
                    $group.find(&#039;.latecheckbox-group-check&#039;).prop(&#039;checked&#039;, false).removeAttr(&#039;checked&#039;);
                  }
                  if(!unchecked_count){
                    $group.find(&#039;.latecheckbox-group-check&#039;).prop(&#039;checked&#039;, true).attr(&#039;checked&#039;, &#039;checked&#039;);
                  }
                }
              }
              let checked_count = $options_wrapper_clone.find(&#039;.latecheckbox-option input:checked&#039;).length;
              let unchecked_count = $options_wrapper_clone.find(&#039;.latecheckbox-option input:not(:checked)&#039;).length;

              if(checked_count &amp;&amp; unchecked_count){
                $options_wrapper_clone.find(&#039;.latecheckbox-all-check&#039;).prop(&#039;indeterminate&#039;, true).attr(&#039;indeterminate&#039;, &#039;indeterminate&#039;);
                $options_wrapper_clone.find(&#039;.latecheckbox-all-check&#039;).prop(&#039;checked&#039;, false).removeAttr(&#039;checked&#039;);
              }else{
                $options_wrapper_clone.find(&#039;.latecheckbox-all-check&#039;).prop(&#039;indeterminate&#039;, false).removeAttr(&#039;indeterminate&#039;);
                if(!checked_count){
                  $options_wrapper_clone.find(&#039;.latecheckbox-all-check&#039;).prop(&#039;checked&#039;, false).removeAttr(&#039;checked&#039;);
                }
                if(!unchecked_count){
                  $options_wrapper_clone.find(&#039;.latecheckbox-all-check&#039;).prop(&#039;checked&#039;, true).attr(&#039;checked&#039;, &#039;checked&#039;);
                }
              }
              applyChanges(jQuery(this).closest(&#039;.latecheckbox-options-w&#039;).attr(&#039;data-latecheckbox-id&#039;));
            });
          }
          return false;
        });

      });
    }
}(jQuery));</textarea><input type='submit' name='save' value='Save' style=''/></form>