Typing frustrations

typing.js

/* I'm describing a few buttons in JS, I want to programatically edit css classes, 
but that kind of operation isn't supported out of the box. 
I found a good example I'll follow through at a later date, but for now, pressing forward.
https://web.archive.org/web/20080828162848/http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

So here I am, I know it's poor programming style, 
but It's a containable situation and all together to be refactored later. 
Anyway. I want multiple buttons, I've created a helper funciton, createElement, 
which makes me an hmtl node with the following subset of specifications. 
Here's the first button: */
let runButton = createElement({node: "button",
                             attributes: {id: "runButton"},
                             classes: "controlButtons",
                             styles: {width: "100%"}
                              })

/*
How do I write these 3 buttons?

ex: Utilizing visual block I copy/paste the chunk, then do a scoped substition with :s/run/pause ...
*/
  let runButton = createElement({node: "button",
                               attributes: {id: "runButton"},
                               classes: "controlButtons",
                               styles: {width: "100%"}
                              });
  let pauseButton = createElement({node: "button",
                               attributes: {id: "pauseButton"},
                               classes: "controlButtons",
                               styles: {width: "100%"}
                              });
  let resumeButton = createElement({node: "button",
                               attributes: {id: "resumeButton"},
                               classes: "controlButtons",
                               styles: {width: "100%"}
                              });

 /* I wish I could copy this chunk with a parameterized hole, like: */
let /*HOLE*/Button = createElement({node: "button",
                               attributes: {id: "/*HOLE*/Button"},
                               classes: "controlButtons",
                               styles: {width: "100%"}
                              });

/* then copy pasting this, or utilizing a macro, 
would put the text then put my cursor at these holes where I could type once 
and then tab out and be done immediately */

/* I can probably do this in default vim, lets see. 
   say I type out the below, ok looks good, now I want 3.
*/
let runButton createElement({node: "button",
                               attributes: {id: "runButton"},
                               classes: "controlButtons",
                               styles: {width: "100%"}
                              });

/* I edit it to look like: */
FILL /* this is line number 59*/
let HOLEButton = createElement({node: "button",
                               attributes: {id: "HOLEButton"},
                               classes: "controlButtons",
                               styles: {width: "100%"}
                              });

/* I create the following macro, with newlines for readability and comments:

:59               jump to line number of FILL
"fyw              copy FILL into named buffer f
/HOLE<ret>        search for HOLE
d4l               delete HOLE
"fP               paste from named buffer f
n                 repeat for next HOLE
dw
"fP
:52               done, jump back to FILL and delete
dw
*/

/*cursor here after done*/
let FILLButton = createElement({node: "button",
                               attributes: {id: "FILLButton"},
                               classes: "controlButtons",
                               styles: {width: "100%"}
                              });

/* This would do it but it is so hard coded and custom to place. 
It took me a few minutes to write it out though I could do it much more quickly now that I've done it once. 
I wish these kind of programmatic options were available to my task of typing. 
Again we can start a conversation about style, but similar yet different code seems to crop up everywhere. 
We need better tools than copy paste. 
m4 gives an inspiration for a style of code that might be writtin about the editor, rather than the code.

/* I think snippets are what I'm really looking for here, 
and I bet they have the ability to create some on the fly I'll do some digging later */

Notice that neither FILL nor HOLE are "javascript" per se. FILL is literally a syntax error, but HOLE isn't intended to exist. It's just a means to an end which will come seconds later. This kind of operation has nothing to do with javascript.

Chaining functions is probably the answer here, with string templates and such