HannaCodeDialog

[Robin S]

  On 4/11/2017 at 4:29 AM, tpr said:

how about adding items that wouldn't require Hanna code module? What I have in mind is having eg a

$config->hannaCodeDialogItems = array( item1 => function () { ... }, ... )

code somewhere in template files so one could easily insert custom items to ckeditor?

Expand  

Not sure I understand fully, but wouldn't that be reinventing the wheel? Hanna Code already does a great job of allowing the result of any custom code/function to be inserted into a textarea.

  On 4/11/2017 at 4:29 AM, tpr said:

Perhaps $config could be replaced with $page.

Expand  

Do you mean so you could have certain tags that are available only on certain pages? Because that is what the getDropdownTags() hook allows for:

 

[tpr]

The main motivation is to make the module work without the Hanna code module.

config/page: its just a different approach to have a value available for the module. Perhaps $config is more appropriate here.

[Andreas Augustin]

  On 4/10/2017 at 11:44 PM, Robin S said:

Thanks for the report. Are you running PHP 7.1? I think that's the version that started enforcing stricter numeric values and throwing errors like this.

I tested in PHP7.1 and I can't reproduce this issue. Also, I can't see how this error could be connected to HannaCodeDialog. From what I've read the "non well formed numeric value" error occurs when some arithmetic or other operation that expects an integer receives a string instead. And line 118 of Database.php is:

$timerTotalSinceStart = Debug::timer() - $timerFirstStartTime;

So probably Debug::timer() or $timerFirstStartTime is not an integer, but this is core code that relates to the debug mode tools and HannaCodeDialog has nothing to do with that.

Do you see the error as soon as you install HannaCodeDialog? Do you see it if you have no Hanna codes defined when the module is installed (I'm wondering if the problem is with one of your Hanna codes rather than the module itself)? If you uninstall HannaCodeDialog does the error go away?

 

I will support this in the next version. The intention was to avoid needlessly attaching the plugins to every instance of CKEditor if the textformatter wasn't applied to that field, but I guess to support $hanna->render() there's no way to know if a CKEditor field needs the plugins or not.

 

I'm having trouble understanding exactly what's going wrong for you here. Make sure you meet the prerequisites and have completed the installation process:

• TextformatterHannaCode must be installed.
• TextformatterHannaCode must be applied as a textformatter to your CKEditor field.
• You must have at least one Hanna code created.
• Install HannaCodeDialog module.
• Edit the settings for your CKEditor field and in "Input > CKEditor Settings > CKEditor Toolbar" add "HannaDropdown" (to be precise, with a comma space separating it from the other items there)

Expand  

 

Yes I'm running on PHP 7.1.1 and all of the steps are done.

I switched to PHP 7.0.15 and the error is now gone. PHP 7.0.15 is okay for me - so I can ingore the error for now

 

 

[danielsl]

  On 4/10/2017 at 11:44 PM, Robin S said:

 

• TextformatterHannaCode must be installed.
• TextformatterHannaCode must be applied as a textformatter to your CKEditor field.
• You must have at least one Hanna code created.
• Install HannaCodeDialog module.
• Edit the settings for your CKEditor field and in "Input > CKEditor Settings > CKEditor Toolbar" add "HannaDropdown" (to be precise, with a comma space separating it from the other items there)

Expand  

Followed this, -> Works

Thanks a lot

[Klenkes]

Is HannaDropdown supposed to work on ProFields Textareas too?

Because I can't get it to show on multiple textareas with CKE, but perfectly on a single CKE textarea. 

PW 3.0.42 and ProFields Textareas 0.0.6

[Robin S]

  On 4/11/2017 at 3:48 PM, Klenkes said:

Is HannaDropdown supposed to work on ProFields Textareas too?

Expand  

Well it wasn't something I tested for specifically, but it was pretty easy to add support for ProFields Textareas so I have done that in v0.0.6.

[Klenkes]

Haha, that was quick 

Works like a charm! Thanks!

[thetuningspoon]

Hi Robin,

Great module. Is the module dialog supposed to allow you to edit existing Hanna Codes? When I double click an existing code, it opens in the dialog but none of the inputs are filled out. If I save, then all of the content disappears.

Another issue I ran into after upgrading to the latest build: The cancel button on the dialog no longer works. The JS error I'm getting is: "hannadialog.js?t=2015030801.157:32 Uncaught TypeError: Cannot read property 'setAttribute' of null"

[Robin S]

  On 4/12/2017 at 2:35 PM, thetuningspoon said:

Another issue I ran into after upgrading to the latest build: The cancel button on the dialog no longer works. The JS error I'm getting is: "hannadialog.js?t=2015030801.157:32 Uncaught TypeError: Cannot read property 'setAttribute' of null"

Expand  

That's a bug, sorry. I missed something in the JS in a recent update. Should be fixed now in v0.0.7.

 

  On 4/12/2017 at 2:35 PM, thetuningspoon said:

Is the module dialog supposed to allow you to edit existing Hanna Codes? When I double click an existing code, it opens in the dialog but none of the inputs are filled out. If I save, then all of the content disappears.

Expand  

Yes, the module should work for existing Hanna codes. I can't reproduce that issue here. If the v0.0.7 update doesn't fix things for you could you give me some more info: any JS console errors, the PW version, TextformatterHannaCode version, and an export of a Hanna code that you see the issue with? Edit: also please let me know how the Hanna tag looks in your CKEditor field - i.e. are the attribute values inside quotes, single or double?

[thetuningspoon]

The close button is working now, but opening an existing code now shows a completely blank iframe in the popup.

PW version is 3.0.40. Hanna code is 0.2.0

Edit: No console errors, either.

[Robin S]

@thetuningspoon, thanks, I couldn't reproduce the issue exactly as you're seeing it but I think I have found the source of the problem. For some reason I didn't anticipate using long strings of text for attribute values. So I've added support for that in v0.0.8 and now if the length of a value is greater than 50 characters a textarea is used in the dialog instead of a text input. The breakpoint at which a textarea is used is configurable in the module settings.

Please let me know if this doesn't fix the issue for you.

[thetuningspoon]

@Robin S Great, I'll try it out. Does this also mean that textareas are a configurable input type now? That was a feature I was going to request. 

[Robin S]

  On 4/13/2017 at 11:14 PM, thetuningspoon said:

Does this also mean that textareas are a configurable input type now?

Expand  

I had thought it would be nicer if the module decided automatically based on the length of the attribute value you give it, but now that you mention this I can see that my idea won't work very well when inserting a new tag, where the length will be zero until it is populated. So in v0.0.9 I have removed that breakpoint idea and now you can manually specify the textarea inputfield type for an attribute, e.g.

myattribute__type=textarea

 

[thetuningspoon]

@Robin S Yeah, that makes sense. Just tested the previous build and found that it is still stripping out the long text inputs after re-saving them. Did you resolve this in your latest update?

[Robin S]

  On 4/14/2017 at 12:52 AM, thetuningspoon said:

Just tested the previous build and found that it is still stripping out the long text inputs after re-saving them.

Expand  

v0.1.0: this time hopefully...

[Robin S]

@thetuningspoon, I just pushed another small change in v0.1.1 to remove any manual line breaks that a user might insert inside a textarea. Manual line breaks cannot be supported because they break the CKEditor tag widget.

[thetuningspoon]

Got it. It's working great!

[LMD]

After using this module for a while, I have a couple of suggestions for future modifications.

First, would it be possible to skip the dialogue window (or auto-close it) if the Hanna code being added does not have any attributes set?  It could still have the on-click behaviour after being added (with the "This tag has no editable attributes" message), to future-proof the tag should the user add attributes in the future. Obviously, one could just type the Hanna code, but it is more convenient for clients to pick it from a list.

Secondly, this isn't really a suggestion, but a custom modification I made to the code for my own purposes, which might be useful to others.

When using selectable option fields (selects, radios, etc), the current method to set the different options is simply:

attribute__options=Option A|Option B|Option C

// The option string format is the same for dyanamically generated options.

With this method, the option field input 'value' and 'text/label' are the same.

However, I found that this was not very user-friendly when the options are somewhat cryptic. Eg, from a returned file list:

• file123-xyz.pdf
• abc-1978.pdf
• xyz-blah123.pdf
• really-long-title-2017-05-apple-blueberry-banana.pdf

So, what I did was modify the foreach loop code in the file 'iframe_form.php' at line #63, to make it possible to have a separate input value and text.
 

/* Original code at line #63 in iframe_form.php */
foreach ($select_options as $select_option) {
    $f->addOption($select_option);
}

/* My own modification
 * - Searches the option value for '@@'
 * - Uses it to split the string into two variables: $optionValue and $optionText
 * - Then adds the option to the select field.
 */
foreach ($select_options as $select_option) {
    if (strpos($select_option, "@@") !== false) {
        list($optionValue, $optionText) = explode("@@", $select_option);
        $f->addOption($optionValue, $optionText);
    } else {
        $f->addOption($select_option);
    }
}

Now, when setting the options, you specify them (either directly or dynamically) by separating each option's value and text/label with '@@' (chosen because it's unlikely to be part of an option value or text):

attribute__options=file123-xyz.pdf@@Annual Accounts 2016|abc-1978.pdf@@Some Meaningiful Title|xyz-blah123.pdf@@Another Meaningful Title|
really-long-title-2017-05-apple-blueberry-banana.pdf@@The Price of Fruit May 2017

// Note: in reality the above options would be generated dynamically.

 

I would make a pull request (?) via GitHub for this, but I've never used it for such a thing and don't really know how.

 

Edited May 21, 2017 by LMD
Terrible typos caused by being in a hurry originally.

[Robin S]

  On 5/21/2017 at 1:10 PM, LMD said:

First, would it be possible to skip the dialogue window (or auto-close it) if the Hanna code being added does not have any attributes set?

Expand  

I agree this would be an improvement and will add it in the next release.

 

  On 5/21/2017 at 1:10 PM, LMD said:

Now, when setting the options, you specify them (either directly or dynamically) by separating each option's value and text/label with '@@'

Expand  

I'm not opposed to adding this as such but I want to be sure that it's the best way forward. Besides making the module usage that bit more complicated, the issue to me is that the tag as it appears in the CKEditor window is readable text - a site editor can look at the tag and it makes some sense. If you display a different string of text in the dialog inputfield than what is inserted into the tag then I think this could be confusing for site editors.

You are saying you have some options where there is a human-friendly label and a not-so-friendly value that you actually need for use inside the tag's code. Wouldn't it be better to only ever show the human-friendly label in the tag and dialog, and then match the label to the needed value inside your Hanna code? So if you, the developer, know that "file123-xyz.pdf" is aka "Annual Accounts 2016" then in your Hanna tag code you have something like:

if($file == 'Annual Accounts 2016') $file = 'file123-xyz.pdf';

Of course you could use switch() for multiple cases, or look up filenames from the descriptions, or match the label to value in whatever way you would have done when assigning "value@@label" under your proposal. Does that make sense? Any other users have an opinion on this?

[Jonathan Lahijani]

  On 5/22/2017 at 2:08 AM, Robin S said:

I'm not opposed to adding this as such but I want to be sure that it's the best way forward. Besides making the module usage that bit more complicated, the issue to me is that the tag as it appears in the CKEditor window is readable text - a site editor can look at the tag and it makes some sense. If you display a different string of text in the dialog inputfield than what is inserted into the tag then I think this could be confusing for site editors.

Expand  

Yea there's a trade-off here.  Personally, I think inserting the IDs is the best route since IDs do not change (while text does).  Unless there's a really fancy way to satisfy both needs through some sort of richer CKEditor widget?

[Robin S]

  On 5/22/2017 at 9:00 PM, Jonathan Lahijani said:

Personally, I think inserting the IDs is the best route since IDs do not change (while text does).

Expand  

To my way of thinking, numeric IDs are the worst case in terms of being editor friendly. I see HannaCodeDialog as being a kind of progressive enhancement of Hanna Code, such that in the future you could uninstall HannaCodeDialog and still have tags that an editor can understand and use. But with numeric IDs you'll have tags along the lines of...

[[my_tag file="34784" options="4745|9748|8985"]]

And that seems contrary to the whole idea of Hanna Code, which is about giving editors easy to understand options while you the developer do the heavy lifting (be it matching editor-friendly names to IDs or whatever) behind the scenes in the tag code.

Having said that, I'd like the module to be flexible and let devs decide for themselves how they want to use it. So happy to announce...

 

HannaCodeDialog v0.1.2

• Inserting a tag from the dropdown no longer opens the dialog if the tag has no editable options.
• A new method prepareOptions() can be hooked in order to define or manipulate the options that can be selected for a tag attribute. See the module readme for more.

 

@LMD, you can hook this new method to set separate value and label as per your proposal:

$wire->addHookAfter('HannaCodeDialog::prepareOptions', function($event) {
    $options = $event->return;
    $new_options = array();
    foreach($options as $option) {
        if(strpos($option, '@@') !== false) {
            list($value, $label) = explode('@@', $option);
            $new_options[$value] = $label;
        } else {
            $new_options[$option] = $option;
        }
    }
    $event->return = $new_options;
});

 

[LMD]

  On 5/23/2017 at 4:07 AM, Robin S said:

HannaCodeDialog v0.1.2

• Inserting a tag from the dropdown no longer opens the dialog if the tag has no editable options.
• A new method prepareOptions() can be hooked in order to define or manipulate the options that can be selected for a tag attribute. See the module readme for more.

Expand  

@Robin S Jonathan's concern regarding the stability of 'IDs' vs. 'text' was one of my concerns. After thinking about it, I was going to suggest if a hookable method was possible, so this makes me happy.  I'll try it out today and report back!

 

[Jonathan Lahijani]

  On 5/23/2017 at 9:50 AM, LMD said:

@Robin S Jonathan's concern regarding the stability of 'IDs' vs. 'text' was one of my concerns. After thinking about it, I was going to suggest if a hookable method was possible, so this makes me happy.  I'll try it out today and report back!

 

Expand  

I tested out the new version and it works really well.  Thanks @Robin S.

[LMD]

And I've now tested it too, and it works perfectly.

Thank you @Robin S

[Macrura]

i was having trouble getting this – i had these as attributes

underline__type=radios
underline__options=None|Top|Bottom|Both
underline__description=Please select your border options.

but not working, so i tried this:

underline
underline__type=radios
underline__options=None|Top|Bottom|Both
underline__description=Please select your border options.

and it works;

i don't think this is clear from the instructions – would be great if there were more working examples to copy/paste, in the cheatsheet