Get Started
Download
Developer: PoryaGrand.ir
GitHubStackoverflowTwitter
version: 1.2.2

What is Tedjs?

Basically tedjs is a javascript plugin or can be a framework . But it is more than a plugin it is a platform to create your ideas . 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

Library Oriented

Tedjs is a library oriented platform that means , the core of tedjs is in a minimal state and relies on its libraries but it has most basic needed functions like DOMs functions, hash , cookie ,... . the size of js file is only 65 kilobytes. tedjs provides APIs to create HTML DOMs and any other functions.

Library Manager

tedjs provide a service for developers to add their libraries inside the library manager of tedjs to be accessable to all users. Beside that , every developer can create document page for libraries that it is integerated with github in markdown format.

Progress Bar Element

for the first example , a responsive progress bar should be a good example. in tedjs , we have access to all parts. in designing an element we have access to attributes , inner content and DOM properties, to create a fully responsive DOM. this example shows an small widget that can be created by tedjs. the Library tab is the main code of element. in the Result tab you can change the Range Input to change the bar and check the Inspector.

Dynamic Bar Element

The Current Value is 4%

 h4, .RangeBox p{ text-align:center; color:#fff; margin:20px 0px; font-family:'Open Sans' } .RangeBox{ width:100%; text-align:center; padding:20px 0px; } #Show{ color:#0092CA } ainclude('file: ./libraries/ex1.js'); tedApi.bind("#Range","change",function(){ tedApi.elm("#bar").value = this.self.value; tedApi.html("#Show",tedApi.elm("#bar").value); }); var bar = ted.define("bar", ["value"]); ted.create(bar, function(val) { var $this = this; 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(""); 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) + "%" }); }); Object.defineProperty(this.self, 'value', { get() { return $this.attr("value"); }, set(val){ $this.attr("value",val); } }); } this.show(); });

Email Validation Attribute

tedjs in addition to create elements , can create attributes for all or some mentioned tags. this example is a simple attribute which validate an email in input tag and show an user inserted error at bottom of it. in here has been used an other way to include the library to tedjs . (js tab)
you can read more about tedjs.export in document.
enter some emails to check the results.

Please Enter Your Email To Validate

 div{ width: 100%; text-align: center; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); } p{ margin: 0px; color: #fff; font-family: "Open Sans"; } input{ background: #fff; border: solid 1px #2962ff; padding: 5px 10px; border-radius: 5px; box-shadow: 0 0 32px 2px rgba(0, 145, 203, 0.35); margin: 21px 0px; outline:none; } input:focus{ box-shadow: 0 0 32px 2px rgba(0, 145, 203, 0.5); } tedApi.export.isEmail = function(ted){ ted.createAttr("isEmail",function(val){ var messageSpan = tedApi.elm(""+val+""); if(this.self.type !== "text"){ return 0; } tedApi.css(messageSpan,{ color:"red", display:"none" }); tedApi.insert(messageSpan).after(this.self); this.bind("input",function(e){ if(!tedApi.isEmail(this.self.value)){ tedApi.css(messageSpan,{ display:"block" }); } else{ tedApi.css(messageSpan,{ display:"none" }); } }); },["input"]); }

Template Engine with TextNodes

this is the power of tedjs to be a platform. a platform to create your frameworks. All your thoughts can be easily implemented.
this example clearly shows what you can do. creating template engine can help client programming be more fast and will not decrease the SEO for using Custom Elements.
in here , we create an if...else statement block template with tedjs TextNode Engine.
it's so easy. test it ...

@if (false) this is a if data

hello

@else this is else data @endif
#TextBox{ text-align:center; color:#fff; font-family:"Open Sans"; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); } tedApi.export.TemplateEngine = function(ted){ var $ifStack = []; ted.createTextNode(/\@if\s*\((.+?)\)/,function(whole,p1){ var that = this; tedApi.splitTextNode(this,whole); $ifStack.push({ cond:p1, others:null, elm:that }); }); ted.createTextNode(/\@else/,function(whole){ var poped = $ifStack.pop(); tedApi.splitTextNode(this,whole); if(!tedApi.isUndefined(poped)){ poped.others = this; } $ifStack.push(poped); }); ted.createTextNode(/@endif/,function(whole){ var $ifs = $ifStack.pop(), $ifbw = null,$elsebw = null; tedApi.splitTextNode(this,whole); if(typeof $ifs === typeof undefined){ return 0; } if(tedApi.isTextNode($ifs.others)){ $ifbw = tedApi.between($ifs.elm,$ifs.others); $elsebw = tedApi.between($ifs.others,this); tedApi.delete([this,$ifs.others,$ifs.elm]); } else{ $ifbw = tedApi.between($ifs.elm,this); tedApi.delete([this,$ifs.elm]); } if( !tedApi.run.call( window, "try{if("+$ifs.cond+"){return true;}}catch(e){}return false;" ) ){ tedApi.delete($ifbw); } else if($elsebw !== null){ tedApi.delete($elsebw); } }); }

Area Description with CommentNodes

comments are not always important for users. It just helps programmers to understand what they do. Another point is that comments in client side programming like html will be ignored by Search Engines. so we can use them to store and retrive data that we do not want to be seen by search engines or users. In addition to the store and retrive data , you can process them to do what you want even showing them to users .

this is the before p element

this is the p element

this is the after p element
div{ color:#fff; font-family:"Open Sans" } #box{ padding:20px; } p{ padding:5px 10px; background:#fff; color:#000000; cursor:pointer; } .descBlock{ display:none; position:absolute; } tedApi.export.Description = function(ted){ ted.createComment(/\@desc[\s ]*\:([^]+)/,function(whole,content){ var afterElm = this.nextElementSibling, descBlock = '

{{BODY}}

', temp = ""; if(tedApi.isString(content) && tedApi.isNode(afterElm)){ content = content.trim(); temp = tedApi.elm(descBlock.replace("{{BODY}}",content)); if(tedApi.isNode(temp)){ tedApi.insert(temp).after(afterElm); tedApi.bind(afterElm,"mousemove",function(){ var cu = (tedApi.cursor()); tedApi.css(temp,{ display:"block", top:cu.client.client.top+5 + "px", left:cu.client.client.left+5 + "px" }); }); tedApi.bind(afterElm,"mouseleave",function(){ tedApi.css(temp,{ display:"none" }); }); } } }); }

Creating Effects With AnimGraph

in tedjs in addition of DOM engine functions , most of needed functions also has been implemented. this functions are like css , selection of dom , data validations , .. and the animation function . animGraph is a engine that will evaluate callback in pysical enviroment on graph lines . you will find more informations in document.

this is test
 #test{ background:#fff; color:#000; padding:20px 30px; margin:0 auto; width:40%; text-align:center; font-family:"Open Sans"; top:30%; position:relative; } #Repeat{ margin: 0 auto; position: absolute; bottom: 10%; left: 0px; right: 0px; display: block; width: 169px; background: #2962ff; border: none; padding: 5px 0px; border-radius: 5px; cursor: pointer; color: #fff; } var testElm = tedApi.elm("#test"); tedApi.export.AnimationShake = function(ted){ var animShake = new tedApi.animGraph([ [100,200] ], function(x, y,per) {}); animShake.precent(0,function(){ tedApi.css(testElm,{ transform:"translate(1px, 1px) rotate(0deg)" }); }); animShake.precent(10,function(){ tedApi.css(testElm,{ transform:"translate(-1px, -2px) rotate(-1deg)" }); }); animShake.precent(20,function(){ tedApi.css(testElm,{ transform:"translate(-3px, 0px) rotate(1deg)" }); }); animShake.precent(30,function(){ tedApi.css(testElm,{ transform:"translate(3px, 2px) rotate(0deg)" }); }); animShake.precent(40,function(){ tedApi.css(testElm,{ transform:"translate(1px, -1px) rotate(1deg)" }); }); animShake.precent(50,function(){ tedApi.css(testElm,{ transform:"translate(-1px, 2px) rotate(-1deg)" }); }); animShake.precent(60,function(){ tedApi.css(testElm,{ transform:"translate(-3px, 1px) rotate(0deg)" }); }); animShake.precent(70,function(){ tedApi.css(testElm,{ transform:"translate(3px, 1px) rotate(-1deg)" }); }); animShake.precent(80,function(){ tedApi.css(testElm,{ transform:"translate(-1px, -1px) rotate(1deg)" }); }); animShake.precent(90,function(){ tedApi.css(testElm,{ transform:"translate(1px, 2px) rotate(0deg)" }); }); animShake.precent(99,function(){ tedApi.css(testElm,{ transform:"translate(1px, -2px) rotate(-1deg)" }); }); animShake.precent(100,function(){ tedApi.css(testElm,{ transform:"none" }); }); animShake.gravity(true).start(); tedApi.bind("#Repeat","click",function(){ animShake.gravity(true).start(); }); }
Main Menu
Community
Developers
web stats