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-add-contributor-modal">Add contributor</a>


<div class="pb-add-contributor-modal uk-modal-container" uk-modal>
  <div class="uk-modal-dialog uk-width-2xlarge">


    <!-- modal header -->
    <div class="uk-modal-header" id="pb-add-contributor-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">Add contributor</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-add-contributor-modal-body">

      <!--div class="uk-switcher" id="pb-add-contributor-modal-switcher"-->
      <div>
        <p>As the site owner, you can add one or more contributors to your site. The contributor will be able to edit the site: add, delete and modify pages, categories and blog posts, modify styles, add languages, create redirections… He will not be able to delete the site or manage subscriptions. 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 e-mail will be sent to the address entered to allow the creation of an account to edit the site. At any time you can delete a contributor.</p>
        <div class="uk-margin">
          <label class="uk-form-label">Email</label>
          <input type="text" class="uk-input">
          <div class="uk-text-small...

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