mazer-rails 0.1.0 → 0.1.2

data/assets/javascripts/pages/jsvectormap.js

@@ -0,0 +1,60 @@
+var world_map = new jsVectorMap({
+    selector: "#world-map",
+    map: "world",
+    zoomOnScroll: false,
+    regionStyle: {
+        hover: {
+            fill: '#435ebe'
+        }
+    },
+    markers: [
+        {
+            name: 'Indonesia',
+            coords: [-6.229728, 106.6894311],
+            style: {
+                fill: '#435ebe'
+            }
+        },
+        {
+            name: 'United States',
+            coords: [38.8936708, -77.1546604],
+            style: {
+                fill: '#28ab55'
+            }
+        },
+        {
+            name: 'Russia',
+            coords: [55.5807481, 36.825129],
+            style: {
+                fill: '#f3616d'
+            }
+        },
+        {
+            name: 'China',
+            coords: [39.9385466, 116.1172735]
+        },
+        {
+            name: 'United Kingdom',
+            coords: [51.5285582, -0.2416812]
+        },
+        {
+            name: 'India',
+            coords: [26.8851417, 75.6504721]
+        },
+        {
+            name: 'Australia',
+            coords: [-35.2813046, 149.124822]
+        },
+        {
+            name: 'Brazil',
+            coords: [-22.9140693, -43.5860681]
+        },
+        {
+            name: 'Egypt',
+            coords: [26.834955, 26.3823725]
+        },
+    ],
+    onRegionTooltipShow(event, tooltip) {
+        tooltip.css({ backgroundColor: '#435ebe' })
+    }
+});

data/assets/javascripts/pages/parsley.js

@@ -0,0 +1,55 @@
+$.extend(window.Parsley.options, {
+  focus: "first",
+  excluded:
+    "input[type=button], input[type=submit], input[type=reset], .search, .ignore",
+  triggerAfterFailure: "change blur",
+  errorsContainer: function (element) {},
+  trigger: "change",
+  successClass: "is-valid",
+  errorClass: "is-invalid",
+  classHandler: function (el) {
+    return el.$element.closest(".form-group")
+  },
+  errorsContainer: function (el) {
+    return el.$element.closest(".form-group")
+  },
+  errorsWrapper: '<div class="parsley-error"></div>',
+  errorTemplate: "<span></span>",
+})
+
+Parsley.on("field:validated", function (el) {
+  var elNode = $(el)[0]
+  if (elNode && !elNode.isValid()) {
+    var rqeuiredValResult = elNode.validationResult.filter(function (vr) {
+      return vr.assert.name === "required"
+    })
+    if (rqeuiredValResult.length > 0) {
+      var fieldNode = $(elNode.element)
+      var formGroupNode = fieldNode.closest(".form-group")
+      var lblNode = formGroupNode.find(".form-label:first")
+      if (lblNode.length > 0) {
+        // change default error message to include field label
+        var errorNode = formGroupNode.find(
+          "div.parsley-error span[class*=parsley-]"
+        )
+        if (errorNode.length > 0) {
+          var lblText = lblNode.text()
+          if (lblText) {
+            errorNode.html(lblText + " is required.")
+          }
+        }
+      }
+    }
+  }
+})
+
+Parsley.addValidator("restrictedCity", {
+  requirementType: "string",
+  validateString: function (value, requirement) {
+    value = (value || "").trim()
+    return value === "" || value.toLowerCase() === requirement.toLowerCase()
+  },
+  messages: {
+    en: 'You have to live in <a href="https://www.google.com/maps/place/Jakarta">Jakarta</a>.',
+  },
+})

data/assets/javascripts/pages/quill.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/rater-js.js

@@ -0,0 +1,38 @@
+raterJs({
+  element: document.querySelector("#basic"),
+  starSize: 32,
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+})
+
+raterJs({
+  element: document.querySelector("#step"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  step: 0.5,
+})
+raterJs({
+  element: document.querySelector("#unli1"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  max: 10,
+  step: 0.5,
+})
+raterJs({
+  element: document.querySelector("#unli2"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  max: 16,
+  step: 0.5,
+})

data/assets/javascripts/pages/simple-datatables.js

@@ -0,0 +1,46 @@
+let dataTable = new simpleDatatables.DataTable(
+  document.getElementById("table1")
+)
+// Move "per page dropdown" selector element out of label
+// to make it work with bootstrap 5. Add bs5 classes.
+function adaptPageDropdown() {
+  const selector = dataTable.wrapper.querySelector(".dataTable-selector")
+  selector.parentNode.parentNode.insertBefore(selector, selector.parentNode)
+  selector.classList.add("form-select")
+}
+
+// Add bs5 classes to pagination elements
+function adaptPagination() {
+  const paginations = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list"
+  )
+
+  for (const pagination of paginations) {
+    pagination.classList.add(...["pagination", "pagination-primary"])
+  }
+
+  const paginationLis = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list li"
+  )
+
+  for (const paginationLi of paginationLis) {
+    paginationLi.classList.add("page-item")
+  }
+
+  const paginationLinks = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list li a"
+  )
+
+  for (const paginationLink of paginationLinks) {
+    paginationLink.classList.add("page-link")
+  }
+}
+
+// Patch "per page dropdown" and pagination after table rendered
+dataTable.on("datatable.init", function () {
+  adaptPageDropdown()
+  adaptPagination()
+})
+
+// Re-patch pagination after the page was changed
+dataTable.on("datatable.page", adaptPagination)

data/assets/javascripts/pages/summernote.js

@@ -0,0 +1,20 @@
+$("#summernote").summernote({
+  tabsize: 2,
+  height: 120,
+})
+$("#hint").summernote({
+  height: 100,
+  toolbar: false,
+  placeholder: "type with apple, orange, watermelon and lemon",
+  hint: {
+    words: ["apple", "orange", "watermelon", "lemon"],
+    match: /\b(\w{1,})$/,
+    search: function (keyword, callback) {
+      callback(
+        $.grep(this.words, function (item) {
+          return item.indexOf(keyword) === 0
+        })
+      )
+    },
+  },
+})

data/assets/javascripts/pages/sweetalert2.js

@@ -0,0 +1,142 @@
+document.getElementById("basic").addEventListener("click", (e) => {
+  Swal.fire("Any fool can use a computer")
+})
+document.getElementById("footer").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "error",
+    title: "Oops...",
+    text: "Something went wrong!",
+    footer: "<a href>Why do I have this issue?</a>",
+  })
+})
+document.getElementById("title").addEventListener("click", (e) => {
+  Swal.fire("The Internet?", "That thing is still around?", "question")
+})
+document.getElementById("success").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "success",
+    title: "Success",
+  })
+})
+document.getElementById("error").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "error",
+    title: "Error",
+  })
+})
+document.getElementById("warning").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "warning",
+    title: "Warning",
+  })
+})
+document.getElementById("info").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "info",
+    title: "Info",
+  })
+})
+document.getElementById("question").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "question",
+    title: "Question",
+  })
+})
+document.getElementById("text").addEventListener("click", (e) => {
+  Swal.fire({
+    title: "Enter your IP address",
+    input: "text",
+    inputLabel: "Your IP address",
+    showCancelButton: true,
+  })
+})
+document.getElementById("email").addEventListener("click", async (e) => {
+  const { value: email } = await Swal.fire({
+    title: "Input email address",
+    input: "email",
+    inputLabel: "Your email address",
+    inputPlaceholder: "Enter your email address",
+  })
+
+  if (email) {
+    Swal.fire(`Entered email: ${email}`)
+  }
+})
+document.getElementById("url").addEventListener("click", async (e) => {
+  const { value: url } = await Swal.fire({
+    input: "url",
+    inputLabel: "URL address",
+    inputPlaceholder: "Enter the URL",
+  })
+
+  if (url) {
+    Swal.fire(`Entered URL: ${url}`)
+  }
+})
+document.getElementById("password").addEventListener("click", async (e) => {
+  const { value: password } = await Swal.fire({
+    title: "Enter your password",
+    input: "password",
+    inputLabel: "Password",
+    inputPlaceholder: "Enter your password",
+    inputAttributes: {
+      maxlength: 10,
+      autocapitalize: "off",
+      autocorrect: "off",
+    },
+  })
+
+  if (password) {
+    Swal.fire(`Entered password: ${password}`)
+  }
+})
+document.getElementById("textarea").addEventListener("click", async (e) => {
+  const { value: text } = await Swal.fire({
+    input: "textarea",
+    inputLabel: "Message",
+    inputPlaceholder: "Type your message here...",
+    inputAttributes: {
+      "aria-label": "Type your message here",
+    },
+    showCancelButton: true,
+  })
+
+  if (text) {
+    Swal.fire(text)
+  }
+})
+document.getElementById("select").addEventListener("click", async (e) => {
+  const { value: fruit } = await Swal.fire({
+    title: "Select field validation",
+    input: "select",
+    inputOptions: {
+      Fruits: {
+        apples: "Apples",
+        bananas: "Bananas",
+        grapes: "Grapes",
+        oranges: "Oranges",
+      },
+      Vegetables: {
+        potato: "Potato",
+        broccoli: "Broccoli",
+        carrot: "Carrot",
+      },
+      icecream: "Ice cream",
+    },
+    inputPlaceholder: "Select a fruit",
+    showCancelButton: true,
+    inputValidator: (value) => {
+      return new Promise((resolve) => {
+        if (value === "oranges") {
+          resolve()
+        } else {
+          resolve("You need to select oranges :)")
+        }
+      })
+    },
+  })
+
+  if (fruit) {
+    Swal.fire(`You selected: ${fruit}`)
+  }
+})

data/assets/javascripts/pages/tinymce.js

@@ -0,0 +1,22 @@
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("initing", document.body.classList.contains("theme-dark"))
+
+  const themeOptions = document.body.classList.contains("theme-dark")
+    ? {
+        skin: "oxide-dark",
+        content_css: "dark",
+      }
+    : {
+        skin: "oxide",
+        content_css: "default",
+      }
+
+  tinymce.init({ selector: "#default", ...themeOptions })
+  tinymce.init({
+    selector: "#dark",
+    toolbar:
+      "undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code",
+    plugins: "code",
+    ...themeOptions,
+  })
+})

data/assets/javascripts/pages/toastify.js

@@ -0,0 +1,81 @@
+document.getElementById("basic").addEventListener("click", () => {
+  Toastify({
+    text: "This is a toast",
+    duration: 3000,
+  }).showToast()
+})
+document.getElementById("background").addEventListener("click", () => {
+  Toastify({
+    text: "This is a toast",
+    duration: 3000,
+    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+  }).showToast()
+})
+document.getElementById("close").addEventListener("click", () => {
+  Toastify({
+    text: "Click close button",
+    duration: 3000,
+    close: true,
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-left").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top left",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "left",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-center").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top center",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "center",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-right").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top right",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "right",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-right").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom right",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "right",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-center").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom center",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "center",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-left").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom left",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "left",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})