Skip to content

WIKIZONE

Jump to bottom
Shape group edited this page Nov 16, 2018 · 53 revisions

Wiki is under constructon!

 

Welcome to the rora-js wiki!

 

░░░ What is rora js?

Rora js is a set of shortcuts and javascript methods (wheels/gears = rora) wrapped in a single file that is called "library" (for us, a toolbox = haguruma) that make life easier for those who have to develop front-end side both on a site and an app.

This library was born with the intent to speed up the writing of the code. However, she is still a pure javascript daughter and, in fact, works with her objects leaving you free to return to the native version of the code whenever you can (or want). Yes, objects! Rora doesn't have "this" because it works one or more specific objects (you'll see how it works later).

░░░ Rora is mvc?

Rora js is therefore a valid "alternative" (in every sense) to the classic you've always seen and used but it isn't a mvc engine. It is a rapid library to perform rapid changes on frontend side and dom in every situation.

░░░ Where are you?

for conclude this little intro you are into the "reference", or a page where you can find all the entries in the user manual of this framework.

 

 

Testing ::: Web browser | Cordova app | Other under testing...

 

Api / User manual

░░░ Installation

Local file install:
⍌ ShapeGroup - rora js min pack

Called via rawcdn:
[⍫ rawcdn](https://rawcdn.githack.com/ShapeGroup/rora-js/a3c18762c0a0bf41c678026a1de5a10f990cfaf5/rora-deploy/rora.min.js`

NPM Package:
[⍢ under costruction ](try later...)

 

░░░ Script starter...

the framework must be placed at the top of the page. Mainly on the <head> tag. Once you read the Dom it will start in all its functions. Once this is done, you can create your own scripts. follow the example:

<head>
  <script src="rora.min.js"></script>`
</head>
<body>
   ...
</body>
<script>
 my custom scripting
</script>

to start a custom script it will be necessary, of course, to understand at which point of the upload is its own interface. We could directly use the events in pure js but rora offers different starters:

  • onDomTreeReading -> the code of page is under reading and updating
  • onDomTreeReaded -> the code of page is ready
  • onContentIsLoaded -> the content of page is loaded
  • onWindowUnload -> the page exit or start (experimental - not recommended)
</body>
<script>

  onContentIsLoaded(() => {
    my custom script
  });

</script>

A simple "Hello world!" Demo page with starters: ✱ Hello world!     {use ctrl/⌘+click}

 

░░░ syntax and logic

Rora js differs from other frameworks both for some technical and practical peculiarities. For example, Rora has more than one approach to creating a script.

Query Linear:

doc.find("anytarget").methods(do).methods(do).methods(do);

Waterfall style:

var myTarget = doc.find("anytarget");
doc.methods1(myTarget, do);
doc.methods2(myTarget, do);

Fusion style:

var myTarget = doc.find("anytarget");
doc.methods1(myTarget, do);
doc.methods2(myTarget, do).methods2(do).methods3(do);

You will have noticed that the processes all start from the "doc" abbr, It's the main of system and without you can not start anything. In any case the same thing always happens:

search for a target 🡺 turn the target into an array of elements 🡺 keep these elements in a javascript object 🡺 pass the object to the methods.

In the framework, each result is stored in a specific object and processed / recalled through its properties.

The main objects are:

**doc** Abbr of window.document.
**finder** keeps every target of find() method.
**node** & **collection** keeps every finder array for a one or multiple dom node
**response** the answer container for ajax calls

Of every object it is possible to have the properties in every moment. One of the most comfortable things to remember is that, node and collection, return their own dom object:

var X = doc.find("#X");
doc.method(X,(node)=>{

   node.method();

   or in pure javascript

   node.html.jscoding....

});

With this last example, in addition to having seen how a function of a method is started, we have seen how it is possible to work on each object.

 

 

░░░ Rora js Methods

 

🢖 find() // find and storize target

find is a main method to aggregate every target to work with. Returns node (the list for a single html node) and collection (the list of multiple objects). The whole framework needs this method to work objects and methods.

some examples:

doc.find("#target)");
doc.find(".anytarget)");
doc.find("#target > .anytarget)");

doc.find(".anytarget:first-child)");
doc.find(".anytarget:last-child)");
doc.find(".anytarget:nth-child(N))");

var myTarget = doc.find("anyClassIdEtc)");

 

🢖 mods() // dom modificator

rora does not have a function for every get, set or modifier of Dom elements. We preferred a single call, as if we had a "modifier panel" and we could select the "mods" we needed.

Using the mods method is very simple:

doc.find(".mytarget").mods("new-css" , "color: blue");

So... Just call mods the modifier you want to get the value (or replace it, or create it) of the targeted element.
in this version of the framework there are:

✱ "get-css" : get css values
✱ "set-css" : replace or create css values //under costruction
✱ "new-css" : create or rewrite a new style attribute

✱ "get-attribute" : get attribute of element
✱ "set-attribute" : set/rewrite attribute of element
✱ "del-attribute" : delete attribute of element

✱ "add-class" : add a class
✱ "del-class" : remove a class
✱ "replace-class" : replace a class
✱ "toggle-class" : toggle a class

✱ "wrap" : wrap element into a container ( a pre-code ) //under costruction
✱ "unwrap" : unwrap target container

✱ "write" : write/override code whit textContent

✱ "code-override" : write/override code
✱ "code-prepend" : write code after opening target
✱ "code-append" : write code before closing target
✱ "code-beforeElement" : write before element target
✱ "code-afterElemen" : write after element targett

 

🢖 loop() // cycle the elements

it is a main method that cycles objects and its contents. In a nutshell ... a for cycle.
loop is expandable to sub-function.

var X = doc.find(".X");
doc.loop(X, (node,collection) =>{
   now you can work node and collection
});

✱ open exemple

 

🢖 on() // events and action selector

It's a simple method to select an activator event and its consequence. "on" is expandable to sub-function.
The syntax is similar to the following:

var link = doc.find("a");
doc.on(link , "click" , (node,collection) =>{
    now you can work node and collection after the action
});

"on" has many variables... including:

✱ "click": simple click event
✱ "doubleclick" : a double click event
✱ "middleclick": middle click event
✱ "auxclick" : context menu event
✱ "short-tap" : a timed for click event
✱ "long-tap" : a timed for click event
✱ "mouse-enter" : on pointer enter in finder elements
✱ "mouse-exit" : on pointer exit from finder elements
✱ "mouse-move" : on pointer move into finder elements
all return node, collection, clicker (the clicked element)

✱ "scroll" : on scroll event
return : node, collection, clicker, ViewportDistance.top left right bottom,  ElementDistance.top left right bottom

✱ "swipe" : swipe action on target
return : node, collection, clicker, swipedirection

✱ "drag-on" : on drag for any direction
return : node, collection, clicker, drag.axis.x y<br

✱ "drag-left right up bottom": dynamic drag of scene objects
return : node, collection, clicker, drag.direction.left right top bottom

 

░░░ actor() | call actor function

actor is a simple method for making a call. In practice it invokes an external function by its name to which you can pass the values you want. It have a very simple sintax:

doc.find(".test_X").actor(MyActorTest);
function MyActorTest(){
    alert("I'am function actor!");
};

✱ open demo

 

░░░ include() | include / injection via js

include and inject are two techniques to bypass php and to templetize (also via action) html elements.

Although it is highly discouraged to use ajax techniques to include content on a website, it is also true that, on apps, it is the exact opposite.

Both include and inject have two types of syntax ... the normal one and the automated one (automa).

By custom script syntax:

var myIncludeTarget = doc.find("#incudehere");
doc.include(myIncludeTarget , "myincludefilename.html");

or via automa syntax:

<div data-include="myincludefilename.html"></div>

If include work in auto on specific div before load contents, injection is full automation technique to include html file when a specific event is called (for exemple... a click on menu).

<a data-injector="click, #myTarget, myincludefilename.html">MENU VOICE</a>

 

░░░ talk() | ajax, the talk method

the "talk" method handles calls in ajax. It is surely destined to evolve however, in this version, we have this simple syntax to manage it:

doc.talk(
    "type-post",    //or get
    "mode-server",  //or unlinear
    "output-text",  //or xml
    "url",          //the url for talk
    (response) =>{ 
        .....
    }
);

in the first parameters we manage the call ajax. to be precise, we manage if:

  • the method is post or get,
  • if the mode is asynchronous or linear,
  • if we require an xml or text answer
  • with which page we are talking about

finally we have his response.

this answer can currently be managed in this way:

doc.talk(
    "type-post", 
    "mode-server",
    "output-text",
    "url",

    (response) =>{ 
        if (response.start) {
             //request is started!
             .... 
        }
        if (response.data) {
             //data answer writed
             doc.find("#idtest").mods("write", answer.data);
        }
        if (response.success) {
             //alert("request is ended!");
             ....
        }
    }
);

for now this is everything.

 

Clone this wiki locally