Browse Source

remove vue, simplify js, remove last trace of admin.js

activity-pub
Inhji Y. 2 months ago
parent
commit
a419b391e8
7 changed files with 42 additions and 79 deletions
  1. +39
    -10
      assets/js/app.js
  2. +0
    -11
      assets/js/channel.js
  3. +0
    -42
      assets/js/new_post.js
  4. +1
    -2
      assets/package.json
  5. +0
    -6
      lib/akedia_web/helpers/meta.ex
  6. +0
    -4
      lib/akedia_web/templates/layout/app.html.eex
  7. +2
    -4
      lib/akedia_web/templates/post/form.html.eex

+ 39
- 10
assets/js/app.js View File

@@ -1,7 +1,7 @@
// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import appCss from "../css/app.scss"
import "../css/app.scss"

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
@@ -10,10 +10,11 @@ import appCss from "../css/app.scss"
// Import dependencies
//
import Prism from 'prismjs'
import tags from 'bulma-tagsinput'
import EmojiButton from '@joeattardi/emoji-button'

import "phoenix_html"

import "./new_post.js"
import "./webauthn/login.js"
import "./webauthn/register.js"

@@ -28,14 +29,45 @@ if ('serviceWorker' in navigator) {
}

document.addEventListener("DOMContentLoaded", function () {
const $form = document.querySelector("form.post")
const $weatherCanvas = document.querySelector('canvas#weather')
const $emojiButton = document.querySelector('#emoji-button')
const $zenTextarea = document.querySelector(".zen textarea")
const $zenCheckbox = document.querySelector(".zen input[type=checkbox]")
const ESC = 27

if ($form) {
// Attach Tagsinput
tags.attach()

// Add Zen Close from textarea
$zenTextarea.addEventListener("keydown", function (e) {
if (e.keyCode === ESC) {
$zenCheckbox.checked = false
}
console.log(e.keyCode)
})
}

if ($emojiButton) {
const picker = new EmojiButton()

picker.on('emoji', emoji => {
document.querySelector('#content-area').value += ` ${emoji} `
})

$emojiButton.addEventListener('click', () => {
picker.pickerVisible ? picker.hidePicker() : picker.showPicker($emojiButton)
})
}


// Highlight Syntax
Prism.highlightAll()

// Animated Weather
const $weatherCanvas = document.querySelector('canvas#weather')
const skycons = new Skycons({ monochrome: false })

// Animated Weather
if ($weatherCanvas) {
const skycons = new Skycons({ monochrome: false })
const icon = $weatherCanvas.dataset["icon"]
const skyconsId = icon.toUpperCase().replace(/-/g, "_")

@@ -43,13 +75,10 @@ document.addEventListener("DOMContentLoaded", function () {
skycons.play()
}

// Get all "navbar-burger" elements
// Navbar Burger
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {

// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {



+ 0
- 11
assets/js/channel.js View File

@@ -1,11 +0,0 @@
import {Socket} from "phoenix"

const socket = new Socket("/socket")
socket.connect()

// Now that you are connected, you can join channels with a topic:
export const channel = socket.channel("admin:dashboard", {})

channel.join()
.receive("ok", resp => {console.log("Joined successfully", resp) })
.receive("error", resp => { console.log("Unable to join", resp) })

+ 0
- 42
assets/js/new_post.js View File

@@ -1,42 +0,0 @@
import Vue from 'vue'
import tags from 'bulma-tagsinput'
import EmojiButton from '@joeattardi/emoji-button'

window.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('#emoji-button')

if (!button) return

const picker = new EmojiButton()

picker.on('emoji', emoji => {
document.querySelector('#content-area').value += emoji
})

button.addEventListener('click', () => {
picker.pickerVisible ? picker.hidePicker() : picker.showPicker(button)
})
})

if (document.querySelector("form.vue")) {
new Vue({
el: "form.vue",
data: {
charCount: 0,
maxChars: 400,
zenActive: false
},
mounted() {
tags.attach()
},
methods: {
updateCharCount(e) {
const charCount = e.target.value.length
this.charCount = charCount
},
closeZen() {
this.zenActive = false
}
}
})
}

+ 1
- 2
assets/package.json View File

@@ -15,8 +15,7 @@
"fork-awesome": "^1.1.7",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"prismjs": "^1.19.0",
"vue": "^2.6.11"
"prismjs": "^1.19.0"
},
"devDependencies": {
"@babel/core": "^7.8.4",


+ 0
- 6
lib/akedia_web/helpers/meta.ex View File

@@ -30,10 +30,4 @@ defmodule AkediaWeb.Helpers.Meta do
<title><%= site_title() %></title>
}
end

def admin_scripts(assigns) do
~E{
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/admin.js") %>"></script>
}
end
end

+ 0
- 4
lib/akedia_web/templates/layout/app.html.eex View File

@@ -20,9 +20,5 @@
</footer>

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>

<!-- View Specific Scripts -->
<%= render_existing(@view_module, "scripts." <> @view_template, assigns) ||
render_existing(@view_module, "scripts.html", assigns) %>
</body>
</html>

+ 2
- 4
lib/akedia_web/templates/post/form.html.eex View File

@@ -1,4 +1,4 @@
<%= form_for @changeset, @action, [class: "form post vue", multipart: true], fn f -> %>
<%= form_for @changeset, @action, [class: "form post", multipart: true], fn f -> %>
<%= if @changeset.action do %>
<div class="notification is-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
@@ -16,14 +16,12 @@

<div class="field">
<div class="zen">
<input type="checkbox" id="zen-toggle-comment" v-model="zenActive">
<input type="checkbox" id="zen-toggle-comment">
<div class="zen-backdrop">
<%= textarea f, :content,
id: "content-area",
class: "textarea",
rows: 10,
"@input": "updateCharCount",
"@keyup.escape": "closeZen",
placeholder: "Compose an epic shitpost." %>
<label for="zen-toggle-comment">Zen Mode</label>
</div>


Loading…
Cancel
Save