JavaScript de-tangled
Ryan Rix
parent
6866233eef
commit
c8dcf7545b
|
|
@ -32,6 +32,13 @@ lipu_kasi-*.tar
|
|||
/lib/lipu_kasi_web.ex
|
||||
/lib/lipu_kasi_web/*.ex
|
||||
|
||||
# Controllers, Views, Templates
|
||||
/lib/lipu_kasi_web/controllers/
|
||||
/lib/lipu_kasi_web/views/page_view.ex
|
||||
/lib/lipu_kasi_web/templates/page/
|
||||
/lib/lipu_kasi_web/templates/layout/*.html.eex
|
||||
|
||||
# Assets
|
||||
/assets/js/app.js
|
||||
/assets/js/foundation.js
|
||||
/assets/js/sw.js
|
||||
|
|
|
|||
|
|
@ -83,4 +83,87 @@ In the base template I have three CSS entrypoints defined, and this is mirrored
|
|||
- [[file:assets/css/foundation.scss][foundation.scss]] - the entire Foundation CSS bundle
|
||||
- [[file:assets/css/aesthetics.scss][aesthetics.scss]] - a bundle containing font-face rules, colors, etc
|
||||
|
||||
Foundation has a [[./assets/css/_settings.scss][_settings.scss]] file
|
||||
Additionally, Foundation has a [[./assets/css/_settings.scss][_settings.scss]] file that is imported in a few places, it just sets a ton of =SCSS= variables.
|
||||
|
||||
* JavaScript
|
||||
|
||||
There are a few JavaScript entrypoints in the [[file:assets/webpack.config.js][webpack.config.js]]:
|
||||
|
||||
** =js/app.js= -- our code goes here.
|
||||
|
||||
This is where all of my front end logic will come by loaded or stored. For now there's not much, so I'll pull this out when it gets out of hand.
|
||||
|
||||
#+begin_src js :tangle assets/js/app.js
|
||||
// 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 "../css/app.scss"
|
||||
|
||||
// import "./live.js"
|
||||
|
||||
// if('serviceWorker' in navigator) {
|
||||
// navigator.serviceWorker.register('/js/sw.js', {
|
||||
// scope: '/'
|
||||
// }).then(function() {
|
||||
// console.log('Service Worker Registered');
|
||||
// });
|
||||
// }
|
||||
#+end_src
|
||||
|
||||
** =js/foundation.js= -- foundation's code goes here.
|
||||
|
||||
Loading foundation is a pretty simple affair, =foundation.core= and whatever UI elements needed are all that are loaded, and then call the foundation initialization function. Easy.
|
||||
|
||||
#+begin_src js :tangle assets/js/foundation.js
|
||||
import "jquery"
|
||||
|
||||
import "../css/foundation.scss"
|
||||
|
||||
import 'foundation-sites/dist/js/plugins/foundation.core';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.dropdownMenu.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.keyboard.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.box.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.nest.min.js';
|
||||
|
||||
$(document).foundation();
|
||||
#+end_src
|
||||
|
||||
** =js/sw.js= -- Service Worker for Progressive Web App
|
||||
|
||||
It's not clear to me how well this will handle offline behavior, I'm not sure I really care for it, though I should. The service worker will let us figure that out later, for now it caches stylesheets.
|
||||
|
||||
#+begin_src js :tangle assets/js/sw.js
|
||||
const cacheName = 'lipu-kasi';
|
||||
const filesToCache = [
|
||||
'/',
|
||||
'/css/app.css',
|
||||
'/css/foundation.css',
|
||||
'/css/aesthetics.css',
|
||||
];
|
||||
|
||||
self.addEventListener('install', function(e) {
|
||||
console.log('[lipu kasi Service Worker] Installing');
|
||||
e.waitUntil(
|
||||
caches.open(cacheName).then(function(cache) {
|
||||
console.log('[lipu kasi Service Worker] Caching files for app');
|
||||
return cache.addAll(filesToCache);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', event => {
|
||||
event.waitUntil(self.clients.claim());
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
if (event.request.method !== 'POST') {
|
||||
event.respondWith(
|
||||
fetch(event.request).catch(function() {
|
||||
return caches.match(event.request);
|
||||
})
|
||||
);
|
||||
} else {
|
||||
event.respondWith(fetch(event.request));
|
||||
}
|
||||
})
|
||||
#+end_src
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
// 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 "../css/app.scss"
|
||||
|
||||
// import "./live.js"
|
||||
|
||||
// if('serviceWorker' in navigator) {
|
||||
// navigator.serviceWorker.register('/js/sw.js', {
|
||||
// scope: '/'
|
||||
// }).then(function() {
|
||||
// console.log('Service Worker Registered');
|
||||
// });
|
||||
// }
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import "jquery"
|
||||
|
||||
import "../css/foundation.scss"
|
||||
|
||||
import 'foundation-sites/dist/js/plugins/foundation.core';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.dropdownMenu.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.keyboard.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.box.min.js';
|
||||
import 'foundation-sites/dist/js/plugins/foundation.util.nest.min.js';
|
||||
|
||||
$(document).foundation();
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
const cacheName = 'fe';
|
||||
const filesToCache = [
|
||||
'/',
|
||||
'/css/app.css',
|
||||
'/css/foundation.css',
|
||||
'/css/aesthetics.css',
|
||||
];
|
||||
|
||||
self.addEventListener('install', function(e) {
|
||||
console.log('[lipu kasi Service Worker] Installing');
|
||||
e.waitUntil(
|
||||
caches.open(cacheName).then(function(cache) {
|
||||
console.log('[lipu kasi Service Worker] Caching files for app');
|
||||
return cache.addAll(filesToCache);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', event => {
|
||||
event.waitUntil(self.clients.claim());
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
if (event.request.method !== 'POST') {
|
||||
event.respondWith(
|
||||
fetch(event.request).catch(function() {
|
||||
return caches.match(event.request);
|
||||
})
|
||||
);
|
||||
} else {
|
||||
event.respondWith(fetch(event.request));
|
||||
}
|
||||
})
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>LipuKasi · Phoenix Framework</title>
|
||||
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<section class="container">
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a href="http://phoenixframework.org/" class="phx-logo">
|
||||
<img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
|
||||
</a>
|
||||
</section>
|
||||
</header>
|
||||
<main role="main" class="container">
|
||||
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
|
||||
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
|
||||
<%= render @view_module, @view_template, assigns %>
|
||||
</main>
|
||||
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -49,9 +49,16 @@ Files which are provided from tangles will need to be managed here:
|
|||
/lib/lipu_kasi_web.ex
|
||||
/lib/lipu_kasi_web/*.ex
|
||||
|
||||
# Controllers, Views, Templates
|
||||
/lib/lipu_kasi_web/controllers/
|
||||
/lib/lipu_kasi_web/views/page_view.ex
|
||||
/lib/lipu_kasi_web/templates/page/
|
||||
/lib/lipu_kasi_web/templates/layout/*.html.eex
|
||||
|
||||
# Assets
|
||||
/assets/js/app.js
|
||||
/assets/js/foundation.js
|
||||
/assets/js/sw.js
|
||||
#+end_src
|
||||
|
||||
This file should be checked in when it's changed, along with =mix.lock=
|
||||
|
|
|
|||
Loading…
Reference in New Issue