Hello! Today I’m playing with new github toy Found an interesting resource.
I managed to create this code:
var lock = new PatternLock('#patternHolder',{
radius:25, margin:20,
mapper: {1:22,2:31,3:42,4:14,5:81,6:32,7:37,8:51,9:88},
onDraw: function(pattern){ console.log(lock.getPattern()); }
});
Which works so fine
But i’m just figuring how i can set the background on the js code? (Because lets suppose i want to let the final user do the customizaton he wants. He will be able to edit radius, margin, but i want add there a field like background: #3382c0
Because if the background is defined in the javascript code, i know how to change that, but if the background comes from .css stylesheet link i don’t know how to edit the background (my logic) says me that’s not possible because its a static link, can’t edit it anymore.
This is the link to the .css file: And in the first line i see where the background is defined: .patt-holder{background:#3382c0; -ms-touch-action: none;}
Thanks for your answer @Paul_Wilkins but I’m getting an error:
Uncaught TypeError: Cannot read property 'style' of null
at HTMLDocument.eval (eval at g.create_code (x3:100), <anonymous>:11:44)
at j (x3:8)
at k (x3:8)
Tried to solve it myself but still getting the error.
I mean… i suppose it’s a question of execution time.
If the final user is going to preconfigure the customization, then put it into the CSS.
If the final user is going to configure the customization mid-use, then you’ll have to go through javascript.
Yeah, but I have in my mind to build in long-term a platform something like you can’t access to .css / upload .css, but you can edit/play with the .js code.
So I’m really not building anything right now, just I’m playing with githubs projects that I find interesting and just for fun / learn.
Just the case if a user wants to edit the background color, if I give him the pre-built .js code and add him a color input where he can pick the color without coding anything.
the .CSS is a file on the system.
the .JS is a flle on the system.
Modifying either (preconfiguration) is an identical operation.
Now, can you code HTML elements to provide things for the JS to read and use? Yes. Absolutely. You could put a text box for “Enter Background Color: #<box>”, and then the JS code can read the contents of that box.
(Mid-use configuration).
I should point out that the latter is not ‘changing the code’. The code would ALWAYS say “go read the value of this text box and make the background color that color”. It allows flexibility in that the value of the box can be different every time the code runs. (or it could be the same)
I want to make it as easier for user possible. Like give him a pre-created forms, inputs where he can edit whatever of the element without touching the .js code (for advanced users they can play with the code as they want) just this is for some kind of newbies users
It would make more sense to add this functionality to the PatternLock project itself (fork => edit => make a pull request) than hacking the page that uses it. esp. since there is no guarantee that the selectors will keep their names.
Found an interesting resource.
