Connecting the Semantic UI

[cyberholic]

I am developing a whole Joomla / Fabrik website with the Semantic-UI Framework.
At this point i am trying to change the Fabrik dropdown elements to work with the ones from Semantic.

So my question is: How can i create a form hat is totally independet from the Fabrik Elements layout?
What i have so far is within my own form-layout this code for one element:

$this->element =& $this->groups['User Settings']->elements['settingBrightness'];
//echo $this->loadTemplate('element');
echo $this->element->element;

What i want is to have above or beneath the code, the Semantic UI Dropown so that it works together with the code above. I tried to set up the element as hidden and change the values via jQuery, but that does not work either.

How should a form look like so that i can have my own framework working with the element values?
Thanks in advance and greetings!

 

[cheesegrits]

Most of our elements use layouts, so you can overrides those.

So copy ./plugins/fabrik_element/dropdown/layouts/fabrik-element-dropdown-form.php

... to ...

./templates/<your site template>/html/layouts/com_fabrik/fabrik-element-dropdown-form.php

... and modify to suit. Which might be as simple as just adding the class="ui fluid dropdown" to the select, assuming you have the Semantic jQuery loading and firing elsewhere.

-- hugh

 

[cyberholic]

Most of our elements use layouts, so you can overrides those.

So copy ./plugins/fabrik_element/dropdown/layouts/fabrik-element-dropdown-form.php

... to ...

./templates/<your site template>/html/layouts/com_fabrik/fabrik-element-dropdown-form.php

... and modify to suit. Which might be as simple as just adding the class="ui fluid dropdown" to the select, assuming you have the Semantic jQuery loading and firing elsewhere.

-- hugh

Thanks a lot. i had totally forgotten that all those fabrik elements are plugins ! Sometimes things are in front of you and you don't see it.
But now, hugh, i have questions that might be some work for me but a great contribution to the Fabrik project.

1. Can i convert all the elements that correspond to the semantic-ui this way ?
2. If i am able to do so, can i add those plugins in here as contribution so others could download and use them, if they want?
3. What is the suggested workflow to create a total new plugin?

To question 3: the semantic-ui has a dropdown that gives you the option to put icons like flags before the words of each item. Would you say that it would be better to write a whole new plugin (call it like fabrik-element-dropdown-with-icons) or to force people use css to archive the result?

Thanks in advance for your time.

 

[cheesegrits]

Well, you probably won't have to create new plugins. As I said, most of our elements use layouts, which you can override in your site template. That's how (for example) we deal with rendering different versions of Bootstrap (v2 vs v3).

I haven't looked at Semantic UI in depth, but as far as I can tell, it's mostly markup and CSS driven, with JavaScript modifying DOM elements with specific classes, much like Bootstrap, and you could achieve most of what you need by overriding the layouts, to render them as the Semantic div structure rather than the normal HTML select structure.

And in instances like you describe of using icons in a dropdown, as far as I can tell, that's just done by including the <i class="someicon"> in the label of the options, so that could be done within the existing dropdown element config. Either by directly entering that text in the dropdown option labels, or perhaps by adding your own paceholder replacement, so a label of (say) "{icon-foo}Some Text" youw get replace in your layout with "<i class="foo">Some Text".

As for creating new plugins ... the problem with contributing new stuff is that unless you are going to stick around for the next few years and keep them maintained, to keep up with changes in Fabrik and J!, all that really does is put more workload on us, having to add them to our build process and keep the code up to date.

-- hugh

 

[cyberholic]

Hi Hugh,
thanks a lot for your response. You are right that in most html-form cases i could "erase" the classes and add the semantic-ui ones into it via addClass or similiar. But for example with a form-dropdown this is way more complicated because the structure is totally different then an ordinary html select.

I wish i would have the money to help you guys out by working on these plugins. I have been using Fabrik now for so long within at least three projects and not one of them brought me a penny. But i will try to at least publish my fabrik-element -> semantic-ui knowledge as soon as it is finished and publish it in here so others can see how i approached this.

Thanks again Hugh and greetings from this corner of the planet.

 

[cheesegrits]

I don't think you have looked at the code I pointed you at, or understand what I mean by "layouts", which are a Joomla feature to allow overriding of how specific parts of a page are rendered. They are essentially little mini-templates.

Here's the code for the ./plugins/fabrik_element/dropdown/layouts/fabrik-element-dropdown-form.php layout:

<?php
defined('JPATH_BASE') or die;

$d         = $displayData;
$multiple  = $d->multiple ? 'multiple' : '';
$multisize = $d->multisize === '' ? '' : 'size="' . $d->multisize . '""';
?>

<select name="<?php echo $d->name ?>" id="<?php echo $d->id ?>" <?php echo $multiple; ?>
    <?php echo $multisize; ?> <?php echo $d->attribs; ?>>
    <?php foreach ($d->options as $opt) :
        $disabled = $opt->disable === true ? ' disabled' : '';
        $selected = in_array($opt->value, $d->selected) ? ' selected="selected" ' : ''; ?>
        <option value="<?php echo $opt->value;?>" <?php  echo $disabled; ?><?php echo $selected; ?>><?php echo JText::_($opt->text); ?></option>
    <?php endforeach; ?>
</select>

And as I said, this file can be overridden by placing a copy of it in your J! site template folder (in html/layouts/com_fabrik). As you can see, it builds a select, from various variables passed in $layoutData. Like the name, id, the select options, etc.

It would be easy to rewrite this to produce the div structure used by Semantic dropdowns.

Most of our elements are rendered using layouts.

-- hugh