Task Detail

Adjusting footer to its own directory: Activity on Wed Jan 31 2018 19:38:39 GMT+0000 (UTC) 1. I moved all footer html and css over. 2. created a margin to separate footer and reader box. footer { color: white; margin-top: 50px; }

Fixing Padding-top all pages: Activity on Wed Jan 31 2018 16:18:02 GMT+0000 (UTC) I created a class in template/style.css .top-padding-right-after-nav{ padding-top: 100px; } and add the class to all the pages.

Adjust Nav Javascript Activity on Fri Feb 02 2018 18:08:26 GMT+0000 (UTC) ATTENTION!!! Somehow, after I fixed the scrolling as mentioned in the previous notes, the scrolling function only work if I use browser-refresh app.js and will not work with node app.js. I have to use 'forever start -c browser-refresh app.js' for the UI server. I also used 'forever start -c browser-refresh app.js' for the API since browser-refresh work with 'forever'. The problem might have to do with the node version. Activity on Fri Feb 02 2018 18:03:02 GMT+0000 (UTC) IMPORTANT!!! Pay attention to internal page javascript execution and browser request process. Example: Sometime, ocbuu.com/#contact can be url request, but sometime #contact only a dummy request. Example: $('.page-scroll a').on('click', function(event) { var $anchor = $(this); $anchor.attr('href'); When a link is click in .page-scroll, the $anchor.attr('href') hold the href of the link instead of going to that link page. We can use that link holding in the javascript for that page only. (like scrolling around the page). The link sometime gets to show on the url, but that url is not executed by the browser ==> no request get sent to the server ==> the page stay the same. Activity on Fri Feb 02 2018 17:53:19 GMT+0000 (UTC) Problem: the scrolling function couldn't work for first starting up ocbuu.com. Issue: In the code below; if(lastIndexOfUrl == "" && sessionStorage.getItem('scrolling-key') !== ""){ $('html, body').stop().animate({ scrollTop: ($(sessionStorage.getItem('scrolling-key')).offset().top - 50) }, 1250, 'easeInOutExpo'); sessionStorage.setItem('scrolling-key', ""); } Javascript compiles its code before execute the code, and the $(sessionStorage.getItem('scrolling-key')).offset().top didn't make sense to javascript compiler because sessionStorage.getItem('scrolling-key') is null. Solution: I added the code below before the above code: if(sessionStorage.getItem('scrolling-key') == null){ sessionStorage.setItem('scrolling-key', "#page-top"); } The code simply say if the sessionStorage.getItem is null (because just start the page) then give it a value "#page-top", so that everything can be set for starting. Activity on Wed Jan 31 2018 15:38:02 GMT+0000 (UTC) To resolve the problem mention in the previous task: 1. I leave the hrefs of the "a/links" alone. 2. I used const url = window.location.href; const lastIndexOfUrl = url.substr(url.lastIndexOf('/')+1); to get the whatever behind the "/" in the URL. 3. Then when any link is clicked, I check to see if the behind "/" is empty or has on of '#portfolio', '#about', and '#contact', if yes then do the scrolling normally as $('html, body').stop().animate({ scrollTop: ($($anchor.attr('href')).offset().top - 50) }, 1250, 'easeInOutExpo'); 4. Else if when any link is clicked, I would check if there is something different then "" empty behind "/". When the if statement is true, then I will redirect the page first href:window.location.href='/'+$anchor.attr('href'); and then do the scrolling as normal. Because this is happen after checking for "/" is empty or has on of '#portfolio', '#about', and '#contact', so I don't need to worry about if one of #portfolio', '#about', and '#contact' might be there. Activity on Wed Jan 31 2018 15:28:10 GMT+0000 (UTC) 1. The animation for scrolling is working fine for the Nav menu buttons when on the homepage with out the "/" in front of them. Example: '#portfolio', '#about', and '#contact'. 2. However when I am in a different page those '#portfolio', '#about', and '#contact' wouldn't work because the url or href were missing '/'. 3. However, if I place '/' in front of the '/#portfolio', '/#about', and '/#contact', the browser will redirect me to the right place, but the animation scrolling will not work anymore. 4. With '#portfolio', '#about', and '#contact', the url is not changed, but the href is holding '#portfolio', '#about', or '#contact' value. The page then uses the javascript in lib.js to scroll to the appropriate location of the page base of the href. 5. With the '/#portfolio', '/#about', and '/#contact', the url is changed, and the browser take the page to the right location without using the lib.js code.

Nav in a separated folder: Activity on Fri Jan 26 2018 12:57:14 GMT+0000 (UTC) 1. Moved "nav" content from home/index.marko to nav/index.marko. 2. Adding <lasso-page package-path="./browser.json"/> to nav/index.marko is optional. 3. Didn't add <include('../layout/template/index.marko', data)> and <@content> because template will have to include nav. 4. Added <include('../nav/index.marko', data)/> above <include(input.content)/> in template/index.marko 5. Everything worked as normal, but when I have sometime, I will separate javascript for nav, too.

Template package in View/Layout: Activity on Tue Jan 30 2018 13:25:01 GMT+0000 (UTC) I have moved all the original jquery from sandbox/home/browser.json to sandbox/layout/template/browser.json because those are belong to Nav, header, body, and footer. "../../../../assets/vendor/jquery/jquery.min.js", "../../../../assets/sandbox/vendor/bootstrap/js/bootstrap.min.js", { "type": "js", "url": "//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" }, "../../../../assets/sandbox/js/jqBootstrapValidation.js", "../../../../assets/sandbox/js/freelancer.min.js", Activity on Thu Jan 25 2018 21:07:37 GMT+0000 (UTC) <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title><include(input.title)/></title> <!--pavicon --> <link href="../assets/images/happySnailTrans.ico" rel="icon" type="image/png"> <!-- Bootstrap Core CSS --> <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Theme CSS --> <!-- <link href="../assets/css/freelancer.min.css" rel="stylesheet"> all the content moved to appropriate files and folders--> <!-- Custom Fonts --> <link href="../assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <lasso-head/> </head> <body id="page-top" class="index"> <div id="skipnav"><a href="#maincontent">Skip to main content</a></div> <!-- <h1>testing from template new</h1> --> <!-- include @content from each page/view index.marko --> <include(input.content)/> <lasso-body/> <browser-refresh enabled="true"/> </body> </html>

Lasso-Marko sandbox: Activity on Fri Jan 26 2018 13:39:48 GMT+0000 (UTC) IMPORTANT!!! 1. As usual, javascript files are placed at the bottom of html page. Some js files placed above the others, so they can executed by order. 2. In index.marko, the javascript files can be placed in order in the bottom of the page, too. 3. If I decide to move them over to browser.json file, then I will have to move all of them to avoid the miss match order to avoid none functional javascript. Activity on Fri Jan 26 2018 12:42:06 GMT+0000 (UTC) IMPORTANT!!! browser.json file always is required to have content in there. Most common content: { "dependencies": [ "./lib.js", "./style.css" ] } Because when Lasso executed, it will look into browser.json file to read content. Activity on Thu Jan 25 2018 16:11:33 GMT+0000 (UTC) To use Lasso-Marko for a webpage: -----------------Lasso----------------------------- 1. Create a folder with browser.json, index.marko or index.html, lib.js, style.css. 2. Since I am using Marko I will created index.marko instead of index.html. 3. lib.js and style.css will contain javascript and css for the index.marko page. 4. browser.json is part of Lasso, and it will contain links to lib.js, style.css, and even to other assets from different directories. 5. In index.marko page, a <lasso-page package-path="./browser.json"/> will be placed on top of the page, so the page can get all the material needed from lib.js, style.css, or more. -----------------Marko---------------------------- 1. Marko is only used in index.marko. 2. <include></include> tag is power tag in marko. 3. Since the server.js imply marko to entire application for all .marko pages, <include> tag can be used in all the .marko page with out require marko module in every page. 4. I can customize new tags from <include> tag: example <include(input.content)/> to create <@content></@content> tag to use in other page, and whatever go between the <@content> will display where <include(input.content)/> is. 5. Example: create <include(input.content)/> in template page, and then create home.marko page. In home.marko, a <include('../template/index.marko', data)></include> needed to be included first before <@content></@content> can go in the between.

Homepage in View: Activity on Fri Jan 26 2018 13:42:27 GMT+0000 (UTC) 1. I moved all the javascript at the bottom of home/index.marko to the browser.json for better management. 2. IMPORTANT!!! All of them have to move to browser.json together. I can't only move one or two and leave some in index.marko because that will miss match the javascript order and cause malfunction in those javascript. Activity on Thu Jan 25 2018 15:43:09 GMT+0000 (UTC) IMPORTANT!!!! 1. I was wrong about Lasso main page only can be used one in one application. 2. The Lasso main page with <head/> and <body/> tag can be used anywhere. 3. I was able to create new template to use for other pages in sandbox. Activity on Thu Jan 25 2018 14:13:36 GMT+0000 (UTC) To solve the problem with Lasso in new template: 1. I don't use the new template page anymore, but everything is implement as normal in view/sandbox/home/index.marko. 2. All the js and CSS will be used in view/sandbox/home directory Activity on Thu Jan 25 2018 14:10:37 GMT+0000 (UTC) 1. This task was very confused at first because I was trying to recreated layout folder with nav and template folder. 2. I couldn't get the sandbox/layout/template to work because Lasso main page only can be used one in one application. 3. Every time the controller read the <head/> and <body/> of Lasso in the new template, it get confused because there is already a page for that.

Homepage sandbox: Activity on Thu Jan 25 2018 14:04:03 GMT+0000 (UTC) 1. Added controller/sandbox/home/index.js 2. method: get, path: /sandbox/home, handler: handleHome. 3. In function handleHome, reply(1) was working fine when /sandbox/home was requested.