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-transfer-owner-modal">Transfer owner</a>


<div class="pb-transfer-owner-modal uk-modal-container" uk-modal>
  <div class="uk-modal-dialog uk-width-2xlarge">


    <!-- modal header -->
    <div class="uk-modal-header" id="pb-transfer-owner-modal-header">
      <div class="uk-flex-middle uk-grid-collapse" data-uk-grid>
        <div class="uk-width-1-1 uk-width-auto@m uk-h4">Ownership transfer</div>
        <div class="uk-grid-divider uk-width-1-1 uk-width-expand@m uk-flex-left uk-flex-right@m uk-flex-middle" data-uk-grid>
          <div class="">
            <a href="#" data-uk-icon="icon: info"></a>
          </div>
        </div>
      </div>
    </div>
    <!-- ./modal header -->

    <div class="uk-modal-body" id="pb-transfer-owner-modal-body">

      <!--div class="uk-switcher" id="pb-transfer-owner-modal-switcher"-->
      <div>
        <p>You may transfer ownership of this website to another account. If the user exists in our database, he will receive an email to accept or decline this role. If accepted, the site will automatically appear in his user dashboard. If the user does not exist, an email will be sent to the address entered to allow the creation of an account in order to obtain ownership of the site. In both cases, the current subscription will be terminated and the new owner will have to take out a new subscription. Your role on this site will be switched to administrator. You will always be able to edit the website until new owner remove you from contributors list.</p>
        <div class="uk-margin">
          <label class="uk-form-label">Email</label>
          <input type="text" class="uk-input">
         ...

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