starting with snap...
This commit is contained in:
@@ -178,7 +178,7 @@ body[eicapp] {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 0 var(--eicui-base-spacing-s) 0;
|
padding: 0 0 var(--eicui-base-spacing-s) 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
height: auto;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
[eicapp] .app-content-thesaurus {
|
[eicapp] .app-content-thesaurus {
|
||||||
|
|||||||
@@ -1,8 +1,13 @@
|
|||||||
|
<style>
|
||||||
|
article.mainDashboard{ height:100%; }
|
||||||
|
article.mainDashboard>section:first-of-type{
|
||||||
|
height:100%;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<article eiccard media class="mainDashboard">
|
<article eiccard media class="mainDashboard">
|
||||||
<header>
|
|
||||||
<h1>Simulation Main dashboard</h1>
|
|
||||||
</header>
|
|
||||||
<section>
|
<section>
|
||||||
hello world
|
<svg class="stb" width="100%" height="100%"></svg>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ class MainDashboardView extends EICDomContent {
|
|||||||
super()
|
super()
|
||||||
Object.assign(this, app.helpers.activeAttributes)
|
Object.assign(this, app.helpers.activeAttributes)
|
||||||
//this.tileMarkup = app.Assets.Store.html['/app/assets/html/mailing/tile.html']
|
//this.tileMarkup = app.Assets.Store.html['/app/assets/html/mailing/tile.html']
|
||||||
|
this.snap = null
|
||||||
}
|
}
|
||||||
|
|
||||||
DOMContentLoaded(options) {
|
DOMContentLoaded(options) {
|
||||||
@@ -11,7 +12,15 @@ class MainDashboardView extends EICDomContent {
|
|||||||
const components = ui.eicfy(this.el)
|
const components = ui.eicfy(this.el)
|
||||||
this.setupTriggers(components)
|
this.setupTriggers(components)
|
||||||
this.setupRefs(components)
|
this.setupRefs(components)
|
||||||
|
this.snap = Snap("svg.stb");
|
||||||
|
var agent = this.snap.circle(150, 150, 20);
|
||||||
|
agent.attr({
|
||||||
|
id: 'agent42',
|
||||||
|
fill: "#BFB",
|
||||||
|
stroke: "#0A0",
|
||||||
|
strokeWidth: 2
|
||||||
|
});
|
||||||
|
setTimeout(this.moveit.bind(this), 3000);
|
||||||
}
|
}
|
||||||
|
|
||||||
DOMContentFocused(options) {
|
DOMContentFocused(options) {
|
||||||
@@ -23,6 +32,23 @@ class MainDashboardView extends EICDomContent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
DOMContentBlured(options) { this.wasBlured = true }
|
DOMContentBlured(options) { this.wasBlured = true }
|
||||||
|
|
||||||
|
moveit(){
|
||||||
|
var myCircle = this.snap.select('#agent42')
|
||||||
|
|
||||||
|
var newx = parseInt(myCircle.attr('cx')) + 600
|
||||||
|
var newy = parseInt(myCircle.attr('cy')) + 200
|
||||||
|
|
||||||
|
// animate translate
|
||||||
|
myCircle.animate(
|
||||||
|
{
|
||||||
|
cx: newx,
|
||||||
|
cy: newy,
|
||||||
|
},
|
||||||
|
1000, // duration in ms
|
||||||
|
mina.linear // easing
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
app.registerClass('MainDashboardView', MainDashboardView)
|
app.registerClass('MainDashboardView', MainDashboardView)
|
||||||
|
|||||||
Reference in New Issue
Block a user