began structure for front end theme, cleaned up watch script for theme development

sql-version-freeze
Ro 6 years ago
parent dc13a25bfb
commit 67f00e1342

@ -1,66 +1,17 @@
var express = require('express'); var express = require('express');
var router = express.Router(); var router = express.Router();
var Models = require('../../models'); //var Models = require('../../models');
var config = require('../../../config/site-settings.json'); var config = require('../../../config/site-settings.json');
module.exports = function (session) { module.exports = function() {
//-------------------------- //--------------------------
// Index // Index
//-------------------------- //--------------------------
router.get('/:page?', function (req, res) { router.get('/:page?', function(req, res) {
res.render(config.theme + '/index', {
if (req.params.page == null || req.params.page == "") { theme: config.theme,
Models.FolioProject.findAll({ title: config.title,
limit: 5, user_status: 'What up, random person'
order: [ });
['id', 'DESC']
]
}).then(entries => {
Models.Post.findAll({
limit: 5,
order: [
['id', 'DESC']
]
}).then(posts => {
Models.Bookmark.findAll({
limit: 5,
order: [
['id', 'DESC']
]
}).then(saved => {
res.render(config.theme + '/index', {
theme: config.theme,
title: 'The Twelfth House | Home of creative technologist, beat maker and over-thinker, Ro',
user_status: "What up, random person",
mode: 'index',
folio: entries,
posts: posts,
bookmarks: saved
});
}).catch(err => {
console.log(err);
})
})
}).then(function (value) {
//console.log(value);
}).catch(function (err) {
console.log(err);
})
} else {
switch (req.params.page) {
case "dashboard":
console.log('here')
break;
default:
console.log(req.params.page)
break;
}
}
}); });
return router; return router;
} };

@ -4,13 +4,13 @@
"private": true, "private": true,
"description": "The most chill blog framework ever.", "description": "The most chill blog framework ever.",
"repository": "https://code.playvicio.us/Are0h/Fipamo", "repository": "https://code.playvicio.us/Are0h/Fipamo",
"theme": "default-light", "theme": "default-dark",
"scripts": { "scripts": {
"start": "pm2 --node-args='-r esm' start init.js", "start": "pm2 --node-args='-r esm' start init.js",
"stop": "pm2 stop init.js", "stop": "pm2 stop init.js",
"dev": "nodemon -r esm init.js --ignore node_modules/ -e js", "dev": "nodemon -r esm init.js --ignore node_modules/ -e js",
"watch-front-scripts": "parcel watch themes/$npm_package_theme/src/com/Start.jsx --out-dir themes/$npm_package_theme/assets/js --out-file start.min.js --public-url /$npm_package_theme/assets/js", "debug": "nodemon inspect -r esm init.js --ignore node_modules/ -e js",
"watch-front-styles": "stylus -w -m -o themes/$npm_package_theme/assets/css themes/$npm_package_theme/src/styles/base.styl", "watch-front": "stylus -w -m -o themes/$npm_package_theme/assets/css themes/$npm_package_theme/src/styles/base.styl & parcel watch themes/$npm_package_theme/src/com/Start.js --out-dir themes/$npm_package_theme/assets/js --out-file start.min.js --public-url /$npm_package_theme/assets/js",
"build-front-kit": "uglifyjs node_modules/scramble-text/dist/ScrambleText.min.js node_modules/animejs/anime.min.js node_modules/reframe.js/dist/reframe.min.js -c -o themes/$npm_package_theme/assets/js/toolkit.min.js", "build-front-kit": "uglifyjs node_modules/scramble-text/dist/ScrambleText.min.js node_modules/animejs/anime.min.js node_modules/reframe.js/dist/reframe.min.js -c -o themes/$npm_package_theme/assets/js/toolkit.min.js",
"watch-back": "stylus -w -m -o themes/dash/assets/css themes/dash/src/styles/dash.styl & parcel watch themes/dash/src/com/Start.js --out-dir themes/dash/assets/js --out-file dash.min.js --public-url /dash/assets/js", "watch-back": "stylus -w -m -o themes/dash/assets/css themes/dash/src/styles/dash.styl & parcel watch themes/dash/src/com/Start.js --out-dir themes/dash/assets/js --out-file dash.min.js --public-url /dash/assets/js",
"build-back-kit": "uglifyjs themes/dash/src/libraries/highlight.pack.js node_modules/sortablejs/Sortable.min.js node_modules/scramble-text/dist/ScrambleText.min.js node_modules/animejs/anime.min.js node_modules/reframe.js/dist/reframe.min.js -c -o themes/dash/assets/js/dashkit.min.js" "build-back-kit": "uglifyjs themes/dash/src/libraries/highlight.pack.js node_modules/sortablejs/Sortable.min.js node_modules/scramble-text/dist/ScrambleText.min.js node_modules/animejs/anime.min.js node_modules/reframe.js/dist/reframe.min.js -c -o themes/dash/assets/js/dashkit.min.js"

@ -9020,7 +9020,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname; var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "54198" + '/'); var ws = new WebSocket(protocol + '://' + hostname + ':' + "57611" + '/');
ws.onmessage = function (event) { ws.onmessage = function (event) {
var data = JSON.parse(event.data); var data = JSON.parse(event.data);

File diff suppressed because one or more lines are too long

@ -25,7 +25,6 @@ export default class Base {
.request('/api/post/json', DataEvent.SETTINGS_LOADED) .request('/api/post/json', DataEvent.SETTINGS_LOADED)
.then(response => { .then(response => {
let posts = JSON.parse(response.request['response']); let posts = JSON.parse(response.request['response']);
let list = []; let list = [];
for (let index = 0; index < posts.length; index++) { for (let index = 0; index < posts.length; index++) {
list.push({ id: posts[index].id, post: posts[index].post }); list.push({ id: posts[index].id, post: posts[index].post });

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -1,16 +0,0 @@
extends frame
block main-content
-var featureUrl
if(feature_image.length != 0)
-featureUrl = feature_image[0].substr(7, feature_image[0].length)
else
-featureUrl = ''
section.content#post-content
#header-post
#header-one
label#the-title
a(href="/") thetwelfthhouse
span#post-title= title
img#featured-img(src=featureUrl)
#post-display
#post-text !{entry}

@ -1,32 +0,0 @@
extends frame
block main-content
section.content#blog-content
header.columns#header
#header-one.column
label#the-title
a(href="/") thetwelfthhouse
#header-two.column
label Thoughts and other weirdness.
#blog-display
.blog-list#blog-list
- var index = 0
- for ( index; index < items.length; index++)
-var image = JSON.parse(items[index].feature_image)[0]
-var featured = String(image).substr(7, String(image).length)
a(href= "/blog/"+items[index].slug)
.blog-entry(id=items[index].id style="background-image:url("+featured+")")
label= items[index].title
#paginate
- var prev = page_index-1
if prev < 1
- prev = page_count
- var next = ++page_index
if next > page_count
- next = 1
a(href="/blog/page/"+prev)
i.fa.fa-chevron-left
label= "page "+String(page_index-1)+" of "+page_count
a(href="/blog/page/"+next)
i.fa.fa-chevron-right

@ -1,36 +0,0 @@
extends frame
block main-content
section.content#bm-content
header.columns#header
#header-one.column
label#the-title
a(href="/") thetwelfthhouse
#header-two.column
| Fipamo means to save.
#bookmark-display
.bookmark-list#bookmark-list
- var index = 0;
- for ( index; index < items.length; index++)
.bookmark-entry(id=items[index]._id style="background-image:url("+items[index].image+")")
a(target='_blank' href= items[index].url)
.bookmark-info#bookmark-info
- var bmlabel = items[index].title
if bmlabel == "" || bmlabel == null
- bmlabel = items[index].url
label= bmlabel
#paginate-control
#paginate
- var prev = page_index-1
if prev < 1
- prev = page_count
- var next = ++page_index
if next > page_count
- next = 1
a(href="/fipamo/"+prev)
i.fa.fa-chevron-left.fa-2x
label= "Page "+String(page_index-1)+" of "+page_count
a(href="/fipamo/"+next)
i.fa.fa-chevron-right.fa-2x

@ -11,8 +11,6 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
link(rel='stylesheet', href='/'+theme+'/assets/css/base.css', type='text/css') link(rel='stylesheet', href='/'+theme+'/assets/css/base.css', type='text/css')
link(rel='stylesheet', href='/'+theme+'/assets/css/gruvbox-dark.css', type='text/css') link(rel='stylesheet', href='/'+theme+'/assets/css/gruvbox-dark.css', type='text/css')
body body
#loader
i.fa.fa-cog.fa-spin.fa-4x.fa-fw
.main-container#main-content .main-container#main-content
block main-content block main-content
script(src='/'+theme+'/assets/js/toolkit.min.js' type="text/javascript") script(src='/'+theme+'/assets/js/toolkit.min.js' type="text/javascript")

@ -2,48 +2,5 @@ extends frame
block main-content block main-content
section#index-content section#index-content
header.columns#header | hello
#float-bg
img(src=theme+'/assets/images/eye-beamz.png')
#header-one.column
#header-two.column
label#the-title
a(href="/") thetwelfthhouse
#the-intro
| I'm Ro. I am a
a(href='/work') freelancer
|,
a(href='/blog/page/1') thinker
|,
a(href='https://playvicious.social' target="_blank") masto admin
|,
a(href='/fipamo') a pack rat
|, and I'm kinda trying to
a(href="https://www.patreon.com/Are0h" target="_blank") save the world.
#index-display
#recent-title.index-block
| "Boards do not hit back" © Bruce Lee
//svg(viewBox="0 0 20 20" class="icons")
use(xlink:href='/'+theme+'/assets/images/sprite.svg#entypo-air')
#works.index-block
h3 Works
-var index = 0;
-for (index; index<folio.length; index++)
a(href='/work/'+folio[index].slug)
span= folio[index].title
br
#bookmarks.index-block
h3 Saved
-var index = 0;
-for (index; index<bookmarks.length; index++)
a(href=bookmarks[index].url)
span= bookmarks[index].title
br
#posts.index-block
h3 Posts
-var index = 0;
-for (index; index<posts.length; index++)
a(href='/blog/'+posts[index].slug)
span= posts[index].title
br

@ -1,23 +1,21 @@
import EventEmitter from '../events/EventEmitter.jsx';; export default class Base {
class Animate extends EventEmitter {
//-------------------------- //--------------------------
// constructor // constructor
//-------------------------- //--------------------------
//TODO: Flip to unified structure defined in BMG, brah
constructor() { constructor() {
super(); var self = this;
this.start();
}
start() {
console.log('FEEL TEH BASE');
} }
//-------------------------- //--------------------------
// methods // methods
//-------------------------- //--------------------------
object(properties) {
var animation = anime(
properties
);
//animation.start(properties);
}
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
} }
export default Animate

@ -1,45 +0,0 @@
import DataUtils, { REQUEST_TYPE_GET, REQUEST_TYPE_PUT, REQUEST_TYPE_POST, REQUEST_TYPE_DELETE, CONTENT_TYPE_JSON, CONTENT_TYPE_FORM } from './tools/utilities/DataUtils.jsx';
import * as DataEvent from './tools/events/DataEvent.jsx';
import DisplayManager from './controllers/DisplayManager.jsx';
class Base {
//--------------------------
// constructor
//--------------------------
//TODO: Flip to unified structure defined in BMG, brah
constructor() {
var self = this;
var admin = [];
var folio = [];
var displayManager = [];
this.dataUtils = new DataUtils();
this.settings = [];
this.start();
}
start() {
this.displayManager = new DisplayManager();
}
//--------------------------
// methods
//--------------------------
loadSettings() {
var self = this;
this.dataUtils.request('/base-assets/data/settings.json', DataEvent.SETTINGS_LOADED)
.then((response) => {
this.settings = JSON.parse(response['request'].response);
this.start();
//transfer
})
.catch((err) => {
//console.log(err);
});
}
//--------------------------
// event handlers
//--------------------------
}
export { Base as default }

@ -0,0 +1,9 @@
import Base from './Base';
document.addEventListener(
'DOMContentLoaded',
function() {
var base = new Base();
},
false
);

@ -1,6 +0,0 @@
import Base from './Base.jsx'
document.addEventListener('DOMContentLoaded', function() {
var base = new Base();
}, false);

@ -0,0 +1,21 @@
export default class Post {
//--------------------------
// constructor
//--------------------------
//TODO: Flip to unified structure defined in BMG, brah
constructor() {
var self = this;
this.start();
}
start() {
console.log('YAAAAASSSS');
}
//--------------------------
// methods
//--------------------------
//--------------------------
// event handlers
//--------------------------
}

@ -1,77 +0,0 @@
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import ProjectFolio from '../tasks/ProjectFolio.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import DisplayAdminBlog from './DisplayAdminBlog.jsx'
import DisplayAdminFipamo from './DisplayAdminFipamo.jsx';
class DisplayAdmin {
//--------------------------
// constructor
//--------------------------
constructor(section, page) {
this.section = section;
this.page = page;
this.current = null;
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
let self = this;
new Animate().object({
targets: document.getElementById('loader'),
duration: 300,
opacity: 0,
easing: 'easeInOutQuad',
complete: function () {
document.getElementById('loader').style.display = 'none';
document.getElementById('loader').style.visibility = 'hidden';
new Animate().object({
targets: document.getElementById('header'),
duration: 10,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
new TextEffects().scramble(document.getElementById('the-title'), 50, function () {
document.getElementById('loader').style.display = 'none';
document.getElementById('loader').style.visibility = 'hidden';
console.log(self.page)
switch(self.page)
{
case "fipamo":
self.current = new DisplayAdminFipamo();
break;
case "blog":
self.current = new DisplayAdminBlog();
break
default:
console.log("ADMIN INDEX");
break;
}
});
}
});
}
});
}
//--------------------------
// event handlers
//--------------------------
}
DisplayAdmin.uploadFiles = [];
export {
DisplayAdmin as
default
}

@ -1,156 +0,0 @@
//TOOLS
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
import BlogPost from '../tasks/BlogPost.jsx';
class DisplayAdminBlog {
//--------------------------
// constructor
//--------------------------
constructor() {
reframe('iframe');
this.uploadFiles;
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
new Animate().object({
targets: document.getElementById('loader'),
duration: 300,
opacity: 0,
easing: 'easeInOutQuad',
complete: function() {
document.getElementById('loader').style.display = 'none';
document.getElementById('loader').style.visibility = 'hidden';
new Animate().object({
targets: document.getElementById('header'),
duration: 10,
opacity: 1,
easing: 'easeInOutQuad',
complete: function() {
new TextEffects().scramble(document.getElementById('the-title'), 50, function() {
if (document.getElementById('the-intro'))
document.getElementById('the-intro').style.opacity = 1;
if (document.getElementById('blog-entry'))
document.getElementById('blog-entry').style.opacity = 1;
//START SEcTION
});
}
});
}
});
if (document.getElementById('featured-image-drop')) {
console.log("HERE");
document.getElementById('featured-image-drop').addEventListener('dragover', this.handleDragOver, false);
document.getElementById('featured-image-drop').addEventListener('drop', this.handleDrop, false);
document.getElementById('featured-click').addEventListener('change', this.handleClicked, false);
document.getElementById("post-sumbit-btn").addEventListener('click', f => {
f.preventDefault();
let edit = false;
if (f.target.getAttribute('data-action') == 'blog-update')
edit = true;
console.log('clicked')
new BlogPost().submitPost(edit, DisplayAdminBlog.uploadFiles).then((response) => {
let note = JSON.parse(response['response']['request'].response);
console.log(note.message);
}).catch((err) => {
console.log(err)
});
});
}
}
//--------------------------
// event handlers
//--------------------------
handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
handleClicked(e) {
e.stopPropagation();
e.preventDefault();
console.log("IMAGES " + e.target.files);
DisplayAdminBlog.uploadFiles = e.target.files;
for (var i = 0, f; f = DisplayAdminBlog.uploadFiles[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(f) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = [
'<img src="',
f.target.result,
'" title="',
escape(theFile.name),
'"/>'
].join('');
//document.getElementById('featured-image-drop').insertBefore(span, null);
document.getElementById('featured-image-drop').innerHTML = '';
document.getElementById('featured-image-drop').appendChild(span);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
handleDrop(e) {
e.stopPropagation();
e.preventDefault();
DisplayBlog.uploadFiles = e.dataTransfer.files;
//console.log(MemberArea.uploadFiles.length);
for (var i = 0, f; f = DisplayBlog.uploadFiles[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(f) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = [
'<img src="',
f.target.result,
'" title="',
escape(theFile.name),
'"/>'
].join('');
//document.getElementById('featured-image-drop').insertBefore(span, null);
document.getElementById('featured-image-drop').innerHTML = '';
document.getElementById('featured-image-drop').appendChild(span);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
}
DisplayAdminBlog.uploadFiles = [];
export {
DisplayAdminBlog as
default
}

@ -1,56 +0,0 @@
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
import TaskFipamo from '../tasks/TaskFipamo.jsx';
class DisplayAdminFipamo {
//--------------------------
// constructor
//--------------------------
constructor() {
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
document.getElementById("saved-sumbit-btn").addEventListener('click', f => {
console.log('CLICKED');
let edit = false;
if (f.target.getAttribute('data-action') == 'saved-edit')
edit = true;
new TaskFipamo().submitLink(edit).then((response) => {
let note = JSON.parse(response['response']['request'].response);
if(note.message == 'link added' || note.message == 'bookmark updated')
{
switch(note.message)
{
case 'link added':
document.getElementById('saved_text').value = ''
break
case 'bookmark updated':
document.getElementById('saved_text').value = 'updated'
break
}
}else{
console.log(note);
}
}).catch((err) => {
//console.log(err)
});
});
}
//--------------------------
// event handlers
//--------------------------
}
export {
DisplayAdminFipamo as
default
}

@ -1,75 +0,0 @@
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import ProjectFolio from '../tasks/ProjectFolio.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
class DisplayAdminFolio {
//--------------------------
// constructor
//--------------------------
constructor() {
var self = this;
this.uploadFiles;
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
let self = this;
new Animate().object({
targets: document.getElementById('loader'),
duration: 300,
opacity: 0,
easing: 'easeInOutQuad',
complete: function () {
document.getElementById('loader').style.display = 'none';
document.getElementById('loader').style.visibility = 'hidden';
if (document.getElementById('project-list')) {
sortable('.project-list', {
handle: '.drag-handle'
})[0].addEventListener('sortupdate', function (e) {
let sortList = [];
let sortItems = document.getElementById('project-list').children;
for (var i = 0; i < sortItems.length; i++) {
sortList.push({
'sortIndex': i,
'sortID': sortItems[i].getAttribute('data-id')
});
}
new DataUtils().request('/api/folio/sort', DataEvent.PROJECTS_SORTED, REQUEST_TYPE_POST, CONTENT_TYPE_JSON, sortList)
.then((response) => {
console.log(JSON.parse(response.request))
}).catch((err) => {
console.log(err)
})
});
}
new Animate().object({
targets: document.getElementById('header'),
duration: 10,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {}
});
}
});
}
//--------------------------
// event handlers
//--------------------------
}
DisplayAdminFolio.uploadFiles = [];
export {
DisplayAdminFolio as
default
}

@ -1,36 +0,0 @@
//TOOLS
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
class DisplayBlog {
//--------------------------
// constructor
//--------------------------
constructor() {
reframe('iframe');
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
console.log("START BLOG");
}
//--------------------------
// event handlers
//--------------------------
}
export {
DisplayBlog as
default
}

@ -1,79 +0,0 @@
//TOOLS
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
//Client-side Pages
import DisplayIndex from './DisplayIndex.jsx';
import DisplayWork from './DisplayWork.jsx';
import DisplayBlog from './DisplayBlog.jsx';
import DisplayFi from './DisplayFi.jsx';
class DisplayClient {
//--------------------------
// constructor
//--------------------------
constructor(section, page) {
this.section = section;
this.page = page;
this.current = null;
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
let self = this;
new Animate().object({
targets: document.getElementById('loader'),
duration: 300,
opacity: 0,
easing: 'easeInOutQuad',
complete: function () {
document.getElementById('loader').style.display = 'none';
document.getElementById('loader').style.visibility = 'hidden';
new Animate().object({
targets: document.getElementById('header'),
duration: 10,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
new TextEffects().scramble(document.getElementById('the-title'), 50, function () {
switch(self.section){
case "blog":
self.current = new DisplayBlog();
break
case "work":
self.current = new DisplayWork();
break
case "fipamo":
self.current = new DisplayFi();
break
default:
self.current = new DisplayIndex();
break
}
});
}
});
}
});
}
//--------------------------
// event handlers
//--------------------------
}
export {
DisplayClient as
default
}

@ -1,35 +0,0 @@
export const DisplayID = "Display-Fi";
import DataUtils, { REQUEST_TYPE_GET, REQUEST_TYPE_PUT, REQUEST_TYPE_POST, REQUEST_TYPE_DELETE, CONTENT_TYPE_JSON, CONTENT_TYPE_FORM } from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
class DisplayFi {
//--------------------------
// constructor
//--------------------------
constructor() {
this.dataUtils = new DataUtils();
//this.mailer = new Mailer();
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
let self = this;
console.log("START BOOKMARKS");
}
//--------------------------
// event handlers
//--------------------------
}
export { DisplayFi as default }

@ -0,0 +1,21 @@
export default class DisplayIndex {
//--------------------------
// constructor
//--------------------------
//TODO: Flip to unified structure defined in BMG, brah
constructor() {
var self = this;
this.start();
}
start() {
console.log('YAAAAASSSS');
}
//--------------------------
// methods
//--------------------------
//--------------------------
// event handlers
//--------------------------
}

@ -1,65 +0,0 @@
//TOOLS
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
class DisplayIndex {
//--------------------------
// constructor
//--------------------------
constructor() {
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
document.getElementById('the-intro').style.opacity = 1;
new Animate().object({
targets: document.getElementById('recent-work'),
duration: 200,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
}
});
new Animate().object({
targets: document.getElementById('recent-blog'),
duration: 500,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
}
});
new Animate().object({
targets: document.getElementById('float-bg'),
duration: 2000,
opacity: 1,
easing: 'easeInQuad',
complete: function () {
}
});
}
//--------------------------
// event handlers
//--------------------------
}
export {
DisplayIndex as
default
}

@ -0,0 +1,21 @@
export default class DisplayManager {
//--------------------------
// constructor
//--------------------------
//TODO: Flip to unified structure defined in BMG, brah
constructor() {
var self = this;
this.start();
}
start() {
console.log('YAAAAASSSS');
}
//--------------------------
// methods
//--------------------------
//--------------------------
// event handlers
//--------------------------
}

@ -1,50 +0,0 @@
//TOOLS
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import DisplayAdmin from './DisplayAdmin.jsx';
import DisplayClient from './DisplayClient.jsx';
class DisplayManager
{
//--------------------------
// constructor
//--------------------------
constructor()
{
this.dataUtils = new DataUtils();
this.currentDisplay = '';
this.urlPieces = document.URL.split("/");
//grab url so system knows what to display
this.chooseDisplay(this.urlPieces[3], this.urlPieces[4]);
}
//--------------------------
// methods
//--------------------------
start()
{}
chooseDisplay(section, page)
{
this.currentDisplay = '';
switch (section) {
case 'admin':
this.currentDisplay = new DisplayAdmin(section, page);
break
default:
this.currentDisplay = new DisplayClient(section, page);
break;
}
}
//--------------------------
// event handlers
//--------------------------
}
export {DisplayManager as default}

@ -1,130 +0,0 @@
export const DisplayID = "Display-Work";
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import Animate from '../tools/effects/Animate.jsx';
import * as Ease from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
import Mailer from '../tasks/Mailer.jsx'
class DisplayWork {
//--------------------------
// constructor
//--------------------------
constructor() {
this.dataUtils = new DataUtils();
this.mailer = new Mailer();
this.start();
}
//--------------------------
// methods
//--------------------------
start() {
let self = this;
if (document.getElementById('work-display')) {
new Animate().object({
targets: document.getElementById('work-display'),
duration: 500,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
self.sortItemList();
new Animate().object({
targets: document.getElementById('float-bg'),
duration: 2000,
opacity: 1,
easing: 'easeInQuad',
complete: function () {
}
});
}
});
new Animate().object({
targets: document.getElementById('work-header'),
duration: 500,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
}
});
} else {
new Animate().object({
targets: document.getElementById('folio-header'),
duration: 500,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
self.showFolioImages();
}
});
}
}
sortItemList() {
let workItems = document.getElementById('work-list').children;
let trans = 300;
let self = this;
for (var i = 0; i < workItems.length; i++) {
//item.addEventListener('click', f => this.handleWorkList(f))
new Animate().object({
targets: workItems[i],
duration: trans,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
//self.showFolioImages();
}
});
trans = trans + 200;
if (i == workItems.length - 1) {
new Animate().object({
targets: document.getElementById('contact'),
duration: 300,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
//self.showFolioImages();
}
});
}
}
}
showFolioImages() {
let images = document.getElementById('project-images').children;
let trans = 300;
let self = this;
for (var i = 0; i < images.length; i++) {
//item.addEventListener('click', f => this.handleWorkList(f))
new Animate().object({
targets: images[i],
duration: trans,
opacity: 1,
easing: 'easeInOutQuad',
complete: function () {
//self.showFolioImages();
}
});
trans = trans + 200
}
}
//--------------------------
// event handlers
//--------------------------
}
export {
DisplayWork as
default
}

@ -1,82 +0,0 @@
import DataUtils, { REQUEST_TYPE_GET, REQUEST_TYPE_PUT, REQUEST_TYPE_POST, REQUEST_TYPE_DELETE, CONTENT_TYPE_JSON, CONTENT_TYPE_FORM } from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import StringUtils from '../tools/utilities/StringUtils.jsx';
class BlogPost {
//--------------------------
// constructor
//--------------------------
constructor() {
var folio = [];
this.dataUtils = new DataUtils();
}
//--------------------------
// methods
//--------------------------
start() {}
submitPost(edit, uploadFiles) {
let self = this;
return new Promise(function(resolve, reject) {
//collect form data
//if(!this.validateForm())
var postData = new FormData();
//let projectImages = document.getElementById('projectImages');
//var fileSelect = projectImages;
var files = uploadFiles;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Check the file type.
if (!file.type.match('image.*')) {
continue;
}
// Add the file to the request.
postData.append('feature_image', file, file.name);
}
//var category = document.getElementById("content_category");
//let project_form = document.forms.namedItem("folio-project");
var txt = document.createElement("textarea");
txt.innerHTML = document.getElementById('entry_text').innerHTML;
console.log(txt);
postData.append("title", document.getElementById('entry_title').value);
postData.append('slug', new StringUtils().cleanString(document.getElementById('entry_title').value));
postData.append("entry_plaintext", txt.value);
postData.append("tags", document.getElementById('entry_tags').value);
let postURL;
let postEventType;
if (edit) {
let postID = document.getElementById('post-sumbit-btn').getAttribute('data-id');
console.log("POST ID: "+postID);
postURL = "/api/blog/update/" + postID;
postEventType = DataEvent.POST_UPDATED;
} else {
postURL = "/api/blog/add";
postEventType = DataEvent.POST_ADDED;
}
self.dataUtils.request(postURL, postEventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, postData)
.then((response) => {
resolve({
response
})
}).catch((err) => {
reject({
err
});
})
});
}
validateForm() {
let valid = false;
if (this.entry_form.title.value == "" || this.entry_form.price.value == "" || this.entry_form.description == "") {
return valid;
} else {
valid = true;
return valid;
}
}
//--------------------------
// event handlers
//--------------------------
}
export { BlogPost as default }

@ -1,69 +0,0 @@
import Animate from '../tools/effects/Animate.jsx';
import TextEffects from '../tools/effects/TextEffects.jsx';
class Mailer {
//--------------------------
// constructor
//--------------------------
constructor(element) {
this.response = element
if (document.getElementById('request-btn')) {
document.getElementById('request-btn').addEventListener("click", f => {
f.preventDefault();
this.sendMail()
})
}
}
//--------------------------
// methods
//--------------------------
sendMail()
{
var self = this;
//if(!this.validateForm())
var mailData = []
let requestForm = document.forms.namedItem("request-form");
let serviceType = document.getElementById('service_type')
//console.log(serviceType.options[serviceType.selectedIndex].text);
mailData = {
"email": requestForm.email.value,
"client": requestForm.client.value,
"description": requestForm.description.value,
"type": serviceType.options[serviceType.selectedIndex].text
};
var request = new XMLHttpRequest();
request.open("POST", "/mailer", true);
request.setRequestHeader("Content-type", "application/json")
request.onload = function(oEvent) {
if (request.status == 200) {
let response = JSON.parse(request.response);
if (response.message == "message sent") {
requestForm.reset();
self.response.innerHTML = "HEY. THANKS FOR REACHING OUT. YOU'RE AWESOME"
new TextEffects().scramble(self.response, 50, function () {
});
} else {
//console.log(response.detail);
}
} else {
//console.log(request);
}
};
request.send(JSON.stringify(mailData));
}
//--------------------------
// event handlers
//--------------------------
}
export {Mailer as default}

@ -1,101 +0,0 @@
import DataUtils, { REQUEST_TYPE_GET, REQUEST_TYPE_PUT, REQUEST_TYPE_POST, REQUEST_TYPE_DELETE, CONTENT_TYPE_JSON, CONTENT_TYPE_FORM } from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import StringUtils from '../tools/utilities/StringUtils.jsx';
class ProjectFolio {
//--------------------------
// constructor
//--------------------------
constructor() {
var folio = [];
this.dataUtils = new DataUtils();
}
//--------------------------
// methods
//--------------------------
start() {}
submitProject(edit, uploadFiles) {
let self = this;
return new Promise(function(resolve, reject) {
//collect form data
//if(!this.validateForm())
var projectData = new FormData();
//let projectImages = document.getElementById('projectImages');
//var fileSelect = projectImages;
var files = uploadFiles;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Check the file type.
if (!file.type.match('image.*')) {
continue;
}
// Add the file to the request.
projectData.append('folioImages', file, file.name);
}
var category = document.getElementById("content_category");
let project_form = document.forms.namedItem("folio-project");
projectData.append("title", project_form.title.value);
projectData.append('slug', new StringUtils().cleanString(project_form.title.value));
projectData.append("tools", project_form.tools.value);
projectData.append("url", project_form.url.value);
projectData.append("description", project_form.description.value);
projectData.append("type", type.options[type.selectedIndex].text);
let postURL
let postEventType
if (edit) {
let postID = document.getElementById('btn-submit').getAttribute('data-id');
postURL = "/api/folio/update/" + postID;
postEventType = DataEvent.PROJECT_UPDATED;
} else {
postURL = "/api/folio/add";
postEventType = DataEvent.PROJECT_ADDED;
}
self.dataUtils.request(postURL, postEventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, projectData)
.then((response) => {
resolve({
response
})
}).catch((err) => {
reject({
err
});
})
});
}
addNewProject(uploadFiles) {
var request = new XMLHttpRequest();
request.open("POST", "/folio", true);
request.onload = function(oEvent) {
if (request.status == 200) {
let response = JSON.parse(request.response);
if (response.message == "New Content Entered") {
console.log("SET");
project_form.reset();
} else {
console.log(response.message);
}
} else {
//console.log(request);
}
};
request.send(projectData);
}
validateForm() {
let valid = false;
if (this.entry_form.title.value == "" || this.entry_form.price.value == "" || this.entry_form.description == "") {
return valid;
} else {
valid = true;
return valid;
}
}
//--------------------------
// event handlers
//--------------------------
}
export { ProjectFolio as default }

@ -1,72 +0,0 @@
import DataUtils, {
REQUEST_TYPE_GET,
REQUEST_TYPE_PUT,
REQUEST_TYPE_POST,
REQUEST_TYPE_DELETE,
CONTENT_TYPE_JSON,
CONTENT_TYPE_FORM
} from '../tools/utilities/DataUtils.jsx';
import * as DataEvent from '../tools/events/DataEvent.jsx';
import StringUtils from '../tools/utilities/StringUtils.jsx';
class TaskFipamo {
//--------------------------
// constructor
//--------------------------
constructor() {
var folio = [];
this.dataUtils = new DataUtils();
}
//--------------------------
// methods
//--------------------------
start() {}
submitLink(edit) {
let self = this;
return new Promise(function (resolve, reject) {
let link_data = '';
let postURL;
let postEventType;
console.log('EDIT: '+edit);
if (edit) {
//TODO: FIX TAGS,NEEDS TO BE SUBMITTED AS AN ARRAY
link_data = {
"title": document.getElementById('saved_title').value,
"tags": document.getElementById('saved_tags').value,
"image": document.getElementById('saved_image').value
};
let savedID = document.getElementById('saved-sumbit-btn').getAttribute('data-id');
postURL = "/api/bookmarks/update/" + savedID;
postEventType = DataEvent.LINK_UPDATED;
console.log('url'+postURL);
} else {
link_data = {
"url": document.getElementById('saved_text').value
};
postURL = "/api/bookmarks/add";
postEventType = DataEvent.LINK_ADDED;
}
console.log('POSTING');
self.dataUtils.request(postURL, postEventType, REQUEST_TYPE_POST, CONTENT_TYPE_JSON, link_data)
.then((response) => {
resolve({
response
})
}).catch((err) => {
reject({
err
});
})
});
}
//--------------------------
// event handlers
//--------------------------
}
export {
TaskFipamo as
default
}

@ -1,137 +0,0 @@
class UserAuthentication {
//--------------------------
// constructor
//--------------------------
constructor() {
var self = this;
}
//--------------------------
// methods
//--------------------------
start()
{
}
handleUserSignUp(userSignupForm)
{
//e.preventDefault();
let signup_form = document.forms.namedItem(userSignupForm);
let social_preferences = {"social":[
{"service":"twitter", "url":""},
{"service":"fb", "url":""},
{"service":"instagram", "url":""},
{"service":"pinterest", "url":""}
]};
let mail_preferences = {"mail":[
{"category":"video", "enabled":"false"},
{"category":"books", "enabled":"false"},
{"category":"graphic_novels", "enabled":"false"},
{"category":"comics", "enabled":"false"}
]};
//var oOutput = document.querySelector("div"),
let signup_handle = signup_form.handle.value;
let signup_firstname = signup_form.firstname.value;
let signup_lastname = signup_form.lastname.value;
let signup_email = signup_form.email.value;
let signup_password = signup_form.password.value;
let social = JSON.stringify(social_preferences);
let mail = JSON.stringify(mail_preferences);
//oData.append("CustomField", "This is some extra data");
var request = new XMLHttpRequest();
request.open("POST", "/signup", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader('Cache-Control', 'max-age=0');
request.setRequestHeader('Upgrade-Insecure-Requests', '1');
request.onload = function(oEvent) {
if (request.status == 200) {
let response = JSON.parse(request.response);
if(response.message == "USER ADDED")
{
document.body.dispatchEvent( new CustomEvent(USER_STATUS,
{
'detail':
{
type:"USER_ADDED",
data:response.message
}
}) );
}else{
document.body.dispatchEvent( new CustomEvent(USER_STATUS,
{
'detail':
{
type:"USER_NOT_ADDED",
data:response.message
}
}) );
}
} else {
console.log(request);
}
};
request.send('handle='+signup_handle+'&firstname='+signup_firstname+'&lastname='+signup_lastname+'&email='+signup_email+'&password='+signup_password+"&social="+social+"&preferences="+mail);
}
handleUserLogin(userLoginForm)
{
//e.preventDefault();
let login_form = document.forms.namedItem(userLoginForm);
//var oOutput = document.querySelector("div"),
let login_handle = login_form.handle.value;
let login_password = login_form.password.value;
//oData.append("CustomField", "This is some extra data");
var request = new XMLHttpRequest();
request.open("POST", "/login", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader('Cache-Control', 'max-age=0');
request.setRequestHeader('Upgrade-Insecure-Requests', '1');
request.onload = function(oEvent) {
if (request.status == 200) {
let response = JSON.parse(request.response);
if(response.message == "USER FOUND")
{
document.body.dispatchEvent( new CustomEvent(USER_STATUS,
{
'detail':
{
type:"USER_LOGIN_GOOD",
data:login_handle
}
}) );
}else{
document.body.dispatchEvent( new CustomEvent(USER_STATUS,
{
'detail':
{
type:"USER_LOGIN_BAD",
data:response.message
}
}) );
}
} else {
console.log(request);
}
};
request.send('handle='+login_handle+'&password='+login_password);
}
//--------------------------
// event handlers
//--------------------------
}
export {UserAuthentication as default}
export const USER_STATUS = "userStatus"

@ -1,70 +0,0 @@
class TexEffects {
//--------------------------
// constructor
//--------------------------
constructor() {}
//--------------------------
// methods
//--------------------------
scramble(obj, offset, complete)
{
var scrambleText = new ScrambleText(obj, {
timeOffset: offset,
chars: [
'安',
'以',
'宇',
'衣',
'於',
'加',
'幾',
'久',
'計',
'己',
'左',
'之',
'寸',
'世',
'曽',
'太',
'知',
'川',
'天',
'止',
'奈',
'仁',
'奴',
'称',
'乃',
'波',
'比',
'不',
'部',
'保',
'末',
'美',
'武',
'女',
'毛',
'也',
'為',
'由',
'恵',
'与',
'良',
'利',
'留',
'礼',
'呂',
'和',
'遠',
'无'
],
callback: complete
}).start();
}
//--------------------------
// event handlers
//--------------------------
}
export default TexEffects

@ -1,28 +0,0 @@
export const MEMBER_STATUS = "memberStatus";
export const LOGIN_STATUS = 'loginStatus';
export const SUPPORTER_FOUND = 'SUPPORTER FOUND';
export const SUPPORTER_LISTED = 'SUPPORTER LISTED';
export const SUPPORTER_NOT_FOUND = 'SUPPORTER NOT FOUND';
export const MEMBER_ADDED = 'MEMBER ADDED';
export const MEMBER_NOT_ADDED = 'MEMBER NOT ADDED';
export const MEMBER_LOGIN_GOOD = 'MEMBER LOGIN GOOD';
export const MEMBER_LOGIN_LAME = 'MEMBER LOGIN LAME';
export const MEMBER_EXISTS = 'USER ALREADY EXISTS';
export const MEMBER_LOGIN_MISSING = 'Missing credentials';
class AuthEvent
{
//--------------------------
// methods
//--------------------------
//--------------------------
// event handlers
//--------------------------
}
export default new AuthEvent

@ -1,27 +0,0 @@
export const REQUEST_GOOD = 'requestGood';
export const REQUEST_LAME = 'requestLame';
export const IMG_REQUEST_GOOD = 'imgRequestGood';
export const IMG_REQUEST_LAME = 'imgRequestLame';
export const SETTINGS_LOADED = 'dataLoaded';
export const HTML_LOADED = 'htmlLoaded';
export const ARCHIVES_JSON_LOADED = 'archivesJSONLoaded';
export const ARCHIVES_PAGE_LOADED = 'archivesPAGELoaded';
export const ARCHIVES_ENTRY_LOADED = 'archivesEntryLoaded';
export const PROJECT_UPDATED = 'projectUpdated';
export const PROJECT_ADDED = 'projectAdded';
export const PROJECTS_SORTED = 'projectsSorted';
class DataEvent
{
//--------------------------
// methods
//--------------------------
//--------------------------
// event handlers
//--------------------------
}
export default new DataEvent

@ -1,57 +0,0 @@
class EventEmitter
{
//--------------------------
// constructor
//--------------------------
constructor()
{
this.listeners = new Map();
}
//--------------------------
// methods
//--------------------------
addListener(label, callback) {
this.listeners.has(label) || this.listeners.set(label, []);
this.listeners.get(label).push(callback);
}
removeListener(label, callback) {
var isFunction = function(obj) {
return typeof obj == 'function' || false;
};
var listeners = this.listeners.get(label),
index;
if (listeners && listeners.length) {
index = listeners.reduce((i, listener, index) => {
return (isFunction(listener) && listener === callback)
? i = index
: i;
}, -1);
if (index > -1) {
listeners.splice(index, 1);
this.listeners.set(label, listeners);
return true;
}
}
return false;
}
emitEvent(label, ...args) {
var listeners = this.listeners.get(label);
if (listeners && listeners.length) {
listeners.forEach((listener) => {
listener(...args);
});
return true;
}
return false;
}
//--------------------------
// event handlers
//--------------------------
}
export default EventEmitter

@ -1,59 +0,0 @@
import TransformEffects from './TransformEffects.jsx';
class Slideshow{
//--------------------------
// constructor
//--------------------------
constructor(slides)
{
this.slides = slides;
var timer = null;
this.slideIndex = 0;
for(let i of slides)
{
new TransformEffects().rotateY(i, 0, 90, "top right");
i.style.opacity = 1;
}
this.start();
}
//--------------------------
// methods
//--------------------------
start()
{
new TransformEffects().rotateY(this.slides[this.slideIndex], 1, 0, "top right");
this.startTimer()
}
startTimer()
{
var self = this;
this.timer = setTimeout(f=>
{
self.slideTranstion();
}, 4000);
}
slideTranstion()
{
new TransformEffects().rotateY(this.slides[this.slideIndex], 1, 90, "top right");
++this.slideIndex;
if(this.slideIndex > this.slides.length-1)
this.slideIndex = 0;
new TransformEffects().rotateY(this.slides[this.slideIndex], 1, 0, "top right");
this.startTimer();
}
setDisplayType()
{
}
//--------------------------
// eventhandlers
//--------------------------
}
export {Slideshow as default}

@ -1,31 +0,0 @@
class DOMUtils
{
//--------------------------
// constructor
//--------------------------
constructor()
{}
//--------------------------
// methods
//--------------------------
getWindowXY()
{
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
var dimensions = {
windowHeight: y,
windowWidth: x
}
return dimensions;
}
//--------------------------
// event handlers
//--------------------------
}
export default DOMUtils

@ -1,114 +0,0 @@
export const REQUEST_TYPE_POST = "POST";
export const REQUEST_TYPE_GET = "GET";
export const REQUEST_TYPE_PUT = "PUT";
export const REQUEST_TYPE_DELETE = "DELETE";
export const CONTENT_TYPE_JSON = 'json';
export const CONTENT_TYPE_FORM = 'x-www-form-urlencoded';
import EventEmitter from '../events/EventEmitter.jsx';
import * as DataEvent from '../events/DataEvent.jsx';
class DataUtils extends EventEmitter {
//--------------------------
// constructor
//--------------------------
constructor() {
super();
var self = this;
}
//--------------------------
// methods
//--------------------------
request(requestURL, eventType, requestType = REQUEST_TYPE_GET, contentType = CONTENT_TYPE_JSON, requestData = null) {
var self = this;
return new Promise(function(resolve, reject) {
var request = new XMLHttpRequest();
request.upload.onprogress = self.handleLoadProgress;
request.open(requestType, requestURL, true);
request.onload = function(e) {
if (request.status == 200) {
resolve({
request,
eventType
});
} else {
reject({
request,
eventType
});
}
;
};
if (requestType == REQUEST_TYPE_PUT || requestType == REQUEST_TYPE_POST) {
switch (contentType) {
case CONTENT_TYPE_JSON:
request.setRequestHeader("Content-type", "application/" + contentType);
request.send(JSON.stringify(requestData));
break;
case CONTENT_TYPE_FORM:
request.send(requestData);
break;
}
} else {
request.send();
}
})
}
imgLoad(url) {
'use strict';
// Create new promise with the Promise() constructor;
// This has as its argument a function with two parameters, resolve and reject
return new Promise(function(resolve, reject) {
// Standard XHR to load an image
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'blob';
// When the request loads, check whether it was successful
request.onload = function() {
if (request.status === 200) {
// If successful, resolve the promise by passing back the request response
resolve(request.response);
} else {
// If it fails, reject the promise with a error message
reject(new Error('Image didn\'t load successfully; error code:' + request.statusText));
}
};
request.onerror = function() {
// Also deal with the case when the entire request fails to begin with
// This is probably a network error, so reject the promise with an appropriate message
reject(new Error('There was a network error.'));
};
// Send the request
request.send();
});
}
loadImage(src) {
'use strict';
let self = this;
return new Promise(function(resolve, reject) {
// Get a reference to the body element, and create a new image object
var body = document.querySelector('body'),
myImage = new Image();
myImage.crossOrigin = ""; // or "anonymous"
// Call the function with the URL we want to load, but then chain the
// promise then() method on to the end of it. This contains two callbacks
self.imgLoad(src).then(function(response) {
// The first runs when the promise resolves, with the request.reponse specified within the resolve() method.
var imageURL = window.URL.createObjectURL(response);
resolve(imageURL);
//$('background-content').setStyle('background-image', 'url('+imageURL+')') //myImage.src = imageURL;
//console.log(imageURL);
//body.appendChild(myImage);
// The second runs when the promise is rejected, and logs the Error specified with the reject() method.
}, function(Error) {
reject(Error)
});
});
}
//--------------------------
// event handlers
//--------------------------
handleLoadProgress(e) {
var percentComplete = Math.ceil((e.loaded / e.total) * 100);
//console.log(percentComplete);
}
}
export default DataUtils;

@ -1,28 +0,0 @@
class DateUtils
{
//--------------------------
// constructor
//--------------------------
constructor()
{}
//--------------------------
// methods
//--------------------------
getMKtime()
{
var time = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), new Date().getHours(), new Date().getMinutes(), new Date().getSeconds(), 0).getTime() / 1000;
return time;
}
convertMKtime(seconds)
{
var date = new Date(seconds * 1000);
return date;
}
//--------------------------
// event handlers
//--------------------------
}
export default DateUtils

@ -1,65 +0,0 @@
class StringUtils
{
//--------------------------
// constructor
//--------------------------
constructor()
{}
//--------------------------
// methods
//--------------------------
cleanString(string)
{
var clean = string.replace(/(^\-+|[^a-zA-Z0-9\/_| -]+|\-+$)/g, '').toLowerCase().replace(/[\/_| -]+/g, '-');
return clean;
}
decodeHTML(string, quote_style) {
var optTemp = 0,
i = 0,
noquotes = false;
if (typeof quote_style === 'undefined') {
quote_style = 2;
}
string = string.toString().replace(/&lt;/g, '<').replace(/&gt;/g, '>');
var OPTS = {
'ENT_NOQUOTES': 0,
'ENT_HTML_QUOTE_SINGLE': 1,
'ENT_HTML_QUOTE_DOUBLE': 2,
'ENT_COMPAT': 2,
'ENT_QUOTES': 3,
'ENT_IGNORE': 4
};
if (quote_style === 0) {
noquotes = true;
}
if (typeof quote_style !== 'number') { // Allow for a single string or an array of string flags
quote_style = [].concat(quote_style);
for (i = 0; i < quote_style.length; i++) {
// Resolve string input to bitwise e.g. 'PATHINFO_EXTENSION' becomes 4
if (OPTS[quote_style[i]] === 0) {
noquotes = true;
} else if (OPTS[quote_style[i]]) {
optTemp = optTemp | OPTS[quote_style[i]];
}
}
quote_style = optTemp;
}
if (quote_style & OPTS.ENT_HTML_QUOTE_SINGLE) {
string = string.replace(/&#0*39;/g, "'"); // PHP doesn't currently escape if more than one 0, but it should
// string = string.replace(/&apos;|&#x0*27;/g, "'"); // This would also be useful here, but not a part of PHP
}
if (!noquotes) {
string = string.replace(/&quot;/g, '"');
}
// Put this in last place to avoid escape being double-decoded
string = string.replace(/&amp;/g, '&');
return string;
}
//--------------------------
// event handlers
//--------------------------
}
export default StringUtils

@ -1,197 +0,0 @@
#admin-index-content
width 100%
max-width 1024px
margin 0 auto
#admin-index-display
padding 20px
width 100%
max-width 1024px
z-index 10
position relative
#admin-login
width 300px
#admin-index-title
color $white
font 400 2em $titleType
vertical-align top
.admin-menu-main
.admin-nav
span
display inline-block
padding 0 0 0 5px
.index-block
width 50%
display inline-block
vertical-align top
margin-bottom 50px
#blog-edit
label
font 600 1em $titleType
color $white
textarea#entry_title
width 100%
background none
color $tertiary
font 500 2em $titleType
textarea#entry_text
width 100%
height 600px
padding 10px
#blog-meta
label
font 600 1em $titleType
color $white
input, button
width 100%
input
color $secondary
background $black
#featured-click
display none
#blog-index-content
width 100%
max-width 1024px
margin 0 auto
#blog-hub-display
#blog-hub-title
font 400 2em $titleType
color $white
#saved-index-content
width 100%
max-width 1024px
margin 0 auto
#saved-hub-display
#saved-hub-title, #saved-hub-main
label
font 400 2em $titleType
color $white
textarea
width 90%
button
padding 5px
#post-edit-content
width 100%
max-width 1024px
margin 0 auto
header#header
#header-one
#blog-edit
margin 100px 0 0 0
position relative
label
font 600 1em $titleType
color $white
display block
#entry_title
width 90%
background none
font 400 2em $titleType
color $tertiary
#entry_text
width 90%
height 500px
padding 10px
pre
background $black
code
white-space pre-wrap
color $tertiary
#header-two
label
font 600 1em $titleType
color $white
#featured-image-drop
border-radius 3px
border 1px dashed $white
width 100%
font 600 .5em $titleType
height 100px
text-align center
vertical-align middle
line-height 100px
overflow hidden
img
width 100%
#blog-meta
margin 100px 0 0 0
position relative
#featured-click
display none
#entry_tags, button
width 100%
.folio-project-form
display inline-block
width 56%
input[type=email], input[type=password], input[type=text], select
width 400px
select
margin: 10px 0 0 0
textarea
width 400px
height 133px
.folio-hub
padding 20px
span
margin 10px 10px 0 0
.btn-add-project span
font 20px $bodyType
margin: -35px 0 0 40px;
display block
height: 50px
.project-list
width 95%
span.drag-handle
padding: 10px;
color $tertiary
cursor pointer
.project-item
width: 100%;
display: inline-block
background lightness($primary, 20%)
padding: 5px
margin-bottom 10px
border-radius: 5px;
object-transitions(.3s)
.project-item:hover
background lightness($primary, 30%)
.upload-list
color lightness($primary, 80%)
display inline-block
vertical-align top
width 260px
height 330px
margin 45px 0 0
.thumb
height 50px
overflow hidden
border-radius 3px
margin 10px 5px 0 0
.upload-drop
width 400px
height 70px
background $form-background
color lightness($primary, 80%)
text-align center
padding 40px 0 0
font-size 12px
text-transform uppercase
border-radius 3px

@ -1,65 +0,0 @@
#blog-content
#blog-display
#blog-list
.blog-entry
display inline-block
height 500px;
width 50%
background-size cover
background $black
position relative
text-align: center;
vertical-align: middle;
line-height: 250px;
label
background $secondary
padding 5px
border-radius 3px
#post-content
width 100%
margin -10px 0 0 0
#header-post
width 100%
min-height 350px
background $black
position relative
padding 0
margin 0
img
padding 0
margin 0
position relative
display block
width 100%
#header-one
position relative
width 80%
margin 0 auto
padding 30px 0 0 0
label#the-title a
font 500 2em $titleType
width 97px
height 115px
color $secondary
text-decoration none
display block
word-break: break-all
margin 10px 0 0 10px
span#post-title
font 200 4.5em/1em $titleType
color $white
margin 20px 0 0 10px
padding 20px 0 80px 0
display block
#post-display
color $tertiary
width 80%
margin 50px auto
font 400 1.5em $bodyType
padding-bottom 50px

@ -1,71 +0,0 @@
#bm-content
width 100%
max-width 1024px
margin 0 auto
#header-one, #header-two
label#the-title
a(href="/") thetwelfthhouse
#header-two
font 400 1.5em $bodyType
#bookmark-display
padding 0
.bookmark-list
.bookmark-entry
background lightness($primary, 15%)
width 50%
height 500px
background-size cover
overflow hidden
display inline-block
vertical-align top
//border-radius 3px
padding 10px
.bookmark-info
display flex
align-items center
justify-content center
width 100%
height 100%
label
display block
font-size .5em
padding 10px
background $primary
border-radius 5px
#paginate-control
width 100%
height 300px
background lightness($primary, 30%)
display: flex;
align-items: center;
justify-content: center;
#paginate
margin 0 auto
a, label
display inline-block
vertical-align top
label
padding 5px
color $tertiary
font-size 2.2em
a
padding 20px
margin-top 4px
/**
-------------------------------
-- Responsive
-------------------------------
**/
@media only screen and (max-width: 768px)
#bm-content
#bookmark-display
.bookmark-list
.bookmark-entry
width 100%

@ -1,96 +0,0 @@
#work-content
width 100%
max-width 1024px
margin 0 auto
#header
#header-two
p
font 400 1.5em $bodyType
span
color $secondary
#work-display
padding 0
margin 0 0 40px 0
opacity 0
#work-list
.work-item
width 50%
height 300px
display inline-block
vertical-align top
background-size cover
background-color $tertiary
color $tertiary
span
font 600 .7em $titleType
#work-contact
#contact-form
opacity 1
label
font 600 .8em $titleType
color $highlight
margin 0 0 15px 0
display block
#request-form
input[type=email], input[type=password], input[type=text]
width 100%
margin 0 10px 10px 0
select
width 100%
margin-bottom: 10px;
textarea
width: 100%
#contact-info
label#request-status
font 600 .8em $titleType
color $highlight
margin 0 0 15px 0
display block
text-transform uppercase
p
font 400 1em $bodyType
color $tertiary
i
color $highlight
#project-content
width 100%
max-width 1024px
margin 0 auto
#project-display
padding: 0 20px 20px 20px
#project-info
span
font 400 2em $titleType
color $white
#project-desc
font 300 1.2em $bodyType
color $tertiary
#project-images
margin 10px 0 0 0
opacity 1
.folio-image
width 100%
margin 0 0 50px 0
opacity 0
/**
-------------------------------
-- Responsive
-------------------------------
**/
@media screen and (max-width: 768px)
#work-content
#work-list
.work-item
width 100%

@ -1,21 +0,0 @@
extends frame
block main-content
section.content#project-content
header.columns#header
#header-one.column
label#the-title
a(href="/") thetwelfthhouse
#header-two.column
a(href="/work") back to work
#project-display.columns
#project-info.column
span= title
#project-desc.column
=desc
#project-images
each val in images
- console.log(val)
- var path = String(val.path).substring(7, val.path.length)
img.folio-image(src=path)

@ -1,51 +0,0 @@
extends frame
block main-content
section.content#work-content
header.columns#header
#header-one.column
label#the-title
a(href="/") thetwelfthhouse
#header-two.column
p
| I am an independent graphic designer and web developer that loves using my formidable talents to create cool stuff.
br
span I am currently available for new work.
#work-display
#work-list
h2 Recent Projects
each project, index in projects
- var image = JSON.parse(project.images)[0]
a(href='/work/'+project.slug)
div.work-item(style="background-image:url("+image.path.substring(7, image.path.length)+")")
//label.project-label#project-label= project.title
//br
//span= project.type
#work-contact.columns
#contact-form.column
label#form-response GIMME YOUR DATAZ
#request-form
form(class='request-form', name="request-form", enctype="multipart/form-data")
input(type='text', name='email' class='', placeholder='Email', required, autofocus)
input(type='text', id="client" name='client' class='', placeholder='Name', required, autofocus)
select(id="service_type", name="service_type", form="service-type'")
option(value="option00") Select Service Type
option(value="option01") Design and Development
option(value="option02") Graphic Design
option(value="option03") Web Development
option(value="option04") Logo/Branding
option(value="option05") Hosting
option(value="option05") A little of everything
textarea(rows="9" cols="52" name='description' class='', placeholder='Project Details', required, autofocus)
button(id="request-btn", class='request-btn', type='submit') SEND_INQUIRY
#contact-info.column
label#request-status Got a project idea? Let's talk.
p
i.fa.fa-exclamation-triangle
br
|A standard $200 fee will be charged for project consultation. Serious inquiries only. Thanks.
br
br
|Consultation requests will be responded to within 48 hours.
Loading…
Cancel
Save