jQuery-Knob
jQuery-Knob copied to clipboard
How to integrate Knob + Polymer 1.0 + Custom Script?
Hi, im new in Polymer & Java. Right now im trying to set up a site which is build of Polymer 1.0, a custom java script (https://github.com/ztizzlegaming/CSGOWinBig/blob/master/src/script.js) and Knob.js. There is a countdown function in the script i want to use to dynamicly change the Knob of jQuery-Knob.js.
The Countdown Part in the custom script:
var mTimeLeft = 120;
var timerRunning = false;
function timer (timeLeft) {
if (!timerRunning || timeLeft <= 0) {
timerRunning = false;
return;
}
if (timeLeft !== undefined) {
mTimeLeft = timeLeft;
}
//Set something on the page to show the time left
$('#time-left').text(parseInt(mTimeLeft) + 's');
mTimeLeft--;
if (mTimeLeft <= 0) {
timerRunning = false;
return;
}
setTimeout(timer, 1000);
}
And here is my Knob function, which i set up as a Polymer Webcomponent (knob.html):
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="knob">
<style>
</style>
<template>
<input type="text" value="60" id="dial" data-width="200">
</template>
</dom-module>
<script type="application/javascript">
Polymer ({
is: "knob",
ready: function() {
$(this.$.dial).knob({
'min':0,
'max':120,
}
);
}
});
</script>
So the Custom Script is directly called in index.html of Polymer, where i called the Knob.js aswell:
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="bower_components/aterrien/jQuery-Knob/js/jquery.knob.js"></script>
and
<paper-card elevation="1" class="pot">
<knob></knob>
</paper-card>
Im sitting on this since hours… does anybody have an idea?
For one thing, dom-module
id
-s must be double worded with a hyphen in between:
To register a new element, call the Polymer function, which registers a new element with the browser. Registering an element associates a tag name with a prototype, so you can add properties and methods to your custom element. The custom element’s name must contain a dash (-).