tedjs Logo

tedjs

Easy Element Definer

Library Oriented JavaScript FrameWork Plugin

ted(2ed) is a personal Open Source Project. ted is Under MIT Licence

Designed By Porya Grand

Register Close


Name: Please Enter Your Name
Username: Your Username is base of Libname
Libname:  [username].[lib].[namespace]
Email: Verifying link will send to your email.

Login Close


Token: Please Enter Your Sent Token Api
Home Documents libraries Contribute Register Login

What is tedjs?

tedjs is an open source project that makes HTML extensible like XML but more easier to use. tedjs can be a platform to create your languages based on HTML and JavaScript. it has all basic needed functions to handle what you need.

Hosted On TedjsCDN Server

Download Version: {{js:version}}

Open Source Project Under MIT Licence

What Is tedjs?

Basically tedjs is a javascript plugin or can be a framework . But it is more than a plugin . it can help you to create your library of elements or use another developer's libraries. tedjs have most of needed functions to help you. it makes your code clear , understandable and powerful. it works alongside every other javascript libraries. this project is open source under MIT licence. tedjs is waited for you...

How Does tedjs Work?

Just Need to Attach tedjs Script to your page.(Download Or CDN).
now you can use "include" function in javascript to import needed elements and functions. every thing is done. now you can use defined elements in you html.
The Important point is that all libraries must be loaded by function "include" to run . Read More on Documents
Attention to examples below

<script src="https://cdn.tedjs.org/tedjs/{{js:version}}/js/2ed.min.js"></script>
<!--Include-->
<script>var PackageTest = include("username.libname.namespace");</script>
<!--aInclude-->
<script>
ainclude("username.libname.namespace")
.then(function(data){

...

});
</script>

EX1:Time Count Down!

in this example you will see how can create a Time Counter Element .
its tag name is <tcount>.
it has a "start" attribute that contane the start point time to count down. it will be in seconds
NOTE: All Functions Are Explained in tedjs Documents

javaScript: Element Definition
var tcount = ted.define("tcount", ["start"]);
ted.create(tcount, function( start ) {
start = parseInt( start );
var THIS = this;
if (start > 0) {
setInterval(function() {
THIS.html( tedApi.SecToTime(start--).string );
}, 1000);
}
this.show();
});

HTML: Element Usage
<tcount start="1900"></tcount>

Live Preview:

EX2:Progress Bar

If you look at the source of website you will see that the various elements of unofficial has been used. like "loading" , "circ" , "menu" ,"dropdown" and etc .
in this example you will see how to create a progress bar like this site loading. or element "bar".
for more details about this site element , look at "js/lib.js" on Github.
in this case if you change the value of "value" attribute of "bar" Element , it will make change on width of progress bar.
Now in "Live Preview" Change the value and apply it to see the changes.
use "inspect" of Browser to see How it work.
Remember that use "this.show()" to make your element visible .
Every time you define an element it will be created with "display:none".

javaScript: Element Definition
var bar = ted.define("bar", ["value"]);
ted.create(bar, function(val) {
val = parseInt(val);
if (val >= 0) {
this.ElementStyle({
overflow: "hidden",
width: "80%",
position: "relative",
height: "20px",
border: "solid 1px #ccc",
margin: "0 auto"
});
this.html("<span></span>");
var span = this.find("span");
tedApi.css(span, {
height: "20px",
width: (val <= 100 ? val : 0) + "%",
background: "#ccc",
osition: "relative",
display: "block"
});
this.bind("attrchange:value", function(value) {
tedApi.css(span, {
width: (parseInt(value) <= 100 ? parseInt(value) : 0) + "%"
});
});
}
this.show();
});

HTML: Element Usage
<bar value="15"></bar>

Live Preview:


EX3:Hover Attribute

this is a few of tedjs power. ;)
Now you can define your own Attribute globally or special for some elements.
in here we have a "hover" attribute that simulating "mouseover". even you can create a special function for every element that have this attribute.
like function "onclick" that works on both javascript and html attribute.
it depends on you that how much do you want to work on them!
in this code as you see we have a clear function.but the last part of function is "['p']" :
it means that attribute is just for element "p".
to make it globally to use in every tag just put a empty array like : "[]". just this.
this parameter must be an array and can't be undefined.

javaScript: Attribute Definition
ted.creatAttr("hover", function(val) {
this.bind("onmouseover", function() {
return (new Function(val)).call(this.self)
});
}, ["p"]);

HTML: Attribute Usage
<p hover="alert('You Hovered Me! TagName:'+this.tagName)">Hover Me</p>

Live Preview:


Hover Me

EX4:Text Node

Do you like create a inline executable data like Angularjs or apml?
Ok now you can! you can Write "{{Data}}" in html and tedjs will compile it for you in your way!
for example changing content of paragraph with input value changing...
or everything you imagine! in this example you will see how to create a inline javascript executor!
in EX4 you will see how to create a such executor.but it is a very simple one
it required to work on it for a globally support of element.
in this function "createTextNode" the pointer "this" is just TextNode. to use functions you must use "tedApi" functions.
there is no functions in class of this function.

javaScript: TextNode Definition
ted.creatTextNode(/\{\{js:\s*([^\{\}]+)\}\}/g, function() {
var Arg = arguments;
var THIS = this;
function don() {
ted.returnBack(THIS)
var text = tedApi.text(THIS);
for (var i = 0; i < Arg.length; i++) {
var val = Arg[i].match(/\{\{js:\s*([^\{\}]+)\}\}/)[1];
try {
val = eval(val);
} catch (e) {}
text = text.replace(Arg[i], val);
}
tedApi.text(THIS, text);
}
tedApi.bind("#Live-test-ie", "oninput", function() {
don();
});
don();
});

HTML: TextNode Usage
<input type="text" id="Live-test-ie" placeholder="type in box..." />
<br/>
{{ js: ("text: "+tedApi.elm('#Live-test-ie').value) }} |
{{ js: ("Number: "+parseInt(tedApi.elm('#Live-test-ie').value)) }}

Live Preview:



{{js: ("text: "+tedApi.elm('#Live-test-ie').value) }} | {{js: ("Number: "+parseInt(tedApi.elm('#Live-test-ie').value)) }}

EX5:Comment Node

Comment Node is like Text Node but with a little difference.
text node is a simple text in html that is visiable but commnets are hidden.
in function they are same.like text node pointer "this" is CommentNode.
there is no in class function.
the definition is like textnode . you must define it by RegExp.
in this example you will see how to create a browser detector.
this comment will put defined text of each browser in element "p#Live-Prev-comment" that is in Preview Part.If you test it in an other browser you will see that the value show your browser name.

javaScript: CommentNode Definition
ted.creatComment(/if\[([a-z]+)\]\:([^\n\r]+)/g, function() {
var Browser = tedApi.browser();
if (Browser != -1) {
for (var i = 0; i < arguments.length; i++) {
var val = arguments[i].match(/if\[([a-z]+)\]\:([^\n\r]+)/);
if (val[1].toLowerCase() == Browser) {
tedApi.html("#Live-Prev-comment", val[2]);
}
}
}
});

HTML: CommentNode Usage
<!--
if[chrome]: It is Chrome
if[opera]: It is Opera
if[firefox]: It is Firefox
if[safari]: It is Safari
if[ie]: It is IE
if[edge]: It is Edge
-->

Live Preview:


EX6:Error Handling

One of the big problems in programing is Errors and one of that errors is Error of type of variables.
imagine you need that a function just accept Array variables and not NodeLists, you can use "tedApi.isJustArray()".
this function will find out!
all such handlers function support multi input arguments like "fn(arg1,arg2,...)" and will "AND" them together.
more Reading in Documents.

javaScript: Handlers Functions
tedApi.isAlpha( "abcd$" );
tedApi.isArray( [], 54 );
tedApi.isInt( 123 );
tedApi.isFloat( 12.3, 4.2, 0.0005, 3 );
.
.
.
tedApi.isTag( tedApi.elm("br")[0] );
tedApi.isEmail( "test@test.com" );

Live Preview:


Alpha: {{run: tedApi.isAlpha( "abcd$" )}}
Array: {{run: tedApi.isArray( [], 54 )}}
Int: {{run: tedApi.isInt( 123 )}}
Float: {{run: tedApi.isFloat( 12.3, 4.2, 0.0005, 3 )}}
Tag: {{run: tedApi.isTag( tedApi.elm("br")[0] );}}
Email: {{run: tedApi.isEmail( "test@test.com" )}}

EX7:Animation

Animation?! No it is not Animation Always You Work With ! You Are Free to do every thing.
Create your animation.Create your Effect!
like Fade , Bounce , Beat , etc... .
draw your graph and set range and top points in function.function will create your graph!
in here we want create a bounce of a ball!
Note: In Documents All Functions Completely Explained.
Note: Element "div#bal" is pointed ball to be affected.

javaScript: Animation Function
this.animBalBounce = new tedApi.animGraph([
[200, 200],
[150, 150],
[100, 100],
[50, 50],
[25, 25],
[15, 15],
[7, 7],
[5, 5],
[3, 3],
[1, 1],
[0, 0]
], function(x, y) {
var doc = tedApi.elm("div#bal");
var wid = parseInt(tedApi.css(tedApi.elm(".Example")[0], "width")) - 10;
var len = 200 + 150 + 100 + 50 + 25 + 15 + 7 + 5 + 3 + 1;
doc.style.bottom = y + "px";
doc.style.left = (tedApi.floatPoint((x * wid) / len, 2)) + "px";
});

Live Preview: