pages_core 3.4.3 → 3.5.1

data/app/assets/javascripts/pages/admin/features/content_tabs.es6.jsx

@@ -0,0 +1,63 @@
+var ContentTabs = {
+  tabs: [],
+  ids: [],
+
+  show: function(id) {
+    let tabs = ContentTabs.tabs;
+    let tab = tabs[id];
+    if (tab) {
+      $.each(ContentTabs.ids, function(i) {
+        if (tabs[this]) {
+          $(tabs[this]).hide();
+        }
+        $("#content-tab-link-" + this).removeClass("current");
+      });
+      $(tab).show();
+      $("#content-tab-link-" + id).addClass("current");
+    }
+  },
+
+  showFromURL: function(url) {
+    let tab_expression = /#(.*)$/;
+    if (url.toString().match(tab_expression)) {
+      let id = url.toString().match(tab_expression)[1];
+      if (ContentTabs.tabs[id]) {
+        ContentTabs.show(id);
+      }
+    }
+  },
+
+  enable: function(ids) {
+    let tabs = ContentTabs.tabs;
+    ContentTabs.ids = ids;
+    $.each(ids, function(i) {
+      let id = this;
+      return $("#content-tab-" + this).each(function(i) {
+        this.id = id;
+        return tabs[id] = this;
+      });
+    });
+    ContentTabs.show(ids[0]);
+    ContentTabs.showFromURL(document.location);
+  },
+
+  init: function() {
+    if ($("#content-tabs").length > 0) {
+      let tabNames = $("#content-tabs li").map(function() {
+        return $(this).data("tab-name");
+      }).get();
+      ContentTabs.enable(tabNames);
+      $("#content-tabs a").each(function() {
+        $(this).click(function() {
+          ContentTabs.showFromURL(this.href);
+          return false;
+        });
+      });
+    }
+    window.showContentTab = ContentTabs.show;
+  }
+};
+
+$(function() {
+  ContentTabs.init();
+});

data/app/assets/javascripts/pages/admin/features/edit_page.es6.jsx

@@ -0,0 +1,141 @@
+class EditPage {
+  constructor() {
+    this.toggleAdvancedOptions();
+    this.replicateFormElements();
+    this.checkPublishedStatus();
+    this.checkPublishedDate();
+    this.uploadModals();
+    this.fileList();
+    this.previewButton();
+  }
+
+  checkPublishedStatus() {
+    let checkStatus = function() {
+      var pageStatus = $("#page-form-sidebar #page_status").val();
+      if (pageStatus === "2") {
+        return $("#page-form-sidebar .published-date").fadeIn();
+      } else {
+        return $("#page-form-sidebar .published-date").hide();
+      }
+    };
+    $("#page-form-sidebar #page_status").change(checkStatus);
+    checkStatus();
+  }
+
+  checkPublishedDate() {
+    $(".autopublish-notice").hide();
+    let publishedAt = function(i) {
+      return $(`#page-form-sidebar select[name="page[published_at(${i}i)]"]`)
+               .val();
+    }
+    let checkDate = function() {
+      var year = publishedAt(1);
+      var month = publishedAt(2);
+      var day = publishedAt(3);
+      var hour = publishedAt(4);
+      var minute = publishedAt(5);
+      var publishDate = new Date(year, (month - 1), day, hour, minute);
+      var now = new Date();
+      if (publishDate > now) {
+        return $(".autopublish-notice").fadeIn();
+      } else {
+        return $(".autopublish-notice").fadeOut();
+      }
+    };
+    $(".published-date").find("select").change(checkDate);
+    checkDate();
+  }
+
+  fileList() {
+    // Reordering files
+    $(".file-list").each(function() {
+      var list = this;
+      return $(list).sortable({
+        axis: "y",
+        cursor: "move",
+        distance: 10,
+        handle: ".drag-handle",
+        placeholder: "placeholder",
+
+        update() {
+          return $.post( $(list).data('url'), { ids: ((() => {
+            var result = [];
+            var iterable = $(list).find('li').get();
+            for (var i = 0, item; i < iterable.length; i++) {
+              item = iterable[i];
+              result.push($(item).data('file-id'));
+            }
+            return result;
+          })()) }, function() {
+            return $(list).effect("highlight", {}, 500);
+          }
+          );
+        }
+      });
+    });
+  }
+
+  previewButton() {
+    $("#previewButton").click(function() {
+      var button = this;
+      var form = $(button).closest("form").get(0);
+      var previewUrl = $(this).data('url');
+
+      // Rewrite the form and submit
+      form.oldAction = form.action;
+      form.target = "_blank";
+      form.action = previewUrl;
+      $(form).submit();
+
+      // Undo rewrite
+      form.action = form.oldAction;
+      form.target = "";
+    });
+  }
+
+  replicateFormElements() {
+    let replicateFormElement = function() {
+      var newValue = this;
+      $("#page-form").find("[name=\"" + newValue.name + "\"]")
+                     .each(function() {
+                       if (newValue.type === "checkbox") {
+                         $(this).prop("checked", $(newValue).prop("checked"));
+                       } else {
+                         $(this).val($(newValue).val());
+                       }
+                     });
+    };
+
+    $("#page-form-sidebar")
+      .find("input,textarea,select")
+      .change(replicateFormElement);
+  }
+
+  toggleAdvancedOptions() {
+    $(".advanced-options").hide();
+    $(".advanced-toggle").click(function() {
+      return $(".advanced-options").slideToggle();
+    });
+  }
+
+  uploadModals() {
+    $("#new-image").hide();
+    $("#new-file").hide();
+    $(".upload-images-button").click(function() {
+      return Modal.show(
+        "<div class=\"uploadImages\">" + $("#new-image").html() + "</div>"
+      );
+    });
+    $(".upload-file-button").click(function() {
+      return Modal.show(
+        "<div class=\"uploadImages\">" + $("#new-file").html() + "</div>"
+      );
+    });
+  }
+}
+
+$(function () {
+  $('.edit-page').each(function() {
+    new EditPage(this)}
+  );
+});

data/app/assets/javascripts/pages/admin/features/editable_image.es6.jsx

@@ -0,0 +1,145 @@
+var EditableImage = function(link, options) {
+  let settings = $.extend({
+    resourceURL: link.href,
+    width: 800
+  }, options);
+
+  this.editableImage = {
+    settings: settings,
+    link: link,
+    linkedImage: $(link).children("img")[0],
+    resourceURL: settings.resourceURL,
+    editorDialog: false,
+    imageData: false,
+    previewURL: false,
+    cropStartX: false,
+    cropStartY: false,
+    cropWidth: false,
+    cropHeight: false,
+
+    getScale: function() {
+      return this.settings.width / this.imageData.real_width;
+    },
+
+    openEditor: function() {
+      $.dimScreen(200, 0.90);
+      $("body").append(
+        "<div id=\"modalLoadingNotice\">" +
+        "<img src=\"<%= image_path('pages/admin/loading-modal.gif') %>\" /> " +
+        "Loading image editor&hellip;</div>"
+      );
+      $("#modalLoadingNotice").centerOnScreen().hide().fadeIn(200);
+      $("#editableImageEditor").remove();
+      $("body").append(
+        "<div id=\"editableImageEditor\" class=\"modal-window\"></div>"
+      );
+
+      let binding = this;
+      if (!this.imageData) {
+        $.getJSON(this.resourceURL + ".js", function(json) {
+          binding.imageData = json;
+          binding.populateEditor();
+        });
+      } else {
+        this.populateEditor();
+      }
+    },
+
+    populateEditor: function() {
+      let binding = this;
+
+      let onCrop = function(coords) {
+        binding.cropStartX = coords.x;
+        binding.cropStartY = coords.y;
+        binding.cropWidth = coords.w;
+        return binding.cropHeight = coords.h;
+      };
+
+      $("#editableImageEditor").empty().append(
+        "<img id=\"editableImageEditorImage\" />"
+      ).append(
+        "<div id=\"editableImageEditorControls\" class=\"controls\" />"
+      ).hide();
+
+      $("#editableImageEditorControls").append(
+        "<input type=\"button\" id=\"editableImageEditorSubmit\" " +
+        "value=\"Save\" />"
+      ).append(
+        "<input type=\"button\" id=\"editableImageEditorClose\" " +
+        "value=\"Cancel\" />"
+      );
+
+      this.previewURL = $(link).data('preview-url');
+
+      $("#editableImageEditorImage").each(function() {
+        return this.src = binding.previewURL;
+      });
+      $("#editableImageEditorSubmit").click(function() {
+        return binding.submit();
+      });
+      $("#editableImageEditorClose").click(function() {
+        return binding.closeEditor();
+      });
+
+      $("#editableImageEditorImage").load(function() {
+        let imageData = binding.imageData;
+        let cropStartX = Math.round(imageData.cropStartX * binding.getScale());
+        let cropStartY = Math.round(imageData.cropStartY * binding.getScale());
+
+        var cropEndX, cropEndY;
+        var jCropOptions = {
+          onChange: onCrop,
+          onSelect: onCrop
+        };
+
+        $("#modalLoadingNotice").fadeOut(100);
+        $("#editableImageEditor").show().centerOnScreen();
+
+        if (imageData.crop_width && imageData.crop_height) {
+          cropEndX = cropStartX +
+                     Math.round(imageData.crop_width * binding.getScale());
+          cropEndY = cropStartY +
+                     Math.round(imageData.crop_height * binding.getScale());
+        } else {
+          cropEndX = Math.round(imageData.real_width * binding.getScale());
+          cropEndY = Math.round(imageData.real_height * binding.getScale());
+        }
+
+        jCropOptions["setSelect"] = [cropStartX, cropStartY, cropEndX, cropEndY];
+        return $("#editableImageEditorImage").Jcrop(jCropOptions);
+      });
+    },
+
+    closeEditor: function() {
+      $("#modalLoadingNotice").remove();
+      $("#editableImageEditor").remove();
+      this.imageData = false;
+      $.dimScreenStop();
+    },
+
+    submit: function() {
+      let binding = this;
+      let data = {
+        "image[crop_start_x]": Math.floor(this.cropStartX / this.getScale()),
+        "image[crop_start_y]": Math.floor(this.cropStartY / this.getScale()),
+        "image[crop_width]":   Math.floor(this.cropWidth / this.getScale()),
+        "image[crop_height]":  Math.floor(this.cropHeight / this.getScale())
+      };
+      $.put(this.resourceURL + ".json", data, function(json) {
+        binding.closeEditor();
+      });
+    }
+  };
+
+  link.editableImage = this.editableImage;
+  $(link).click(function() {
+    this.editableImage.openEditor();
+    return false;
+  });
+};
+
+$(function() {
+  $("a.editableImage").each(function() {
+    new EditableImage(this);
+  });
+});

data/app/assets/javascripts/pages/admin/features/modal.es6.jsx

@@ -0,0 +1,90 @@
+window.Modal = {
+  container: false,
+
+  makeContainer: function() {
+    let modal = this;
+    if (!this.container) {
+      $(document.body).append("<div id=\"modal-container\"/>");
+      this.container = $("#modal-container").get(0);
+      $(this.container).hide();
+      $(window).scroll(function() {
+        return modal.position();
+      });
+      return $(window).resize(function() {
+        return modal.position();
+      });
+    }
+  },
+
+  clear: function() {
+    return $(this.container).fadeOut(150, function() {
+      $(this).html();
+      return $("#modalOverlay").fadeOut(50);
+    });
+  },
+
+  draw: function(options) {
+    this.makeContainer();
+    $(this.container).show();
+    $(this.container).html(
+      "<div class=\"container\">" + options.text + "</div>"
+    );
+    this.position();
+    $(document.body).append("<div id=\"modalOverlay\"/>");
+    $("#modalOverlay").show().click(function() {
+      return Modal.clear();
+    }).css({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: $(document).width() + "px",
+      height: $(document).height() + "px",
+      "z-index": 19,
+      "background-color": "#000000",
+      opacity: 0
+    }).animate({
+      opacity: 0.6
+    }, 100);
+    return $(this.container).find(".clear-modal").click(function() {
+      return Modal.clear();
+    });
+  },
+
+  position: function() {
+    let width = $(this.container).width();
+    let height = $(this.container).height();
+    let scrollTop = $(window).scrollTop();
+    let viewportWidth = (
+      window.innerWidth ? window.innerWidth : $(window).width()
+    );
+    let viewportHeight = (
+      window.innerHeight ? window.innerHeight : $(window).height()
+    );
+
+    var left = Math.round(viewportWidth / 2) - (width / 2);
+    var top = (Math.round(viewportHeight / 2) - (height / 2)) + scrollTop;
+
+    if (top < 5) {
+      top = 5;
+    }
+    if (left < 5) {
+      left = 5;
+    }
+
+    $("#modalOverlay").css({
+      top: 0,
+      left: 0,
+      width: $(document).width() + "px",
+      height: $(document).height() + "px"
+    });
+    return $(this.container).css("left", left).css("top", top);
+  },
+
+  alert: function(string) {
+    return this.draw({text: string});
+  },
+
+  show: function(string) {
+    return this.draw({text: string});
+  }
+};

data/app/assets/javascripts/pages/admin/features/page_images.es6.jsx

@@ -0,0 +1,338 @@
+$(function () {
+  $('.page_images').each(function () {
+    var container = this;
+    var $editor = $(container).find('.editor');
+
+    $editor.hide();
+
+    var baseURL = $editor.closest('form').attr('action');
+
+    var selectedImage = false;
+    var selectedImageId = false;
+    var images = [];
+    var imagesData = false;
+
+    function loadImagesData () {
+      $.getJSON(baseURL + '/images.json', function (json) {
+        imagesData = json["page_images"];
+      });
+    }
+
+    function updateImageData(data) {
+      for (var a = 0; a < imagesData.length; a++) {
+        if (imagesData[a].id === data.id) {
+          imagesData[a] = data;
+        } else if (data.primary) {
+          imagesData[a].primary = false;
+        }
+      }
+    }
+
+    function getImageData (imageId) {
+      var data = false;
+      for (var a = 0; a < imagesData.length; a++) {
+        if (imagesData[a].id === parseInt(imageId, 10)) {
+          data = imagesData[a];
+        }
+      }
+      return data;
+    }
+
+    function getImageSize (imageId) {
+      var imageData = getImageData(imageId).image;
+      return [imageData.real_width, imageData.real_height];
+    }
+
+    function getImageURL (imageId, maxWidth, maxHeight) {
+      return imageData;
+    }
+
+    function showEditor (image, imageData) {
+      // Show the editor
+      $('.page_images .uploadButton').hide();
+      $editor.find('.caption').val(imageData.image.caption);
+      $editor.find('.alternative').val(imageData.image.alternative);
+      $editor.find('.embed').val("[image:" + imageData.image.id + "]");
+      $editor.find('.image_id').val(imageData.image.id);
+
+      if (imageData.primary) {
+        $editor.find('#page_image_primary').attr('checked', 'checked');
+      } else {
+        $editor.find('#page_image_primary').attr('checked', false);
+      }
+      $(container).find('.image').removeClass('selected');
+      $(image).addClass('selected');
+      $editor.slideDown(400);
+    }
+
+    function cropImage (imageData, imageSize, scaleFactor) {
+      // Handle cropping
+      var cropStart = [
+        imageData.image.crop_start_x,
+        imageData.image.crop_start_y
+      ];
+
+      var cropSize = [
+        (imageSize[0] - cropStart[0]),
+        (imageSize[1] - cropStart[1])
+      ];
+
+      if (imageData.image.crop_width && imageData.image.crop_height) {
+        cropSize = [
+          imageData.image.crop_width,
+          imageData.image.crop_height
+        ];
+      }
+
+      var scale = function (val) {
+        return Math.floor(val / scaleFactor);
+      };
+
+      var updateCrop = function (crop) {
+        var start = [0, 0];
+        var size = imageSize;
+        if (crop.w > 0 && crop.h > 0) {
+          start = [scale(crop.x), scale(crop.y)];
+          size = [scale(crop.w), scale(crop.h)];
+        }
+        $editor.find('.crop_start_x').val(start[0]);
+        $editor.find('.crop_start_y').val(start[1]);
+        $editor.find('.crop_width').val(size[0]);
+        $editor.find('.crop_height').val(size[1]);
+      };
+
+      $editor.find('.edit-image img').Jcrop({
+        setSelect: [
+          Math.floor(cropStart[0] * scaleFactor),
+          Math.floor(cropStart[1] * scaleFactor),
+          Math.floor(cropStart[0] * scaleFactor) + Math.floor(cropSize[0] * scaleFactor),
+          Math.floor(cropStart[1] * scaleFactor) + Math.floor(cropSize[1] * scaleFactor)
+        ],
+        onSelect: updateCrop,
+        onChange: updateCrop
+      });
+    }
+
+    function showImage (image) {
+      // Delay execution if imageData is unavailable
+      if (imagesData === false) {
+        setTimeout(function () {
+          showImage(image);
+        }, 100);
+        return false;
+      }
+
+      if (image) {
+        var imageId   = parseInt($(image).data('page-image-id'), 10);
+        var imageURL  = $(image).data('uncropped-url');
+        var imageData = getImageData(imageId);
+
+        showEditor(image, imageData);
+        selectedImage = image;
+        selectedImageId = imageId;
+
+        // Determine resized size
+        var maxSize   = [($editor.width() - 40), ($(window).height() - 200)];
+        var imageSize = getImageSize(imageId);
+        var scaleFactor = maxSize[1] / imageSize[1];
+        if ((imageSize[0] * scaleFactor) > maxSize[0]) {
+          scaleFactor = maxSize[0] / imageSize[0];
+        }
+        if (scaleFactor > 1.0) {
+          scaleFactor = 1.0;
+        }
+        var resizedSize = [
+          Math.floor(imageSize[0] * scaleFactor),
+          Math.floor(imageSize[1] * scaleFactor)
+        ];
+
+        // Load the image
+        $editor.find('.edit-image').html(
+          '<img src="' +
+          imageURL + '" width="' + resizedSize[0] +
+          '" height="' + resizedSize[1] + '" />'
+        );
+
+        cropImage(imageData, imageSize, scaleFactor);
+      }
+    }
+
+    function closeEditor () {
+      $(container).find('.image').removeClass('selected');
+      selectedImage = false;
+      selectedImageId = false;
+      $editor.slideUp(400);
+      $('.page_images .uploadButton').slideDown(400);
+      return false;
+    }
+
+    function showNextImage () {
+      var nextIndex = false;
+      if (selectedImage) {
+        nextIndex = $.inArray(selectedImage, images) + 1;
+      }
+      if (nextIndex !== false) {
+        if (images[nextIndex]) {
+          showImage(images[nextIndex]);
+        } else {
+          showImage(images[0]);
+        }
+      }
+      return false;
+    }
+
+    function showPreviousImage () {
+      var nextIndex = false;
+      if (selectedImage) {
+        nextIndex = $.inArray(selectedImage, images) - 1;
+      }
+      if (nextIndex !== false) {
+        if (nextIndex < 0) {
+          nextIndex = images.length - 1;
+        }
+        if (images[nextIndex]) {
+          showImage(images[nextIndex]);
+        } else {
+          showImage(images[0]);
+        }
+      }
+      return false;
+    }
+
+    // Sorting images
+    function saveImageOrder () {
+      var ids = [];
+      images = [];
+      $('.page_images .images .image').each(function () {
+        images.push(this);
+        ids.push(parseInt($(this).data('page-image-id'), 10));
+      });
+      $('.page_images .images').animate({opacity: 0.8}, 300);
+      var url = baseURL + '/images/reorder.json';
+      var data = {
+        ids: ids,
+        authenticity_token: $("input[name=authenticity_token]").val()
+      };
+      $.put(url, data, function (json) {
+        $('.page_images .images').animate({opacity: 1.0}, 300);
+      });
+    }
+
+    function setPrimaryImage (newPrimary) {
+      var $previousPrimary = $(container).find('.primary');
+      if ($previousPrimary.length > 0) {
+        var thumbURL = $previousPrimary.find('img').attr('src').replace('220x220', '100x100');
+        $previousPrimary.find('img').attr('src', thumbURL);
+        $previousPrimary
+            .removeClass('primary')
+            .remove()
+            .appendTo($(container).find('.images'));
+        $previousPrimary.hide().fadeIn(400);
+      }
+
+      if (newPrimary) {
+        $(newPrimary)
+            .addClass('primary')
+            .remove()
+            .appendTo($(container).find('.primary_container'));
+        var bigURL = $(newPrimary).find('img').attr('src').replace('100x100', '220x220');
+        $(newPrimary).find('img').attr('src', bigURL);
+        $(newPrimary).hide().fadeIn(400);
+      }
+      saveImageOrder();
+    }
+
+    function saveImage () {
+      var savedId = selectedImageId;
+      var savedImage = selectedImage;
+      $editor.animate({opacity: 0.8}, 300);
+      var data = {
+        'page_image[primary]': $editor.find('#page_image_primary').is(':checked'),
+        'page_image[image_attributes][id]': $editor.find('.image_id').val(),
+        'page_image[image_attributes][caption]': $editor.find('.caption').val(),
+        'page_image[image_attributes][alternative]': $editor.find('.alternative').val(),
+        'page_image[image_attributes][crop_start_x]': $editor.find('.crop_start_x').val(),
+        'page_image[image_attributes][crop_start_y]': $editor.find('.crop_start_y').val(),
+        'page_image[image_attributes][crop_width]': $editor.find('.crop_width').val(),
+        'page_image[image_attributes][crop_height]': $editor.find('.crop_height').val(),
+        authenticity_token: $("input[name=authenticity_token]").val()
+      };
+      var url = baseURL + '/images/' + savedId + '.json';
+      $.put(url, data, function (json) {
+        updateImageData(json);
+
+        // Shuffle primary image around
+        if (json.primary && !$(savedImage).hasClass('primary')) {
+          setPrimaryImage(savedImage);
+        } else if (!json.primary && $(savedImage).hasClass('primary')) {
+          setPrimaryImage(false);
+        }
+
+        $editor.animate({opacity: 1.0}, 300);
+      });
+      return false;
+    }
+
+    function deleteImage () {
+      if (selectedImage && selectedImageId) {
+        if (confirm('Are you sure you want to delete this image?')) {
+          var url = baseURL + '/images/' + selectedImageId + '.json';
+          $.ajax(url, {
+            type: 'DELETE',
+            authenticity_token: $("input[name=authenticity_token]").val(),
+            success: function () {
+              var deletedImage = selectedImage;
+              if (images.length > 1) {
+                showNextImage();
+              } else {
+                $(container).find('.no_images').slideDown();
+                closeEditor();
+              }
+              images = _.reject(images, function (i) {
+                return i === deletedImage;
+              });
+              $(deletedImage).remove();
+            }
+          });
+        }
+      }
+      return false;
+    }
+
+    function applyButtonActions (container) {
+      container.find('a.next').click(showNextImage);
+      container.find('a.previous').click(showPreviousImage);
+      container.find('a.close').click(closeEditor);
+      container.find('button.save').click(saveImage);
+      container.find('a.delete').click(deleteImage);
+    }
+
+    function init() {
+      loadImagesData();
+      applyButtonActions($editor);
+
+      // Find images
+      $(container).find('.image').each(function () {
+        images.push(this);
+        $(this).find('img').removeAttr('width').removeAttr('height');
+      });
+      if (images.length > 0) {
+        $(container).find('.no_images').hide();
+      }
+
+      $(container).on('click', '.image', function () {
+        showImage(this);
+        return false;
+      });
+
+      $('.page_images .images').sortable({
+        forcePlaceholderSize: true,
+        update:               saveImageOrder,
+        distance:             5
+      });
+      $('.page_images .image').disableSelection();
+    }
+
+    init();
+  });
+});