AdvancedContent und jQuery Eingabefeld für Tags

Andiministrator · 25. März 2011 11:37

Ich will in Inhaltsseiten ein Eingabefeld einfügen, wo ich Tags zu der Seite anlegen kann (um unter jeder Seite ähnliche Seiten anzeigen zu lassen).
Das ist mit AdvancedContent und etwas Smarty im Frontend auch kein Problem. Jetzt bin ich aber auf ein jQuery Plugin gestoßen, welches dieses Tag-Eingabefeld etwas komfortabler machen würde:
http://plugins.jquery.com/project/tagInput

Wir würdet Ihr das implementieren? Geht das überhaupt? Oder müsste man das direkt ins (AdvancedContent)-Modul integrieren?

NaN · 25. März 2011 13:37

Kannst Du da nicht auch einfach ein multi_input mit einem select_multiple block für die suggested Tags und einem text-input mit oneline=true für eigene Tags verwenden?

NaN · 26. März 2011 23:32

Hab das jQuery Plugin mal ausprobiert.
Javascript und CSS kann man bei AdvancedContent mit Hilfe des Parameters "description" einfügen. Du musst aber im Javascript des jQuery Plugins (jquery.tagInput.js) und im aufrufenden Script alle '$' in 'jQuery' ändern. Sonst funktioniert es nicht mit CMSms.

Dann brauchst Du eigentlich nur noch einen Globalen Inhaltsblock oder ein Plugin, welches Dir den Code des aufrufenden Scripts ausgibt. Das verwendest Du dann als Wert für den Parameter "description" und setzt smarty=true.

Bsp.
Template:

Hier klicken, um den Code zum Kopieren zu markieren

{content block="tags" label="Tags" description=':::global_content name="jquery_tagInput":::' smarty=true oneline=true}

Global Content:

Hier klicken, um den Code zum Kopieren zu markieren

{literal}
<!--suggested tags:<span id="suggested" class="tagInputSuggestedTagList"></span>-->
  <link rel=stylesheet href="../uploads/tagInput/jquery.tagInput.css" type="text/css">
  <script type="text/javascript" src="../uploads/tagInput/jquery.tagInput.js"></script>

<script type="text/javascript">
  var tags=[
        {tag:"js",freq:30},{tag:"jquery",freq:25}, {tag:"pojo",freq:10},{tag:"agile",freq:4},
        {tag:"blog",freq:3},{tag:"canvas",freq:8}, {tag:"dialog",freq:3},{tag:"excel",freq:4},
        {tag:"engine",freq:5},{tag:"flex",freq:18}, {tag:"firefox",freq:23},{tag:"javascript",freq:40},
        {tag:"graph",freq:15},{tag:"grid",freq:20}, {tag:"hibernate",freq:13},{tag:"ical",freq:4},
        {tag:"ldap",freq:9},{tag:"load",freq:20}, {tag:"security",freq:13},{tag:"XSS",freq:21},
        {tag:"CSRF",freq:19},{tag:"html",freq:22}, {tag:"xml",freq:13},{tag:"tools",freq:21}
      ]

jQuery(document).ready(function() {
    jQuery("#tags").tagInput({ // <-- #tags = Wert für Parameter block
      tags:tags,
      //jsonUrl:"tags.json",
      sortBy:"frequency",
      suggestedTags:["jquery","tagging","tag","component","delicious","javascript"],
      tagSeparator:" ",
      autoFilter:true,
      autoStart:false,
      //suggestedTagsPlaceHolder:$("#suggested"),
      boldify:true

    }).css('padding-left','25px');
  });

</script>
{/literal}

Wenn man daraus ein Plugin macht, dann kann man die Tags auch für jeden Block dynamisch erstellen lassen.

Das mal so als Ansatz.

PS: Dazu brauchts aber die SVN Version von AdvancedContent (die Inputs haben normalerweise keine ID).

nicmare · 26. März 2011 15:40

netter workaround nan!

NaN · 26. März 2011 16:16

Habe daraus mal ein Plugin gemacht.
Kommt mit in die nächste Version wink
Ist im SVN unter trunk/ schon drin.

Verwendung:
Im Template einen Block definieren...

Hier klicken, um den Code zum Kopieren zu markieren

{content block="tags" label="Tags" description=':::jq_taginput input_id="tags" suggested_tags="foo,bar,foobar,choo,shubidoo":::' smarty=true oneline=true}

Parameter für das Plugin {jq_taginput} (für die genaue Bedeutung der Parameter muss ich erstmal auf die Doku des jQuery Plugins verweisen):

input_id (string)
Ist ein Pflichtfeld. Muss den gleichen Wert haben wie der Parameter block.

auto_filter (boolean)
Standard ist 'true'.

auto_start (boolean)
Standard ist 'false'.

boldify (boolean)
Standard ist 'true';

tag_separator (string)
Standard ist Leerzeichen.

sortby (string)
Standard ist 'frequency'.

suggested_tags (mixed)
Kann entweder ein Array oder eine mit Komma getrennte Liste sein.

tags (mixed)
Kann entweder ein Array oder eine Textliste sein.
Tags bestehen immer aus zwei Werten: Tagname und Frequency.
Aufbau des Arrays:

Hier klicken, um den Code zum Kopieren zu markieren

array(
    array('tag'=>'name des tags1', 'freq'=>'frequency des tags1 (eine Zahl)'),
    array('tag'=>'name des tags2', 'freq'=>'frequency des tags2 (eine Zahl)'),
    array('tag'=>'name des tags3', 'freq'=>'frequency des tags3 (eine Zahl)')
    ...
);

Aufbau der Liste:

tag1,frequency1;tag2,frequency2;tag3,frequency3; ...

(Also Tags getrennt durch Semicolon, Tagname und Frequency getrennt durch Komma)

nicmare · 26. März 2011 19:41

woher kommt das array her? das müsste ja die werte beinhalten die man bereits bei den anderen seiten in dem block hinzugefügt hat oder?

NaN · 26. März 2011 19:45

Ich weiß noch nicht mal wozu der Parameter tags eigentlich gut sein soll.
Es funktioniert auch ohne.
Hab mich mit dem jQuery Plugin noch nicht wirklich auseinandergesetzt.

Andiministrator · 28. März 2011 23:02

Wow, das schaut ja schon gut aus cool

Der Parameter tags schlägt Tags vor, die schon oft verwendet worden. Der funktioniert noch nicht in der derzeitigen Version. Ich hab grad mal etwas rumgespielt, jetzt funktioniert der Parameter erst einmal mit Testwerten (eins,zwei,drei). NaN, ich schicke Dir meine Änderungen gleich per Mail.

Ich will die nächsten Abende mal den Tags-Parameter noch erweitern, der muss ja noch mit einer Datenbank-Tabelle verknüpft werden.

Mal sehen, ob mir noch eine Idee kommt, wie man das ganze auch noch mit dem News-Modul zum Laufen bekommt ...

NaN · 28. März 2011 23:03

Andiministrator schrieb:

Mal sehen, ob mir noch eine Idee kommt, wie man das ganze auch noch mit dem News-Modul zum Laufen bekommt ...

Ich hätte Wetten darauf abschließen sollen big_smile

Andiministrator · 28. März 2011 23:09

NaN schrieb:

Ich hätte Wetten darauf abschließen sollen

Wer hätte denn dagegen gewettet? devil

Andynium · 28. März 2011 07:14

Andiministrator schrieb:

Der Parameter tags schlägt Tags vor, die schon oft verwendet worden. Der funktioniert noch nicht in der derzeitigen Version. Ich hab grad mal etwas rumgespielt, jetzt funktioniert der Parameter erst einmal mit Testwerten (eins,zwei,drei).

Könnte man da auch nicht OpenCalais andocken?

http://www.opencalais.com/about

nicmare · 28. März 2011 09:59

NaN, musstest du am jQuery plugin selbst nun noch was umschreiben damit es läuft?

nicmare · 28. März 2011 10:40

ok, hab grads selber rausgefunden. habe mir nach dem selben schema nen colorpicker eingebaut. kann ich dann gerne auch zur verfügung stellen wenn ich fertig bin.
(man muss nichts am .js plugin verändern)

NaN · 28. März 2011 10:46

@nicmare:
Doch, ich musste '$' in 'jQuery' ändern.
Sonst heißt es immer '$' is not a function.

nicmare · 28. März 2011 11:06

NaN schrieb:

@nicmare:
Doch, ich musste '$' in 'jQuery' ändern.
Sonst heißt es immer '$' is not a function.

ja, das ist klar. ich meinter innerhalb der .js dateien.
–––
so, das ganze war einfacher als ich dachte. hier nun mein beitrag zum thema…
jPicker Colorpicker

Download:

colorpicker.zip

Dateien:

function.jq_colorpicker.php -> in root/plugins/
/colorpicker/ -> in root/modules/AdvancedContent/plugins/

Ansicht:

Das ganze lässt sich als variable assignen und in cms_stylesheet abrufen:
template:

Hier klicken, um den Code zum Kopieren zu markieren

{content block="backgroundcolor" oneline="true" assign="backgroundcolor" default="797979" size="5" block_group="Styling" description=':::jq_colorpicker input_id="#backgroundcolor":::' smarty=true}

{cms_stylesheet}:

Hier klicken, um den Code zum Kopieren zu markieren

background-color:[[$backgroundcolor]];

NaN · 28. März 2011 11:26

Nett smile

Ich musste übrigens auch die Datei jquery.tagInput.js ändern.

uniqu3 · 28. März 2011 11:31

@nicmare
Hast Du da einen Standardwert auch definiert oder gibst Du es immer Seiten-spezifisch an?
Ähnlichen Ansatz hatte ich auch mal obwohl ohne plugin oder AC, einfach im Admin Template colorpicker eingebunden ein content_block hinzugefügt und eine "Template Verwaltung" Seite mit eigenem Template erstellt, dort mit cgsimplesmarty werte der content_blocks im Stylesheet ausgelesen.

Beitrag geändert von uniqu3 (28. März 2011 11:36)

NaN · 30. April 2011 01:15

Den Colorpicker hab ich jetzt als Blocktypen im SVN drin (block_type="colorpicker").
Besondere Parameter gibt's da keine.

@nicmare:
Aber die Sache mit dem Slider krieg ich nicht hin.
Keine Ahnung was ich da falsch mache.
Ich habs mal im SVN mit drin. Vielleicht kann ja mal jemand schauen was da nicht richtig ist.
(block_type="slider" und die parameter wie sie in der slider-doku stehen: from, to, usw. ... )

nicmare · 30. April 2011 12:48

ich werd mir das mal anschauen smile

NaN · 30. April 2011 17:34

Hat sich erledigt. Hab den Fehler gefunden. Das Javascript kann nichts mit leeren value-Attributen anfangen. Muss den Wert, wenn er leer ist also in eine Zahl umwandeln roll

nicmare · 30. April 2011 21:35

achso. aber zu meiner verteidigung muss ich dazu sagen dass ich sehr lange nach nem einfachen und leichtgewichtigem sliderscript gesucht habe und das war das einzige was den ansprüchen gerecht wurde cool

Forum für CMS/made simple

#1 25. März 2011 11:37