JSFiddle - React, Tailwind, and code Playground

by Milan Ghori

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col" style="padding: 0px;">
      <div class="bar">
        <div class="bar-head">
          <input class="form-control" style="height: 27px" type='number' id='max_limit' value='5' />
          <input id="dir_select" type="file" webkitdirectory>
        </div>
        <div class="bar-item">
          <input style="display: none;" type="checkbox" id="image_only" checked />
          <label class="bar-checkbox active" for="image_only">Show Images</label>
        </div>
        <div class="bar-item">
          <input style="display: none;" type="checkbox" id="gif_only" checked />
          <label class="bar-checkbox active" for="gif_only">Show GIFs</label>
        </div>
        <div class="bar-item">
          <input style="display: none;" type="checkbox" id="vid_only" checked />
          <label class="bar-checkbox active" for="vid_only">Show Videos</label>
        </div>
        <div class="bar-item">
          <input style="display: none;" type="checkbox" id="randomize" />
          <label class="bar-checkbox" for="randomize">Randomize</label>
        </div>
        <div class="bar-item">
          <input style="display: none;" type="checkbox" id="full_mode" />
          <label class="bar-checkbox" for="full_mode">Toggle Full Mode</label>
        </div>
        <div class="bar-item">
          <a class="bar-btn" onclick="toggleFullScreen();">Toggle <b>F</b>ullscreen</a>
        </div>
        <div class="bar-item">
          <a class='bar-btn load-more'><b>L</b>oad More</a>
        </div>
        <div class="bar-item">
          <a class='bar-btn' onclick='sortByDate();'>Sort by <b>D</b>ate</a>
        </div>
        <div class="bar-item">
          <a class='bar-btn' onclick='sortByName();'>Sort by <b>N</b>ame</a>
        </div>
        <div class="bar-item">
          <a class='bar-btn'...

CSS

body {
            margin: 0px;
            font-size: 13px;
        }
		.gallery_item {
			width: 245px;
			display: inline-block;
			margin-right: 10px;
			padding: 5px;
			margin-bottom: 10px;
		}
		.gallery_image {
			width: 235px;
			cursor: pointer;
		}
        #progress_bar {
            width: 100%;
            display: none;
        }
        #status_text {
            text-align: center;
        }
        .dialog_div {
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: rgba(255, 255, 255, 0.3);
            width: 100%;
            height: 100%;
            overflow: auto;
            text-align: center;
            z-index: 1000000000;
        }
        .dialog_div img {
            vertical-align: middle;
        }
        .vertical-center {
            display: inline-block;
            height: 100%;
            width: 0px;
            vertical-align: middle;
        }
        .control-container input {
            vertical-align: middle;
        }
        .bar {
            background-color: #f7f7f7;
            text-align: center;
        }
        .bar-head {
            display: inline-block;
        }
        .bar-head input {
            display: inline-block;
            width: 85px;
        }
        .bar-item {
            display: inline-block;
            border-right: solid 1px #ececec;
        }
        .bar-item label {
            margin: 0px;
        }
        .bar-checkbox {
            padding: 2px 10px;
            cursor: pointer;
            user-select: none;
        }
        .bar-checkbox.active {
            background-color: #e9ffea;
        }
        .bar-btn {
            border-radius: 3px;
            border: solid 1px #d6d6d6;
            font-size: 13px;
            color: #000;
            cursor: pointer;
            background-color: #fff;
            padding: 2px 4px;
            user-select: none;
        }
        .bar-btn:hover {
            background-color:...

JavaScript

var archive = [];
    var ori_archive = [];
    
    var max_limit = 100;
    
    var count = 0;
    var ori_count = 0;
    
    var pointer = 0;
    var prevPointer = 0;
    var morePointer = 0;
    
    var byName = 1;
    var byDate = 1;
    var bySize = 1;
    
    var openDialog = 0;
    
    var gifOnly = true;
    var vidOnly = true;
    var imageOnly = true;
    
    var full_mode = false;
    var randomize = false;
    
    var last_clicked_video = null;
    
    document.querySelector("#dir_select").onchange = function(e) {
    	changeStatus('Calculating file count...');
    	var total_files = e.target.files.length;
    	changeStatus('Calculating file count...'+total_files);
        if(total_files > 0) {
            reset();
            setMaxLimit();
            var file_count = 0;
            $('#progress_bar').show();
            [].slice.call(this.files).forEach(function(v) {
                //changeStatus('Loading files... ['+file_count+' of '+total_files+']');
console.log(v);
              var  img;
              var _URL = window.URL || window.webkitURL;
                      if ((element = v)) {
                          img = new Image();
                          img.onload = function () {
                              console.log("Width:" + this.width + "   Height: " + this.height);
                              //this will give you image width and height and you can easily validate here....
                          };
                          img.src = _URL.createObjectURL(element);
                      }

                
                var check_type = v['type'].split('/')[0];
                if(check_type == 'video' || check_type == 'image') {
                    archive[count] = [];
                    archive[count]['type'] = v.type;
                    archive[count]['size'] = v.size;
                    //archive[count]['path'] = v.webkitRelativePath;
                    archive[count]['name'] = v.name;
                   ...