Carousel Slide Editor

UI for Carousel Slide Editor

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://scottcheng.github.io/cropit/styles/index.css">
<script src="https://scottcheng.github.io/cropit/scripts/vendor.js"></script>
<script src="https://scottcheng.github.io/cropit/scripts/index.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/tomorrow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>
<div class="container">
  <h2>Carousel Slide Editor</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"><span class="fa fa-plus"></span> Add</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add Carousel Slide</h4>
        </div>
        <form id="slideForm" action="https://jsfiddle.net/shawn_wood/v05nn748/">
          <div class="modal-body">
            <div class="row">
              <div class="form-group col-xs-12 required">
                <label class="control-label">Slide Image</label>
                <div id="image-editor"...

CSS

.fileDetails {
  margin-top: 10px;
  margin-bottom: 10px;
}
.form-group.required .control-label:after {
	content:"*";
	color:red;
}

.error{
	/*border:1px solid #99182c;*/
	margin-left:5px;
	color:#a94442;
	padding:1px 5px 1px 5px;
	font-size:small;
}
.cropit-preview {
  /* You can specify preview size in CSS */
  /*width: 1140px;
  height: 526px;*/
}

.cropit-overlay {
  /*background-color: #f8f8f8;*/
  background-size: cover;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 500px;
  height: 250px;
  position: absolute;
  z-index: 4005;
}

.cropit-overlay::before {
  color: #AAA;
  content: attr(data-bg-text);
  display: block;
  font-size: 20px;
  line-height: 1;
  position: absolute;
  bottom: 50%;
  opascity: 30;
  padding-left: 30%;
  padding-right: 30%;
  text-align: center;
}

.faqPreview {
  position: absolute;
  bottom: 5px;
}

.cropit-preview {
  background-color: #f8f8f8;
  background-size: cover;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 500px;
  height: 250px;
}

.cropit-preview-image-container {
  cursor: move;
}

.image-size-label {
  margin-top: 10px;
}

input {
  display: block;
}

button[type="submit"] {
  margin-top: 10px;
}

#result {
  margin-top: 10px;
  width: 900px;
}

#result-data {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
}


/* Translucent background image */

.cropit-preview-background {
  opacity: .2;
}


/*
 * If the slider or anything else is covered by the background image,
 * use relative or absolute position on it
 */

input.cropit-image-zoom-input {
  position: relative;
}


/* Limit the background image by adding overflow: hidden */

#image-cropper {
  overflow: hidden;
}


/* Show load indicator when image is being loaded */

.cropit-preview.cropit-image-loading .spinner {
  opacity: 1;
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
...

JavaScript

//stuff

$('#myModal').on('hidden.bs.modal', function(e) {
  $('#fileLabel').empty();
});
$(function() {
  $('#image-editor').cropit();
  $('.rotate-cw').click(function() {
    $('#image-editor').cropit('rotateCW');
  });
  $('.rotate-ccw').click(function() {
    $('#image-editor').cropit('rotateCCW');
  });
  $('form').submit(function() {
    // Move cropped image data to hidden input
    var imageData = $('#image-editor').cropit('export');
    $('.hidden-image-data').val(imageData);
    // Print HTTP request params
    var formValue = $(this).serialize();
    $('#result-data').text(formValue);
    // Prevent the form from actually submitting
    return false;
  });
});

$(document).on('change', ':file', function() {
  var input = $(this),
    numFiles = input.get(0).files ? input.get(0).files.length : 1,
    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselect', [numFiles, label]);
  $('#fileLabel').html(label);
});

(function($) {
  var spinnerVal = parseInt($('#slideOrder').val(), 10);
  $('#slideNumUp').on('click', function() {
    if (spinnerVal <= 20) {
      $('#slideOrder').val(parseInt($('#slideOrder').val(), 10) + 1);
      spinnerVal = parseInt($('#slideOrder').val(), 10) + 1;
    }
  });
  $('#slideNumDown').on('click', function() {
    if (spinnerVal > 0) {
      $('#slideOrder').val(parseInt($('#slideOrder').val(), 10) - 1);
      spinnerVal = parseInt($('#slideOrder').val(), 10) - 1;
    }
  });
  var slideTextValue = $('#slideTitle').val();
  $('#slideTitle').on('keypress change', function() {
    slideTextValue = $('#slideTitle').val();
    $('#slideTitlePreview').text(slideTextValue);
  });
  var currentSlideTextClass = $('#slideTitleStyle').val();
  $('#slideTitleStyle').on('change', function() {
    var newSlideTextClass = $('#slideTitleStyle').val();
    $('#slideTitlePreview').removeClass(currentSlideTextClass).addClass(newSlideTextClass);
    currentSlideTextClass = $('#slideTitleStyle').val();
  });
 ...