diff --git a/v2/tutorial/en/attributes-manager/index.html b/v2/tutorial/en/attributes-manager/index.html new file mode 100644 index 0000000..b3db0ca --- /dev/null +++ b/v2/tutorial/en/attributes-manager/index.html @@ -0,0 +1,421 @@ + + + + + + + + + + + + + + + + + + Attribute manager + + + + +
+ + +
+
+

Attribute manager

+
+

+ This article assumes at least basic knowledge at CSS. +

+
+

+ In Inter's universe, with the attributes manager + we are able to perform these stuffs in a reactive and elegant way: + +

+ +
    +
  • + To create one or several attributes. +
    • +
  • + To update the value of one or several attributes. +
    • +
  • + To delete one or several attributes. +
    • +
+ +

+ To set an attributes manager in an element, we use this syntax {...managerName} +

+

+ The above syntax must be the only attribute of the target element and to parse + the template searching for the managers, we use the toAttrs + function, and the referred function recieves only an object as its argument, and its properties + must be in which will indicate the value of id attribute of the root element where + the elements that got the managers can be found, and other acceptable property is data, + guess its goal? That's it! the data property must be a plain Javascript object, whose + its properties will be the names of the managers, and its values will be an object whose its properties will + be the names of the attributes/events that will be attached in the element where the referred manager was found. + +

+ +
+
+ +
+ +
+
+ +

The manager object

+

+The toAttrs function returns an object +with the same properties as the data object and +in privious example, we destructed the referred object to take out the object manager +photo, if you open up the browser console right now in this page +and try to change the value of one of the properties of the photo +object, you'll see the interface changing to reflect the new value. And when the property +of an oject manager is the name of an event, for instance the onclick event, +Inside the body function attached to the event, this will +be the object manager. +

+

+To delete an attribute with the manager, we just have to set it as +null +

+ +
+ +
+ +
+
+
+

+The manager name must be always in lowercase, and one manager only controls +an element, if you try to set a manager to multiple elements, only the first one +will be controled. If you're not willing to use an attribute yet, just set it to +null, and it won't be created till you define another value to it. + +

+ + +

The observe method

+
+

+ This method became available since: v2.1.0

+
+

+It will be a method from the object manager, it only accepts a function as its argument, +and the referred function will be called every single time a property's value change, will +be called with two arguments: +

+
    +
  • + The first argument will indicate the property name. +
    • +
  • + The second argument (the last) will indicate the new property value. +
    • + +
+

The setAttrs property

+

+It will be a property from the object manager, it will +be used to update the value of multiple attributes(like setRefs from reference). +It only recieve an oject as its value, the properties of the referred object +must indicate the attributes names whose their values will be updated, and the values +of those properties will be new values of the each attribute.

+ +
+
+ +
+
+
+

+Try to click the photo and see what happen. This article explained to you everything +about the attributes manager. +

+
+
+
+
+ + + \ No newline at end of file diff --git a/v2/tutorial/en/conditional-rendering/index.html b/v2/tutorial/en/conditional-rendering/index.html new file mode 100644 index 0000000..9434952 --- /dev/null +++ b/v2/tutorial/en/conditional-rendering/index.html @@ -0,0 +1,660 @@ + + + + + + + + + + + + + + + + + + Conditional rendering + + + + +
+ +
+
+

Conditional rendering

+
+

+ This article assumes knowledge at reference, attributes manager in Inter's universe + and at least basic knowledge at CSS. +

+
+

+ In Inter's universe to render conditionally a HTML element, we use the following Inter building attributes: + +

+ +

The _if attribute

+

+ The value of this attribute must be the name of one of the properties of the data + object (in renderIf function), and if the value of that property is true, + the element will be rendered, otherwise(false value) it(the element) won't be rendered.

+ + + +
+
+
This one lives near you.
+ + + +
+
+
+ +

+We use the renderIf function to parse the template searching +for the elements that have to be rendered conditionally, and the referred function accepts +only an object as its argument. The value of the in property +indicates the value of the id attribute of the root element where we can find the element with conditional +attributes, the value of the data property must be a plain Javasript object +whose the values will be the conditional properties and the type of its values must be boolean(true/false). +The setRefs property will be explained throughout the article. +

+

+ +The renderIf function returns a reactive object, that object anable us to change the values +of the conditional properties causing changes in the interface, and this type of object in Inter, we call it +Reactor. +

+

The _elseIf attribute

+
+

+ This method is available since 2.1.0.

+
+

+The element that got this attribute attached to it must appear at first glance after an element with +an _if attribute. The _elseIf accepts +a value and the referred value will indicate the name of one of the conditional properties, and if +the value of the referred property is true the element will be rendered and the element +with the _if won't be rendered and i will happen also with others element with +_elseIf attribute inside the conditional group. + +

+ +
+

Do you have the right age to start working?

+ +

The input value is { idade }

+
+

+ Type your age in the input. +

+

+ { age } years old is not enough to start working! +

+

+ { age } years old is acceptable! +

+

+ { age } years old is just the right age! +

+

+ Hmmm, You're too old! +

+
+
+ +
+
+ +

+If the value of the conditional property emptyValue +is true, the element with the _if +attribute will be rendered and others won't, and for instance if the value of the isBetween0To15 +property is true, the element whose the value of the conditional is the referred property +will be rendered and others won't. +

+ +

+Do you see the grouping of the elements with conditional attributes? +Você vê o agrupamento dos elementos com os atributos condicional _if e _elseIf +In Inter's universe we call it conditional grouping. The deal in conditional grouping +is that when a conditional property is set to true automatically +the others are set to false, causing the removal of the others elements that are using +the conditional properties set to false and the rendering +of the element whose the conditional property was set to true. +

+ +

it's not recommeded do this:

+ + + +

+Why? You wandered, because when the value of the single +property changes to true, automatically Inter will set +married to false, because that property +is being used in a conditional grouping, causing unwanted removal of the first element +in the example. The deal here is: do not use a conditional property used in a conditional +group elsewhere. +

+ +

The _else attribute

+

+ + The element with the _else attribute to be considered valid + it must show up after an element with the _if attribute or + after an element with a valid _elseIf attribute. + +

+ +

+If the element with _else attribute is used after an element with the _if attribute, +while one is rendered the other will be unrendered. The element whose this attribute is attached +to will be rendered in the value of the conditional property of the previous element is set to false + +

+

+ If the element with the _else attribute is used at the end of a conditional grouping(after an element with the _elseIf attribute) + it(the element) will be rendered if all the properties used in conditional grouping are + false +

+ + + +
+
+
+

This one is a person!

+

This one is not a person

+
+ Inter's logo + + Uma pessoa + +
+
+
+
+
+ +

_ifNot Attribute

+

+It behaves like the _if attribute but in the inverse manner, +how come? The element with _if attribute will render if the value of its conditional property +is true right? So the element whose this attribute is attached to +will be only rendered if the value of its conditional property is set to false. +

+ + +
+ +
+

+ Are you really an Inter's friend? +

+
+
+
+ +

Observe method

+

+The behaviour of this method is quite similar to the one of the reference. +It will be a method of the conditional rendering reactor, it recieves +only a function as its argument and the referred function will be called +everytime the value of a conditional property change, the function will be called +with two arguments: +

+
    +
  • + The first argument will indicate the name of the changed property. +
    • +
  • The second argument will indicate the (new) value of the property.
    • +
+ +
+
+

Dalton is : married. single!

+ +
+
+
+ +

The setConds property

+

+We use this property when our aiming is to set the value of several properties in the same time +without much husle. It(the referred property) recieves only an object as its value, +and the property of the object must indicate the names of the conditional property whose its value will +be changed and the value? They're certainly the new values for the respective properties. +

+
+

+ An element mustn't have more than one conditional property(_if, _elseIf ,_else, _ifNot). + + +

+ +
+

+This article explained to you everyting about the conditonal rendering concept in Inter.

+ +
+
+
+
+ + + \ No newline at end of file diff --git a/v2/tutorial/en/instalation/index.html b/v2/tutorial/en/instalation/index.html new file mode 100644 index 0000000..31e9b50 --- /dev/null +++ b/v2/tutorial/en/instalation/index.html @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + Instalation + + + + + +
+ + + +
+
+

Instalation

+ +

+ To install Inter, you won't need to make one thousand setup, you will just need + to import Inter from CDN(jsDelivr) or download it and use it straight from your own machine. +

+ +

CDN

+ +

In version-number you'll certainily type the version number + you are aiming to use, for instance, if we are willing to use the version 2.0.15, + there we must type v2.0.15, you see? It must start with letter v. +

+

Localmente

+

+ Do you want to use Inter straight from your own machine? It's a peace of cake! + click on Download - v2.1.7, and now + you just have to import it in a script tag. +

+ + +

+ You probably are wondering, if I wanted to download an old version, where will I find it? You will find + all Inter's verions in Releases in Interjs Github repository. + Do not use an old version, only if you need badly. +

+ +

Now, you might be ready to find out how amazing Inter really is, let's write some code?

+
+
+
+
+ + + \ No newline at end of file diff --git a/v2/tutorial/en/introduction/index.html b/v2/tutorial/en/introduction/index.html new file mode 100644 index 0000000..776b8e0 --- /dev/null +++ b/v2/tutorial/en/introduction/index.html @@ -0,0 +1,98 @@ + + + + + + + + + + Introduction + + + + +
+ + + +
+
+ +

Introduction

+
+

O Inter does not assume knowlodge in other Javascript technologies (framewowrk + and libraries), You just have to know vanila Javascript and HTML you'll be ready to dive deep in Inter.

+
+

+ Inter is a Javascript framework designed to help you building even the most complex web front-end apps, without + any complex setup. +

+

+ It has a very simple, intuitive and easy to learn syntax that many others framework do not provide. It knows exactly + where and when to perform an interface update, and by the way, it's super reactive + +

+

+Inter only supports modern browsers, it means that no + Internet Explorer support. +

+In many cases, we become more proactive, when we love and know what we do, if you like tools +which embrace the easy to learn and use policy, you'll certainily fall in love with Inter, and you will become +quickly an expert, and becoming an expert, you will become more proactive with this framework in short timeframe! +

+ +

What are you waiting for? Let's dive deep in Inter!!!

+ + +
+
+
+ + \ No newline at end of file diff --git a/v2/tutorial/en/reference/index.html b/v2/tutorial/en/reference/index.html new file mode 100644 index 0000000..0640fa3 --- /dev/null +++ b/v2/tutorial/en/reference/index.html @@ -0,0 +1,508 @@ + + + + + + + + + + + + + + + + + + + Reference + + + + +
+ +
+
+

Reference

+
+

+ This article and others from this tutorial assume at least intermediate level in + Javascript and HTML. +

+
+

+ In Inter's universe, reference are curly-braces {}, + and inside them, it must have the name of one of the properties of the data object, + and they(the curly-braces) will be replaced by the value of the properties. Let's see one example. +

+ + +
+ +
+ +

Hey, { message }!

+ +
+ +
+ +

+ In the script tag from the example, You see the Ref + , don't you? This function is used to parse the target tamplate searching for references, and + it must recieve an object as it's argument. The value of the in property + indicates the id's value of the root element, where the reference where found, in our exemple, the root + element is the div element, isn't it? Why are we calling it as the root element? + It has one child element, whose name is p, and in the text of that element, there's a reference + named message. The value of the data property + must be an object, whose its properties will be the names of the references, and their values, will certainily + be the texts that will replace the references with the referred names. +

+ +

+ We use reference, when we want to update only a peace of our interface, and often it's expected + that the value of the reference changes, and here is where the reactor concept comes. + The Ref function returns a reactive object, with same properties as the data + object, and we use this new object, when we aim to change the values of the references, right now in this page, + open up the console in devTool, and type: reactor.messgae = "Inter is awesome!", or any other value, you'll see the interface + being updated in real time, to reflect the new value of the message reference. +

+ + +
+
+ +

Counting: { counter }

+ +
+ +
+

+ We are done with the Ref function. Let's dive a little bit + deep in the code inside the setInterval, Do you notice + that we are increase the value of the counter reference, right? It means that we are updating the value + of that reference, and Inter being reactive must react to these changes + by updating the part of the interface where this reference is being used. +

+ +

Ler o valor de uma referência

+ +

+ We can not only set the value of a reference, but we can also read the value of a reference, by doing so: + +

+ + + +

+ And the value variable will store the reference name.

+ +

+ Referência em atributos +

+ +

+ Don't tell anyone, I'll tell you a secret, did you know that reference can also be used in HTML attributes? + We can use them to read and set the attributes' values, that's it! We can use reference in any HTML atribute. Let's see one example: +

+ + +
+ +
+ +

The input value is : " { inputValue } "

+ +
+ +
+ +

+ O método observe +

+
+

observe + is a reserved property, you can´t use it as reference name. +

+
+

+ I believe, that you already got the ideia here! But let's go. It's a method of + the reactor object, it recieves a function as its argument, and the referred function will + be executed every single time a reference value changes, and it will be executed with 3 parameters. +

+ +
    +
  • + The first one, will indicate the reference name whose value was changed. + +
    • +
  • + The second one, will indicate the curent reference value. +
    • +
  • + And the last one, will indicate the previous reference's value. +
    • +
+ + +
+
+

The Grandpa is : { grandpa }.

+

The grandson is: { grandson }.

+
+ +
+ +

+ It's very simple, isn't it? If we change the grandpa reference value, automatically the last + name of te grandson will be changed to reflect the new name of the grandpa. So, open up the devTool console in this + page, and try to reassign a new value to the grandpa reference, and see the magic happening! + +

+ +

+ A propriedade setRefs +

+
+

+ You can not use setRefs as a reference name, it's a reserved property.

+
+ +

+ Well, the goal of this method is already described in its name, do you get it? It's used + to set multiple reference names in the same time in a less boring and in a more elegant way, + it only recieves an object as its value, and the properties of that object must be the names of the references + we're aiming to update, and the values? Are obviously the new values for each reference. +

+ + +
+
+ +

{ name } is { personality }

+
+ { name }'s photo +
+ + +
+ +
+ +

+If we try to set a value to unkown reference, Inter will reparse the template searching +for that reference. Now you know everythng about reference in Inter's universe. +

+ +
+
+
+
+ + + \ No newline at end of file