jQuery-Knob icon indicating copy to clipboard operation
jQuery-Knob copied to clipboard

How to integrate Knob + Polymer 1.0 + Custom Script?

Open theRod15 opened this issue 9 years ago • 1 comments

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?

theRod15 avatar Dec 14 '15 13:12 theRod15

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 (-).

HaykoKoryun avatar Dec 16 '15 18:12 HaykoKoryun