CMS IMAGE MANAGER

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.min.js"></script>
<a data-uk-toggle="target:.pb-image-manager-modal">Pick image from link picker, single image or gallery component</a>


<!-- This is the modal gallery-->
<div class="pb-file-manager-modal uk-modal-container" uk-modal>
  <div class="uk-modal-dialog uk-box-shadow-xlarge">



    <div class="uk-modal-header">
      <div class="uk-flex-middle" data-uk-grid>
        <div class="uk-width-auto uk-h3">Image manager</div>
        <div class="uk-grid-divider uk-width-expand uk-flex-right uk-flex-middle" data-uk-grid>
          <div class="uk-width-auto ">
            <div class=" uk-inline">
              <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></span>
              <input class="uk-input pb-image-search" type="text" placeholder="Search...">
            </div>
          </div>
          <div class="">
            <a href="#" data-uk-icon="icon: info"></a>
          </div>
        </div>
      </div>
    </div>
    <!-- ./modal title -->

    <div class="uk-modal-body">
      <div class=" uk-grid-collapse" data-uk-grid>

        <div class="pb-file pb-file-upload uk-background-muted uk-cover-container uk-dark">
          <div class="uk-position-center">
            <div uk-form-custom>
              <input type="file" multiple>
              <span href="" data-uk-icon="icon: plus"></span>
            </div>
          </div>
          <div class="uk-position-bottom">
            <progress id="progressbar" class="uk-progress" value="0" max="100" hidden></progress>
          </div>
        </div>

        <div class="pb-file uk-cover-container uk-transition-toggle uk-light">
          <img src="https://placeimg.com/640/480/nature/grayscale"...

CSS

h4 {
  text-transform: uppercase;
  font-size: 0.875rem;
}

.pb-file {
  height: 120px;
  width: 120px;
  margin: 10px;
}

.uk-button-group>.uk-button,
.uk-button-group>div .uk-button {
  margin-right: 1px;
}

.uk-button-group>.uk-button:last-child,
.uk-button-group>div:last-child .uk-button {
  margin-left: 0;
  margin-right: 0;
}

.uk-button-group>.uk-button:nth-child(n+2),
.uk-button-group>div:nth-child(n+2) .uk-button {
  margin-left: 0;
}

.uk-progress {
    background-color: transparent;
    margin-bottom: 0;
    height: 1px;
    border-radius: 0;
}

JavaScript

$('.pb-edit-image').click(function() {
  alert('We will allow to edit image through https://creativesdk.adobe.com/docs/web/#/articles/imageeditorui/index.html')
});

$('#pb-confirm-delete-file-button').on('click', function(e) {
  UIkit.drop('.pb-confirm-delete-file').hide();
  e.stopPropagation();
});

$('.pb-drop-close').on('click', function(e) {
  UIkit.drop('.pb-setting-image').hide();
  e.stopPropagation();
});
$('.pb-drop-save').on('click', function(e) {
  UIkit.drop('.pb-setting-image').hide();
  e.stopPropagation();
});

$('.pb-setting-image input').on('click', function(e) {
  e.stopPropagation();
});

$('#pb-confirm-delete-file-button').on('click', function(e) {
  UIkit.drop('.pb-confirm-delete-file').hide();
  e.stopPropagation();
});

(function($) {

  var bar = $("#progressbar")[0];

  UIkit.upload('.pb-file-upload', {

    url: '',
    multiple: true,

    beforeSend: function() {
      console.log('beforeSend', arguments);
    },
    beforeAll: function() {
      console.log('beforeAll', arguments);
    },
    load: function() {
      console.log('load', arguments);
    },
    error: function() {
      console.log('error', arguments);
    },
    complete: function() {
      console.log('complete', arguments);
    },

    loadStart: function(e) {
      console.log('loadStart', arguments);

      bar.removeAttribute('hidden');
      bar.max = e.total;
      bar.value = e.loaded;
    },

    progress: function(e) {
      console.log('progress', arguments);

      bar.max = e.total;
      bar.value = e.loaded;

    },

    loadEnd: function(e) {
      console.log('loadEnd', arguments);

      bar.max = e.total;
      bar.value = e.loaded;
    },

    completeAll: function() {
      console.log('completeAll', arguments);

      setTimeout(function() {
        bar.setAttribute('hidden', 'hidden');
      }, 1000);

      alert('Upload Completed');
    }
  });

})(jQuery);