Releases: HamzaElkotp/sparling.js
v1.3.0
Loading Page content from Body
key in JSON Object
- changed
jsonRead
function name tointContent
. - initialized new variable named
contentBox
in global liked with HTML element that hascontentBox
id - made a
for
loop to loop through theBody
key in the object. - every item it loops on, inner it to
contentBox
HTML element.
improve code
- when the website loads the Home page content "main page" is not loaded yet
- this is because I made the content doesn't load until the user click.
- but the user wants to see the "main page" content without clicking.
- this fixed using
intHomeContent
function, and it won't work until programmer call it. - it takes three args:
jsonpages
: the path of the JSON file that load content from.
homePageSPAname
: the name that recorded inSPAname
key inside JSON object
keyName
: the nickname to theSPAname
, so if in JSON you makeHomeName
instead ofSPAname
just tell Sparling.js that.
=================================
example:
this is our Object inside JSON file that represent our Home page:
{"HomeName": "examlehome", "HomeURL": "home2", "Hometitle": "Home}
and this is the default way:
{"SPAname": "name", "SPAurl": "home2", "SPAtitle": "Home}
so to can load home page content in the right way, call it like that:
intHomeContent("JSON Path", "examlehome", "HomeName");
v1.2.2
Fix security problems & slow with huge JSON file
data.forEach
doesn't stop the loop after the condition achieve.- and it continues making many requests to
window.history.pushState
. - and this makes the website suspect to security apps.
- also makes the page slower.
===================== - if fixed by replacing it with
for
loop and addbreak
to the condition.
v1.2.1
Fixing loop problem
forEach
hanged toevry
by mistake in the past version.- returned it back to
forEach
in this version.
v1.2.0
put default value to metaArr
- maybe the giving key names are the same with default key name,
like the programmer named the SPAname as
SPAname
in the JSON file and that is the default.
- so no need to pass it in
metaArr
, but if he did that in ast version he'll get errors, but now i solved it by putting the default inside this line:
function jsonRead(jsonpages, metatagArr = ["SPAname", "SPAurl", "SPAtitle"])
v1.1.0
making JSON objects order unnecessary
- adding
data.forEach
function inelements.forEach
function. data.forEach
is created to loop throughdata
and search on the object that owns the sameSPAname
that is in clicked element.- while it looping it compares every object's
SPAname
value with clicked elementSPAname
meta tag. - if they are the same it'll change
window.title
toSPAtitle
that is in that object. - also will append the
SPAurl
to the window URL usingwindow.history.pushState
.
NOTE: I moved document.title = data[index][SPAtitle];
& window.history.pushState("","",data[index][SPAurl]);
inside if
condition that is in data.forEach
.
v1.0.0
Fix & Improve
- renaming
metatagFunc
tometatagArr
. - putting
SPAname
,SPAurl
,SPAtitle
variables frommetaTags
function insidejsonRead
function. - replacing the
metaTags
function with an array that will do the same job of this function. metaTags
function was made in pasts commits to make the programmer deal easier withjsonRead
by making the use of constant names toSPAname
,SPAurl
,SPAtitle
unnecessary, so he could replace theSPAname
key in JSON file with e.g.:SuperCat
, but he must passSuperCat
key in the passed array when callingjsonRead
like this:
jsonRead("spa.json",["SuperCat", "SPAurl", "SPAtitle"]);
v0.1.0
Making Sparling.js Fundamentals
Main Logic:
1- Sparling.js deals with a JSON file created by the developer, this JSON file contains an array inside of it there are Objects.
2- Sparling.js reads these objects and converts them to HTML elements that appear on the main HTML page
3- every object represents a page, with all its content
example: if you have 5 pages, you'll make an object to every page and add it to the JSON file
4- every object contains main keys:
-
SPAname
=> name of the page, will see how to use it later. -
SPAurl
=> URL of the page, to change window URL to it. -
SPAtitle
=> title of the page, to change window title to it. -
Body
=> contains all page contents like p, h1, div.
6- as a SPA application, you have links, buttons, or any elements like that, and when clicking on it, the page generates.
example: there is a link named "contact us" its job is to move you to the "contact us page" after clicking it, but in SPA it won't move you to other page and will load that page content in the current page, and this is what will Sparling.js do, but it needs to know what are the elements that when user click them it starts loading pages content and this is why
SPAname
is here.
7- Any html element you want it to call a page when user click it, give it a meta tag called SPAname
and give it a value, it works like id
.
8- Sparling.js select any element that has SPAname
and give it addEventListner
and it'll do the following:
9- Sparling.js will read the gifted value to SPAname
meta tag in clicked element and search in JSON file about the object that have same value in SPAname
key.
example: if we have an HTML element has this meta tag and this value:
SPAname="contact us"
and we've 2 objects, first conatins:"SPAname": "contact us"
and the secondSPAname="customers"
so Sparling.js will select first object because it has the sameSPAname
.
10- After finding the true object, addEventListner
will change window title to SPAtitle
value and the window URL to SPAurl
value.
11- After that it will access to Body
and loop through it to extract every line in it to HTML element and inner them in a HTML element that has id
called SPAoutContent
.