Skip to content

Releases: HamzaElkotp/sparling.js

v1.3.0

23 Sep 03:21
Compare
Choose a tag to compare

Loading Page content from Body key in JSON Object

  • changed jsonRead function name to intContent.
  • initialized new variable named contentBox in global liked with HTML element that has contentBox id
  • made a for loop to loop through the Body 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 in SPAname key inside JSON object
    keyName: the nickname to the SPAname, so if in JSON you make HomeName instead of SPAname 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

23 Sep 02:50
Compare
Choose a tag to compare

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 add break to the condition.

v1.2.1

23 Sep 02:33
Compare
Choose a tag to compare

Fixing loop problem

  • forEach hanged to evry by mistake in the past version.
  • returned it back to forEach in this version.

v1.2.0

23 Sep 02:18
Compare
Choose a tag to compare

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

22 Sep 18:02
Compare
Choose a tag to compare

making JSON objects order unnecessary

  • adding data.forEach function in elements.forEach function.
  • data.forEach is created to loop through data and search on the object that owns the same SPAname that is in clicked element.
  • while it looping it compares every object's SPAname value with clicked element SPAname meta tag.
  • if they are the same it'll change window.title to SPAtitle that is in that object.
  • also will append the SPAurl to the window URL using window.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

22 Sep 16:04
Compare
Choose a tag to compare

Fix & Improve

  • renaming metatagFunc to metatagArr .
  • putting SPAname, SPAurl, SPAtitle variables from metaTags function inside jsonRead 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 with jsonRead by making the use of constant names to SPAname, SPAurl, SPAtitle unnecessary, so he could replace the SPAname key in JSON file with e.g.: SuperCat, but he must pass SuperCat key in the passed array when calling jsonRead like this:

jsonRead("spa.json",["SuperCat", "SPAurl", "SPAtitle"]);

v0.1.0

22 Sep 11:02
Compare
Choose a tag to compare
v0.1.0 Pre-release
Pre-release

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 second SPAname="customers" so Sparling.js will select first object because it has the same SPAname.

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.