Skip to content

Instantly share code, notes, and snippets.

@jeanmachuca

jeanmachuca/index.html

Created January 26, 2019 03:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeanmachuca/9714eb246af32c426f9f2412f2ee05df to your computer and use it in GitHub Desktop.
Save jeanmachuca/9714eb246af32c426f9f2412f2ee05df to your computer and use it in GitHub Desktop.
Download ZIP
QCObjects Sample
Raw
index.html
<!doctype html>
<html class="no-js" lang="en">
<body>
<container id="contentLoader" ></container>
</body>
</html>
Raw
script.js
var canvas1,canvas2,canvas3,container;
CONFIG.set('relativeImportPath','src/');
/**
* Main import sentence.
*/
Ready(function (){
/**
* Super Container MyOwnBody
*/
Class('MyOwnBody',HTMLBodyElement,{
customAttr:'custom',
body:document.body // breakes default body element and replace with them
});
/**
* Another custom class definition
*/
Class('MyContainer',HTMLElement,{
width:400,
height:400,
customAttr:'custom attr container'
});
/**
* Another custom class definition
*/
Class('canvas',HTMLCanvasElement,{
customAttr:'custom'
});
/**
* Another custom class definition
*/
Class('MyCanvas2',HTMLCanvasElement,{});
var body = New(MyOwnBody); // binds to body
body.css({backgroundColor:'#ccc'});
var container = document.getElementsByTagName('container')[0].Cast(MyContainer); // cast any javascript dom object to QC_Object class
container.css({backgroundColor:'red'}); // access binding in two directions to dom objects
/**
* Instance a new custom canvas
*/
var canvas1 = New(canvas,{
width:100,
height:100,
});
var canvas2 = New(canvas,{
width:200,
height:100,
});
var canvas3 = New(canvas,{
width:300,
height:50,
});
canvas1.css({backgroundColor:'#000000'}); // like jquery and another style access
canvas1.body.style.backgroundColor='#000000'; // standard javascript style access
canvas2.body.style.backgroundColor='#0044AA'; // standard javascript style access
canvas3.body.style.backgroundColor='green'; // standard javascript style access
canvas1.append(); //append canvas1 to body
canvas2.attachIn('container'); // attach or append to specific tag containers
container.append(canvas3); // append canvas3 to custom tag binding
// canvas1.body.remove(); // remove canvas1 from dom
body.append(canvas3); // append canvas3 to body
});
Raw
scripts
<script src="https://quickcorp.github.io/QCObjects/QCObjects.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment