Search code examples
phpstormwebstormlive-templates

Live template with predefined list of variable and complex logic of add parameters

I want create live template for generate fa-icons. For example next

<i class="ace-icon fa fa-arrow-right icon-on-right align-top bigger-125"></i>
<i class="ace-icon fa fa-arrow-left icon-on-left bigger-140"></i>
<i class="ace-icon fa fa-times icon-on-right"></i>
<i class="fa fa-bars"></i>

Rules to generate is next:

  1. Minimum generated template is <i class="fa fa-$ICON_NAME$"></i>
  2. Need to have ability add classes ace-icon and if it is added setup icon-on-[right|left]
  3. If $ICON_NAME$ is fa-arrow-[right|left] and setted ace-icon set direction part as it setted in icon-on-[right|left]
  4. Has ability to optional write aditional classes like align-top in example
  5. If setup $SIZE$ in bigger-$SIZE$ add this class else skip
  6. Options of $ICON_NAME$ and $SIZE$ must be predefined.

Assumed live template

<i class="$ACE_CLASS$ fa fa-$ICON_NAME$ icon-on-$ACE_DIRECTION$ $OPTIONAL_CLASS$ bigger-$SIZE$"></i>

My questions:

  1. How to setup predefined option list for $ICON_NAME$, $ACE_DIRECTION$ and $SIZE$?
  2. How to not render bigger-$SIZE$ if size is empty?
  3. How check if $ICON_NAME$ contains $ACE_DIRECTION$ and switch it?
  4. How to render icon-on-$ACE_DIRECTION$ and bigger-$SIZE$ only if $ACE_CLASS$ is true?
Solution

  • How to setup predefined option list for $ICON_NAME$, $ACE_DIRECTION$ and $SIZE$?

    enum(sCompletionString1,sCompletionString2,...) -- https://www.jetbrains.com/help/phpstorm/2017.1/live-template-variables.html#predefined_functions

    How to not render bigger-$SIZE$ if size is empty?

    Not possible -- Live Templates do not have conditions or loops.

    I may only suggest to have another enum with all bigger-XXX options, including empty one (basically -- instead of bigger-$SIZE$ have $BIGGER-SIZE$).

    2017.2 should have GroovyScript support -- maybe you can then code your own Live Template function or something (see this link for some doc links)...

    How check if $ICON_NAME$ contains $ACE_DIRECTION$ and switch it?

    Same as above: not possible -- Live Templates do not have conditions.

    How to render icon-on-$ACE_DIRECTION$ and bigger-$SIZE$ only if $ACE_CLASS$ is true?

    Same as above: not possible -- Live Templates do not have conditions.

    You may create more than one Live Template that would cover few different scenarios (they would have different abbreviations, of course: e.g. fai for one case, fai2 for another etc).