[content_cssid_select] Content element CSS select options

The extension changes the CSS ID and Class text fields into a selectbox of which the options can be defined. Most customers do not fully understand when they get instructions to insert the word "dark_block" into the second text field so that the text content element gets a dark background. The text field gets changed into a select box that includes the option "dark_block", nicely labeled "Dark box". Of course all options are free to choose.

Both CSS ID and CSS class can be changed into a selectbox in the system settings. After enabling the available options can be chosen.

[attachment=0:2qku4erk]screenshot.jpg[/attachment:2qku4erk]
http://www.contao.org/extension-list/vi ... elect.html

ps, I've thought of this this morning and made a quick version of the idea. I'd like to hear any comments and suggestions!
ps2, It is relatively easy to extend this to include articles as well with a separate setting. Let me know if anyone would need that and I'll add it.

Nice idea Ruud.

Hi Ruud,

a little suggestion:

add a checkbox to the tl_style dca (e.g. "Use this definition in content element") this way the assignments of styles can be made directly during the css writing. Maybe the checkbox will be validated against the selector to ensure it is a class definition and not something else.

what do you think?

I was intrigued by that suggestion. But I'd like to change some other things first; for example adding the fields to the root page as well. That way a multi domain setup can specify classes per root.

The style option you suggest would have to be available in the select box, only if the style is applied to the current content elements->articles->pages->layouts->stylesheet so that might be an even more expensive query (more expensive then my root idea). Do you have a good suggestion to do that?

Quote:

---

Originally Posted by Ruud

I was intrigued by that suggestion. But I'd like to change some other things first; for example adding the fields to the root page as well. That way a multi domain setup can specify classes per root.

The style option you suggest would have to be available in the select box, only if the style is applied to the current content elements->articles->pages->layouts->stylesheet so that might be an even more expensive query (more expensive then my root idea). Do you have a good suggestion to do that?

---

(thinking aloud)

starting from inside a content_element dca callback the assigned layout is (pseudo-code):

Code:

---

// pseudo-code
$layout =
SELECT layout FROM tl_page WHERE id=(SELECT pid FROM tl_article WHERE id={$dc->activeRecord->pid}) AND includeLayout='1'

// plus a query  if the page uses a default layout 
@see PageRegular::getPageLayout

---

then select stylesheets from the specified layout:

Code:

---

// pseudo-code
$stylesheets =
SELECT stylesheet FROM tl_layout WHERE id={$layout}

// deserialzie
// implode

---

then the final query

Code:

---

// pseudo-code
SELECT selector, content_cssid_label FROM tl_style WHERE pid in ({$stylesheets}) AND content_cssid_flag = '1'

---

by taking advantage of Contao query caching I think this is not so expensive compared to the benefit of having the css selector auto updated each time you add a new style selector


another idea:
- left the class as text field an then implement a checkbox selector (that opens in popup) this way the user can choice multiple classes

Can't I use one query? I don't believe I need the results in between. It still is a very good suggestion, but I'm still not sure about the idea because the selector of a css style is not a field I can insert as a classname. So I'm going to have to define the fields enable, classname and label. They already exist at their original location where I put them in tl_settings. The big advantage of putting them in the style though, is they only show when the css is also available. I'd get closer to the same result by putting the fields into a root page, but it is not quite the same yet.

Perhaps I need all three; tl_page, tl_settings and tl_style. I just have to work out how to feed the widget the data so that I could re-use the widget, and perhaps make it's own tiny extension for other people to use...

How does your checkbox suggestion work? Is there already an existing widget for that? I'm not sure yet I'd need this option right now. I intended this to be used by my average clients, they'd get two or three options to select. If I need more options I'll add them manually. But if you know of a possible type of client that would require this I'd like to look at adding the checkbox "Allow multiple selections".

Quote:

---

Originally Posted by Ruud

Can't I use one query? I don't believe I need the results in between.

---

I can not figure out how to handle the case when a page has not a layout assigned withouth performing two queries.

Quote:

---

Originally Posted by Ruud

It still is a very good suggestion, but I'm still not sure about the idea because the selector of a css style is not a field I can insert as a classname.

---

This is the reason why I suggest you to implement a checkbox in the tl_style dca. Once checked the extension will check if the selector is suitable for the classname field (i.e. it is a class definition). If it is not suitable then warn the user with a "the selector must be a classname if you wish to use it in the content element selectbox"
[/quote]

Quote:

---

Originally Posted by Ruud

So I'm going to have to define the fields enable, classname and label. They already exist at their original location where I put them in tl_settings. The big advantage of putting them in the style though, is they only show when the css is also available. I'd get closer to the same result by putting the fields into a root page, but it is not quite the same yet.

---

I still think the best solution is to put it in the tl_style dca.

Quote:

---

Originally Posted by Ruud

Perhaps I need all three; tl_page, tl_settings and tl_style. I just have to work out how to feed the widget the data so that I could re-use the widget, and perhaps make it's own tiny extension for other people to use...

---

An alternative (maybe too much for the purpose of your extension) can be (I am using something similar in my implementation of CKeditor for Contao) create a "style selector item" (as separate dca) let user specify wich stylesheets should be loaded and to which root page bind the style selector and the from tl_content refer to the "style selector item" starting from the root page

Quote:

---

Originally Posted by Ruud

How does your checkbox suggestion work? Is there already an existing widget for that? I'm not sure yet I'd need this option right now. I intended this to be used by my average clients, they'd get two or three options to select. If I need more options I'll add them manually. But if you know of a possible type of client that would require this I'd like to look at adding the checkbox "Allow multiple selections".

---

When you create an "hyperlink" content element there is an icon near the "Link target" field
(see http://i.imgur.com/Hoto5.jpg) that once clicked open a popup with a dropdown, I mean replacing the dropdown with a multiple checkbox widget

this way the widget will be usable by both "average" and "experienced" users

I won't develop this extension any further, in favor of css_select.

Extension: http://contao.org/extension-list/view/css_select.html
Forum: viewtopic.php?f=21&t=5870

I don't think the CSS checkbox in styles will work. Most of the time I use multistage selectors, so then a checkbox won't work.

e.g.
.mod_article .ce_text .dark_box { }

So how to extract the class name safely...?

Quote:

---

Originally Posted by thyon

I don't think the CSS checkbox in styles will work. Most of the time I use multistage selectors, so then a checkbox won't work.

e.g.
.mod_article .ce_text .dark_box { }

So how to extract the class name safely...?

---

Well, it would be a small problem in both ways. You either want to set multistage selectors in your css, or you want to choose multiple classnames/ids for any element.

The first can indeed only be solved by some advanced code a BE module of sorts that allows to select selectors and assign labels, but that might decrease the usefulness of the checkbox....

The second could be solved by a carthesian product. But that leaves some unique problems. Right now I have the settings within tl_settings. A proper module is needed to filter out possible combinations and assign labels.

Shall we continue this topic here: viewtopic.php?f=21&t=5870 ??

A client checkbox of additional and then merge the predefined ID/CSS field and the the checkbox classes would be better solution.

Topic closed

please continue here