Splits the Campaign CSS editor into multiple named fields for easier management and adds syntax highlighting
Versión del día
This script introduces multiple changes to the Boosted tab of the Edit Campaign form in Kanka. The cornerstone feature is that you can click a button to split your CSS into multiple form fields. Those fields are collapsed by default to help you quickly find the section you need, they can be renamed and reordered easily and they provide syntax highlighting using a customizable theme.
It's still early in this script's life and you might lose changes. Most notably, submitting the form while your code is split into sections could lead to unexpected results, and certainly would discard all changes made while split. I might be able to properly interface with the form submission button and keyboard shortcut in the distant future, but that is not a priority at the moment.
Just click the Split CSS sections button above the default CSS field to activate syntax highlighting and split your code into multiple fields if you already have section delimiters in place. If not, you can use the Create new section button below the editor to add more sections. When you're done editing, remember to click the Merge CSS sections button before saving!
Each code block is hidden in a details HTML element and collapsed by default. Depending on your browser, there should be an arrow or some other icon near each title to expand and collapse each section.
Each section name is an input field that you can edit. Of course, changes to titles in the full (flat) CSS will also be reflected when splitting again.
Next to each section name, an icon (arrows pointing to the four cardinal directions) can be clicked and dragged to move the section to another position. When you merge the fields, the flat CSS field will reflect this new order.
The script looks for the following syntax for section titles: /*† Title †*/. Any such comments already in your code will be handled seamlessly.
You can find instructions at the top of the script on how to choose and change the editor's theme in your copy of the script. You can also add your own CSS rules to the .CodeMirror element in your campaign CSS or in your copy of the script. Just remember to reapply your changes when updating the script, as there will certainly be updates at this stage.
This script relies on CodeMirror for the syntax highlighting, automatic indentation and related features. I've kept the editor close to default settings for now, but feel free to get in touch to request additional CM options and features be added to the script by default or via configuration options.
