mazer-rails 0.1.0 → 0.1.2

data/assets/javascripts/components/sidebar.js

@@ -0,0 +1,185 @@
+import isDesktop from '../helper/isDesktop'
+
+function slideToggle(a, b, c) { 0 === a.clientHeight ? j(a, b, c, !0) : j(a, b, c) } function slideUp(a, b, c) { j(a, b, c) } function slideDown(a, b, c) { j(a, b, c, !0) } function j(c, a, k, d) { void 0 === a && (a = 400), void 0 === d && (d = !1), c.style.overflow = "hidden", d && (c.style.display = "block"); var l, b = window.getComputedStyle(c), e = parseFloat(b.getPropertyValue("height")), f = parseFloat(b.getPropertyValue("padding-top")), g = parseFloat(b.getPropertyValue("padding-bottom")), h = parseFloat(b.getPropertyValue("margin-top")), i = parseFloat(b.getPropertyValue("margin-bottom")), m = e / a, n = f / a, o = g / a, p = h / a, q = i / a; window.requestAnimationFrame(function s(r) { void 0 === l && (l = r); var b = r - l; d ? (c.style.height = m * b + "px", c.style.paddingTop = n * b + "px", c.style.paddingBottom = o * b + "px", c.style.marginTop = p * b + "px", c.style.marginBottom = q * b + "px") : (c.style.height = e - m * b + "px", c.style.paddingTop = f - n * b + "px", c.style.paddingBottom = g - o * b + "px", c.style.marginTop = h - p * b + "px", c.style.marginBottom = i - q * b + "px"), b >= a ? (c.style.height = "", c.style.paddingTop = "", c.style.paddingBottom = "", c.style.marginTop = "", c.style.marginBottom = "", c.style.overflow = "", d || (c.style.display = "none"), "function" == typeof k && k()) : window.requestAnimationFrame(s) }) }
+
+/**
+ * a Sidebar component
+ * @param  {HTMLElement} el - sidebar element
+ * @param  {object} options={} - options
+ */
+class Sidebar {
+  constructor(el, options = {}) {
+    this.sidebarEL = el instanceof HTMLElement ? el : document.querySelector(el)
+    this.options = options
+    this.init()
+  }
+
+  /**
+   * initialize the sidebar
+   */
+  init() {
+    // add event listener to sidebar
+    document
+      .querySelectorAll(".burger-btn")
+      .forEach((el) => el.addEventListener("click", this.toggle.bind(this)))
+    document
+      .querySelectorAll(".sidebar-hide")
+      .forEach((el) => el.addEventListener("click", this.toggle.bind(this)))
+    window.addEventListener("resize", this.onResize.bind(this))
+
+    //
+    let sidebarItems = document.querySelectorAll(".sidebar-item.has-sub")
+    for (var i = 0; i < sidebarItems.length; i++) {
+      let sidebarItem = sidebarItems[i]
+      sidebarItems[i]
+        .querySelector(".sidebar-link")
+        .addEventListener("click", (e) => {
+          e.preventDefault()
+
+          let submenu = sidebarItem.querySelector(".submenu")
+          if (submenu.classList.contains("active"))
+            submenu.style.display = "block"
+
+          if (submenu.style.display == "none") submenu.classList.add("active")
+          else submenu.classList.remove("active")
+          slideToggle(submenu, 300, () =>
+            this.forceElementVisibility(sidebarItem)
+          )
+        })
+    }
+
+    // Perfect Scrollbar Init
+    if (typeof PerfectScrollbar == "function") {
+      const container = document.querySelector(".sidebar-wrapper")
+      const ps = new PerfectScrollbar(container, {
+        wheelPropagation: false,
+      })
+    }
+
+    // Scroll into active sidebar
+    setTimeout(
+      () =>
+        document.querySelector(".sidebar-item.active")?.scrollIntoView(false),
+      100
+    )
+
+    // check responsive
+    this.onFirstLoad()
+  }
+
+  /**
+   * On First Load
+   */
+  onFirstLoad() {
+    if (!isDesktop(window)) {
+      this.sidebarEL.classList.remove("active")
+    }
+  }
+
+  /**
+   * On Sidebar Rezise Event
+   */
+  onResize() {
+    if (isDesktop(window)) {
+      this.sidebarEL.classList.add("active")
+    } else {
+      this.sidebarEL.classList.remove("active")
+    }
+
+    // reset
+    this.deleteBackdrop()
+    this.toggleOverflowBody(true)
+  }
+
+  /**
+   * Toggle Sidebar
+   */
+  toggle() {
+    const sidebarState = this.sidebarEL.classList.contains("active")
+    if (sidebarState) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  /**
+   * Show Sidebar
+   */
+  show() {
+    this.sidebarEL.classList.add("active")
+    this.createBackdrop()
+    this.toggleOverflowBody()
+  }
+
+  /**
+   * Hide Sidebar
+   */
+  hide() {
+    this.sidebarEL.classList.remove("active")
+    this.deleteBackdrop()
+    this.toggleOverflowBody()
+  }
+
+  /**
+   * Create Sidebar Backdrop
+   */
+  createBackdrop() {
+    if (isDesktop(window)) return
+    this.deleteBackdrop()
+    const backdrop = document.createElement("div")
+    backdrop.classList.add("sidebar-backdrop")
+    backdrop.addEventListener("click", this.hide.bind(this))
+    document.body.appendChild(backdrop)
+  }
+
+  /**
+   * Delete Sidebar Backdrop
+   */
+  deleteBackdrop() {
+    const backdrop = document.querySelector(".sidebar-backdrop")
+    if (backdrop) {
+      backdrop.remove()
+    }
+  }
+
+  /**
+   * Toggle Overflow Body
+   */
+  toggleOverflowBody(active) {
+    if(isDesktop(window)) return;
+    const sidebarState = this.sidebarEL.classList.contains("active")
+    const body = document.querySelector("body")
+    if (typeof active == "undefined") {
+      body.style.overflowY = sidebarState ? "hidden" : "auto"
+    } else {
+      body.style.overflowY = active ? "auto" : "hidden"
+    }
+  }
+
+  isElementInViewport(el) {
+    var rect = el.getBoundingClientRect()
+
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    )
+  }
+
+  forceElementVisibility(el) {
+    if (!this.isElementInViewport(el)) {
+      el.scrollIntoView(false)
+    }
+  }
+}
+
+/**
+ * Create Sidebar Wrapper
+ */
+let sidebarEl = document.getElementById("sidebar")
+if (sidebarEl) {
+  window.sidebar = new Sidebar(sidebarEl)
+}

data/assets/javascripts/helper/isDesktop.js

@@ -0,0 +1 @@
+export default (window) => window.innerWidth > 1200;

data/assets/javascripts/initTheme.js

@@ -0,0 +1,5 @@
+const body = document.body;
+const theme = localStorage.getItem('theme')
+
+if (theme) 
+  document.documentElement.setAttribute('data-bs-theme', theme)

data/assets/javascripts/mazer.js

@@ -0,0 +1,9 @@
+// Don't forget to load bootstrap js in your project
+// Here, we load it in our app.js
+
+// We could import PerfectScrollbar directly in the sidebar module
+window.PerfectScrollbar = require("perfect-scrollbar/dist/perfect-scrollbar.min.js")
+
+let Sidebar = require("./components/sidebar")
+
+export { Sidebar }

data/assets/javascripts/pages/ckeditor.js

@@ -0,0 +1,3 @@
+ClassicEditor.create(document.querySelector("#editor")).catch((error) => {
+  console.error(error)
+})

data/assets/javascripts/pages/component-toasts.js

@@ -0,0 +1,9 @@
+const toastTrigger = document.getElementById("liveToastBtn")
+const toastLiveExample = document.getElementById("liveToast")
+if (toastTrigger) {
+  toastTrigger.addEventListener("click", () => {
+    const toast = new bootstrap.Toast(toastLiveExample)
+
+    toast.show()
+  })
+}

data/assets/javascripts/pages/dashboard.js

@@ -0,0 +1,158 @@
+var optionsProfileVisit = {
+  annotations: {
+    position: "back",
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  chart: {
+    type: "bar",
+    height: 300,
+  },
+  fill: {
+    opacity: 1,
+  },
+  plotOptions: {},
+  series: [
+    {
+      name: "sales",
+      data: [9, 20, 30, 20, 10, 20, 30, 20, 10, 20, 30, 20],
+    },
+  ],
+  colors: "#435ebe",
+  xaxis: {
+    categories: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+  },
+}
+let optionsVisitorsProfile = {
+  series: [70, 30],
+  labels: ["Male", "Female"],
+  colors: ["#435ebe", "#55c6e8"],
+  chart: {
+    type: "donut",
+    width: "100%",
+    height: "350px",
+  },
+  legend: {
+    position: "bottom",
+  },
+  plotOptions: {
+    pie: {
+      donut: {
+        size: "30%",
+      },
+    },
+  },
+}
+
+var optionsEurope = {
+  series: [
+    {
+      name: "series1",
+      data: [310, 800, 600, 430, 540, 340, 605, 805, 430, 540, 340, 605],
+    },
+  ],
+  chart: {
+    height: 80,
+    type: "area",
+    toolbar: {
+      show: false,
+    },
+  },
+  colors: ["#5350e9"],
+  stroke: {
+    width: 2,
+  },
+  grid: {
+    show: false,
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  xaxis: {
+    type: "datetime",
+    categories: [
+      "2018-09-19T00:00:00.000Z",
+      "2018-09-19T01:30:00.000Z",
+      "2018-09-19T02:30:00.000Z",
+      "2018-09-19T03:30:00.000Z",
+      "2018-09-19T04:30:00.000Z",
+      "2018-09-19T05:30:00.000Z",
+      "2018-09-19T06:30:00.000Z",
+      "2018-09-19T07:30:00.000Z",
+      "2018-09-19T08:30:00.000Z",
+      "2018-09-19T09:30:00.000Z",
+      "2018-09-19T10:30:00.000Z",
+      "2018-09-19T11:30:00.000Z",
+    ],
+    axisBorder: {
+      show: false,
+    },
+    axisTicks: {
+      show: false,
+    },
+    labels: {
+      show: false,
+    },
+  },
+  show: false,
+  yaxis: {
+    labels: {
+      show: false,
+    },
+  },
+  tooltip: {
+    x: {
+      format: "dd/MM/yy HH:mm",
+    },
+  },
+}
+
+let optionsAmerica = {
+  ...optionsEurope,
+  colors: ["#008b75"],
+}
+let optionsIndonesia = {
+  ...optionsEurope,
+  colors: ["#dc3545"],
+}
+
+var chartProfileVisit = new ApexCharts(
+  document.querySelector("#chart-profile-visit"),
+  optionsProfileVisit
+)
+var chartVisitorsProfile = new ApexCharts(
+  document.getElementById("chart-visitors-profile"),
+  optionsVisitorsProfile
+)
+var chartEurope = new ApexCharts(
+  document.querySelector("#chart-europe"),
+  optionsEurope
+)
+var chartAmerica = new ApexCharts(
+  document.querySelector("#chart-america"),
+  optionsAmerica
+)
+var chartIndonesia = new ApexCharts(
+  document.querySelector("#chart-indonesia"),
+  optionsIndonesia
+)
+
+chartIndonesia.render()
+chartAmerica.render()
+chartEurope.render()
+chartProfileVisit.render()
+chartVisitorsProfile.render()

data/assets/javascripts/pages/datatables.js

@@ -0,0 +1 @@
+let jquery_datatable = $("#table1").DataTable()

data/assets/javascripts/pages/filepond.js

@@ -0,0 +1,181 @@
+// Filepond: Basic
+FilePond.create(document.querySelector(".basic-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: false,
+  allowFileEncode: false,
+  required: false,
+})
+
+// Filepond: Multiple Files
+FilePond.create(document.querySelector(".multiple-files-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: true,
+  allowFileEncode: false,
+  required: false,
+})
+
+// Filepond: With Validation
+FilePond.create(document.querySelector(".with-validation-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: true,
+  allowFileEncode: false,
+  required: true,
+  acceptedFileTypes: ["image/png"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: ImgBB with server property
+FilePond.create(document.querySelector(".imgbb-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  server: {
+    process: (fieldName, file, metadata, load, error, progress, abort) => {
+      // We ignore the metadata property and only send the file
+
+      const formData = new FormData()
+      formData.append(fieldName, file, file.name)
+
+      const request = new XMLHttpRequest()
+      // you can change it by your client api key
+      request.open(
+        "POST",
+        "https://api.imgbb.com/1/upload?key=762894e2014f83c023b233b2f10395e2"
+      )
+
+      request.upload.onprogress = (e) => {
+        progress(e.lengthComputable, e.loaded, e.total)
+      }
+
+      request.onload = function () {
+        if (request.status >= 200 && request.status < 300) {
+          load(request.responseText)
+        } else {
+          error("oh no")
+        }
+      }
+
+      request.onreadystatechange = function () {
+        if (this.readyState == 4) {
+          if (this.status == 200) {
+            let response = JSON.parse(this.responseText)
+
+            Toastify({
+              text: "Success uploading to imgbb! see console f12",
+              duration: 3000,
+              close: true,
+              gravity: "bottom",
+              position: "right",
+              backgroundColor: "#4fbe87",
+            }).showToast()
+
+            console.log(response)
+          } else {
+            Toastify({
+              text: "Failed uploading to imgbb! see console f12",
+              duration: 3000,
+              close: true,
+              gravity: "bottom",
+              position: "right",
+              backgroundColor: "#ff0000",
+            }).showToast()
+
+            console.log("Error", this.statusText)
+          }
+        }
+      }
+
+      request.send(formData)
+    },
+  },
+})
+
+// Filepond: Image Preview
+FilePond.create(document.querySelector(".image-preview-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Crop
+FilePond.create(document.querySelector(".image-crop-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: true,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Exif Orientation
+FilePond.create(document.querySelector(".image-exif-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: true,
+  allowImageCrop: false,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Filter
+FilePond.create(document.querySelector(".image-filter-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: true,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  imageFilterColorMatrix: [
+    0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114,
+    0, 0, 0.0, 0.0, 0.0, 1, 0,
+  ],
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Resize
+FilePond.create(document.querySelector(".image-resize-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  allowImageResize: true,
+  imageResizeTargetWidth: 200,
+  imageResizeTargetHeight: 200,
+  imageResizeMode: "cover",
+  imageResizeUpscale: true,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})

data/assets/javascripts/pages/form-editor.js

@@ -0,0 +1,27 @@
+var snow = new Quill("#snow", {
+  theme: "snow",
+})
+var bubble = new Quill("#bubble", {
+  theme: "bubble",
+})
+new Quill("#full", {
+  bounds: "#full-container .editor",
+  modules: {
+    toolbar: [
+      [{ font: [] }, { size: [] }],
+      ["bold", "italic", "underline", "strike"],
+      [{ color: [] }, { background: [] }],
+      [{ script: "super" }, { script: "sub" }],
+      [
+        { list: "ordered" },
+        { list: "bullet" },
+        { indent: "-1" },
+        { indent: "+1" },
+      ],
+      ["direction", { align: [] }],
+      ["link", "image", "video"],
+      ["clean"],
+    ],
+  },
+  theme: "snow",
+})

data/assets/javascripts/pages/form-element-select.js

@@ -0,0 +1,14 @@
+let choices = document.querySelectorAll(".choices")
+let initChoice
+for (let i = 0; i < choices.length; i++) {
+  if (choices[i].classList.contains("multiple-remove")) {
+    initChoice = new Choices(choices[i], {
+      delimiter: ",",
+      editItems: true,
+      maxItemCount: -1,
+      removeItemButton: true,
+    })
+  } else {
+    initChoice = new Choices(choices[i])
+  }
+}

data/assets/javascripts/pages/horizontal-layout.js

@@ -0,0 +1,43 @@
+function slideToggle(a, b, c) { 0 === a.clientHeight ? j(a, b, c, !0) : j(a, b, c) } function slideUp(a, b, c) { j(a, b, c) } function slideDown(a, b, c) { j(a, b, c, !0) } function j(c, a, k, d) { void 0 === a && (a = 400), void 0 === d && (d = !1), c.style.overflow = "hidden", d && (c.style.display = "block"); var l, b = window.getComputedStyle(c), e = parseFloat(b.getPropertyValue("height")), f = parseFloat(b.getPropertyValue("padding-top")), g = parseFloat(b.getPropertyValue("padding-bottom")), h = parseFloat(b.getPropertyValue("margin-top")), i = parseFloat(b.getPropertyValue("margin-bottom")), m = e / a, n = f / a, o = g / a, p = h / a, q = i / a; window.requestAnimationFrame(function s(r) { void 0 === l && (l = r); var b = r - l; d ? (c.style.height = m * b + "px", c.style.paddingTop = n * b + "px", c.style.paddingBottom = o * b + "px", c.style.marginTop = p * b + "px", c.style.marginBottom = q * b + "px") : (c.style.height = e - m * b + "px", c.style.paddingTop = f - n * b + "px", c.style.paddingBottom = g - o * b + "px", c.style.marginTop = h - p * b + "px", c.style.marginBottom = i - q * b + "px"), b >= a ? (c.style.height = "", c.style.paddingTop = "", c.style.paddingBottom = "", c.style.marginTop = "", c.style.marginBottom = "", c.style.overflow = "", d || (c.style.display = "none"), "function" == typeof k && k()) : window.requestAnimationFrame(s) }) }
+
+// Responsive burger btn onclick
+document.querySelector(".burger-btn").addEventListener("click", (e) => {
+  e.preventDefault()
+  let navbar = document.querySelector(".main-navbar")
+
+  slideToggle(navbar, 300)
+})
+
+window.onload = () => checkWindowSize()
+window.addEventListener("resize", (event) => {
+  checkWindowSize()
+})
+
+function checkWindowSize() {
+  if (window.innerWidth < 1200) listener()
+  if (window.innerWidth > 1200)
+    document.querySelector(".main-navbar").style.display = ""
+}
+
+function listener() {
+  let menuItems = document.querySelectorAll(".menu-item.has-sub")
+  menuItems.forEach((menuItem) => {
+    menuItem.querySelector(".menu-link").addEventListener("click", (e) => {
+      e.preventDefault()
+      let submenu = menuItem.querySelector(".submenu")
+      submenu.classList.toggle("active")
+    })
+  })
+
+  // Three level menu event listener
+  let submenuItems = document.querySelectorAll(".submenu-item.has-sub")
+
+  submenuItems.forEach((submenuItem) => {
+    submenuItem
+      .querySelector(".submenu-link")
+      .addEventListener("click", (e) => {
+        e.preventDefault()
+        submenuItem.querySelector(".subsubmenu").classList.toggle("active")
+      })
+  })
+}

data/assets/javascripts/pages/jquery.js

@@ -0,0 +1 @@
+let $ = require("jquery")