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">Please click to test. Triggered from tinymce image button in toolbar or from edit button in image context form</a>


<!-- This is the modal gallery-->
<div class="pb-image-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-expand uk-h3">Image</div>
        <div class="uk-grid-divider uk-width-expand uk-flex-right uk-flex-middle" data-uk-grid>
          <div class="">
            <a href="#" data-uk-icon="icon: info"></a>
          </div>
        </div>
      </div>
    </div>
    <!-- ./modal title -->

    <div class="uk-modal-body">

      <!-- test -->

      <div>
        <div id="image-display-div">
          <div class="uk-margin"><label class="uk-form-label">Image</label>
            <div class="pb-image-picker uk-placeholder uk-padding-remove uk-text-center uk-margin-remove">
              <div class="uk-width-1-1 uk-text-center uk-padding"><span data-uk-icon="icon: album; ratio: 1.5" class="uk-icon"></span><br><span class="uk-h6 uk-text-uppercase">SĂ©lectionner Image</span></div>
            </div>
            <div class="uk-margin-small-top"><input type="text" id="pb-background-image-url" placeholder="http://" class="uk-input uk-width-1-1" value=""></div>
            <div class="uk-text-small uk-text-muted uk-text-right">Selectionnez une image ou entrer l'URL d'une image externe</div>
          </div>
        </div>
      </div>
      <div>
        <div class="uk-margin uk-grid" data-uk-grid="">
          <div class="uk-width-1-1...

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);