Wikizone - Benutzerbeiträge [de]

PHP - Zahlen formatieren

2017-12-11T14:05:57Z

37.49.32.84:

Quelle: https://stackoverflow.com/questions/13309212/preg-replace-all-non-numerical-characters-except (2017-12)

You should be able to do it with the following regex:

[^0-9+]
In preg_replace():

$nn = preg_replace('/[^0-9+]/', '', $string);
== Telefonnummer ==
=== Entferne alles außer Zahlen und + ===
Your current regex also keeps a forward-slash, so to keep that functionality:

$nn = preg_replace('/[^0-9\/+]/', '', $string);
Sample code with output:

<syntaxhighlight lang="php">
<?php
$string = '+27 (15) 234-2634';
$nn = preg_replace("/[^0-9+]/", "", $string );
echo $nn . "\n";
?>
</syntaxhighlight>
Results in:

+27152342634

UPDATE (keep only first matching +)

Per your latest question-update, you also only want to keep the first + symbol found. To do this, since there may not be a "rule" regarding the location of the first symbol (such as "it has to be the first character in the string), I would suggest using additional methods other than just preg_replace():
<syntaxhighlight lang="php">
$nn = preg_replace("/[^0-9+]/", "", $string);
if (substr_count($nn, '+') > 1) {
$firstPlus = strpos($nn, '+') + 1;
$nn = substr($nn, 0, $firstPlus) . str_replace('+', '', substr($nn, $firstPlus));
}
</syntaxhighlight>
This code will perform the original preg_replace() as normal and then, if there are more than 1 + symbols in the result, it will get a sub-string of the result up to the first +, then perform a string-replacement to replace all remaining + symbols. You could always use a second preg_replace() here too, but to remove only a + symbol it would be overkill.

Here's a codepad entry for the sample.

PHP - Zahlen formatieren

2017-12-11T14:05:27Z

37.49.32.84:

You should be able to do it with the following regex:

[^0-9+]
In preg_replace():

$nn = preg_replace('/[^0-9+]/', '', $string);
== Telefonnummer ==
=== Entferne alles außer Zahlen und + ===
Your current regex also keeps a forward-slash, so to keep that functionality:

$nn = preg_replace('/[^0-9\/+]/', '', $string);
Sample code with output:

<syntaxhighlight lang="php">
<?php
$string = '+27 (15) 234-2634';
$nn = preg_replace("/[^0-9+]/", "", $string );
echo $nn . "\n";
?>
</syntaxhighlight>
Results in:

+27152342634

UPDATE (keep only first matching +)

Per your latest question-update, you also only want to keep the first + symbol found. To do this, since there may not be a "rule" regarding the location of the first symbol (such as "it has to be the first character in the string), I would suggest using additional methods other than just preg_replace():
<syntaxhighlight lang="php">
$nn = preg_replace("/[^0-9+]/", "", $string);
if (substr_count($nn, '+') > 1) {
$firstPlus = strpos($nn, '+') + 1;
$nn = substr($nn, 0, $firstPlus) . str_replace('+', '', substr($nn, $firstPlus));
}
</syntaxhighlight>
This code will perform the original preg_replace() as normal and then, if there are more than 1 + symbols in the result, it will get a sub-string of the result up to the first +, then perform a string-replacement to replace all remaining + symbols. You could always use a second preg_replace() here too, but to remove only a + symbol it would be overkill.

Here's a codepad entry for the sample.

PHP - Zahlen formatieren

2017-12-11T14:05:10Z

37.49.32.84: Die Seite wurde neu angelegt: „You should be able to do it with the following regex: [^0-9+] In preg_replace(): $nn = preg_replace('/[^0-9+]/', '', $string); == Telefonnummer == === Entfer…“

PHP - String Snippets

2017-12-11T14:01:44Z

37.49.32.84:

== Siehe auch ==
[[PHP - Zahlen formatieren]]

== Überflüssige Whitespace entfernen ==
<syntaxhighlight lang="php">
<?php
$str = 'foo o';
$str = preg_replace('/\s\s+/', ' ', $str);
// This will be 'foo o' now
echo $str;
?>
</syntaxhighlight>
== Zeilenumbruch einfügen ==
string wordwrap ( string $str [, int $width = 75 [, string $break = "\n" [, bool $cut = false ]]] )
== Text kürzen ==
=== Text kürzen / HTML entfernen ===
<syntaxhighlight lang="php">
function truncateText($text, $maxlength = 200) {
// truncate to max length
$text = substr(strip_tags($text), 0, $maxlength);
// check if we've truncated to a spot that needs further truncation
if(strlen(rtrim($text, ' .!?,;')) == $maxlength) {
// truncate to last word
$text = substr($text, 0, strrpos($text, ' '));
}
return trim($text);
}
</syntaxhighlight>
Einsatz in Processwire:
<syntaxhighlight lang="php">
$summary = truncateText($page->body);
echo "
<a href='$page->url'>$page->title</a>
<p class='summary'>$summary</p>
";
</syntaxhighlight>

=== Auf Wortende kürzen ===
<syntaxhighlight lang="php">
function limit_words($words, $limit, $append = ' …') {
$limit = $limit+1;
$words = explode(' ', $words, $limit+1);
array_pop($words); // Shorten the array by 1 because that final element will be the sum of all the words after the limit
$words = implode(' ', $words) . $append;
return $words;
}
</syntaxhighlight>
=== Auf Satzende kürzen ===
<syntaxhighlight lang="php">
<?php

function substr_sentence($string, $start=0, $limit=10, $max_char = 600)
{
/* This functions cuts a long string in sentences.
*
* substr_sentence($string, $start, $limit);
* $string = 'A example. By someone that loves PHP. Do you? We do!';
* $start = 0; // we would start at the beginning
* $limit = 10; // so, we get 10 sentences (not 10 words or characters!)
*
* It's not as substr()) in single characters.
* It's not as substr_words() in single words.
*
* No more broken lines in a story. The story/article must go on!
*
* Written by Eddy Erkelens "Zunflappie"
* Published on www.mastercode.nl
* May be free used and adapted
*
*/

// list of sentences-ends. All sentences ends with one of these. For PHP, add the ;
$end_characters = array(
'. ',
'? ',
'! '
);

// put $string in array $parts, necessary evil
$parts = array($string);

// foreach interpunctation-mark we will do this loop
foreach($end_characters as $end_character)
{
// go thru each part of the sentences we already have
foreach($parts as $part)
{
// make array with the new sentences
$sentences[] = explode($end_character, $part);
}

// unfortunately explode() removes the end character itself. So, place it back
foreach($sentences as $sentence)
{
// some strange stuff
foreach($sentence as $real_sentence)
{
// empty sentence we do not want
if($real_sentence != '')
{
// if there is already an end-character, dont place another one
if(in_array(substr($real_sentence, -1, 1), $end_characters))
{
// store for next round
$next[] = trim($real_sentence);
}
else
{
// store for next round and add the removed character
$next[] = trim($real_sentence).$end_character;
}
}
}
}

// store for next round
$parts = $next;

// unset the remaining and useless stuff
unset($sentences, $sentence, $next);
}

// check for max-char-length
$total_chars = 0;
$sentence_nr = 0;
$sentences = array();

// walk thru each member of $part
foreach($parts as $part)
{
// count the string-lenght and add this to $total_chars
$total_chars += strlen($part);

// if $total-chars not already higher then max-char, add this sentences!
if($total_chars < $max_char)
{
$sentences[] = $part;
}
}

// return the shortened story as a string
return implode(" ", array_slice($sentences, $start, $limit));
}
?>
</syntaxhighlight>

PHP - Snippets

2017-12-11T14:01:19Z

37.49.32.84: /* Strings */

== Navigation aus Unterverzeichnissen und Dateinamen erzeugen ==
<pre>
<?php
function getNavigation($pf="./",$arrExcludeNames=array()){
$vz = opendir($pf);
$arrExcludeNames = array("css","js","media","readme.txt","index.php");
$a = '';
while ($vi = readdir($vz)) {
if ($vi != '.' && $vi != '..' && !in_array($vi, $arrExcludeNames)) {
$a .= '<a href="'.$pf.$vi.'">'.$vi.'</a><br>';
}
}
return $a;
}
$arrExcludeNames = array("css","js","media","readme.txt","index.php");// diese sollen nicht in die Navigation
$myPath="./meinVerzeichnis/meinUnterverzeichnis/"
echo getNavigation($myPath,$arrExcludeNames);
?>
</pre>

== Strings ==
[[PHP - String Snippets]]

[[PHP - Zahlen formatieren]]
=== Marker Replacement ===
<pre>
function replace_markers($template,$arrMarkers){
// Platzhalter mit den Benutzereingaben ersetzen
$sCalib_as_offered = '<p>Request for customized calibration</p>';
$sCalib_as_datasheet = '<p>Calibration will be performed based on current specifications as stated in data sheet</p>';
$sAdditional_service = '<h3>Only for calibration request</h3><strong>End user would like to have additional services:</strong></p>';
$sCalib_justify = '<p>Standard calibration (ISO) with adjustment (with additional charges)</p>';
$sFw_update = '<p>Firmware update (free of charge)</p>';

if($arrMarkers[calib_type] == 'calib_as_offered') $template = str_replace( '###CALIB_TYPE###', $sCalib_as_offered, $template );
if($arrMarkers[calib_type] == 'calib_as_datasheet') $template = str_replace( '###CALIB_TYPE###', $sCalib_as_datasheet, $template );

if($arrMarkers[additional_service]) $template = str_replace( '###ADDITIONAL_SERVICE###', $sAdditional_service, $template);
if($arrMarkers[calib_justify]) $template = str_replace( '###CALIB_JUSTIFY###', $sCalib_justify, $template );
else $template = str_replace( '###CALIB_JUSTIFY###', '', $template );

if($arrMarkers[fw_update]) $template = str_replace( '###FW_UPDATE###', $sFw_update, $template );
else $template = str_replace( '###FW_UPDATE###', '', $template );

foreach($arrMarkers as $key => $val){
if($val == '0')$val = '';
$val = iconv("UTF-8","UTF-8//IGNORE",$val);
$template = str_replace( '###'.strtoupper($key).'###', htmlspecialchars( $val ), $template );
}

$template = str_replace( '###FNAME1###', htmlspecialchars( $arrMarkers[fname1] ), $template );
$template = str_replace( '###RMA_NUM###', $rma_num, $template );
$template = str_replace( '###NACHRICHT###', htmlspecialchars( $nachricht ), $template );
//echo $template;
return $template;
}

</pre>

== Clean up POST und GET ==
Zusätzliche Sicherheit für Post und Get.
<pre>
function clean($elem) {
/* used to add some security to get and post vars */
if(!is_array($elem))
$elem = htmlentities($elem,ENT_QUOTES,"UTF-8");
else
foreach ($elem as $key => $value)
$elem[$key] = $this->clean($value);
return $elem;
}

$_CLEAN['GET'] = clean($_GET);
$_CLEAN['POST'] = clean($_POST);
</pre>

== PHP Pfade ermitteln ==
http://stackoverflow.com/questions/4645082/get-absolute-path-of-current-script/26139609#26139609
<syntaxhighlight lang="php">
$_SERVER["DOCUMENT_ROOT"] === /home/user/public_html
$_SERVER["SERVER_ADDR"] === 143.34.112.23
$_SERVER['HTTP_HOST'] === example.com (or with WWW)
$_SERVER["REQUEST_URI"] === /folder1/folder2/yourfile.php?var=blabla
__FILE__ === /home/user/public_html/folder1/folder2/yourfile.php
basename(__FILE__) === yourfile.php
__DIR__ === /home/user/public_html/folder1/folder2 [same: dirname(__FILE__)]
$_SERVER["QUERY_STRING"] === var=blabla

$_SERVER["REQUEST_URI"] === /folder1/folder2/yourfile.php?var=blabla
parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH) === /folder1/folder2/yourfile.php
$_SERVER["PHP_SELF"] === /folder1/folder2/yourfile.php

//if "YOURFILE.php" is included in "PARENTFILE.php" , and "PARENTFILE.PHP?abc" is opened:
$_SERVER["PHP_SELF"] === /parentfile.php
$_SERVER["REQUEST_URI"] === /parentfile.php?abc
$_SERVER["SCRIPT_FILENAME"]=== /home/user/public_html/parentfile.php
str_replace($_SERVER["DOCUMENT_ROOT"],'', str_replace('\\','/',__FILE__ ) ) === /folder1/folder2/yourfile.php
</syntaxhighlight>

== IP Adresse Abfragen ==
<pre>
public static function get_ip() {
$REMOTE_ADDR = $_SERVER['REMOTE_ADDR'];
if ( ! empty( $_SERVER['X_FORWARDED_FOR'] ) ) {
$X_FORWARDED_FOR = explode(',', $_SERVER['X_FORWARDED_FOR'] );
if ( ! empty( $X_FORWARDED_FOR ) ) {
$REMOTE_ADDR = trim( $X_FORWARDED_FOR[0] );
}
}
elseif ( ! empty($_SERVER['HTTP_X_FORWARDED_FOR'] ) ) {
$HTTP_X_FORWARDED_FOR= explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
if ( ! empty($HTTP_X_FORWARDED_FOR ) ) {
$REMOTE_ADDR = trim($HTTP_X_FORWARDED_FOR[0]);
}
}
return preg_replace('/[^0-9a-f:\., ]/si', '', $REMOTE_ADDR);
}

</pre>
== Uploads ==
[[PHP - Upload]]

== Odd Even ==
To determine odd or even it's faster (than mod) and more efficient to use the bitwise & operator:
<pre>
$a = 3;
if ($a & 1) {
echo 'odd';
} else {
echo 'even';
}
// returns 'odd'
</pre>

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:20:33Z

37.49.32.84: /* Farben */

Es gibt immer '''wiederkehrende Einstellungen''' bzw. Teile die man für die meisten Websites benötigt. Dazu gehört '''z.B. ein Logo oder eine Footerzeile'''.

Damit man neue Websites auf Basis von ProcessWire Profilen schnell erstellen kann kann man sich eine '''Konfigurationsseite''' erstellen, über die man solche Dinge schnell anpassen kann ohne erst die Templates zu ändern. Wenn nur wenige Dinge angepasst werden sollen kann man die Felder direkt auf der Homepage unterbringen. Für umfangreiche Konfigurationen bietet sich eine eigene Seite an.

== Quickstart ==
_init.php
<syntaxhighlight lang="php">
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields
</syntaxhighlight>
myTemplate.php
<syntaxhighlight lang="php">
<span class="email"><?= $configpage->contact_email ?></span>
</syntaxhighlight>
== Konfigurationsfelder und Snippets zum Einsatz ==
=== Allgemein ===
==== Konfigseite als Variable definieren ====
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields

=== Metatags ===
==== Site Title ====
site_title

_init.php
<syntaxhighlight lang="php">
$siteTitle = '';
if($configpage->site_title) $siteTitle = $configpage->site_title;
$title = $page->get('headline|title'); // headline if available, otherwise title
$titleTag = ($homepage->id != $page->id) ? $page->title .' | '. $siteTitle : $siteTitle;
</syntaxhighlight>

=== Logo und Brandmark ===
site_logo
site_brandmark

myTemplate.php
<syntaxhighlight lang="php">

<?php
// Logo
if(count($configpage->site_logo)){
$siteLogoUrl = $configpage->site_logo->height(80)->url;
} else $siteLogoUrl = $config->urls->templates.'/images/logo.png';

// Bildmarke.
if(count($configpage->site_mark)){
$siteMarkUrl = $configpage->site_mark->url;
} else $siteMarkUrl = $config->urls->templates.'/images/mark.png';
//...
?>

<a class="logo-holder" href="<?=$root?>"><img src="<?= $siteLogoUrl?>" alt="Home"></a>
</syntaxhighlight>

=== Footer Zeile ===
site_footer

=== Farben ===
* Hintergrundfarbe
* Schriftfarbe
* Linkfarbe
* LinkHoverfarbe
*

=== Schriften ===

=== Maps ===
==== myMaps ====
map_mid (rapid)

==== Google Map ====
map_apikey
map_lat
map_lon

Adresse aus Kontaktinfos

=== Kontaktinfo ===
contact_name
contact_address
contact_place
contact_email
// oder
contact_email_address
contact_email_text
contact_phone
contact_fax
contact_email

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:19:36Z

37.49.32.84: /* Logo und Brandmark */

Es gibt immer '''wiederkehrende Einstellungen''' bzw. Teile die man für die meisten Websites benötigt. Dazu gehört '''z.B. ein Logo oder eine Footerzeile'''.

Damit man neue Websites auf Basis von ProcessWire Profilen schnell erstellen kann kann man sich eine '''Konfigurationsseite''' erstellen, über die man solche Dinge schnell anpassen kann ohne erst die Templates zu ändern. Wenn nur wenige Dinge angepasst werden sollen kann man die Felder direkt auf der Homepage unterbringen. Für umfangreiche Konfigurationen bietet sich eine eigene Seite an.

== Quickstart ==
_init.php
<syntaxhighlight lang="php">
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields
</syntaxhighlight>
myTemplate.php
<syntaxhighlight lang="php">
<span class="email"><?= $configpage->contact_email ?></span>
</syntaxhighlight>
== Konfigurationsfelder und Snippets zum Einsatz ==
=== Allgemein ===
==== Konfigseite als Variable definieren ====
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields

=== Metatags ===
==== Site Title ====
site_title

_init.php
<syntaxhighlight lang="php">
$siteTitle = '';
if($configpage->site_title) $siteTitle = $configpage->site_title;
$title = $page->get('headline|title'); // headline if available, otherwise title
$titleTag = ($homepage->id != $page->id) ? $page->title .' | '. $siteTitle : $siteTitle;
</syntaxhighlight>

=== Logo und Brandmark ===
site_logo
site_brandmark

myTemplate.php
<syntaxhighlight lang="php">

<?php
// Logo
if(count($configpage->site_logo)){
$siteLogoUrl = $configpage->site_logo->height(80)->url;
} else $siteLogoUrl = $config->urls->templates.'/images/logo.png';

// Bildmarke.
if(count($configpage->site_mark)){
$siteMarkUrl = $configpage->site_mark->url;
} else $siteMarkUrl = $config->urls->templates.'/images/mark.png';
//...
?>

<a class="logo-holder" href="<?=$root?>"><img src="<?= $siteLogoUrl?>" alt="Home"></a>
</syntaxhighlight>

=== Footer Zeile ===
site_footer

=== Farben ===
Hintergrundfarbe
Schriftfarbe
Linkfarbe
LinnkHoverfarbe

=== Schriften ===

=== Maps ===
==== myMaps ====
map_mid (rapid)

==== Google Map ====
map_apikey
map_lat
map_lon

Adresse aus Kontaktinfos

=== Kontaktinfo ===
contact_name
contact_address
contact_place
contact_email
// oder
contact_email_address
contact_email_text
contact_phone
contact_fax
contact_email

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:18:43Z

37.49.32.84: /* Logo und Brandmark */

Es gibt immer '''wiederkehrende Einstellungen''' bzw. Teile die man für die meisten Websites benötigt. Dazu gehört '''z.B. ein Logo oder eine Footerzeile'''.

Damit man neue Websites auf Basis von ProcessWire Profilen schnell erstellen kann kann man sich eine '''Konfigurationsseite''' erstellen, über die man solche Dinge schnell anpassen kann ohne erst die Templates zu ändern. Wenn nur wenige Dinge angepasst werden sollen kann man die Felder direkt auf der Homepage unterbringen. Für umfangreiche Konfigurationen bietet sich eine eigene Seite an.

== Quickstart ==
_init.php
<syntaxhighlight lang="php">
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields
</syntaxhighlight>
myTemplate.php
<syntaxhighlight lang="php">
<span class="email"><?= $configpage->contact_email ?></span>
</syntaxhighlight>
== Konfigurationsfelder und Snippets zum Einsatz ==
=== Allgemein ===
==== Konfigseite als Variable definieren ====
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields

=== Metatags ===
==== Site Title ====
site_title

_init.php
<syntaxhighlight lang="php">
$siteTitle = '';
if($configpage->site_title) $siteTitle = $configpage->site_title;
$title = $page->get('headline|title'); // headline if available, otherwise title
$titleTag = ($homepage->id != $page->id) ? $page->title .' | '. $siteTitle : $siteTitle;
</syntaxhighlight>

=== Logo und Brandmark ===
site_logo
site_brandmark

myTemplate.php
<syntaxhighlight lang="php">
// Logo
if(count($configpage->site_logo)){
$siteLogoUrl = $configpage->site_logo->height(80)->url;
} else $siteLogoUrl = $config->urls->templates.'/images/logo.png';

// Bildmarke
<?php
// ...
if(count($configpage->site_mark)){
$siteMarkUrl = $configpage->site_mark->url;
} else $siteMarkUrl = $config->urls->templates.'/images/mark.png';
//...
?>
<a class="logo-holder" href="<?=$root?>"><img src="<?= $siteLogoUrl?>" alt="Home"></a>
</syntaxhighlight>

=== Footer Zeile ===
site_footer

=== Farben ===
Hintergrundfarbe
Schriftfarbe
Linkfarbe
LinnkHoverfarbe

=== Schriften ===

=== Maps ===
==== myMaps ====
map_mid (rapid)

==== Google Map ====
map_apikey
map_lat
map_lon

Adresse aus Kontaktinfos

=== Kontaktinfo ===
contact_name
contact_address
contact_place
contact_email
// oder
contact_email_address
contact_email_text
contact_phone
contact_fax
contact_email

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:16:53Z

37.49.32.84: /* Konfigurationsfelder und Snippets zum Einsatz */

Es gibt immer '''wiederkehrende Einstellungen''' bzw. Teile die man für die meisten Websites benötigt. Dazu gehört '''z.B. ein Logo oder eine Footerzeile'''.

Damit man neue Websites auf Basis von ProcessWire Profilen schnell erstellen kann kann man sich eine '''Konfigurationsseite''' erstellen, über die man solche Dinge schnell anpassen kann ohne erst die Templates zu ändern. Wenn nur wenige Dinge angepasst werden sollen kann man die Felder direkt auf der Homepage unterbringen. Für umfangreiche Konfigurationen bietet sich eine eigene Seite an.

== Quickstart ==
_init.php
<syntaxhighlight lang="php">
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields
</syntaxhighlight>
myTemplate.php
<syntaxhighlight lang="php">
<span class="email"><?= $configpage->contact_email ?></span>
</syntaxhighlight>
== Konfigurationsfelder und Snippets zum Einsatz ==
=== Allgemein ===
==== Konfigseite als Variable definieren ====
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields

=== Metatags ===
==== Site Title ====
site_title

_init.php
<syntaxhighlight lang="php">
$siteTitle = '';
if($configpage->site_title) $siteTitle = $configpage->site_title;
$title = $page->get('headline|title'); // headline if available, otherwise title
$titleTag = ($homepage->id != $page->id) ? $page->title .' | '. $siteTitle : $siteTitle;
</syntaxhighlight>

=== Logo und Brandmark ===
site_logo
site_brandmark

myTemplate.php
<syntaxhighlight lang="php">
// Logo
if(count($configpage->site_logo)){
$siteLogoUrl = $configpage->site_logo->height(80)->url;
} else $siteLogoUrl = $config->urls->templates.'/images/logo.png';

// Bildmarke
if(count($configpage->site_mark)){
$siteMarkUrl = $configpage->site_mark->url;
} else $siteMarkUrl = $config->urls->templates.'/images/mark.png';
</syntaxhighlight>

=== Footer Zeile ===
site_footer

=== Farben ===
Hintergrundfarbe
Schriftfarbe
Linkfarbe
LinnkHoverfarbe

=== Schriften ===

=== Maps ===
==== myMaps ====
map_mid (rapid)

==== Google Map ====
map_apikey
map_lat
map_lon

Adresse aus Kontaktinfos

=== Kontaktinfo ===
contact_name
contact_address
contact_place
contact_email
// oder
contact_email_address
contact_email_text
contact_phone
contact_fax
contact_email

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:12:31Z

37.49.32.84: /* Site Title */

Es gibt immer '''wiederkehrende Einstellungen''' bzw. Teile die man für die meisten Websites benötigt. Dazu gehört '''z.B. ein Logo oder eine Footerzeile'''.

Damit man neue Websites auf Basis von ProcessWire Profilen schnell erstellen kann kann man sich eine '''Konfigurationsseite''' erstellen, über die man solche Dinge schnell anpassen kann ohne erst die Templates zu ändern. Wenn nur wenige Dinge angepasst werden sollen kann man die Felder direkt auf der Homepage unterbringen. Für umfangreiche Konfigurationen bietet sich eine eigene Seite an.

== Quickstart ==
_init.php
<syntaxhighlight lang="php">
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields
</syntaxhighlight>
myTemplate.php
<syntaxhighlight lang="php">
<span class="email"><?= $configpage->contact_email ?></span>
</syntaxhighlight>
== Konfigurationsfelder und Snippets zum Einsatz ==
=== Allgemein ===
==== Konfigseite als Variable definieren ====
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields

=== Metatags ===
==== Site Title ====
site_title

_init.php
<syntaxhighlight lang="php">
$siteTitle = '';
if($configpage->site_title) $siteTitle = $configpage->site_title;
$title = $page->get('headline|title'); // headline if available, otherwise title
$titleTag = ($homepage->id != $page->id) ? $page->title .' | '. $siteTitle : $siteTitle;
</syntaxhighlight>

=== Logo und Brandmark ===
site_logo

site_brandmark

=== Footer Zeile ===
site_footer

=== Farben ===
Hintergrundfarbe
Schriftfarbe
Linkfarbe
LinnkHoverfarbe

=== Schriften ===

=== Maps ===
==== myMaps ====
map_mid (rapid)

==== Google Map ====
map_apikey
map_lat
map_lon

Adresse aus Kontaktinfos

=== Kontaktinfo ===
contact_name
contact_address
contact_place
contact_email
// oder
contact_email_address
contact_email_text
contact_phone
contact_fax
contact_email

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:12:15Z

37.49.32.84: /* Konfigseite als Variable definieren */

Es gibt immer '''wiederkehrende Einstellungen''' bzw. Teile die man für die meisten Websites benötigt. Dazu gehört '''z.B. ein Logo oder eine Footerzeile'''.

Damit man neue Websites auf Basis von ProcessWire Profilen schnell erstellen kann kann man sich eine '''Konfigurationsseite''' erstellen, über die man solche Dinge schnell anpassen kann ohne erst die Templates zu ändern. Wenn nur wenige Dinge angepasst werden sollen kann man die Felder direkt auf der Homepage unterbringen. Für umfangreiche Konfigurationen bietet sich eine eigene Seite an.

== Quickstart ==
_init.php
<syntaxhighlight lang="php">
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields
</syntaxhighlight>
myTemplate.php
<syntaxhighlight lang="php">
<span class="email"><?= $configpage->contact_email ?></span>
</syntaxhighlight>
== Konfigurationsfelder und Snippets zum Einsatz ==
=== Allgemein ===
==== Konfigseite als Variable definieren ====
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields

=== Metatags ===
==== Site Title ====
site_title

_init.php
<syntaxhighlight lang="php">
$siteTitle = '';
if($configpage->site_title) $siteTitle = $configpage->site_title;
$title = $page->get('headline|title'); // headline if available, otherwise title
$titleTag = ($homepage->id != $page->id) ? $page->title .' | '. $siteTitle : $siteTitle;
</syntaxhighlight>
=== Logo und Brandmark ===
site_logo

site_brandmark

=== Footer Zeile ===
site_footer

=== Farben ===
Hintergrundfarbe
Schriftfarbe
Linkfarbe
LinnkHoverfarbe

=== Schriften ===

=== Maps ===
==== myMaps ====
map_mid (rapid)

==== Google Map ====
map_apikey
map_lat
map_lon

Adresse aus Kontaktinfos

=== Kontaktinfo ===
contact_name
contact_address
contact_place
contact_email
// oder
contact_email_address
contact_email_text
contact_phone
contact_fax
contact_email

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:11:45Z

37.49.32.84: /* Konfigurationsfelder und Snippets zum Einsatz */

Es gibt immer '''wiederkehrende Einstellungen''' bzw. Teile die man für die meisten Websites benötigt. Dazu gehört '''z.B. ein Logo oder eine Footerzeile'''.

Damit man neue Websites auf Basis von ProcessWire Profilen schnell erstellen kann kann man sich eine '''Konfigurationsseite''' erstellen, über die man solche Dinge schnell anpassen kann ohne erst die Templates zu ändern. Wenn nur wenige Dinge angepasst werden sollen kann man die Felder direkt auf der Homepage unterbringen. Für umfangreiche Konfigurationen bietet sich eine eigene Seite an.

== Quickstart ==
_init.php
<syntaxhighlight lang="php">
$configpage = $pages->get("/site_configuration/"); // page to store sitewide used fields
</syntaxhighlight>
myTemplate.php
<syntaxhighlight lang="php">
<span class="email"><?= $configpage->contact_email ?></span>
</syntaxhighlight>
== Konfigurationsfelder und Snippets zum Einsatz ==
=== Allgemein ===
==== Konfigseite als Variable definieren ====

=== Metatags ===
==== Site Title ====
site_title

_init.php
<syntaxhighlight lang="php">
$siteTitle = '';
if($configpage->site_title) $siteTitle = $configpage->site_title;
$title = $page->get('headline|title'); // headline if available, otherwise title
$titleTag = ($homepage->id != $page->id) ? $page->title .' | '. $siteTitle : $siteTitle;
</syntaxhighlight>
=== Logo und Brandmark ===
site_logo

site_brandmark

=== Footer Zeile ===
site_footer

=== Farben ===
Hintergrundfarbe
Schriftfarbe
Linkfarbe
LinnkHoverfarbe

=== Schriften ===

=== Maps ===
==== myMaps ====
map_mid (rapid)

==== Google Map ====
map_apikey
map_lat
map_lon

Adresse aus Kontaktinfos

=== Kontaktinfo ===
contact_name
contact_address
contact_place
contact_email
// oder
contact_email_address
contact_email_text
contact_phone
contact_fax
contact_email

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:07:17Z

37.49.32.84: /* Kontaktinfo */

ProcessWire - Konfigurationsseite erstellen

2017-12-08T16:06:12Z

37.49.32.84:

ProcessWire - Konfigurationsseite erstellen

2017-12-08T15:57:42Z

37.49.32.84: /* Maps */

ProcessWire - Konfigurationsseite erstellen

2017-12-08T15:55:47Z

37.49.32.84: /* Konfigurationsfelder und Snippets zum Einsatz */

ProcessWire - Konfigurationsseite erstellen

2017-12-08T15:36:54Z

37.49.32.84: /* Maps */

ProcessWire - Konfigurationsseite erstellen

2017-12-08T15:35:35Z

37.49.32.84:

ProcessWire - Konfigurationsseite erstellen

2017-12-08T15:18:26Z

37.49.32.84: Die Seite wurde neu angelegt: „Es gibt immer wiederkehrende Einstellungen bzw. Teile die man für die meisten Websites benötigt. Dazu gehört z.B. ein Logo oder eine Footerzeile. Damit man…“

Es gibt immer wiederkehrende Einstellungen bzw. Teile die man für die meisten Websites benötigt. Dazu gehört z.B. ein Logo oder eine Footerzeile.

Damit man neue Websites auf Basis von ProcessWire Profilen schnell erstellen kann kann man sich eine Konfigurationsseite erstellen, über die man solche Dinge schnell anpassen kann ohne erst die Templates zu ändern. Wenn nur wenige Dinge angepasst werden sollen kann man die Felder direkt auf der Homepage unterbringen. Für umfangreiche Konfigurationen bietet sich eine eigene Seite an.

== Konfigurationsfelder und Snippets zum Einsatz ==
=== Logo und Brandmark ===
site_logo

site_brandmark

== Footer Zeile ==
site_footer

Processwire - Templates Grundausstattung

2017-12-08T15:13:07Z

37.49.32.84:

TODO
== Siehe auch ==
[[ProcessWire - Konfigurationsseite erstellen]]
== Module ==

'''Sprache'''
* Language Support (Core)
* Defaultsprache benennen wenn nicht Englisch und...
* Language Pack: [[:File:yellowled-pw-lang-de-v3.0.42-3-g0bbae88.zip]]

''' Feldtypen '''
* Select Options
* Assisted URL
* Fieldtype Repeater
* Fieldtype RepeaterMatrix (Pro Modul) Alternativ evtl. Pagetables o.ä.

'''Sonstige '''
* ImageMagick (Core, falls vom Server unterstützt)

=== Sonstige ===
FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) - TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify

== Felder ==
=== Felder ===
* body (manchmal content_main) (Hauptinhalt)

=== Editor Konfiguration ===
Für Textfelder sinnvoll z.B. beim body Feld
Konfiguration des Editors
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
Optional CSS und JavaScript File für die Konfiguration hinzufügen

'''TODO Beispiele'''

* link_to_child (checkbox to link to subpage)
* summary

== Templates ==

== Benutzer ==
* Redakteur / Editor mit Zugriff auf Content Seiten
* evtl. Siteadmin mit Zugriff auf Site Configuration
* Superadmin = Admin

== Editor ==

Processwire - Themes / Templates

2017-12-08T15:12:06Z

37.49.32.84: /* Links */

== Links ==
Siehe auch
* [[Processwire - Templates Grundausstattung]] (Best Practice)
* [[ProcessWire - Field Rendering]]
* [[ProcessWire - Skeleton Template]]
* [[Processwire - Template from Scratch]]

== Template Strategien ==
=== Nützliche Tipps ===
Es gibt verschiedene Orte wo man Teilrenderings vornehmen kann. Wenn man sich keine Strategie zurechtlegt kann man schnell die Übersicht verlieren. Hier ein paar Vorschläge:
* Partials im partials Ordner sind für einfache Dinge geeignet und gerade beim Entwurf sehr schnell. Hier lege ich Codeblöcke an die direkt (per echo oder direkt als HTMl) ausgegeben werden. Es gibt keine Rückgaben über return. Partials sind Views. Also auf Funktionen weitgehend verzichten. Ausnahmen sind z.B. foreach Schleifen auf Felder (zumindest solange ohne Template Engine gearbeitet wird).
* Partials Dateien enden auf .inc
* In Komplexeren Projekten sollte auf sauberer Model Controller View Trennung geachtet werden.
* Layoutblöcke für Redakteure kommen z.B. in den Field Bereich. Hier kann man die Renderreihenfolge von PW ausnutzen.

=== Basic Theme ===
<syntaxhighlight lang="php">
</syntaxhighlight>

<pre>
templates/
_func.inc (wenn benötigt)
home.php
basic_page.php
templates/partials
foot.inc
head.inc
</pre>
+
=== Layout Blocks ===
Anstatt den Templates fest definierte Seitenbereiche zuzuordnen und für jedes Layout ein Template zu erzeugen, kann es sinnvoll sein in '''Layout-Blöcken''' zu denken. also einzelne Gestaltungsbausteine, die der User auswählen kann und aus denen sich die Seite aufbaut.

Um dies umzusetzen bietet sich der '''Feldtyp RepeaterMatrix''' an, der beim den ProField Modul mit dabei ist. Als Alternative würde vielleicht

[[ProcessWire - Layout Blöcke mit RepeaterMatrix]]

== Rendering Strategien ==
=== Beispiele ===
http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-2/
=== Render Funktionen ===
https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#theres-also-page-gt-rendervalue

<syntaxhighlight lang="php">
// New Functions in 3.x
render()
renderValue()

// Functions for 2.x or for easy snippet inclusion (also possible with render
wireRenderFile() // mostly used for delayed output
wireIncludeFile() // for direct output
// i.e.
// returns the output of snippets/contactform.php
// the second argument is optional and will be passed to
// the called file as multiple variables with the name of the key
// also all api varables are available by default

wireRenderFile("snippets/contactform", array("stuff" => $something ));
</syntaxhighlight>
=== Delayed Output and Advanced Templates ===
Über prependTemplateFile und appendTemplateFile verarbeitet man die Templates wenn alle Inhalte zusammengesetzt sind.

'''Ordnerstruktur'''
<pre>
templates/
_func.inc
_init.inc
_main.inc
templates/partials
foot.inc
head.inc
</pre>

'''config.php'''
<syntaxhighlight lang="php">
<?php
...
$config->debug = false;
$config->sessionFingerprint = true;
$config->prependTemplateFile = '_init.php';
$config->appendTemplateFile = '_main.php';
$config->imageSizerOptions = array(
'upscaling' => true, // upscale if necessary to reach target size?
'cropping' => true, // crop if necessary to reach target size?
'autoRotation' => true, // automatically correct orientation?
'sharpening' => 'soft', // sharpening: none | soft | medium | strong
'quality' => 90, // quality: 1-100 where higher is better but bigger
);
</syntaxhighlight>

=== AJAX Driven Theme ===
config.php
// if ajax request set
$ajax = $input->post->ajax;

=== 3.x Strategie ===

== Syntax und Konventionen ==

== Module ==
[[Processwire - Writing Modules]]
=== Recommended Modules ===
<pre>
FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) - TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify
</pre>

== Grundausstattung ==
Siehe [[Processwire - Templates Grundausstattung]]

Abstimmung wordpress

2017-11-30T10:18:54Z

37.49.32.84: /* Quickstart */

siehe auch [[DEKRA Direkt Blog]]
Der Blog '''DEKRA Direkt''' wird als interner Konzernblog verwendet und soll als Kontaktmittel der Mitarbeiter zur Vorstandsebene dienen. Dazu gibt es unter anderem die DEKRA Direkt Mitarbeiter Umfrage.

== Quickstart ==
=== Ablauf 2017 ===
* Poll anlegen (alten kopieren - Datum Template und Blocking wird nicht kopiert und muß gesetzt werden)
** View Results auf after Vote
** Blocking by Cookie
** Datum (Startdatum aktuell und Ende offen)
** Template (Kommentar)
* Testbeitrag anlegen
** Kategorie Test
** Später Kategorie ändern
* Beenden
** End Datum setzen
** View Results before Vote

== Todo ==
* Backendanzeige der Votes ist Buggy
* Besser zum Testen wäre es wenn die Umfrage zunächst in eine Kategorie Test geht die auf der Startseite nicht dargestellt wird. - OK ist über Plugin realisiert.

Wordpress Extension Yop Poll - verwendet bei Mascha im Blog intern:

== yop poll Anpassungen ==
=== yop poll Tabellen ===
<pre>
------------ ----------------- --------------
yop_polls yop_poll_answers yop_poll_logs
------------ ----------------- --------------
id --------------| id --------------| id
name |-poll_id | pn
question answer | poll_id
total_votes votes | vote_id
total_answers ... |- answer_id
... --------------
------------ -----------------

---------------------- ----------------------------
yop_poll_custom_fields yop_poll_votes_custom_fields
---------------------- ----------------------------
id id
poll_id poll_id
custom_field vote_id
... custom_field_id
---------------------- user_id
custom_field_value
----------------------------
</pre>

Da bei einem custom text field bei der fragesstellung nur einzeiliger text möglich war, musst die datei
/wp-content/plugins/yop-poll/inc/yop_poll_model.php

In der datenbank die Tabelle:

kas_wp_yop_poll_votes_custom_fields

Feld: custom_field_value

von varchar (255) auf Text geändert.

== SQL-Abfragen für Antworten mit Kommentar ==
=== SQL nur Ergebnisse ===
<pre>
SELECT `id` , `poll_id` , `answer_id` , `ip` , `http_referer` , `vote_date` , `pn`
FROM `kas_wp_yop_poll_logs`
WHERE `poll_id` =38
ORDER BY `answer_id` ASC
LIMIT 0 , 500
</pre>
=== SQL Abfrage mit Kommentaren ===
<pre>
</pre>

Alte Abfrage
<pre>
SELECT *
FROM `kas_wp_yop_poll_logs`
LEFT OUTER JOIN `kas_wp_yop_poll_votes_custom_fields` ON `kas_wp_yop_poll_logs`.`vote_id` = `kas_wp_yop_poll_votes_custom_fields`.`vote_id`
WHERE `kas_wp_yop_poll_logs`.`poll_id` =13
</pre>
=== Weitere Abfragen ===
Welche Custom Fields gehören zu welchen Umfrage (Pivot Version)

Dynamische Version (funktioniert noch nicht aber die Richtung dürfte stimmen)
<pre>
SET @sql = NULL;
SELECT
GROUP_CONCAT(DISTINCT
CONCAT(
'max(case when custom_field = ''',
custom_field,
''' then custom_field end) AS ',
custom_field
)
) INTO @sql
FROM kas_wp_yop_poll_custom_fields;

SET @sql = CONCAT('SELECT poll_id, ', @sql, '
FROM kas_wp_yop_poll_custom_fields
GROUP BY poll_id');

PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
</pre>

== Neue Umfrage für DEKRA Connect durchführen ==
=== Allgemein ===
Läuft 2 Wochen ab ca. Mitte des Monats. Danach Auswertung und Grafikerstellung.
==== Updates ====
2015-10 - Umfrage nur mit Cookie check -> Mascha möchte keine Userunterbrechung. Später werden die Ergebnisse manuell gereinigt

===== Infos zum Cookie Check =====
Wenn man mit Cookies kontrolliert, wie wir das im Moment machen, dann testet das Plugin immer ob für eine bestimmte Umfrage schon abgestimmt wurde. '''Egal ob die Umfrage neu gestartet wurde'''.

Technisch wird dazu ein Cookie mit der ID der Umfrage hinterlegt. Dieses hat eine '''Gültigkeitsdauer''' (kann man einstellen z.B. 14 Tage). Solange das Cookie gültig ist kann man dann nicht mehr abstimmen.

Das bedeutet '''alle Browser die noch nicht abgestimmt haben können auch abstimmen''' !

Wenn du nochmal testen willst mußt du die Cookies löschen oder 14 Tage warten.

Nochmal zur Info Vor und Nachteile der anderen Lösungen

* '''Kontrolle über IP''': Vorteil recht zuverlässig schwer zu umgehen. Nachteil: wenn Benutzer mit der gleichen IP ankommen kann es sein dass einer nicht abstimmen kann.

* Über die '''Personalnummer''' Vorteil: Sehr Zuverlässig. Nachteil: Schlechte User Experience

== Technischer Ablauf ==
Stand 2017
* Block by Cookie

Stand März 2015 (obsolete)

* Das Umfrage Plugin im WP ist auf '''block by Personal Number''' gestellt. -> Ab 2016 nur noch '''by Cookie'''(siehe oben)
* obsolete -> Ein User kann nur Voten wenn eine id=12345 (Personalnummer) angehängt ist. Ansonsten wird zunächst auf das DEKRA Intranet weiter geleitet (über alert).
* Dort wird die Personalnummer als id=12345 an den Link angehängt und auf intern-blog.dekra.de/category/dekra-direkt/?id=12345 geleitet Nur wenn eine solche id vorhanden ist kann gevoted werden. Ist nicht supersicher weil die Nummer willkürlich geändert werden kann, nachträgliche Prüfung wäre mit Personalnummern Liste möglich. Verbesserungspotential wäre POST übermittlung, Gültigkeitsprüfung durch PN-Index oder Formel.
* Hat die id '''schon gevotet''' wird nur das Ergebnis angezeigt.
* Im DEKRA Intranet werden Links an die eine id angehängt werden soll mit dem Parameter '''?id=public''' Veröffentlicht. public wird dann automatisch durch die Personalnummer des Mitarbeiters ersetzt, bevor weitergeleitet wird.

=== Umfrage erstellen ===
* Achtung manchmal kollidiert die Abfrage mit alten Cookies der letzten Umfrage. Genau ist das noch nicht geklärt. Hilfe bringt:
** dafür sorgen, daß die alte Umfrage nicht mit angezeigt wird
** Logs löschen
** Wenn nichts hilft die Stats Reseten (kann sein daß dies nicht nötig ist.)

* 1 oder mehrere (Mascha will meist 3) Umfragen-Dummies erstellen (z.B. eine alte klonen - '''Vorsicht: Einstellungen für Datum, Template und Blocking''' werden nicht übernommen)
* Template: '''DEKRA Umfrage mit Kommentar'''
** Mit dem Template '''DEKRA Umfrage mit dynamischem Kommentar''' kann man zusätzlich noch JavaScript Popups öffnen und auf die gewählte Antwort reagieren (siehe JS im Template)
** Das Template '''Umfrage mit mehr Antworten''' erlaubt mehr als zwei Antwortmöglichkeiten. Die Kommentare werden dann untereinander dargestellt. Das ist zugleich auch das sicherste Template, was die Darstellung angeht.
* Blocking by auf '''Personal Number''' - dadurch wird die Abfrage des id Parameters gestartet. Zum Testen auf don't Block stellen. Achtung IE hat manchmal Caching Probleme.
* Start und Enddatum setzen
* Abstimmung in einen '''Beitrag in Kategorie Dekra Direkt''' einpflegen (evtl. erst nach dem Testen) -> Startseite sichtbar
* Am Ende Umfrage auf '''nur Antwort''' !
* Geo-bit erstellt die Fragen, diese werden von Mascha angepasst und von Ihr in einem Beitrag veröffentlicht.
* Start der Umfrage durch setzen der Kategorie (todo ob das klappt)

=== Test der Umfrage ===
* Vorige Tests sind sinnvoll. Ein Test von Geo-bit (einfach id anhängen). Ein Test von Dekra
=== Ende der Umfrage und Auswertung ===
Für die Auswertung benötigt Mascha eine '''Excel-Tabelle''' in der '''nach Antworten und sortiert''' ist. Ebenso die dazugehörigen Kommentare. Doppelte IPs rausschmeißen. Wenn Personalnummerliste vorhanden könnte man hier nach Gültigkeit prüfen.
* Umfrage mit Datum beenden oder auf Maschas Hinweis, '''Umfrage auf don't block''', damit die Umleitung auf Dekra nicht mehr aktiv ist, außerdem '''Enddatum setzen''' und auf '''Ergebnis anzeigen nach Enddatum'''. Endzeit etwas zurücksetzen, da manchmal die Serverzeit um ein paar Stunden differiert.
* SQL Abfrage (siehe Statement), Export als ods oder csv
* Doppelte überprüfen
* Umwandeln in Excel
* Schaubild aus Numbers

=== Löschen unerwünschter Kommentare ===

In
Admin -> Yop poll -> All polls -> meineUmfrage -> votes

hier auswählen und löschen

Problem: die Kommentare werden nicht mehr angezeigt. TODO

=== Anpassungen am Plugin Yop poll===

yop-poll => inc => admin.php

Hier die DB mit prefix versehen. "kas_"
yop-poll => inc => yop_poll_model.php
yop-poll => inc => db_schema.php
yop-poll => js => yop_poll_public.js
==== Kommentare ====
MUSS überarbeitet werden
yop_poll_modell.php

return_poll_html ->
dort wird der Template Block
[ANSWER_RESULT_CONTAINER]
[/ANSWER_RESULT_CONTAINER]
mit pregreplace über eine Callback Funktion ersetzt
answer_result_callback(m$)
darin wiederum wird
get_poll_comments($poll_id)
aufgerufen, dieses gibt ein array zurück das dann in HTML umgesetzt wird. Diese Ausgabe erfolbt über die Abfrage von
$this->is_view_poll_results()
Das bedeutet die Ausgabe erfolgt wenn im Backend die Bedingung für die Ausgabe der Results gesetzt ist (z.B. Results after End Date) Gute erweiterung wäre ein eigener Block für die Comments

'''Im Template muß der Block natürlich auch gesetzt sein.''' (beim entsprechenden Template)

Problem: Die Ausgabe erfolgt nur wenn die Logs der Umfrage nicht gelöscht sind.
Ausgabe der Kommentare bisher
<syntaxhighlight lang="sql">
SELECT yp.id,yp.name,yp.question,ypa.answer,ypvcf.custom_field_value,ypcf.custom_field,ypl.vote_id FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON (yp.id=ypcf.poll_id)
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON (ypcf.id = ypvcf.custom_field_id)
JOIN kas_wp_yop_poll_logs ypl ON (ypvcf.vote_id = ypl.vote_id)
JOIN kas_wp_yop_poll_answers ypa ON (ypl.answer_id = ypa.id)
WHERE yp.id=[pollID] AND ypl.answer_id=[answerID];
</syntaxhighlight>
Die Abfrage wird für jede Antwort (answer_id) ausgeführt. Aus den Logs wird die answer_id geholt. Wenn diese im Log fehlt wird nichts zurückgegeben.
Wie kann man die Zuordnung Kommentar - answer_id noch herstellen? answer_id und vote_id stehen auch in yop_poll_voters, vote_id steht auch in yop_poll_votes_custom_fields
Also statt mit wp_yop_poll_logs joint man mit yop_poll_voters.

Beispiel
<syntaxhighlight lang="sql">
SELECT yp.id, yp.name, yp.question, ypa.answer, ypvcf.custom_field_value, ypcf.custom_field, ypv.vote_id
FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON ( yp.id = ypcf.poll_id )
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON ( ypcf.id = ypvcf.custom_field_id )
JOIN kas_wp_yop_poll_voters ypv ON ( ypvcf.vote_id = ypv.vote_id )
JOIN kas_wp_yop_poll_answers ypa ON ( ypv.answer_id = ypa.id )
WHERE yp.id =50
AND ypv.answer_id =113
</syntaxhighlight>

== Yop Poll Templates ==
Todo - Anpassen um ungenutzte Features zu nutzen (z.B. after End Date schöne Anzeige der Ergebnisse)
=== DEKRA Umfrage mit Kommentar ===
Vor Umfrage:
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<ul>
[ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
<div id="yop-poll-custom-%POLL-ID%">
<ul>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
</ul>
</div>
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-VOTE-BUTTON%</div>
<div id="yop-poll-results-%POLL-ID%">%POLL-VIEW-RESULT-LINK%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
</li><div id="gb_cust">VORLÄUFIGES·ERGEBNIS·DER·ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<span class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result-%POLL-ID%">
<span class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div>

[/ANSWER_RESULT_CONTAINER]

</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>

<div>%POLL-TOTAL-VOTES%</div>
<div id="yop-poll-back-%POLL-ID%">%POLL-BACK-TO-VOTE-LINK%</div>
</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>

After End Date
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">

</div>
<div id="gb_end">Die Abstimmung ist beendet.</div>

<ul class="afterVote">

[ANSWER_RESULT_CONTAINER]

[/ANSWER_RESULT_CONTAINER]
</ul>
</pre>
CSS
<pre>
#yop-poll-container-%POLL-ID% {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_poll_1.png");
/* border: 5px solid #3F8B43;*/
background-repeat:no-repeat;
color: #555555;
font-size: 12px;
overflow: hidden;
padding: 10px;
width: 632px;
/* height: 300px;*/
}
#yop-poll-name-%POLL-ID% {
font-size:14px;
font-weight:bold;
}

#yop-poll-question-%POLL-ID% {
color: #000000;
font-size: 14pt;
font-weight: 500;
height: 80px;
line-height: 26px;
margin: 0 50px 0 0;
padding-left: 215px;
padding-top: 40px;
text-align: center;
width: 300px;
margin-bottom: 100px;
}
#yop-poll-answers-%POLL-ID% {
}
#yop-poll-answers-%POLL-ID% ul {
list-style: none outside none;
margin: 0;
position: relative;
top: 20px;
left: 270px;
}
#yop-poll-answers-%POLL-ID% ul li {
font-style:normal;
margin-bottom:10px;
padding:0px;
font-size:12px;
width: 190px !important;
}
#yop-poll-answers-%POLL-ID% ul li input {
margin:0px;
float:none;
}
#yop-poll-answers-%POLL-ID% ul li label {
margin:0px;
font-style:normal;
font-weight:bold;
font-size:16px;
float:none;
z-index: 10;
}
.yop-poll-results-%POLL-ID% {
font-size: 12px;
font-style: italic;
font-weight: normal;
margin-left: 15px;
}

#yop-poll-custom-%POLL-ID% { }
#yop-poll-custom-%POLL-ID% ul {
font-size: 14px;
font-weight: 500;
left: 270px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 20px;
float: left;
width: 375px;
}
#yop-poll-custom-%POLL-ID% ul li {
padding:0px;
margin:0px;
font-size:14px;
}
#yop-poll-container-%POLL-ID% input[type='text'] {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
border: 1px solid #B9B8B8;
}

#yop-poll-container-%POLL-ID% textarea {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
font-family: Verdana;
color: #666;
border: 1px solid #B9B8B8;
}

#yop-poll-captcha-input-div-%POLL-ID% {
margin-top:5px;
}
#yop-poll-captcha-helpers-div-%POLL-ID% {
width:30px;
float:left;
margin-left:5px;
height:0px;
}

#yop-poll-captcha-helpers-div-%POLL-ID% img {
margin-bottom:2px;
}

#yop-poll-captcha-image-div-%POLL-ID% {
margin-bottom:5px;
}

#yop_poll_captcha_image_%POLL-ID% {
float:left;
}

.yop_poll_clear {
clear:both;
}

#yop-poll-vote-%POLL-ID% {
float:left;
/*width:100%; */
padding-left: 270px;
margin-top: 20px;
margin-bottom: 100px;
}

li.yop-poll-li-result-%POLL-ID% {
/* margin-top: 50px;*/
}

.yop-poll-results-bar-%POLL-ID% { background:#f5f5f5; height:10px; }
.yop-poll-results-bar-%POLL-ID% div { background:#555; height:10px; }
#yop-poll-vote-%POLL-ID% div#yop-poll-vote-%POLL-ID% button { float:left; }
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% {
float: right;
margin-bottom: 20px;
margin-top: -20px;
width: auto;
}
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div#yop-poll-back-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div { float:left; width:100%; }

#yop-poll-container-error-%POLL-ID% {
font-size:12px;
font-style:italic;
color:red;
left: 290px;
position: relative;
top: 270px;
}

.gb-btn {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
text-transform: uppercase;
width: 130px;
}

#gb_cust {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-left: 0px;
padding-top: 40px;
background-color: transparent;
}
.yop-poll-results-bar-%POLL-ID% div{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
height: 30px;
margin-top: 0px;
}

.yop-poll-results-bar-%POLL-ID% {
height: 30px;
width:99%;
}

.pds-answer-text-%POLL-ID% {
font-size: 0.85em;
font-weight: bold;
color: #999;
/* margin-top: -10px;*/
}

.pds-feedback-per-%POLL-ID% {
color: #999999;
font-size: 1em;
margin-left: 5px;
margin-top: -25px;
font-weight: bold;
}

.yop_poll_vote_button{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
width: 250px;
}

#gb_end {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-bottom: 100px;
padding-left: 250px;
padding-top: 130px;
background-color: transparent;
}

#yop-poll-container-%POLL-ID% textarea {
#max-width: 350px !important;
}

#yop-poll-container-success-%POLL-ID% {
font-size:12px;
font-style:italic;
color:green;
}
</pre>
JS
<pre>
function stripBorder_%POLL-ID%(object) {
object.each(function() {
if( parseInt(jQuery(this).width() ) > 0) {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("border-left-width")) - parseInt(jQuery(this).css("border-right-width")) );
}
else {
jQuery(this).css("border-left-width", '0px');
jQuery(this).css("border-right-width", '0px');
}
});
}
function stripPadding_%POLL-ID%(object) {
object.each(function() {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("padding-left")) - parseInt(jQuery(this).css("padding-left")) );
});
}

function strip_results_%POLL-ID%() {
stripPadding_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop_poll_li_result-%POLL-ID%") );
stripBorder_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-result-bar-%POLL-ID%"));
}

jQuery(document).ready(function(e) {
if(typeof window.strip_results_%POLL-ID% == 'function')
strip_results_%POLL-ID%();

if(typeof window.tabulate_answers_%POLL-ID% == 'function')
tabulate_answers_%POLL-ID%();

if(typeof window.tabulate_results_%POLL-ID% == 'function')
tabulate_results_%POLL-ID%();

});

function equalWidth_%POLL-ID%(obj, cols, findWidest ) {
findWidest = typeof findWidest !== 'undefined' ? findWidest : false;
if ( findWidest ) {
obj.each(function() {
var thisWidth = jQuery(this).width();
width = parseInt(thisWidth / cols);
jQuery(this).width(width);
jQuery(this).css('float', 'left');
});
}
else {
var widest = 0;
obj.each(function() {
var thisWidth = jQuery(this).width();
if(thisWidth > widest) {
widest = thisWidth;
}
});
width = parseInt( widest / cols);
obj.width(width);
obj.css('float', 'left');
}
}

function tabulate_answers_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID%"), %ANSWERS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %ANSWERS-TABULATED-COLS%, true );
}

function tabulate_results_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID%"), %RESULTS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %RESULTS-TABULATED-COLS%, true );
}
jQuery(document).ready(function(){
runOnPollStateChange_%POLL-ID%();
});

function runOnPollStateChange_%POLL-ID%() {};
</pre>
=== Dekra Poll Template für ID 2 (altes Template) ===
Vor Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">STIMMEN SIE JETZT AB !</div>
<ul>
[ANSWER_CONTAINER]
<li class="gb-ac yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="gb-oac yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div class="poll-vote-button">%POLL-VOTE-BUTTON%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
<div class="gb-storage" gb-poll-id="%POLL-ID%"></div>
<script type="text/javascript">

// Load check from Dean Edwards/Matthias Miller/John Resig

function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
if (_timer) clearInterval(_timer);

jQuery(document).ready(function() {
// remove vote button
jQuery('.poll-vote-button').html('');
// add Buttons
jQuery('.gb-ac').each(function(index,domEle){
var answer_id;
var label;
var content;
answer_id = jQuery(this).find('input:first').val();
label = jQuery(this).find('label:first').html();
content = '<button class="gb-btn" value="' + answer_id + '" type="button">' + label + '</button>';
//jQuery(this).append(content);
jQuery(this).html(content);
//add click handler
jQuery(this).find('button:first').click(function(){
answer_id = jQuery(this).val();
poll_id = jQuery('.gb-storage:first').attr('gb-poll-id');
hidden_field = '<input id="yop-poll-answer-' +answer_id + '" type="hidden" name="yop_poll_answer" value="' + answer_id + '">'
jQuery(this).after(hidden_field);
yop_poll_do_vote(poll_id);
return false;
});
});
});

};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */
window.onload = init;
</script>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">VORLÄUFIGES ERGEBNIS DER ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<div class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</div>
<div class="pds-feedback-result-%POLL-ID%">

</div>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div><div class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</div>
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>

</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>
After End Date
<pre>
This poll is closed!
Poll activity: <br>
start_date %POLL-START-DATE%<br>
end_date %POLL-END-DATE%<br>

Poll Results:
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-1" class="yop-poll-answers">
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label">
<span class="pds-answer-text">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result">
<span class="pds-feedback-per"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<span class="pds-clear" style="display: block;clear: both;height:1px;line-height:1px;"> </span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
%POLL-VOTE-BUTTON%
</pre>

== Probleme lösen ==
=== Generelle Prüfungen ===
* Custom Text Fields müssen für die Modifizierungen genau Custom Text Field 1 Kommentarund Custom Text Field 2 Name lauten (Mascha verändert das manchmal)

=== Kommentare werden am Ende der Umfrage nicht angezeigt ===
* In der Umfrage muß bei Show results after Poll End Date oder zur Not auch Before Vote gewählt werden
* Im Template müssen die entsprechenden Felder im Bereich "Template after Poll End" vorhanden sein.

== Change Log ==
=== Anpassungen für Admin Kommentare ===
2016-07

'''Datenbanktabelle:'''
<syntaxhighlight lang="sql">
--
-- Tabellenstruktur für Tabelle `kas_wp_yop_poll_admin_comments`
--

CREATE TABLE IF NOT EXISTS `kas_wp_yop_poll_admin_comments` (
`id` int(10) unsigned NOT NULL,
`vote_id` varchar(128) COLLATE latin1_general_ci NOT NULL,
`comment` text COLLATE latin1_general_ci NOT NULL,
`poll_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=2 ;

</syntaxhighlight>

<pre>

db_schema.php Tabelle hinzufügen
admin.php Tabelle hinzufügen
yop_poll.php Tabelle hinzufügen

answer_result_replace_callback ->
get_poll_comments -> admin kommentare dazufügen

2016-06
Problem: Wenn Logs gelöscht sind werden keine Kommentare mehr angezeigt
Lösungsansatz. Leeres Ergebnis, weil ein Join über die vote_id zu den Logs geht.
8.8.13

Hallo Mascha und Clemens,

folgende Funktionalität ist jetzt implementiert:

- Zu einem Hauptbeitrag (Sozusagen 1.Ebene - entspricht dem Post in
Wordpress) kann ein normaler Benutzer eine Frage stellen.
- Zu den Fragen (das wäre dann die 2. Ebene) kann jeder Benutzer
beliebig viele Beiträge machen
- Benutzer ab Level 7 (Redakteure und Admins) können beliebig viele
Fragen stellen.

- Labels sind jetzt: "Hinterlasse einen Beitrag" und "Beitrag abschicken"

Grüße,

Stephan
</pre>

11

10/2014
* Kommentare in Spalten sortieren, je nach Antwort
* CSS Overflow auf auto setzen, damit bei langen Kommentaren ein Scrollbalken kommt. Dafür maximale Höhe für Kommentarausgabe, damit die Felder optisch nicht zu groß werden

2016 - 04
* Neues Template für mehr Antwortoptionen. Kommentare werden untereinander (nicht in Spalten) dargestellt
* Einträge bei denen der User die nur den Namen ausfüllen aber nichts im Kommentarfeld schreiben werden nicht mehr angezeigt

Abstimmung wordpress

2017-11-30T10:14:55Z

37.49.32.84:

siehe auch [[DEKRA Direkt Blog]]
Der Blog '''DEKRA Direkt''' wird als interner Konzernblog verwendet und soll als Kontaktmittel der Mitarbeiter zur Vorstandsebene dienen. Dazu gibt es unter anderem die DEKRA Direkt Mitarbeiter Umfrage.

== Quickstart ==
=== Ablauf 2017 ===
* Poll anlegen (alten kopieren - Datum Template und Blocking wird nicht kopiert und muß gesetzt werden)
** View Results auf after Vote
** Blocking by Cookie
** Datum (Startdatum
** Template (Kommentar)
* Testbeitrag anlegen
** Kategorie Test
** Später Kategorie ändern

== Todo ==
* Backendanzeige der Votes ist Buggy
* Besser zum Testen wäre es wenn die Umfrage zunächst in eine Kategorie Test geht die auf der Startseite nicht dargestellt wird. - OK ist über Plugin realisiert.

Wordpress Extension Yop Poll - verwendet bei Mascha im Blog intern:

== yop poll Anpassungen ==
=== yop poll Tabellen ===
<pre>
------------ ----------------- --------------
yop_polls yop_poll_answers yop_poll_logs
------------ ----------------- --------------
id --------------| id --------------| id
name |-poll_id | pn
question answer | poll_id
total_votes votes | vote_id
total_answers ... |- answer_id
... --------------
------------ -----------------

---------------------- ----------------------------
yop_poll_custom_fields yop_poll_votes_custom_fields
---------------------- ----------------------------
id id
poll_id poll_id
custom_field vote_id
... custom_field_id
---------------------- user_id
custom_field_value
----------------------------
</pre>

Da bei einem custom text field bei der fragesstellung nur einzeiliger text möglich war, musst die datei
/wp-content/plugins/yop-poll/inc/yop_poll_model.php

In der datenbank die Tabelle:

kas_wp_yop_poll_votes_custom_fields

Feld: custom_field_value

von varchar (255) auf Text geändert.

== SQL-Abfragen für Antworten mit Kommentar ==
=== SQL nur Ergebnisse ===
<pre>
SELECT `id` , `poll_id` , `answer_id` , `ip` , `http_referer` , `vote_date` , `pn`
FROM `kas_wp_yop_poll_logs`
WHERE `poll_id` =38
ORDER BY `answer_id` ASC
LIMIT 0 , 500
</pre>
=== SQL Abfrage mit Kommentaren ===
<pre>
</pre>

Alte Abfrage
<pre>
SELECT *
FROM `kas_wp_yop_poll_logs`
LEFT OUTER JOIN `kas_wp_yop_poll_votes_custom_fields` ON `kas_wp_yop_poll_logs`.`vote_id` = `kas_wp_yop_poll_votes_custom_fields`.`vote_id`
WHERE `kas_wp_yop_poll_logs`.`poll_id` =13
</pre>
=== Weitere Abfragen ===
Welche Custom Fields gehören zu welchen Umfrage (Pivot Version)

Dynamische Version (funktioniert noch nicht aber die Richtung dürfte stimmen)
<pre>
SET @sql = NULL;
SELECT
GROUP_CONCAT(DISTINCT
CONCAT(
'max(case when custom_field = ''',
custom_field,
''' then custom_field end) AS ',
custom_field
)
) INTO @sql
FROM kas_wp_yop_poll_custom_fields;

SET @sql = CONCAT('SELECT poll_id, ', @sql, '
FROM kas_wp_yop_poll_custom_fields
GROUP BY poll_id');

PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
</pre>

== Neue Umfrage für DEKRA Connect durchführen ==
=== Allgemein ===
Läuft 2 Wochen ab ca. Mitte des Monats. Danach Auswertung und Grafikerstellung.
==== Updates ====
2015-10 - Umfrage nur mit Cookie check -> Mascha möchte keine Userunterbrechung. Später werden die Ergebnisse manuell gereinigt

===== Infos zum Cookie Check =====
Wenn man mit Cookies kontrolliert, wie wir das im Moment machen, dann testet das Plugin immer ob für eine bestimmte Umfrage schon abgestimmt wurde. '''Egal ob die Umfrage neu gestartet wurde'''.

Technisch wird dazu ein Cookie mit der ID der Umfrage hinterlegt. Dieses hat eine '''Gültigkeitsdauer''' (kann man einstellen z.B. 14 Tage). Solange das Cookie gültig ist kann man dann nicht mehr abstimmen.

Das bedeutet '''alle Browser die noch nicht abgestimmt haben können auch abstimmen''' !

Wenn du nochmal testen willst mußt du die Cookies löschen oder 14 Tage warten.

Nochmal zur Info Vor und Nachteile der anderen Lösungen

* '''Kontrolle über IP''': Vorteil recht zuverlässig schwer zu umgehen. Nachteil: wenn Benutzer mit der gleichen IP ankommen kann es sein dass einer nicht abstimmen kann.

* Über die '''Personalnummer''' Vorteil: Sehr Zuverlässig. Nachteil: Schlechte User Experience

== Technischer Ablauf ==
Stand 2017
* Block by Cookie

Stand März 2015 (obsolete)

* Das Umfrage Plugin im WP ist auf '''block by Personal Number''' gestellt. -> Ab 2016 nur noch '''by Cookie'''(siehe oben)
* obsolete -> Ein User kann nur Voten wenn eine id=12345 (Personalnummer) angehängt ist. Ansonsten wird zunächst auf das DEKRA Intranet weiter geleitet (über alert).
* Dort wird die Personalnummer als id=12345 an den Link angehängt und auf intern-blog.dekra.de/category/dekra-direkt/?id=12345 geleitet Nur wenn eine solche id vorhanden ist kann gevoted werden. Ist nicht supersicher weil die Nummer willkürlich geändert werden kann, nachträgliche Prüfung wäre mit Personalnummern Liste möglich. Verbesserungspotential wäre POST übermittlung, Gültigkeitsprüfung durch PN-Index oder Formel.
* Hat die id '''schon gevotet''' wird nur das Ergebnis angezeigt.
* Im DEKRA Intranet werden Links an die eine id angehängt werden soll mit dem Parameter '''?id=public''' Veröffentlicht. public wird dann automatisch durch die Personalnummer des Mitarbeiters ersetzt, bevor weitergeleitet wird.

=== Umfrage erstellen ===
* Achtung manchmal kollidiert die Abfrage mit alten Cookies der letzten Umfrage. Genau ist das noch nicht geklärt. Hilfe bringt:
** dafür sorgen, daß die alte Umfrage nicht mit angezeigt wird
** Logs löschen
** Wenn nichts hilft die Stats Reseten (kann sein daß dies nicht nötig ist.)

* 1 oder mehrere (Mascha will meist 3) Umfragen-Dummies erstellen (z.B. eine alte klonen - '''Vorsicht: Einstellungen für Datum, Template und Blocking''' werden nicht übernommen)
* Template: '''DEKRA Umfrage mit Kommentar'''
** Mit dem Template '''DEKRA Umfrage mit dynamischem Kommentar''' kann man zusätzlich noch JavaScript Popups öffnen und auf die gewählte Antwort reagieren (siehe JS im Template)
** Das Template '''Umfrage mit mehr Antworten''' erlaubt mehr als zwei Antwortmöglichkeiten. Die Kommentare werden dann untereinander dargestellt. Das ist zugleich auch das sicherste Template, was die Darstellung angeht.
* Blocking by auf '''Personal Number''' - dadurch wird die Abfrage des id Parameters gestartet. Zum Testen auf don't Block stellen. Achtung IE hat manchmal Caching Probleme.
* Start und Enddatum setzen
* Abstimmung in einen '''Beitrag in Kategorie Dekra Direkt''' einpflegen (evtl. erst nach dem Testen) -> Startseite sichtbar
* Am Ende Umfrage auf '''nur Antwort''' !
* Geo-bit erstellt die Fragen, diese werden von Mascha angepasst und von Ihr in einem Beitrag veröffentlicht.
* Start der Umfrage durch setzen der Kategorie (todo ob das klappt)

=== Test der Umfrage ===
* Vorige Tests sind sinnvoll. Ein Test von Geo-bit (einfach id anhängen). Ein Test von Dekra
=== Ende der Umfrage und Auswertung ===
Für die Auswertung benötigt Mascha eine '''Excel-Tabelle''' in der '''nach Antworten und sortiert''' ist. Ebenso die dazugehörigen Kommentare. Doppelte IPs rausschmeißen. Wenn Personalnummerliste vorhanden könnte man hier nach Gültigkeit prüfen.
* Umfrage mit Datum beenden oder auf Maschas Hinweis, '''Umfrage auf don't block''', damit die Umleitung auf Dekra nicht mehr aktiv ist, außerdem '''Enddatum setzen''' und auf '''Ergebnis anzeigen nach Enddatum'''. Endzeit etwas zurücksetzen, da manchmal die Serverzeit um ein paar Stunden differiert.
* SQL Abfrage (siehe Statement), Export als ods oder csv
* Doppelte überprüfen
* Umwandeln in Excel
* Schaubild aus Numbers

=== Löschen unerwünschter Kommentare ===

In
Admin -> Yop poll -> All polls -> meineUmfrage -> votes

hier auswählen und löschen

Problem: die Kommentare werden nicht mehr angezeigt. TODO

=== Anpassungen am Plugin Yop poll===

yop-poll => inc => admin.php

Hier die DB mit prefix versehen. "kas_"
yop-poll => inc => yop_poll_model.php
yop-poll => inc => db_schema.php
yop-poll => js => yop_poll_public.js
==== Kommentare ====
MUSS überarbeitet werden
yop_poll_modell.php

return_poll_html ->
dort wird der Template Block
[ANSWER_RESULT_CONTAINER]
[/ANSWER_RESULT_CONTAINER]
mit pregreplace über eine Callback Funktion ersetzt
answer_result_callback(m$)
darin wiederum wird
get_poll_comments($poll_id)
aufgerufen, dieses gibt ein array zurück das dann in HTML umgesetzt wird. Diese Ausgabe erfolbt über die Abfrage von
$this->is_view_poll_results()
Das bedeutet die Ausgabe erfolgt wenn im Backend die Bedingung für die Ausgabe der Results gesetzt ist (z.B. Results after End Date) Gute erweiterung wäre ein eigener Block für die Comments

'''Im Template muß der Block natürlich auch gesetzt sein.''' (beim entsprechenden Template)

Problem: Die Ausgabe erfolgt nur wenn die Logs der Umfrage nicht gelöscht sind.
Ausgabe der Kommentare bisher
<syntaxhighlight lang="sql">
SELECT yp.id,yp.name,yp.question,ypa.answer,ypvcf.custom_field_value,ypcf.custom_field,ypl.vote_id FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON (yp.id=ypcf.poll_id)
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON (ypcf.id = ypvcf.custom_field_id)
JOIN kas_wp_yop_poll_logs ypl ON (ypvcf.vote_id = ypl.vote_id)
JOIN kas_wp_yop_poll_answers ypa ON (ypl.answer_id = ypa.id)
WHERE yp.id=[pollID] AND ypl.answer_id=[answerID];
</syntaxhighlight>
Die Abfrage wird für jede Antwort (answer_id) ausgeführt. Aus den Logs wird die answer_id geholt. Wenn diese im Log fehlt wird nichts zurückgegeben.
Wie kann man die Zuordnung Kommentar - answer_id noch herstellen? answer_id und vote_id stehen auch in yop_poll_voters, vote_id steht auch in yop_poll_votes_custom_fields
Also statt mit wp_yop_poll_logs joint man mit yop_poll_voters.

Beispiel
<syntaxhighlight lang="sql">
SELECT yp.id, yp.name, yp.question, ypa.answer, ypvcf.custom_field_value, ypcf.custom_field, ypv.vote_id
FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON ( yp.id = ypcf.poll_id )
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON ( ypcf.id = ypvcf.custom_field_id )
JOIN kas_wp_yop_poll_voters ypv ON ( ypvcf.vote_id = ypv.vote_id )
JOIN kas_wp_yop_poll_answers ypa ON ( ypv.answer_id = ypa.id )
WHERE yp.id =50
AND ypv.answer_id =113
</syntaxhighlight>

== Yop Poll Templates ==
Todo - Anpassen um ungenutzte Features zu nutzen (z.B. after End Date schöne Anzeige der Ergebnisse)
=== DEKRA Umfrage mit Kommentar ===
Vor Umfrage:
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<ul>
[ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
<div id="yop-poll-custom-%POLL-ID%">
<ul>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
</ul>
</div>
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-VOTE-BUTTON%</div>
<div id="yop-poll-results-%POLL-ID%">%POLL-VIEW-RESULT-LINK%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
</li><div id="gb_cust">VORLÄUFIGES·ERGEBNIS·DER·ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<span class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result-%POLL-ID%">
<span class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div>

[/ANSWER_RESULT_CONTAINER]

</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>

<div>%POLL-TOTAL-VOTES%</div>
<div id="yop-poll-back-%POLL-ID%">%POLL-BACK-TO-VOTE-LINK%</div>
</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>

After End Date
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">

</div>
<div id="gb_end">Die Abstimmung ist beendet.</div>

<ul class="afterVote">

[ANSWER_RESULT_CONTAINER]

[/ANSWER_RESULT_CONTAINER]
</ul>
</pre>
CSS
<pre>
#yop-poll-container-%POLL-ID% {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_poll_1.png");
/* border: 5px solid #3F8B43;*/
background-repeat:no-repeat;
color: #555555;
font-size: 12px;
overflow: hidden;
padding: 10px;
width: 632px;
/* height: 300px;*/
}
#yop-poll-name-%POLL-ID% {
font-size:14px;
font-weight:bold;
}

#yop-poll-question-%POLL-ID% {
color: #000000;
font-size: 14pt;
font-weight: 500;
height: 80px;
line-height: 26px;
margin: 0 50px 0 0;
padding-left: 215px;
padding-top: 40px;
text-align: center;
width: 300px;
margin-bottom: 100px;
}
#yop-poll-answers-%POLL-ID% {
}
#yop-poll-answers-%POLL-ID% ul {
list-style: none outside none;
margin: 0;
position: relative;
top: 20px;
left: 270px;
}
#yop-poll-answers-%POLL-ID% ul li {
font-style:normal;
margin-bottom:10px;
padding:0px;
font-size:12px;
width: 190px !important;
}
#yop-poll-answers-%POLL-ID% ul li input {
margin:0px;
float:none;
}
#yop-poll-answers-%POLL-ID% ul li label {
margin:0px;
font-style:normal;
font-weight:bold;
font-size:16px;
float:none;
z-index: 10;
}
.yop-poll-results-%POLL-ID% {
font-size: 12px;
font-style: italic;
font-weight: normal;
margin-left: 15px;
}

#yop-poll-custom-%POLL-ID% { }
#yop-poll-custom-%POLL-ID% ul {
font-size: 14px;
font-weight: 500;
left: 270px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 20px;
float: left;
width: 375px;
}
#yop-poll-custom-%POLL-ID% ul li {
padding:0px;
margin:0px;
font-size:14px;
}
#yop-poll-container-%POLL-ID% input[type='text'] {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
border: 1px solid #B9B8B8;
}

#yop-poll-container-%POLL-ID% textarea {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
font-family: Verdana;
color: #666;
border: 1px solid #B9B8B8;
}

#yop-poll-captcha-input-div-%POLL-ID% {
margin-top:5px;
}
#yop-poll-captcha-helpers-div-%POLL-ID% {
width:30px;
float:left;
margin-left:5px;
height:0px;
}

#yop-poll-captcha-helpers-div-%POLL-ID% img {
margin-bottom:2px;
}

#yop-poll-captcha-image-div-%POLL-ID% {
margin-bottom:5px;
}

#yop_poll_captcha_image_%POLL-ID% {
float:left;
}

.yop_poll_clear {
clear:both;
}

#yop-poll-vote-%POLL-ID% {
float:left;
/*width:100%; */
padding-left: 270px;
margin-top: 20px;
margin-bottom: 100px;
}

li.yop-poll-li-result-%POLL-ID% {
/* margin-top: 50px;*/
}

.yop-poll-results-bar-%POLL-ID% { background:#f5f5f5; height:10px; }
.yop-poll-results-bar-%POLL-ID% div { background:#555; height:10px; }
#yop-poll-vote-%POLL-ID% div#yop-poll-vote-%POLL-ID% button { float:left; }
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% {
float: right;
margin-bottom: 20px;
margin-top: -20px;
width: auto;
}
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div#yop-poll-back-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div { float:left; width:100%; }

#yop-poll-container-error-%POLL-ID% {
font-size:12px;
font-style:italic;
color:red;
left: 290px;
position: relative;
top: 270px;
}

.gb-btn {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
text-transform: uppercase;
width: 130px;
}

#gb_cust {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-left: 0px;
padding-top: 40px;
background-color: transparent;
}
.yop-poll-results-bar-%POLL-ID% div{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
height: 30px;
margin-top: 0px;
}

.yop-poll-results-bar-%POLL-ID% {
height: 30px;
width:99%;
}

.pds-answer-text-%POLL-ID% {
font-size: 0.85em;
font-weight: bold;
color: #999;
/* margin-top: -10px;*/
}

.pds-feedback-per-%POLL-ID% {
color: #999999;
font-size: 1em;
margin-left: 5px;
margin-top: -25px;
font-weight: bold;
}

.yop_poll_vote_button{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
width: 250px;
}

#gb_end {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-bottom: 100px;
padding-left: 250px;
padding-top: 130px;
background-color: transparent;
}

#yop-poll-container-%POLL-ID% textarea {
#max-width: 350px !important;
}

#yop-poll-container-success-%POLL-ID% {
font-size:12px;
font-style:italic;
color:green;
}
</pre>
JS
<pre>
function stripBorder_%POLL-ID%(object) {
object.each(function() {
if( parseInt(jQuery(this).width() ) > 0) {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("border-left-width")) - parseInt(jQuery(this).css("border-right-width")) );
}
else {
jQuery(this).css("border-left-width", '0px');
jQuery(this).css("border-right-width", '0px');
}
});
}
function stripPadding_%POLL-ID%(object) {
object.each(function() {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("padding-left")) - parseInt(jQuery(this).css("padding-left")) );
});
}

function strip_results_%POLL-ID%() {
stripPadding_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop_poll_li_result-%POLL-ID%") );
stripBorder_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-result-bar-%POLL-ID%"));
}

jQuery(document).ready(function(e) {
if(typeof window.strip_results_%POLL-ID% == 'function')
strip_results_%POLL-ID%();

if(typeof window.tabulate_answers_%POLL-ID% == 'function')
tabulate_answers_%POLL-ID%();

if(typeof window.tabulate_results_%POLL-ID% == 'function')
tabulate_results_%POLL-ID%();

});

function equalWidth_%POLL-ID%(obj, cols, findWidest ) {
findWidest = typeof findWidest !== 'undefined' ? findWidest : false;
if ( findWidest ) {
obj.each(function() {
var thisWidth = jQuery(this).width();
width = parseInt(thisWidth / cols);
jQuery(this).width(width);
jQuery(this).css('float', 'left');
});
}
else {
var widest = 0;
obj.each(function() {
var thisWidth = jQuery(this).width();
if(thisWidth > widest) {
widest = thisWidth;
}
});
width = parseInt( widest / cols);
obj.width(width);
obj.css('float', 'left');
}
}

function tabulate_answers_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID%"), %ANSWERS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %ANSWERS-TABULATED-COLS%, true );
}

function tabulate_results_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID%"), %RESULTS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %RESULTS-TABULATED-COLS%, true );
}
jQuery(document).ready(function(){
runOnPollStateChange_%POLL-ID%();
});

function runOnPollStateChange_%POLL-ID%() {};
</pre>
=== Dekra Poll Template für ID 2 (altes Template) ===
Vor Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">STIMMEN SIE JETZT AB !</div>
<ul>
[ANSWER_CONTAINER]
<li class="gb-ac yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="gb-oac yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div class="poll-vote-button">%POLL-VOTE-BUTTON%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
<div class="gb-storage" gb-poll-id="%POLL-ID%"></div>
<script type="text/javascript">

// Load check from Dean Edwards/Matthias Miller/John Resig

function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
if (_timer) clearInterval(_timer);

jQuery(document).ready(function() {
// remove vote button
jQuery('.poll-vote-button').html('');
// add Buttons
jQuery('.gb-ac').each(function(index,domEle){
var answer_id;
var label;
var content;
answer_id = jQuery(this).find('input:first').val();
label = jQuery(this).find('label:first').html();
content = '<button class="gb-btn" value="' + answer_id + '" type="button">' + label + '</button>';
//jQuery(this).append(content);
jQuery(this).html(content);
//add click handler
jQuery(this).find('button:first').click(function(){
answer_id = jQuery(this).val();
poll_id = jQuery('.gb-storage:first').attr('gb-poll-id');
hidden_field = '<input id="yop-poll-answer-' +answer_id + '" type="hidden" name="yop_poll_answer" value="' + answer_id + '">'
jQuery(this).after(hidden_field);
yop_poll_do_vote(poll_id);
return false;
});
});
});

};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */
window.onload = init;
</script>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">VORLÄUFIGES ERGEBNIS DER ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<div class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</div>
<div class="pds-feedback-result-%POLL-ID%">

</div>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div><div class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</div>
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>

</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>
After End Date
<pre>
This poll is closed!
Poll activity: <br>
start_date %POLL-START-DATE%<br>
end_date %POLL-END-DATE%<br>

Poll Results:
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-1" class="yop-poll-answers">
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label">
<span class="pds-answer-text">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result">
<span class="pds-feedback-per"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<span class="pds-clear" style="display: block;clear: both;height:1px;line-height:1px;"> </span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
%POLL-VOTE-BUTTON%
</pre>

== Probleme lösen ==
=== Generelle Prüfungen ===
* Custom Text Fields müssen für die Modifizierungen genau Custom Text Field 1 Kommentarund Custom Text Field 2 Name lauten (Mascha verändert das manchmal)

=== Kommentare werden am Ende der Umfrage nicht angezeigt ===
* In der Umfrage muß bei Show results after Poll End Date oder zur Not auch Before Vote gewählt werden
* Im Template müssen die entsprechenden Felder im Bereich "Template after Poll End" vorhanden sein.

== Change Log ==
=== Anpassungen für Admin Kommentare ===
2016-07

'''Datenbanktabelle:'''
<syntaxhighlight lang="sql">
--
-- Tabellenstruktur für Tabelle `kas_wp_yop_poll_admin_comments`
--

CREATE TABLE IF NOT EXISTS `kas_wp_yop_poll_admin_comments` (
`id` int(10) unsigned NOT NULL,
`vote_id` varchar(128) COLLATE latin1_general_ci NOT NULL,
`comment` text COLLATE latin1_general_ci NOT NULL,
`poll_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=2 ;

</syntaxhighlight>

<pre>

db_schema.php Tabelle hinzufügen
admin.php Tabelle hinzufügen
yop_poll.php Tabelle hinzufügen

answer_result_replace_callback ->
get_poll_comments -> admin kommentare dazufügen

2016-06
Problem: Wenn Logs gelöscht sind werden keine Kommentare mehr angezeigt
Lösungsansatz. Leeres Ergebnis, weil ein Join über die vote_id zu den Logs geht.
8.8.13

Hallo Mascha und Clemens,

folgende Funktionalität ist jetzt implementiert:

- Zu einem Hauptbeitrag (Sozusagen 1.Ebene - entspricht dem Post in
Wordpress) kann ein normaler Benutzer eine Frage stellen.
- Zu den Fragen (das wäre dann die 2. Ebene) kann jeder Benutzer
beliebig viele Beiträge machen
- Benutzer ab Level 7 (Redakteure und Admins) können beliebig viele
Fragen stellen.

- Labels sind jetzt: "Hinterlasse einen Beitrag" und "Beitrag abschicken"

Grüße,

Stephan
</pre>

11

10/2014
* Kommentare in Spalten sortieren, je nach Antwort
* CSS Overflow auf auto setzen, damit bei langen Kommentaren ein Scrollbalken kommt. Dafür maximale Höhe für Kommentarausgabe, damit die Felder optisch nicht zu groß werden

2016 - 04
* Neues Template für mehr Antwortoptionen. Kommentare werden untereinander (nicht in Spalten) dargestellt
* Einträge bei denen der User die nur den Namen ausfüllen aber nichts im Kommentarfeld schreiben werden nicht mehr angezeigt

Abstimmung wordpress

2017-11-30T10:03:04Z

37.49.32.84:

siehe auch [[DEKRA Direkt Blog]]
Der Blog '''DEKRA Direkt''' wird als interner Konzernblog verwendet und soll als Kontaktmittel der Mitarbeiter zur Vorstandsebene dienen. Dazu gibt es unter anderem die DEKRA Direkt Mitarbeiter Umfrage.

== Quickstart ==
=== Ablauf 2017 ===
* Poll anlegen (alten kopieren)
** Blocking by Cookie
* Testbeitrag anlegen
** Kategorie Test
** Später Kategorie ändern

== Todo ==
* Backendanzeige der Votes ist Buggy
* Besser zum Testen wäre es wenn die Umfrage zunächst in eine Kategorie Test geht die auf der Startseite nicht dargestellt wird. - OK ist über Plugin realisiert.

Wordpress Extension Yop Poll - verwendet bei Mascha im Blog intern:

== yop poll Anpassungen ==
=== yop poll Tabellen ===
<pre>
------------ ----------------- --------------
yop_polls yop_poll_answers yop_poll_logs
------------ ----------------- --------------
id --------------| id --------------| id
name |-poll_id | pn
question answer | poll_id
total_votes votes | vote_id
total_answers ... |- answer_id
... --------------
------------ -----------------

---------------------- ----------------------------
yop_poll_custom_fields yop_poll_votes_custom_fields
---------------------- ----------------------------
id id
poll_id poll_id
custom_field vote_id
... custom_field_id
---------------------- user_id
custom_field_value
----------------------------
</pre>

Da bei einem custom text field bei der fragesstellung nur einzeiliger text möglich war, musst die datei
/wp-content/plugins/yop-poll/inc/yop_poll_model.php

In der datenbank die Tabelle:

kas_wp_yop_poll_votes_custom_fields

Feld: custom_field_value

von varchar (255) auf Text geändert.

== SQL-Abfragen für Antworten mit Kommentar ==
=== SQL nur Ergebnisse ===
<pre>
SELECT `id` , `poll_id` , `answer_id` , `ip` , `http_referer` , `vote_date` , `pn`
FROM `kas_wp_yop_poll_logs`
WHERE `poll_id` =38
ORDER BY `answer_id` ASC
LIMIT 0 , 500
</pre>
=== SQL Abfrage mit Kommentaren ===
<pre>
</pre>

Alte Abfrage
<pre>
SELECT *
FROM `kas_wp_yop_poll_logs`
LEFT OUTER JOIN `kas_wp_yop_poll_votes_custom_fields` ON `kas_wp_yop_poll_logs`.`vote_id` = `kas_wp_yop_poll_votes_custom_fields`.`vote_id`
WHERE `kas_wp_yop_poll_logs`.`poll_id` =13
</pre>
=== Weitere Abfragen ===
Welche Custom Fields gehören zu welchen Umfrage (Pivot Version)

Dynamische Version (funktioniert noch nicht aber die Richtung dürfte stimmen)
<pre>
SET @sql = NULL;
SELECT
GROUP_CONCAT(DISTINCT
CONCAT(
'max(case when custom_field = ''',
custom_field,
''' then custom_field end) AS ',
custom_field
)
) INTO @sql
FROM kas_wp_yop_poll_custom_fields;

SET @sql = CONCAT('SELECT poll_id, ', @sql, '
FROM kas_wp_yop_poll_custom_fields
GROUP BY poll_id');

PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
</pre>

== Neue Umfrage für DEKRA Connect durchführen ==
=== Allgemein ===
Läuft 2 Wochen ab ca. Mitte des Monats. Danach Auswertung und Grafikerstellung.
==== Updates ====
2015-10 - Umfrage nur mit Cookie check -> Mascha möchte keine Userunterbrechung. Später werden die Ergebnisse manuell gereinigt

===== Infos zum Cookie Check =====
Wenn man mit Cookies kontrolliert, wie wir das im Moment machen, dann testet das Plugin immer ob für eine bestimmte Umfrage schon abgestimmt wurde. '''Egal ob die Umfrage neu gestartet wurde'''.

Technisch wird dazu ein Cookie mit der ID der Umfrage hinterlegt. Dieses hat eine '''Gültigkeitsdauer''' (kann man einstellen z.B. 14 Tage). Solange das Cookie gültig ist kann man dann nicht mehr abstimmen.

Das bedeutet '''alle Browser die noch nicht abgestimmt haben können auch abstimmen''' !

Wenn du nochmal testen willst mußt du die Cookies löschen oder 14 Tage warten.

Nochmal zur Info Vor und Nachteile der anderen Lösungen

* '''Kontrolle über IP''': Vorteil recht zuverlässig schwer zu umgehen. Nachteil: wenn Benutzer mit der gleichen IP ankommen kann es sein dass einer nicht abstimmen kann.

* Über die '''Personalnummer''' Vorteil: Sehr Zuverlässig. Nachteil: Schlechte User Experience

== Technischer Ablauf ==
Stand 2017
* Block by Cookie

Stand März 2015 (obsolete)

* Das Umfrage Plugin im WP ist auf '''block by Personal Number''' gestellt. -> Ab 2016 nur noch '''by Cookie'''(siehe oben)
* obsolete -> Ein User kann nur Voten wenn eine id=12345 (Personalnummer) angehängt ist. Ansonsten wird zunächst auf das DEKRA Intranet weiter geleitet (über alert).
* Dort wird die Personalnummer als id=12345 an den Link angehängt und auf intern-blog.dekra.de/category/dekra-direkt/?id=12345 geleitet Nur wenn eine solche id vorhanden ist kann gevoted werden. Ist nicht supersicher weil die Nummer willkürlich geändert werden kann, nachträgliche Prüfung wäre mit Personalnummern Liste möglich. Verbesserungspotential wäre POST übermittlung, Gültigkeitsprüfung durch PN-Index oder Formel.
* Hat die id '''schon gevotet''' wird nur das Ergebnis angezeigt.
* Im DEKRA Intranet werden Links an die eine id angehängt werden soll mit dem Parameter '''?id=public''' Veröffentlicht. public wird dann automatisch durch die Personalnummer des Mitarbeiters ersetzt, bevor weitergeleitet wird.

=== Umfrage erstellen ===
* Achtung manchmal kollidiert die Abfrage mit alten Cookies der letzten Umfrage. Genau ist das noch nicht geklärt. Hilfe bringt:
** dafür sorgen, daß die alte Umfrage nicht mit angezeigt wird
** Logs löschen
** Wenn nichts hilft die Stats Reseten (kann sein daß dies nicht nötig ist.)

* 1 oder mehrere (Mascha will meist 3) Umfragen-Dummies erstellen (z.B. eine alte klonen - '''Vorsicht: Einstellungen für Datum, Template und Blocking''' werden nicht übernommen)
* Template: '''DEKRA Umfrage mit Kommentar'''
** Mit dem Template '''DEKRA Umfrage mit dynamischem Kommentar''' kann man zusätzlich noch JavaScript Popups öffnen und auf die gewählte Antwort reagieren (siehe JS im Template)
** Das Template '''Umfrage mit mehr Antworten''' erlaubt mehr als zwei Antwortmöglichkeiten. Die Kommentare werden dann untereinander dargestellt. Das ist zugleich auch das sicherste Template, was die Darstellung angeht.
* Blocking by auf '''Personal Number''' - dadurch wird die Abfrage des id Parameters gestartet. Zum Testen auf don't Block stellen. Achtung IE hat manchmal Caching Probleme.
* Start und Enddatum setzen
* Abstimmung in einen '''Beitrag in Kategorie Dekra Direkt''' einpflegen (evtl. erst nach dem Testen) -> Startseite sichtbar
* Am Ende Umfrage auf '''nur Antwort''' !
* Geo-bit erstellt die Fragen, diese werden von Mascha angepasst und von Ihr in einem Beitrag veröffentlicht.
* Start der Umfrage durch setzen der Kategorie (todo ob das klappt)

=== Test der Umfrage ===
* Vorige Tests sind sinnvoll. Ein Test von Geo-bit (einfach id anhängen). Ein Test von Dekra
=== Ende der Umfrage und Auswertung ===
Für die Auswertung benötigt Mascha eine '''Excel-Tabelle''' in der '''nach Antworten und sortiert''' ist. Ebenso die dazugehörigen Kommentare. Doppelte IPs rausschmeißen. Wenn Personalnummerliste vorhanden könnte man hier nach Gültigkeit prüfen.
* Umfrage mit Datum beenden oder auf Maschas Hinweis, '''Umfrage auf don't block''', damit die Umleitung auf Dekra nicht mehr aktiv ist, außerdem '''Enddatum setzen''' und auf '''Ergebnis anzeigen nach Enddatum'''. Endzeit etwas zurücksetzen, da manchmal die Serverzeit um ein paar Stunden differiert.
* SQL Abfrage (siehe Statement), Export als ods oder csv
* Doppelte überprüfen
* Umwandeln in Excel
* Schaubild aus Numbers

=== Löschen unerwünschter Kommentare ===

In
Admin -> Yop poll -> All polls -> meineUmfrage -> votes

hier auswählen und löschen

Problem: die Kommentare werden nicht mehr angezeigt. TODO

=== Anpassungen am Plugin Yop poll===

yop-poll => inc => admin.php

Hier die DB mit prefix versehen. "kas_"
yop-poll => inc => yop_poll_model.php
yop-poll => inc => db_schema.php
yop-poll => js => yop_poll_public.js
==== Kommentare ====
MUSS überarbeitet werden
yop_poll_modell.php

return_poll_html ->
dort wird der Template Block
[ANSWER_RESULT_CONTAINER]
[/ANSWER_RESULT_CONTAINER]
mit pregreplace über eine Callback Funktion ersetzt
answer_result_callback(m$)
darin wiederum wird
get_poll_comments($poll_id)
aufgerufen, dieses gibt ein array zurück das dann in HTML umgesetzt wird. Diese Ausgabe erfolbt über die Abfrage von
$this->is_view_poll_results()
Das bedeutet die Ausgabe erfolgt wenn im Backend die Bedingung für die Ausgabe der Results gesetzt ist (z.B. Results after End Date) Gute erweiterung wäre ein eigener Block für die Comments

'''Im Template muß der Block natürlich auch gesetzt sein.''' (beim entsprechenden Template)

Problem: Die Ausgabe erfolgt nur wenn die Logs der Umfrage nicht gelöscht sind.
Ausgabe der Kommentare bisher
<syntaxhighlight lang="sql">
SELECT yp.id,yp.name,yp.question,ypa.answer,ypvcf.custom_field_value,ypcf.custom_field,ypl.vote_id FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON (yp.id=ypcf.poll_id)
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON (ypcf.id = ypvcf.custom_field_id)
JOIN kas_wp_yop_poll_logs ypl ON (ypvcf.vote_id = ypl.vote_id)
JOIN kas_wp_yop_poll_answers ypa ON (ypl.answer_id = ypa.id)
WHERE yp.id=[pollID] AND ypl.answer_id=[answerID];
</syntaxhighlight>
Die Abfrage wird für jede Antwort (answer_id) ausgeführt. Aus den Logs wird die answer_id geholt. Wenn diese im Log fehlt wird nichts zurückgegeben.
Wie kann man die Zuordnung Kommentar - answer_id noch herstellen? answer_id und vote_id stehen auch in yop_poll_voters, vote_id steht auch in yop_poll_votes_custom_fields
Also statt mit wp_yop_poll_logs joint man mit yop_poll_voters.

Beispiel
<syntaxhighlight lang="sql">
SELECT yp.id, yp.name, yp.question, ypa.answer, ypvcf.custom_field_value, ypcf.custom_field, ypv.vote_id
FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON ( yp.id = ypcf.poll_id )
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON ( ypcf.id = ypvcf.custom_field_id )
JOIN kas_wp_yop_poll_voters ypv ON ( ypvcf.vote_id = ypv.vote_id )
JOIN kas_wp_yop_poll_answers ypa ON ( ypv.answer_id = ypa.id )
WHERE yp.id =50
AND ypv.answer_id =113
</syntaxhighlight>

== Yop Poll Templates ==
Todo - Anpassen um ungenutzte Features zu nutzen (z.B. after End Date schöne Anzeige der Ergebnisse)
=== DEKRA Umfrage mit Kommentar ===
Vor Umfrage:
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<ul>
[ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
<div id="yop-poll-custom-%POLL-ID%">
<ul>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
</ul>
</div>
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-VOTE-BUTTON%</div>
<div id="yop-poll-results-%POLL-ID%">%POLL-VIEW-RESULT-LINK%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
</li><div id="gb_cust">VORLÄUFIGES·ERGEBNIS·DER·ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<span class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result-%POLL-ID%">
<span class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div>

[/ANSWER_RESULT_CONTAINER]

</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>

<div>%POLL-TOTAL-VOTES%</div>
<div id="yop-poll-back-%POLL-ID%">%POLL-BACK-TO-VOTE-LINK%</div>
</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>

After End Date
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">

</div>
<div id="gb_end">Die Abstimmung ist beendet.</div>

<ul class="afterVote">

[ANSWER_RESULT_CONTAINER]

[/ANSWER_RESULT_CONTAINER]
</ul>
</pre>
CSS
<pre>
#yop-poll-container-%POLL-ID% {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_poll_1.png");
/* border: 5px solid #3F8B43;*/
background-repeat:no-repeat;
color: #555555;
font-size: 12px;
overflow: hidden;
padding: 10px;
width: 632px;
/* height: 300px;*/
}
#yop-poll-name-%POLL-ID% {
font-size:14px;
font-weight:bold;
}

#yop-poll-question-%POLL-ID% {
color: #000000;
font-size: 14pt;
font-weight: 500;
height: 80px;
line-height: 26px;
margin: 0 50px 0 0;
padding-left: 215px;
padding-top: 40px;
text-align: center;
width: 300px;
margin-bottom: 100px;
}
#yop-poll-answers-%POLL-ID% {
}
#yop-poll-answers-%POLL-ID% ul {
list-style: none outside none;
margin: 0;
position: relative;
top: 20px;
left: 270px;
}
#yop-poll-answers-%POLL-ID% ul li {
font-style:normal;
margin-bottom:10px;
padding:0px;
font-size:12px;
width: 190px !important;
}
#yop-poll-answers-%POLL-ID% ul li input {
margin:0px;
float:none;
}
#yop-poll-answers-%POLL-ID% ul li label {
margin:0px;
font-style:normal;
font-weight:bold;
font-size:16px;
float:none;
z-index: 10;
}
.yop-poll-results-%POLL-ID% {
font-size: 12px;
font-style: italic;
font-weight: normal;
margin-left: 15px;
}

#yop-poll-custom-%POLL-ID% { }
#yop-poll-custom-%POLL-ID% ul {
font-size: 14px;
font-weight: 500;
left: 270px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 20px;
float: left;
width: 375px;
}
#yop-poll-custom-%POLL-ID% ul li {
padding:0px;
margin:0px;
font-size:14px;
}
#yop-poll-container-%POLL-ID% input[type='text'] {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
border: 1px solid #B9B8B8;
}

#yop-poll-container-%POLL-ID% textarea {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
font-family: Verdana;
color: #666;
border: 1px solid #B9B8B8;
}

#yop-poll-captcha-input-div-%POLL-ID% {
margin-top:5px;
}
#yop-poll-captcha-helpers-div-%POLL-ID% {
width:30px;
float:left;
margin-left:5px;
height:0px;
}

#yop-poll-captcha-helpers-div-%POLL-ID% img {
margin-bottom:2px;
}

#yop-poll-captcha-image-div-%POLL-ID% {
margin-bottom:5px;
}

#yop_poll_captcha_image_%POLL-ID% {
float:left;
}

.yop_poll_clear {
clear:both;
}

#yop-poll-vote-%POLL-ID% {
float:left;
/*width:100%; */
padding-left: 270px;
margin-top: 20px;
margin-bottom: 100px;
}

li.yop-poll-li-result-%POLL-ID% {
/* margin-top: 50px;*/
}

.yop-poll-results-bar-%POLL-ID% { background:#f5f5f5; height:10px; }
.yop-poll-results-bar-%POLL-ID% div { background:#555; height:10px; }
#yop-poll-vote-%POLL-ID% div#yop-poll-vote-%POLL-ID% button { float:left; }
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% {
float: right;
margin-bottom: 20px;
margin-top: -20px;
width: auto;
}
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div#yop-poll-back-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div { float:left; width:100%; }

#yop-poll-container-error-%POLL-ID% {
font-size:12px;
font-style:italic;
color:red;
left: 290px;
position: relative;
top: 270px;
}

.gb-btn {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
text-transform: uppercase;
width: 130px;
}

#gb_cust {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-left: 0px;
padding-top: 40px;
background-color: transparent;
}
.yop-poll-results-bar-%POLL-ID% div{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
height: 30px;
margin-top: 0px;
}

.yop-poll-results-bar-%POLL-ID% {
height: 30px;
width:99%;
}

.pds-answer-text-%POLL-ID% {
font-size: 0.85em;
font-weight: bold;
color: #999;
/* margin-top: -10px;*/
}

.pds-feedback-per-%POLL-ID% {
color: #999999;
font-size: 1em;
margin-left: 5px;
margin-top: -25px;
font-weight: bold;
}

.yop_poll_vote_button{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
width: 250px;
}

#gb_end {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-bottom: 100px;
padding-left: 250px;
padding-top: 130px;
background-color: transparent;
}

#yop-poll-container-%POLL-ID% textarea {
#max-width: 350px !important;
}

#yop-poll-container-success-%POLL-ID% {
font-size:12px;
font-style:italic;
color:green;
}
</pre>
JS
<pre>
function stripBorder_%POLL-ID%(object) {
object.each(function() {
if( parseInt(jQuery(this).width() ) > 0) {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("border-left-width")) - parseInt(jQuery(this).css("border-right-width")) );
}
else {
jQuery(this).css("border-left-width", '0px');
jQuery(this).css("border-right-width", '0px');
}
});
}
function stripPadding_%POLL-ID%(object) {
object.each(function() {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("padding-left")) - parseInt(jQuery(this).css("padding-left")) );
});
}

function strip_results_%POLL-ID%() {
stripPadding_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop_poll_li_result-%POLL-ID%") );
stripBorder_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-result-bar-%POLL-ID%"));
}

jQuery(document).ready(function(e) {
if(typeof window.strip_results_%POLL-ID% == 'function')
strip_results_%POLL-ID%();

if(typeof window.tabulate_answers_%POLL-ID% == 'function')
tabulate_answers_%POLL-ID%();

if(typeof window.tabulate_results_%POLL-ID% == 'function')
tabulate_results_%POLL-ID%();

});

function equalWidth_%POLL-ID%(obj, cols, findWidest ) {
findWidest = typeof findWidest !== 'undefined' ? findWidest : false;
if ( findWidest ) {
obj.each(function() {
var thisWidth = jQuery(this).width();
width = parseInt(thisWidth / cols);
jQuery(this).width(width);
jQuery(this).css('float', 'left');
});
}
else {
var widest = 0;
obj.each(function() {
var thisWidth = jQuery(this).width();
if(thisWidth > widest) {
widest = thisWidth;
}
});
width = parseInt( widest / cols);
obj.width(width);
obj.css('float', 'left');
}
}

function tabulate_answers_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID%"), %ANSWERS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %ANSWERS-TABULATED-COLS%, true );
}

function tabulate_results_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID%"), %RESULTS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %RESULTS-TABULATED-COLS%, true );
}
jQuery(document).ready(function(){
runOnPollStateChange_%POLL-ID%();
});

function runOnPollStateChange_%POLL-ID%() {};
</pre>
=== Dekra Poll Template für ID 2 (altes Template) ===
Vor Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">STIMMEN SIE JETZT AB !</div>
<ul>
[ANSWER_CONTAINER]
<li class="gb-ac yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="gb-oac yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div class="poll-vote-button">%POLL-VOTE-BUTTON%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
<div class="gb-storage" gb-poll-id="%POLL-ID%"></div>
<script type="text/javascript">

// Load check from Dean Edwards/Matthias Miller/John Resig

function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
if (_timer) clearInterval(_timer);

jQuery(document).ready(function() {
// remove vote button
jQuery('.poll-vote-button').html('');
// add Buttons
jQuery('.gb-ac').each(function(index,domEle){
var answer_id;
var label;
var content;
answer_id = jQuery(this).find('input:first').val();
label = jQuery(this).find('label:first').html();
content = '<button class="gb-btn" value="' + answer_id + '" type="button">' + label + '</button>';
//jQuery(this).append(content);
jQuery(this).html(content);
//add click handler
jQuery(this).find('button:first').click(function(){
answer_id = jQuery(this).val();
poll_id = jQuery('.gb-storage:first').attr('gb-poll-id');
hidden_field = '<input id="yop-poll-answer-' +answer_id + '" type="hidden" name="yop_poll_answer" value="' + answer_id + '">'
jQuery(this).after(hidden_field);
yop_poll_do_vote(poll_id);
return false;
});
});
});

};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */
window.onload = init;
</script>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">VORLÄUFIGES ERGEBNIS DER ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<div class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</div>
<div class="pds-feedback-result-%POLL-ID%">

</div>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div><div class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</div>
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>

</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>
After End Date
<pre>
This poll is closed!
Poll activity: <br>
start_date %POLL-START-DATE%<br>
end_date %POLL-END-DATE%<br>

Poll Results:
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-1" class="yop-poll-answers">
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label">
<span class="pds-answer-text">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result">
<span class="pds-feedback-per"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<span class="pds-clear" style="display: block;clear: both;height:1px;line-height:1px;"> </span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
%POLL-VOTE-BUTTON%
</pre>

== Probleme lösen ==
=== Generelle Prüfungen ===
* Custom Text Fields müssen für die Modifizierungen genau Custom Text Field 1 Kommentarund Custom Text Field 2 Name lauten (Mascha verändert das manchmal)

=== Kommentare werden am Ende der Umfrage nicht angezeigt ===
* In der Umfrage muß bei Show results after Poll End Date oder zur Not auch Before Vote gewählt werden
* Im Template müssen die entsprechenden Felder im Bereich "Template after Poll End" vorhanden sein.

== Change Log ==
=== Anpassungen für Admin Kommentare ===
2016-07

'''Datenbanktabelle:'''
<syntaxhighlight lang="sql">
--
-- Tabellenstruktur für Tabelle `kas_wp_yop_poll_admin_comments`
--

CREATE TABLE IF NOT EXISTS `kas_wp_yop_poll_admin_comments` (
`id` int(10) unsigned NOT NULL,
`vote_id` varchar(128) COLLATE latin1_general_ci NOT NULL,
`comment` text COLLATE latin1_general_ci NOT NULL,
`poll_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=2 ;

</syntaxhighlight>

<pre>

db_schema.php Tabelle hinzufügen
admin.php Tabelle hinzufügen
yop_poll.php Tabelle hinzufügen

answer_result_replace_callback ->
get_poll_comments -> admin kommentare dazufügen

2016-06
Problem: Wenn Logs gelöscht sind werden keine Kommentare mehr angezeigt
Lösungsansatz. Leeres Ergebnis, weil ein Join über die vote_id zu den Logs geht.
8.8.13

Hallo Mascha und Clemens,

folgende Funktionalität ist jetzt implementiert:

- Zu einem Hauptbeitrag (Sozusagen 1.Ebene - entspricht dem Post in
Wordpress) kann ein normaler Benutzer eine Frage stellen.
- Zu den Fragen (das wäre dann die 2. Ebene) kann jeder Benutzer
beliebig viele Beiträge machen
- Benutzer ab Level 7 (Redakteure und Admins) können beliebig viele
Fragen stellen.

- Labels sind jetzt: "Hinterlasse einen Beitrag" und "Beitrag abschicken"

Grüße,

Stephan
</pre>

11

10/2014
* Kommentare in Spalten sortieren, je nach Antwort
* CSS Overflow auf auto setzen, damit bei langen Kommentaren ein Scrollbalken kommt. Dafür maximale Höhe für Kommentarausgabe, damit die Felder optisch nicht zu groß werden

2016 - 04
* Neues Template für mehr Antwortoptionen. Kommentare werden untereinander (nicht in Spalten) dargestellt
* Einträge bei denen der User die nur den Namen ausfüllen aber nichts im Kommentarfeld schreiben werden nicht mehr angezeigt

Abstimmung wordpress

2017-11-30T10:00:35Z

37.49.32.84: /* Probleme lösen */

siehe auch [[DEKRA Direkt Blog]]
Der Blog '''DEKRA Direkt''' wird als interner Konzernblog verwendet und soll als Kontaktmittel der Mitarbeiter zur Vorstandsebene dienen. Dazu gibt es unter anderem die DEKRA Direkt Mitarbeiter Umfrage.

== Todo ==
* Backendanzeige der Votes ist Buggy
* Besser zum Testen wäre es wenn die Umfrage zunächst in eine Kategorie Test geht die auf der Startseite nicht dargestellt wird. - OK ist über Plugin realisiert.

Wordpress Extension Yop Poll - verwendet bei Mascha im Blog intern:

== yop poll Anpassungen ==
=== yop poll Tabellen ===
<pre>
------------ ----------------- --------------
yop_polls yop_poll_answers yop_poll_logs
------------ ----------------- --------------
id --------------| id --------------| id
name |-poll_id | pn
question answer | poll_id
total_votes votes | vote_id
total_answers ... |- answer_id
... --------------
------------ -----------------

---------------------- ----------------------------
yop_poll_custom_fields yop_poll_votes_custom_fields
---------------------- ----------------------------
id id
poll_id poll_id
custom_field vote_id
... custom_field_id
---------------------- user_id
custom_field_value
----------------------------
</pre>

Da bei einem custom text field bei der fragesstellung nur einzeiliger text möglich war, musst die datei
/wp-content/plugins/yop-poll/inc/yop_poll_model.php

In der datenbank die Tabelle:

kas_wp_yop_poll_votes_custom_fields

Feld: custom_field_value

von varchar (255) auf Text geändert.

== SQL-Abfragen für Antworten mit Kommentar ==
=== SQL nur Ergebnisse ===
<pre>
SELECT `id` , `poll_id` , `answer_id` , `ip` , `http_referer` , `vote_date` , `pn`
FROM `kas_wp_yop_poll_logs`
WHERE `poll_id` =38
ORDER BY `answer_id` ASC
LIMIT 0 , 500
</pre>
=== SQL Abfrage mit Kommentaren ===
<pre>
</pre>

Alte Abfrage
<pre>
SELECT *
FROM `kas_wp_yop_poll_logs`
LEFT OUTER JOIN `kas_wp_yop_poll_votes_custom_fields` ON `kas_wp_yop_poll_logs`.`vote_id` = `kas_wp_yop_poll_votes_custom_fields`.`vote_id`
WHERE `kas_wp_yop_poll_logs`.`poll_id` =13
</pre>
=== Weitere Abfragen ===
Welche Custom Fields gehören zu welchen Umfrage (Pivot Version)

Dynamische Version (funktioniert noch nicht aber die Richtung dürfte stimmen)
<pre>
SET @sql = NULL;
SELECT
GROUP_CONCAT(DISTINCT
CONCAT(
'max(case when custom_field = ''',
custom_field,
''' then custom_field end) AS ',
custom_field
)
) INTO @sql
FROM kas_wp_yop_poll_custom_fields;

SET @sql = CONCAT('SELECT poll_id, ', @sql, '
FROM kas_wp_yop_poll_custom_fields
GROUP BY poll_id');

PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
</pre>

== Neue Umfrage für DEKRA Connect durchführen ==
=== Allgemein ===
Läuft 2 Wochen ab ca. Mitte des Monats. Danach Auswertung und Grafikerstellung.
==== Updates ====
2015-10 - Umfrage nur mit Cookie check -> Mascha möchte keine Userunterbrechung. Später werden die Ergebnisse manuell gereinigt

===== Infos zum Cookie Check =====
Wenn man mit Cookies kontrolliert, wie wir das im Moment machen, dann testet das Plugin immer ob für eine bestimmte Umfrage schon abgestimmt wurde. '''Egal ob die Umfrage neu gestartet wurde'''.

Technisch wird dazu ein Cookie mit der ID der Umfrage hinterlegt. Dieses hat eine '''Gültigkeitsdauer''' (kann man einstellen z.B. 14 Tage). Solange das Cookie gültig ist kann man dann nicht mehr abstimmen.

Das bedeutet '''alle Browser die noch nicht abgestimmt haben können auch abstimmen''' !

Wenn du nochmal testen willst mußt du die Cookies löschen oder 14 Tage warten.

Nochmal zur Info Vor und Nachteile der anderen Lösungen

* '''Kontrolle über IP''': Vorteil recht zuverlässig schwer zu umgehen. Nachteil: wenn Benutzer mit der gleichen IP ankommen kann es sein dass einer nicht abstimmen kann.

* Über die '''Personalnummer''' Vorteil: Sehr Zuverlässig. Nachteil: Schlechte User Experience

== Technischer Ablauf ==
Stand 2017
* Block by Cookie

Stand März 2015 (obsolete)

* Das Umfrage Plugin im WP ist auf '''block by Personal Number''' gestellt. -> Ab 2016 nur noch '''by Cookie'''(siehe oben)
* obsolete -> Ein User kann nur Voten wenn eine id=12345 (Personalnummer) angehängt ist. Ansonsten wird zunächst auf das DEKRA Intranet weiter geleitet (über alert).
* Dort wird die Personalnummer als id=12345 an den Link angehängt und auf intern-blog.dekra.de/category/dekra-direkt/?id=12345 geleitet Nur wenn eine solche id vorhanden ist kann gevoted werden. Ist nicht supersicher weil die Nummer willkürlich geändert werden kann, nachträgliche Prüfung wäre mit Personalnummern Liste möglich. Verbesserungspotential wäre POST übermittlung, Gültigkeitsprüfung durch PN-Index oder Formel.
* Hat die id '''schon gevotet''' wird nur das Ergebnis angezeigt.
* Im DEKRA Intranet werden Links an die eine id angehängt werden soll mit dem Parameter '''?id=public''' Veröffentlicht. public wird dann automatisch durch die Personalnummer des Mitarbeiters ersetzt, bevor weitergeleitet wird.

=== Umfrage erstellen ===
* Achtung manchmal kollidiert die Abfrage mit alten Cookies der letzten Umfrage. Genau ist das noch nicht geklärt. Hilfe bringt:
** dafür sorgen, daß die alte Umfrage nicht mit angezeigt wird
** Logs löschen
** Wenn nichts hilft die Stats Reseten (kann sein daß dies nicht nötig ist.)

* 1 oder mehrere (Mascha will meist 3) Umfragen-Dummies erstellen (z.B. eine alte klonen - '''Vorsicht: Einstellungen für Datum, Template und Blocking''' werden nicht übernommen)
* Template: '''DEKRA Umfrage mit Kommentar'''
** Mit dem Template '''DEKRA Umfrage mit dynamischem Kommentar''' kann man zusätzlich noch JavaScript Popups öffnen und auf die gewählte Antwort reagieren (siehe JS im Template)
** Das Template '''Umfrage mit mehr Antworten''' erlaubt mehr als zwei Antwortmöglichkeiten. Die Kommentare werden dann untereinander dargestellt. Das ist zugleich auch das sicherste Template, was die Darstellung angeht.
* Blocking by auf '''Personal Number''' - dadurch wird die Abfrage des id Parameters gestartet. Zum Testen auf don't Block stellen. Achtung IE hat manchmal Caching Probleme.
* Start und Enddatum setzen
* Abstimmung in einen '''Beitrag in Kategorie Dekra Direkt''' einpflegen (evtl. erst nach dem Testen) -> Startseite sichtbar
* Am Ende Umfrage auf '''nur Antwort''' !
* Geo-bit erstellt die Fragen, diese werden von Mascha angepasst und von Ihr in einem Beitrag veröffentlicht.
* Start der Umfrage durch setzen der Kategorie (todo ob das klappt)

=== Test der Umfrage ===
* Vorige Tests sind sinnvoll. Ein Test von Geo-bit (einfach id anhängen). Ein Test von Dekra
=== Ende der Umfrage und Auswertung ===
Für die Auswertung benötigt Mascha eine '''Excel-Tabelle''' in der '''nach Antworten und sortiert''' ist. Ebenso die dazugehörigen Kommentare. Doppelte IPs rausschmeißen. Wenn Personalnummerliste vorhanden könnte man hier nach Gültigkeit prüfen.
* Umfrage mit Datum beenden oder auf Maschas Hinweis, '''Umfrage auf don't block''', damit die Umleitung auf Dekra nicht mehr aktiv ist, außerdem '''Enddatum setzen''' und auf '''Ergebnis anzeigen nach Enddatum'''. Endzeit etwas zurücksetzen, da manchmal die Serverzeit um ein paar Stunden differiert.
* SQL Abfrage (siehe Statement), Export als ods oder csv
* Doppelte überprüfen
* Umwandeln in Excel
* Schaubild aus Numbers

=== Löschen unerwünschter Kommentare ===

In
Admin -> Yop poll -> All polls -> meineUmfrage -> votes

hier auswählen und löschen

Problem: die Kommentare werden nicht mehr angezeigt. TODO

=== Anpassungen am Plugin Yop poll===

yop-poll => inc => admin.php

Hier die DB mit prefix versehen. "kas_"
yop-poll => inc => yop_poll_model.php
yop-poll => inc => db_schema.php
yop-poll => js => yop_poll_public.js
==== Kommentare ====
MUSS überarbeitet werden
yop_poll_modell.php

return_poll_html ->
dort wird der Template Block
[ANSWER_RESULT_CONTAINER]
[/ANSWER_RESULT_CONTAINER]
mit pregreplace über eine Callback Funktion ersetzt
answer_result_callback(m$)
darin wiederum wird
get_poll_comments($poll_id)
aufgerufen, dieses gibt ein array zurück das dann in HTML umgesetzt wird. Diese Ausgabe erfolbt über die Abfrage von
$this->is_view_poll_results()
Das bedeutet die Ausgabe erfolgt wenn im Backend die Bedingung für die Ausgabe der Results gesetzt ist (z.B. Results after End Date) Gute erweiterung wäre ein eigener Block für die Comments

'''Im Template muß der Block natürlich auch gesetzt sein.''' (beim entsprechenden Template)

Problem: Die Ausgabe erfolgt nur wenn die Logs der Umfrage nicht gelöscht sind.
Ausgabe der Kommentare bisher
<syntaxhighlight lang="sql">
SELECT yp.id,yp.name,yp.question,ypa.answer,ypvcf.custom_field_value,ypcf.custom_field,ypl.vote_id FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON (yp.id=ypcf.poll_id)
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON (ypcf.id = ypvcf.custom_field_id)
JOIN kas_wp_yop_poll_logs ypl ON (ypvcf.vote_id = ypl.vote_id)
JOIN kas_wp_yop_poll_answers ypa ON (ypl.answer_id = ypa.id)
WHERE yp.id=[pollID] AND ypl.answer_id=[answerID];
</syntaxhighlight>
Die Abfrage wird für jede Antwort (answer_id) ausgeführt. Aus den Logs wird die answer_id geholt. Wenn diese im Log fehlt wird nichts zurückgegeben.
Wie kann man die Zuordnung Kommentar - answer_id noch herstellen? answer_id und vote_id stehen auch in yop_poll_voters, vote_id steht auch in yop_poll_votes_custom_fields
Also statt mit wp_yop_poll_logs joint man mit yop_poll_voters.

Beispiel
<syntaxhighlight lang="sql">
SELECT yp.id, yp.name, yp.question, ypa.answer, ypvcf.custom_field_value, ypcf.custom_field, ypv.vote_id
FROM kas_wp_yop_polls yp
JOIN kas_wp_yop_poll_custom_fields ypcf ON ( yp.id = ypcf.poll_id )
JOIN kas_wp_yop_poll_votes_custom_fields ypvcf ON ( ypcf.id = ypvcf.custom_field_id )
JOIN kas_wp_yop_poll_voters ypv ON ( ypvcf.vote_id = ypv.vote_id )
JOIN kas_wp_yop_poll_answers ypa ON ( ypv.answer_id = ypa.id )
WHERE yp.id =50
AND ypv.answer_id =113
</syntaxhighlight>

== Yop Poll Templates ==
Todo - Anpassen um ungenutzte Features zu nutzen (z.B. after End Date schöne Anzeige der Ergebnisse)
=== DEKRA Umfrage mit Kommentar ===
Vor Umfrage:
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<ul>
[ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">%POLL-ANSWER-RESULT-LABEL%</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
<div id="yop-poll-custom-%POLL-ID%">
<ul>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
</ul>
</div>
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-VOTE-BUTTON%</div>
<div id="yop-poll-results-%POLL-ID%">%POLL-VIEW-RESULT-LINK%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question" style="display:table-cell;height:130px;vertical-align:middle;">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
</li><div id="gb_cust">VORLÄUFIGES·ERGEBNIS·DER·ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<span class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result-%POLL-ID%">
<span class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div>

[/ANSWER_RESULT_CONTAINER]

</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>

<div>%POLL-TOTAL-VOTES%</div>
<div id="yop-poll-back-%POLL-ID%">%POLL-BACK-TO-VOTE-LINK%</div>
</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>

After End Date
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">

</div>
<div id="gb_end">Die Abstimmung ist beendet.</div>

<ul class="afterVote">

[ANSWER_RESULT_CONTAINER]

[/ANSWER_RESULT_CONTAINER]
</ul>
</pre>
CSS
<pre>
#yop-poll-container-%POLL-ID% {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_poll_1.png");
/* border: 5px solid #3F8B43;*/
background-repeat:no-repeat;
color: #555555;
font-size: 12px;
overflow: hidden;
padding: 10px;
width: 632px;
/* height: 300px;*/
}
#yop-poll-name-%POLL-ID% {
font-size:14px;
font-weight:bold;
}

#yop-poll-question-%POLL-ID% {
color: #000000;
font-size: 14pt;
font-weight: 500;
height: 80px;
line-height: 26px;
margin: 0 50px 0 0;
padding-left: 215px;
padding-top: 40px;
text-align: center;
width: 300px;
margin-bottom: 100px;
}
#yop-poll-answers-%POLL-ID% {
}
#yop-poll-answers-%POLL-ID% ul {
list-style: none outside none;
margin: 0;
position: relative;
top: 20px;
left: 270px;
}
#yop-poll-answers-%POLL-ID% ul li {
font-style:normal;
margin-bottom:10px;
padding:0px;
font-size:12px;
width: 190px !important;
}
#yop-poll-answers-%POLL-ID% ul li input {
margin:0px;
float:none;
}
#yop-poll-answers-%POLL-ID% ul li label {
margin:0px;
font-style:normal;
font-weight:bold;
font-size:16px;
float:none;
z-index: 10;
}
.yop-poll-results-%POLL-ID% {
font-size: 12px;
font-style: italic;
font-weight: normal;
margin-left: 15px;
}

#yop-poll-custom-%POLL-ID% { }
#yop-poll-custom-%POLL-ID% ul {
font-size: 14px;
font-weight: 500;
left: 270px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 20px;
float: left;
width: 375px;
}
#yop-poll-custom-%POLL-ID% ul li {
padding:0px;
margin:0px;
font-size:14px;
}
#yop-poll-container-%POLL-ID% input[type='text'] {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
border: 1px solid #B9B8B8;
}

#yop-poll-container-%POLL-ID% textarea {
font-size: 12px;
margin: 10px 0;
padding: 2%;
text-indent: 2%;
width: 92%;
font-family: Verdana;
color: #666;
border: 1px solid #B9B8B8;
}

#yop-poll-captcha-input-div-%POLL-ID% {
margin-top:5px;
}
#yop-poll-captcha-helpers-div-%POLL-ID% {
width:30px;
float:left;
margin-left:5px;
height:0px;
}

#yop-poll-captcha-helpers-div-%POLL-ID% img {
margin-bottom:2px;
}

#yop-poll-captcha-image-div-%POLL-ID% {
margin-bottom:5px;
}

#yop_poll_captcha_image_%POLL-ID% {
float:left;
}

.yop_poll_clear {
clear:both;
}

#yop-poll-vote-%POLL-ID% {
float:left;
/*width:100%; */
padding-left: 270px;
margin-top: 20px;
margin-bottom: 100px;
}

li.yop-poll-li-result-%POLL-ID% {
/* margin-top: 50px;*/
}

.yop-poll-results-bar-%POLL-ID% { background:#f5f5f5; height:10px; }
.yop-poll-results-bar-%POLL-ID% div { background:#555; height:10px; }
#yop-poll-vote-%POLL-ID% div#yop-poll-vote-%POLL-ID% button { float:left; }
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% {
float: right;
margin-bottom: 20px;
margin-top: -20px;
width: auto;
}
#yop-poll-vote-%POLL-ID% div#yop-poll-results-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div#yop-poll-back-%POLL-ID% a { color:#3F8B43; text-decoration:underline; font-size:12px;}
#yop-poll-vote-%POLL-ID% div { float:left; width:100%; }

#yop-poll-container-error-%POLL-ID% {
font-size:12px;
font-style:italic;
color:red;
left: 290px;
position: relative;
top: 270px;
}

.gb-btn {
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
text-transform: uppercase;
width: 130px;
}

#gb_cust {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-left: 0px;
padding-top: 40px;
background-color: transparent;
}
.yop-poll-results-bar-%POLL-ID% div{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
height: 30px;
margin-top: 0px;
}

.yop-poll-results-bar-%POLL-ID% {
height: 30px;
width:99%;
}

.pds-answer-text-%POLL-ID% {
font-size: 0.85em;
font-weight: bold;
color: #999;
/* margin-top: -10px;*/
}

.pds-feedback-per-%POLL-ID% {
color: #999999;
font-size: 1em;
margin-left: 5px;
margin-top: -25px;
font-weight: bold;
}

.yop_poll_vote_button{
background-image: url("http://intern-blog.dekra.de/wp-content/uploads/2013/02/bg_button.png");
border: medium none;
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
cursor: pointer;
font-size: 1.9em;
font-weight: bold;
height: 40px;
width: 250px;
}

#gb_end {
color: #999999;
font-size: 1.4em;
font-weight: bold;
padding-bottom: 100px;
padding-left: 250px;
padding-top: 130px;
background-color: transparent;
}

#yop-poll-container-%POLL-ID% textarea {
#max-width: 350px !important;
}

#yop-poll-container-success-%POLL-ID% {
font-size:12px;
font-style:italic;
color:green;
}
</pre>
JS
<pre>
function stripBorder_%POLL-ID%(object) {
object.each(function() {
if( parseInt(jQuery(this).width() ) > 0) {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("border-left-width")) - parseInt(jQuery(this).css("border-right-width")) );
}
else {
jQuery(this).css("border-left-width", '0px');
jQuery(this).css("border-right-width", '0px');
}
});
}
function stripPadding_%POLL-ID%(object) {
object.each(function() {
jQuery(this).width( parseInt( jQuery(this).width() ) - parseInt(jQuery(this).css("padding-left")) - parseInt(jQuery(this).css("padding-left")) );
});
}

function strip_results_%POLL-ID%() {
stripPadding_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop_poll_li_result-%POLL-ID%") );
stripBorder_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-result-bar-%POLL-ID%"));
}

jQuery(document).ready(function(e) {
if(typeof window.strip_results_%POLL-ID% == 'function')
strip_results_%POLL-ID%();

if(typeof window.tabulate_answers_%POLL-ID% == 'function')
tabulate_answers_%POLL-ID%();

if(typeof window.tabulate_results_%POLL-ID% == 'function')
tabulate_results_%POLL-ID%();

});

function equalWidth_%POLL-ID%(obj, cols, findWidest ) {
findWidest = typeof findWidest !== 'undefined' ? findWidest : false;
if ( findWidest ) {
obj.each(function() {
var thisWidth = jQuery(this).width();
width = parseInt(thisWidth / cols);
jQuery(this).width(width);
jQuery(this).css('float', 'left');
});
}
else {
var widest = 0;
obj.each(function() {
var thisWidth = jQuery(this).width();
if(thisWidth > widest) {
widest = thisWidth;
}
});
width = parseInt( widest / cols);
obj.width(width);
obj.css('float', 'left');
}
}

function tabulate_answers_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID%"), %ANSWERS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %ANSWERS-TABULATED-COLS%, true );
}

function tabulate_results_%POLL-ID%() {
equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID%"), %RESULTS-TABULATED-COLS% );
//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %RESULTS-TABULATED-COLS%, true );
}
jQuery(document).ready(function(){
runOnPollStateChange_%POLL-ID%();
});

function runOnPollStateChange_%POLL-ID%() {};
</pre>
=== Dekra Poll Template für ID 2 (altes Template) ===
Vor Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">STIMMEN SIE JETZT AB !</div>
<ul>
[ANSWER_CONTAINER]
<li class="gb-ac yop-poll-li-answer-%POLL-ID%">
%POLL-ANSWER-CHECK-INPUT%
%POLL-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_CONTAINER]
[OTHER_ANSWER_CONTAINER]
<li class="gb-oac yop-poll-li-answer-%POLL-ID%">
%POLL-OTHER-ANSWER-CHECK-INPUT%
%POLL-OTHER-ANSWER-LABEL%
<span class="yop-poll-results-text-%POLL-ID%">
%POLL-ANSWER-RESULT-LABEL%
</span>
%POLL-OTHER-ANSWER-TEXT-INPUT%
%POLL-ANSWER-RESULT-BAR%
</li>
[/OTHER_ANSWER_CONTAINER]
</ul>
</div>
[CUSTOM_FIELD_CONTAINER]
<li>%POLL-CUSTOM-FIELD-LABEL% %POLL-CUSTOM-FIELD-TEXT-INPUT%</li>
[/CUSTOM_FIELD_CONTAINER]
[CAPTCHA_CONTAINER]
<div id="yop-poll-captcha-%POLL-ID%">
<div class="yop-poll-captcha-image-div" id="yop-poll-captcha-image-div-%POLL-ID%">
%CAPTCHA-IMAGE%
<div class="yop-poll-captcha-helpers-div" id="yop-poll-captcha-helpers-div-%POLL-ID%">%RELOAD-CAPTCHA-IMAGE% </div>
<div class="yop_poll_clear"></div>
</div>
%CAPTCHA-LABEL%
<div class="yop-poll-captcha-input-div" id="yop-poll-captcha-input-div-%POLL-ID%">%CAPTCHA-INPUT%</div>
</div>
[/CAPTCHA_CONTAINER]
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div class="poll-vote-button">%POLL-VOTE-BUTTON%</div>
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>
</div>
<div class="gb-storage" gb-poll-id="%POLL-ID%"></div>
<script type="text/javascript">

// Load check from Dean Edwards/Matthias Miller/John Resig

function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
if (_timer) clearInterval(_timer);

jQuery(document).ready(function() {
// remove vote button
jQuery('.poll-vote-button').html('');
// add Buttons
jQuery('.gb-ac').each(function(index,domEle){
var answer_id;
var label;
var content;
answer_id = jQuery(this).find('input:first').val();
label = jQuery(this).find('label:first').html();
content = '<button class="gb-btn" value="' + answer_id + '" type="button">' + label + '</button>';
//jQuery(this).append(content);
jQuery(this).html(content);
//add click handler
jQuery(this).find('button:first').click(function(){
answer_id = jQuery(this).val();
poll_id = jQuery('.gb-storage:first').attr('gb-poll-id');
hidden_field = '<input id="yop-poll-answer-' +answer_id + '" type="hidden" name="yop_poll_answer" value="' + answer_id + '">'
jQuery(this).after(hidden_field);
yop_poll_do_vote(poll_id);
return false;
});
});
});

};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
init(); // call the onload handler
}
}, 10);
}

/* for other browsers */
window.onload = init;
</script>
</pre>
Nach Umfrage
<pre>
<div id="yop-poll-name-%POLL-ID%" class="yop-poll-name">%POLL-NAME%</div>
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-%POLL-ID%" class="yop-poll-answers">
<div id="gb_cust">VORLÄUFIGES ERGEBNIS DER ABSTIMMUNG</div>
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label-%POLL-ID%">
<div class="pds-answer-text-%POLL-ID%">%POLL-ANSWER-LABEL%</div>
<div class="pds-feedback-result-%POLL-ID%">

</div>
</label>
<div>
%POLL-ANSWER-RESULT-BAR%
</div><div class="pds-feedback-per-%POLL-ID%"> %POLL-ANSWER-RESULT-LABEL%</div>
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
<div id="yop-poll-vote-%POLL-ID%" class="yop-poll-footer">
<div>%POLL-TOTAL-ANSWERS%</div>
<div>%POLL-TOTAL-VOTES%</div>

</div>
</pre>

Before Start Date
<pre>
This poll is about to <br>
start at %POLL-START-DATE%<br>
and finish at %POLL-END-DATE%<br>
</pre>
After End Date
<pre>
This poll is closed!
Poll activity: <br>
start_date %POLL-START-DATE%<br>
end_date %POLL-END-DATE%<br>

Poll Results:
<div id="yop-poll-question-%POLL-ID%" class="yop-poll-question">%POLL-QUESTION%</div>
<div id="yop-poll-answers-1" class="yop-poll-answers">
<ul>
[ANSWER_RESULT_CONTAINER]
<li class="yop-poll-li-result-%POLL-ID%">
<label class="pds-feedback-label">
<span class="pds-answer-text">%POLL-ANSWER-LABEL%</span>
<span class="pds-feedback-result">
<span class="pds-feedback-per"> %POLL-ANSWER-RESULT-LABEL%</span>
</span>
</label>
<span class="pds-clear" style="display: block;clear: both;height:1px;line-height:1px;"> </span>
%POLL-ANSWER-RESULT-BAR%
</li>
[/ANSWER_RESULT_CONTAINER]
</ul>
</div>
%POLL-VOTE-BUTTON%
</pre>

== Probleme lösen ==
=== Generelle Prüfungen ===
* Custom Text Fields müssen für die Modifizierungen genau Custom Text Field 1 Kommentarund Custom Text Field 2 Name lauten (Mascha verändert das manchmal)

=== Kommentare werden am Ende der Umfrage nicht angezeigt ===
* In der Umfrage muß bei Show results after Poll End Date oder zur Not auch Before Vote gewählt werden
* Im Template müssen die entsprechenden Felder im Bereich "Template after Poll End" vorhanden sein.

== Change Log ==
=== Anpassungen für Admin Kommentare ===
2016-07

'''Datenbanktabelle:'''
<syntaxhighlight lang="sql">
--
-- Tabellenstruktur für Tabelle `kas_wp_yop_poll_admin_comments`
--

CREATE TABLE IF NOT EXISTS `kas_wp_yop_poll_admin_comments` (
`id` int(10) unsigned NOT NULL,
`vote_id` varchar(128) COLLATE latin1_general_ci NOT NULL,
`comment` text COLLATE latin1_general_ci NOT NULL,
`poll_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=2 ;

</syntaxhighlight>

<pre>

db_schema.php Tabelle hinzufügen
admin.php Tabelle hinzufügen
yop_poll.php Tabelle hinzufügen

answer_result_replace_callback ->
get_poll_comments -> admin kommentare dazufügen

2016-06
Problem: Wenn Logs gelöscht sind werden keine Kommentare mehr angezeigt
Lösungsansatz. Leeres Ergebnis, weil ein Join über die vote_id zu den Logs geht.
8.8.13

Hallo Mascha und Clemens,

folgende Funktionalität ist jetzt implementiert:

- Zu einem Hauptbeitrag (Sozusagen 1.Ebene - entspricht dem Post in
Wordpress) kann ein normaler Benutzer eine Frage stellen.
- Zu den Fragen (das wäre dann die 2. Ebene) kann jeder Benutzer
beliebig viele Beiträge machen
- Benutzer ab Level 7 (Redakteure und Admins) können beliebig viele
Fragen stellen.

- Labels sind jetzt: "Hinterlasse einen Beitrag" und "Beitrag abschicken"

Grüße,

Stephan
</pre>

11

10/2014
* Kommentare in Spalten sortieren, je nach Antwort
* CSS Overflow auf auto setzen, damit bei langen Kommentaren ein Scrollbalken kommt. Dafür maximale Höhe für Kommentarausgabe, damit die Felder optisch nicht zu groß werden

2016 - 04
* Neues Template für mehr Antwortoptionen. Kommentare werden untereinander (nicht in Spalten) dargestellt
* Einträge bei denen der User die nur den Namen ausfüllen aber nichts im Kommentarfeld schreiben werden nicht mehr angezeigt

Reliefmodell Bayerischer Wald

2017-11-29T14:12:19Z

37.49.32.84:

== Übersicht ==
2x Firefox im Kioskmode (r-kiosk)
Apache (XAMPP)
2x HTML-Seiten mit Flash Film. Kommunikation über ActionScript.

== ActionScript ==
* MenuApp Objekt importiert Klassen aus geo-bit/baywa/core/MenuApp.as
== ToDo ==
Sicherheit Windows
Wartungsaufgaben definieren (Apache aufräumen etc.) evt. automatisieren

== Sonstiges ==
Girder zur Automatisierung -> nicht benötigt (vorerst)
Maus-Trap -> nicht benötigt (Touch Screen)

TYPO3 auf utf-8 umstellen

2017-11-24T09:14:55Z

37.49.32.84:

== Quickstart ==

=== Vorgehen mit mySQL Bordmitteln ===
Siehe [[mySQL charset - von latin nach utf-8]]

=== Hinweis zum PHP Skript db_utf8_fix.php ===

In den Tools gibt es ein Skript das in der Regel die Konvertierung gut erledigt. Manchmal gibt es Probleme, es kann z.B. vorkommen, daß die Tabellen zwar auf latin stehen aber die Zeichen trotzdem in utf-8 gespeichert sind. Dann müßte eigentlich kein modify ausgeführt werden, sondern nur ein alter charset. Hinweis darauf ist, wenn nach der Konvertierung Datenfehlen. Und zwar immer ab dem ersten Umlaut o.ä.

=== TYPO3 ===
'''Install Tool „All Configuration“'''
<pre>
[forceCharset] = utf-8
[setDBinit] = SET NAMES utf8; SET CHARACTER_SET utf8;
</pre>

zweiter Teil ist oft nicht notwendig kann aber probiert werden wenn irgendwas nicht klappt.

Sie müssen im TypoScript übrigens „metaCharset“ und „renderCharset“ nicht setzen, da „forceCharset“ diese beiden Werte automatisch setzt.
Mit „SET NAMES utf8;" wird MySQL darüber informiert, in welchem Zeichensatz die Daten übermittelt werden.

=== mySQL ===
'''Datenbank sichern'''
mysqldump --opt -Q -u USER -p PASSWORT -h HOST DB > dump.sql
oder im Kompatibilitätsmodus (ohne Kollation) mit
--compatible=mysql40
Wenn ohne Kompatibilitätsmodus dann Charset und Kollation anpassen. Aus der Zeile
ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
wird dann z.B.:
ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci;

Nun folgt die Konvertierung des Dumps nach UTF-8. Bitte kopieren Sie sich sicherheitshalber den Dump als Backup an eine sichere Stelle, falls bei irgendwelchen Versuchen etwas fehlschlagen sollte. Auf der Linux-Shell muss nun folgendes eingegeben werden:

SHELL
iconv -f iso-8859-1 -t utf8 dump.sql > dump-iconv.sql
Listing 2

Wenn Sie einen anderen Zeichensatz als „ISO 8859-1“ verwendet haben, dann müssen Sie die Angabe hinter dem „-f“ noch anpassen. Der erstellte Dump sollte nun UTF-8-kodiert vorliegen und Sie können diesen schon bald zurücksichern. Doch bevor Sie dies tun, müssen erst die Einträge im Install-Tool von TYPO3 gemacht werden, die auch schon vorher bei der Neuinstallation beschrieben wurden. Sie können dazu das Install-Tool benutzen oder aber auch im Ordner „typo3conf“ die Datei „localconf.php“ um folgende zwei Zeilen ergänzen und anschließend die „temp_CACHED_*“-Dateien löschen:

SHELL
$TYPO3_CONF_VARS['SYS']['setDBinit'] = 'SET NAMES utf8;';
$TYPO3_CONF_VARS['BE']['forceCharset'] = 'utf-8';
Listing 3

TYPO3 verwendet jetzt schon für die Datenbankverbindung und die Ausgabe im Frontend und Backend UTF-8. Da Sie erst jetzt unseren umgewandelten Dump zurückspielen, kann es nicht passieren, dass versehentlich zwei verschiedene Zeichensätze in der Datenbank vorhanden sind (z. B. durch einen Datenbank-Eintrag in den Seitencache, der von einem Besucher der Website erzeugt wurde). Mit der folgenden Zeile wird die Datenbank zurückgesichert:

SHELL
mysql -u USER -p PASSWORT -h HOST --default-character-set=utf8 DB < dump-iconv.sql
Listing 4

Mit dem „--default-character-set=UTF8“ wird MySQL mitgeteilt, dass die Daten schon im UTF-8 Format vorliegen. Ohne diese Angabe würde aus „üöä“ „Ã¼Ã¶Ã¤“. Sie sollten nun prüfen, ob alles geklappt hat, indem Sie im Frontend, im Backend sowie mit phpMyAdmin die Umlaute prüfen. Zusätzlich können Sie auch mit dem MySQL-Query-Browser [3] prüfen, ob alles ordnungsgemäß angezeigt wird.

Was tun bei falsch codierten Zeichen?

Wenn bei einer MySQL-4.0-Datenbank im Install-Tool „forceCharset“ auf „utf-8“ gesetzt wurde, übermittelt TYPO3 die Zeichen utf-8-kodiert an die Datenbank. MySQL 4 kann damit allerdings nichts anfangen und speichert diese so, dass weder Suche noch Sortierung innerhalb von MySQL funktionieren. Wenn ein Dump von dieser MySQL-4.0-Datenbank gemacht wird, sind diese Daten schon UTF-8-kodiert und müssen nur noch in eine MySQL-4.1- oder 5.0-Datenbank importiert werden. Der benötigte Befehl ist in Listing 4 zu sehen. Es kommt auch hier wieder vor allem auf die Angabe „--default-character-set=UTF8“ an. Die Kollation der Datenbank muss vor dem Einspielen des Dumps ebenfalls auf „utf8_general_ci“ gesetzt werden. Da TYPO3 in alten Versionen Probleme mit aktuelleren MySQL-Versionen hatte, wird man dies sinnvollerweise nur bei einem Update auf eine neue TYPO3-Version machen. Erst diese bietet die notwendige Einstellung „SET NAMES utf8;“.

Und hiermit wären wir beim nächsten Problem: In alten TYPO3-Versionen gab es die Einstellung „[setDBinit]“ noch nicht und somit konnte „SET NAMES utf8;“ in älteren TYPO3-Versionen ohne Sourcecode-Änderung gar nicht durchgeführt werden. Selbst wenn man eine UTF-8-taugliche Datenbank verwendet hätte, wären falsch kodierte Zeichen die Folge. TYPO3 sendet in diesem Fall UTF-8-kodierte Zeichen zur Datenbank. Diese geht davon aus, es kämen Latin1-kodierte Zeichen und wandelt alle Umlaute erneut um. Somit hätte man nun doppelt kodierte Umlaute. In diesem Fall kann man aber einen Dump mit „iconv“ reparieren, indem man eine Wandlung von UTF nach Latin1 auf der Konsole vornimmt:

Machen Sie ein Backup und löschen Sie dies erst, wenn Sie absolut sicher sind, dass die Umstellung erfolgreich war. Die Einstellung „[multiplyDBfieldSize]“ sollte auf „1“ stehen bleiben. MySQL 4.1 und 5.x benötigen hier keine Änderung. Prüfen Sie außerdem, ob die Version von „mysqldump“ zur MySQL-Server-Version passt. Im schlimmsten Fall können Sie nicht einmal einen Dump erzeugen. Verzichten sollten Sie auf den Einsatz der Extension „convert2utf8“. Diese wandelt nicht alle Datensätze um, wodurch „iconv“ (oder auch alternativ recode) den Dump nicht mehr ohne Fehlermeldungen konvertieren. Eine Umwandlung lässt sich zwar erzwingen, aber ohne 100-prozentige Sicherheit, dass alles geklappt hat.

== Links ==
Artikel aus dem t3n Magazin
[[http://t3n.de/magazin/mysql-typo3-utf-8-umstellen-tipps-wechsel-latin1-utf-8-220945/]]

Guter Überblick im TYPO3 Wiki
[[http://wiki.typo3.org/index.php/UTF-8_support]] Der hier vorliegende Text ist eine Übersetzung des dortigen Textes.

== Überblick / Overview ==
Verarbeitungskette prüfen vhost.conf - php.ini - my.cnf

Wichtige Einstellung die leicht übersehen wird:

Install Tool: Unter „All Configuration“ muss nun „[forceCharset]“ auf „utf-8“ und „[setDBinit]“ den Eintrag „SET NAMES utf8;“ erhalten. Der zusätzliche Eintrag „SET CHARACTER_SET utf8;“, der dem Feld „[setDBinit]“ hinzugefügt werden kann, ist oft nicht notwendig.

=== Verarbeitungskette ===
Zuerst mal testen ob in der Verarbeitungskette überall utf-8 für die Übertragung von Daten verwendet wird:

==== Apache: vhost.conf ====

AddDefaultCharset UTF-8

Dies ist für TYPO3 Versionen spätestens ab 4.3 nicht notwendig. Wenn man hier im Install Tool ''[BE][forceCharset]'' gesetzt hat

Kann einfach getestet werden indem man sich die Header Daten einer Seite mit Firebug oder LiveHTTPTracker anschaut. Darin sollte eine Zeile in dieser Art enthalten sein:

Content-Type: text/html; charset=utf-8

==== PHP: php.ini ====
default_charset = "utf-8"

Mit dieser Einstellung sollten auch standalone Skripte mit dem richtigen Zeichensatz arbeiten. Man kann in den Skripten aber auch

Außerdem sollte mit der Erweiterung mbstring oder iconf gearbeitet werden. Deren Performance ist wesentlich besser als die Umwandlung über den PHP-Code von TYPO3 (s.u.)

==== MySQL: my.cnf ====
Die folgende Einstellung setzt alle System Variablen für Zeichensätze und Kollationen für den MySQL SERVER. Dies betrifft also auch existierende Datenbanken. Deshalb sollte diese Einstellung nur gesetzt werden wenn ausschließlich mit utf-8 Datenbanken gearbeitet wird.

Man benötigt die Einstellung nicht wenn im Install Tool ''['SYS']['setDBinit']'' gesetzt ist.

=== TYPO3 Einstellungen ===

==== localconf.php ====

<pre>
// For backend charset
$TYPO3_CONF_VARS['BE']['forceCharset'] = 'utf-8';

$TYPO3_CONF_VARS['SYS']['setDBinit'] = 'SET NAMES utf8;';

// For GIFBUILDER support
// Set it to 'iconv' or 'mbstring'
$TYPO3_CONF_VARS['SYS']['t3lib_cs_convMethod'] = 'mbstring';
// For 'iconv' support you need at least PHP 5!
$TYPO3_CONF_VARS['SYS']['t3lib_cs_utils'] = 'mbstring';
</pre>

Hinweise:
* Wenn die Datenbank auf UTF-8 gesetzt ist, sollte man '''nicht die Einstellung $TYPO3_CONF_VARS['SYS']['multiplyDBfieldSize'] setzen'''. Diese wird nur benötigt, wenn die Datenbank mit latin 1 arbeitet aber der Inhalt utf-8 ist. Außerdem führt die Einstellung des öfteren zu Problemen.
* $TYPO3_CONF_VARS['SYS']['setDBinit'] = 'SET NAMES utf8;'; Setzt folgende 3 Einstellungen:
<pre>
SET character_set_client = utf8;
SET character_set_results = utf8;
SET character_set_connection = utf8;
</pre>

* Wenn '''in phpMyAdmin Sonderzeichen als 2 seltsame Zeichen''' angezeigt werden, reicht diese Einstellung nicht. Zuerst müssen die Inhaltstabellen konvertiert werden (oder löschen, umstellen, neu eingeben.

* In '''manchen Konfigurationen''' muß man auch noch eine '''Einstellung für die Sessions''' machen:

SET NAMES utf8;
SET SESSION character_set_server=utf8;

* '''Benutze niemals SET CHARACTER SET utf8;''' Dies kann große Probleme im TYPO3 Umfeld erzeugen. Mit der Einstellung SET NAMES hat sich das ohnehin erledigt, weil hier eigentlich die wichtigen Einstellungen gemacht werden

* Wenn [BE][forceCharset] auf utf-8 gesetzt ist (siehe oben), dann wird auch ''config.renderCharset'' und ''config.metaCharset'' per default mit utf-8 arbeiten. Deshalb müssen hier keine Einstellungen mehr gemacht werden.

=== Extensions ===

==== RealURL ====

One problem is that RealURL might not be able to understand a page title if it is in unusual (i.e. not Roman) characters. For example, with a page title in Japanese, I found that the title was not interpreted and the page was rendered as jp.html. Using the Navigation title solves this problem (to follow on the example, setting "home" as the Navigation title, my page was then rendered as jp/home.html).

==== TemplaVoila ====

Templates müssen im UTF-8 Format gespeichert werden. Möglicherweise muß neu gemappt werden.

=== Weitere Hinweise ===

==== Extensions sollten nicht strlen() benutzen====
Stattdessen sollte die Funktion t3lib_cs benutzt werden.

strlen() doesn't care for UTF-8. UTF-8 uses 1 to 3 Bytes for one char, so using strlen() will likely lead to wrong results. Extensions should instead use the functions provided in t3lib_cs.

==== Sortierung ====
It is highly recommended (although not strictly necessary) to use UTF-8 in the database. Otherwise database sorting functions will not work correctly.
[edit] Problem with indeces

==== Fehlermeldung Specified key was too long bei indizes====

SQL=Specified key was too long; max key length is 1000 bytes:

This particular problem might occur when you are using UTF-8 encoding. UTF-8 uses up to 3 bytes per character, and the maximum index length is 1000 bytes, so the effective maximum index is 1000/3 = 333 characters. Some tables are longer than this, hence the error (many other packages are being bitten by this issue too).

To solve this, simply remove the index from that field and reload.

Note: Using indeces that big anyway is not recommended and shows bad DB design.
[edit] Convert an already existing database to UTF-8

=== Konvertierung einer bestehenden Datenbank ===
Some links to the conversion topic:

* http://dev.mysql.com/doc/refman/4.1/en/charset-convert.html (MySQL based conversion)
* http://www.typo3-media.com/blog/article/utf8-and-typo3-updated.html
* http://m.tacker.org/blog/64.script-to-convert-wordpress-content-encoding.html (useful PHP script to convert charsets)

[edit] Possibility 1
Note This has been tested and works!

Jigal van Hemert wrote a script, which can convert your database to utf-8. He offers it for download here: [[http://www.xs4all.nl/~dcbjht/typo3/db_utf8_fix.zip]] . This script converts all columns, tables and finally the setting for the whole database to utf-8.

Jigal writes:

Read the following very carefully, because you have to make a few adjustments depending on the situation!

* Make a backup of your database before you do such a conversion.

* The script was meant for the situation where utf-8 encoded data was stored in latin-1 (or other charsets) tables. This was very common in 2008. You can recognize this by looking in PHPmyAdmin and you find that characters with accents (diacriticals) are shown as weird double-character combinations:
Instead of "Ali Gökgöz and Gültekin Tarcan" it shows as "Ali GÃ¶kgÃ¶z and GÃ¼ltekin Tarcan".
If this is *not* the case in your situation, turn lines 97 - 107 into comments by putting // in front of them.

* In line 19 of the script it says define("SIMULATE", TRUE); This makes sure that the tables are not really converted, it's just a practice run; a simulation. After you executed the script at least once and there are no errors you can turn this into define("SIMULATE", FALSE); to do the conversion for real.

* Put the script in a subdirectory of the TYPO3 installation, for example inside 'fileadmin'. It is designed to run from a subdirectory so it can pick up the database connection data from localconf.php.

* Run the script from your browser: http://domain.ext/fileadmin/db_utf8_fix.php It shows each table it found and after the name of a table a dot for each column it has converted.

* It really doesn't matter if there are columns/tables already in utf-8 format.

Settings in TYPO3

Furthermore, if you use the following settings in the Install Tool you should have a UTF-8 installation:

$TYPO3_CONF_VARS['SYS']['setDBinit'] = 'SET NAMES utf8;';
$TYPO3_CONF_VARS['BE']['forceCharset'] = 'utf-8';

Possibility 2

Dump your database, modifiy the dumped file and import it again.
Note If you do it that way, setting ['BE']['forceCharset'] might cause broken special chars inside TYPO3. See below for more information.

Requirements:

* Shell access to your unix based server
* "Sed" package installed on the server

For this example we assume:

* hostname: domain.com
* database: typo3

This example is for linux users. If your PC uses Windows, you can do the same using putty.exe. Enter the hostname in the field "Host Name (or IP adress)" and click on "Open". Then enter your ssh username, press enter and enter the password (which will not be displayed) and press enter. Then you are connected to the server.

Linux users connect to the server via ssh typing

ssh -l (user) domain.com

Create a backup of the database (for security reasons if things go wrong...)

mysqldump -u (user) -p(pass) --max_allowed_packet=10000000 typo3 > typo3_backup.sql

Dump database (without table typo3.sys_refindex. This prevents the following error: SQL=Specified key was too long; max key length is 1000 bytes. You have to rebuild the reference index afterwards!)

mysqldump -u (user) -p(pass) --max_allowed_packet=10000000 --ignore-table=typo3.sys_refindex typo3 > typo3_utf8.sql

Now modifiy the dump: Newer versions of MySQL (at least 5.0) also save the collation for each column seperately. You have to convert all of them:

First convert all occurences of "DEFAULT CHARSET=latin1 COLLATE=latin1_german1_ci" (use the character set which you have written in your file) in typo3_utf8.sql to "DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci":

sed -e 's/DEFAULT CHARSET=latin1 COLLATE=latin1_german1_ci/DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci/g' -i typo3_utf8.sql

Then convert all occurences of "COLLATE latin1_german1_ci" (use the charset you have written in your file) to "COLLATE utf8_general_ci".

sed -e 's/COLLATE latin1_german1_ci/COLLATE utf8_general_ci/g' -i typo3_utf8.sql

Import database

mysql -u (user) -p(pass) --default-character-set=utf8 typo3 < typo3_utf8.sql

Alter character set and collation for the whole database

mysql -u (user) -p(pass) -e "ALTER DATABASE typo3 DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci"

[edit] Settings in TYPO3

Furthermore, if you use the following settings in the Install Tool you should have a UTF-8 installation:

$TYPO3_CONF_VARS['SYS']['setDBinit'] = 'SET NAMES utf8;';
$TYPO3_CONF_VARS['BE']['forceCharset'] = 'utf-8';

[edit] Broken special chars?

If the result of the above mentioned is that special chars are displayed incorrectly in TYPO3 (a small black box with a question mark in it instead of the special char), the following might help:

Create a new database. Make sure that it uses utf8 as default charset and utf8_general_ci as collation:

mysql -user (user) -password(password) -e "ALTER DATABASE (new-db) DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;"

Then import the dump into that database without using sed to replace the occurences of latin1 (or what you have) with utf8.

The result will be that the tables and columns in your database still use latin1 (or what you had before).

This might be a problem, e.g. when you now add new tables to this database, they will use utf8 as charset, because the database is set to utf8. This will lead to a mix of both charsets in your DB.
[edit] Possibility 3

This might be the way to go for german speaking users with a Unix server:

A way similar to possibility 2 is recommended by t3n (german).

Basically they make the dump and replace the charset and collation statements.

Then they use iconv on the dumped file to convert the signs inside:

iconv -f iso-8859-1 -t utf8 dump.sql > dump-iconv.sql

After that they import the file using the switch --default-character-set=utf8:

mysql -u USER -p PASSWORT -h HOST --default-character-set=utf8 DB < dump-iconv.sql

Note If you did that and get umlauts displayed correctly, but ß and € displayed wrong inside TYPO3, you should use CP1252 in the iconv command as origin charset like that:

iconv -f CP1252 -t utf8 dump.sql > dump-iconv.sql

=== Filesystem ===

When setting [BE][forceCharset] all files in the TYPO3 root folder and below are handled as UTF-8 files by TYPO3; so you should make sure that they really are. You should e.g. check your HTML-Templates and CSS files for special chars like umlauts. If they are displayed incorrectly, you should fix that by saving the file in UTF-8 format.

When editing such files only use editors which can save files in UTF-8 format. That is any editor on Linux and e.g. Notepad++ if you use Windows.

Attention: Do not save the files in UTF-8 format with Byte Order Mark (BOM). Saving them as UTF-8 with BOM can cause problems, e.g. thumbnails in the BE will no longer be shown. Save the files in ANSI format (as UTF-8 without BOM) instead.
[edit] t3lib_cs

Developers: Use these functions e.g. to get the length of a string. strlen doesn't get the correct string-length, because the chars of UTF-8 can have 1...3 Bytes.

In PHP 5.3 PECL/intl will be available, so maybe the TYPO3 Core-Developers switch to this.
[edit] Use unicode fonts

If you use Gifbuilder to create some lines of text (e.g. in a menu) make sure that the font file you use is unicode. More info here.

If there still are problems with broken special chars in these images, you should make sure that the configuration for mb_string or iconv (the one which you set in the Install Tool) is set to UTF-8. You can check that in phpinfo() and correct the settings in php.ini or .htaccess, if needed.
[edit] HTML Tidy

If you are having problems with html entities like   shown as ? in the browser, add the -utf8 option to the HTML tidy_path variable in the install tool, e.g.

$TYPO3_CONF_VARS['FE']['tidy_path'] = 'tidy -i --quiet true --tidy-mark true -wrap 0 -raw --output-xhtml true -utf8'

==== External links ====

* http://dev.mysql.com/doc/refman/5.0/en/charset.html
* http://en.opensuse.org/SDB%3AConverting_Files_or_File_Names_to_UTF-8_Encoding
* How to change the encoding like iso-8859-1, iso-8859-15, utf-8 of files: http://linuxwiki.de/tcs (just in german in the moment)
== Manuelles Suchen ersetzen ==
Manche Datenbanken sind so verfahren, das man am einfachsten ein Suchen ersetzen durchführt. Die Zeichen hat man schnell erkannt. Beispiele:
<pre>
Konvertierung utf...

Ã¼ = ü
Ã¶ = ö
ÃŸ = ß
Ã¤ = ä
â€¦ =
Â = -
Ãœ = Ü
â€“ = -
â†’ = →

</pre>

Typo3 - Update

2017-11-23T15:36:43Z

37.49.32.84: /* Update auf 7 */

== Links ==
http://wiki.typo3.org/Upgrade
== Aufräumen vor dem Update ==
http://typo3blogger.de/turchen-2-tutorial-typo3-entrumpeln/

=== Files ===
* kb_cleanfiles.
* Modul unter „DB-Überprüfung“ -> „Database Relations“. Neben dem Listing „Dateien, die in keinem Eintrag verwendet werden (bitte löschen!):“, welches der inhaltlichen Ausgabe der Extension sehr ähnelt, wird hier auch angezeigt ob Dateien doppelt referenziert werden
* typo3temp über install tool
=== Datenbank ===
* kj_recycler für papierkorb Daten danach refefence Index updaten
* cache_ Tabellen leeren
* sys_histroy leeren

Zur Not alles löschbar...

<pre>
[PHP]TRUNCATE TABLE sys_log //e.g. alle älter als 14 Tage
TRUNCATE TABLE sys_history //e.g. alle änderungen älter als 30 Tage

TRUNCATE TABLE index_fulltext
TRUNCATE TABLE index_grlist
TRUNCATE TABLE index_phash
TRUNCATE TABLE index_rel
TRUNCATE TABLE index_section
TRUNCATE TABLE index_stat_search
TRUNCATE TABLE index_stat_word
TRUNCATE TABLE index_words

TRUNCATE TABLE cache_pages
TRUNCATE TABLE cache_hash
TRUNCATE TABLE cache_imagesizes
TRUNCATE TABLE cache_pagesection
TRUNCATE TABLE cache_treelist
TRUNCATE TABLE cache_typo3temp_log
TRUNCATE TABLE cache_extensions

TRUNCATE TABLE tx_realurl_errorlog

TRUNCATE TABLE be_sessions
TRUNCATE TABLE fe_sessions
TRUNCATE TABLE fe_session_data[/PHP]

</pre>

== PHP Update 5.5 2017 - Kurzanleitung ==
Kurzanleitung Update auf PHP 5.5 für TYPO3 4.5.x
<pre>
Wichtig
htaccess aktualisieren
Source aktualisieren
Umstellung utf8
- DB Export
- Textmate in utf-8 speichern
- Ersetzen von CHARSET=latin1 durch CHARSET=utf8
- Ersetzen der COLLATE
</pre>

localconf.php

== Update auf 7 ==

https://jweiland.net/video-anleitungen/typo3/typo3-projekte-verwalten/typo3-7-lts-migration-von-css-styled-content-nach-fluid-styled-content.html
* css_styled_content wird durch fluid_styled_content ersetzt
* FSC bringt eigene CSS-Klassen für das Frontend mit. Anpassungen im CSS einer Website sind notwendig.
* Die Funktion "Rahmen und Einrückungen (section_frames)" gibt es nicht mehr. Hier muss bei Bedarf auf das "Layout"-Feld ausgewichen werden.
* Überschriften lassen sich nicht mehr direkt zentrieren oder rechts ausrichten.
* Die Bildeffekte (Drehung, Graustufen etc.) gibt es auch nicht mehr.

=== Fluid Styled Content ersetzt CSS Styled Content ===
[[TYPO3 - fluid_styled_content]]

=== htaccess für all-inkl TYPO3 v7===
So machts der Auto Installer:
<pre>
php_value always_populate_raw_post_data -1
php_value memory_limit 256M
php_value max_execution_time 240
<FilesMatch "\.(php.*|phtml)\.">
RewriteEngine on
RewriteRule .* - [R=403,L]
</FilesMatch>
#####
#
# Example .htaccess file for TYPO3 CMS - for use with Apache Webserver
#
# This file includes settings for the following configuration options:
#
# - Compression
# - Caching
# - MIME types
# - Cross Origin requests
# - Rewriting and Access
# - Miscellaneous
# - PHP optimisation
#
# If you want to use it, you have to copy it to the root folder of your TYPO3 installation (if its
# not there already) and rename it to '.htaccess'. To make .htaccess files work, you might need to
# adjust the 'AllowOverride' directive in your Apache configuration file.
#
# IMPORTANT: You may need to change this file depending on your TYPO3 installation!
# Consider adding this file's content to your webserver's configuration directly for speed improvement
#
# Lots of the options are taken from https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
#
####

### Begin: Compression ###

# Compressing resource files will save bandwidth and so improve loading speed especially for users
# with slower internet connections. TYPO3 can compress the .js and .css files for you.
# *) Uncomment the following lines and
# *) Set $GLOBALS['TYPO3_CONF_VARS']['BE']['compressionLevel'] = 9 for the Backend
# *) Set $GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 9 together with the TypoScript properties
# config.compressJs and config.compressCss for GZIP compression of Frontend JS and CSS files.

#<FilesMatch "\.js\.gzip$">
# AddType "text/javascript" .gzip
#</FilesMatch>
#<FilesMatch "\.css\.gzip$">
# AddType "text/css" .gzip
#</FilesMatch>
#AddEncoding gzip .gzip

<IfModule mod_deflate.c>
# Force compression for mangled `Accept-Encoding` request headers
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>

# Compress all output labeled with one of the following media types.
#
# (!) For Apache versions below version 2.3.7 you don't need to
# enable `mod_filter` and can remove the `<IfModule mod_filter.c>`
# and `</IfModule>` lines as `AddOutputFilterByType` is still in
# the core directives.
#
# https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype

<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/ld+json \
application/manifest+json \
application/rdf+xml \
application/rss+xml \
application/schema+json \
application/vnd.geo+json \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-javascript \
application/x-web-app-manifest+json \
application/xhtml+xml \
application/xml \
font/eot \
font/opentype \
image/bmp \
image/svg+xml \
image/vnd.microsoft.icon \
image/x-icon \
text/cache-manifest \
text/css \
text/html \
text/javascript \
text/plain \
text/vcard \
text/vnd.rim.location.xloc \
text/vtt \
text/x-component \
text/x-cross-domain-policy \
text/xml
</IfModule>

<IfModule mod_mime.c>
AddEncoding gzip svgz
</IfModule>
</IfModule>

### End: Compression ###

### Begin: Browser caching of resource files ###

# This affects Frontend and Backend and increases performance.
<IfModule mod_expires.c>

ExpiresActive on
ExpiresDefault "access plus 1 month"

ExpiresByType text/css "access plus 1 year"

ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/schema+json "access plus 0 seconds"
ExpiresByType application/vnd.geo+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"

ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"

ExpiresByType text/x-component "access plus 1 month"

ExpiresByType text/html "access plus 0 seconds"

ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"

ExpiresByType application/manifest+json "access plus 1 week"
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"

ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rdf+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"

ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/eot "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"

ExpiresByType text/x-cross-domain-policy "access plus 1 week"

</IfModule>

### End: Browser caching of resource files ###

### Begin: MIME types ###

# Proper MIME types for all files
<IfModule mod_mime.c>

# Data interchange
AddType application/atom+xml atom
AddType application/json json map topojson
AddType application/ld+json jsonld
AddType application/rss+xml rss
AddType application/vnd.geo+json geojson
AddType application/xml rdf xml

# JavaScript
AddType application/javascript js

# Manifest files
AddType application/manifest+json webmanifest
AddType application/x-web-app-manifest+json webapp
AddType text/cache-manifest appcache

# Media files

AddType audio/mp4 f4a f4b m4a
AddType audio/ogg oga ogg opus
AddType image/bmp bmp
AddType image/svg+xml svg svgz
AddType image/webp webp
AddType video/mp4 f4v f4p m4v mp4
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
AddType image/x-icon cur ico

# Web fonts
AddType application/font-woff woff
AddType application/font-woff2 woff2
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Other
AddType application/octet-stream safariextz
AddType application/x-bb-appworld bbaw
AddType application/x-chrome-extension crx
AddType application/x-opera-extension oex
AddType application/x-xpinstall xpi
AddType text/vcard vcard vcf
AddType text/vnd.rim.location.xloc xloc
AddType text/vtt vtt
AddType text/x-component htc

</IfModule>

# UTF-8 encoding
AddDefaultCharset utf-8
<IfModule mod_mime.c>
AddCharset utf-8 .atom .css .js .json .manifest .rdf .rss .vtt .webapp .webmanifest .xml
</IfModule>

### End: MIME types ###

### Begin: Cross Origin ###

# Send the CORS header for images when browsers request it.
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
<FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>

# Allow cross-origin access to web fonts.
<IfModule mod_headers.c>
<FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

### End: Cross Origin ###

### Begin: Rewriting and Access ###

# You need rewriting, if you use a URL-Rewriting extension (RealURL, CoolUri).

<IfModule mod_rewrite.c>

# Enable URL rewriting
RewriteEngine On

# Store the current location in an environment variable CWD to use
# mod_rewrite in .htaccess files without knowing the RewriteBase
RewriteCond $0#%{REQUEST_URI} ([^#]*)#(.*)\1$
RewriteRule ^.*$ - [E=CWD:%2]

# Rules to set ApplicationContext based on hostname
#RewriteCond %{HTTP_HOST} ^dev\.example\.com$
#RewriteRule .? - [E=TYPO3_CONTEXT:Development]
#RewriteCond %{HTTP_HOST} ^staging\.example\.com$
#RewriteRule .? - [E=TYPO3_CONTEXT:Production/Staging]
#RewriteCond %{HTTP_HOST} ^www\.example\.com$
#RewriteRule .? - [E=TYPO3_CONTEXT:Production]

# Rule for versioned static files, configured through:
# - $GLOBALS['TYPO3_CONF_VARS']['BE']['versionNumberInFilename']
# - $GLOBALS['TYPO3_CONF_VARS']['FE']['versionNumberInFilename']
# IMPORTANT: This rule has to be the very first RewriteCond in order to work!
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)\.(\d+)\.(php|js|css|png|jpg|gif|gzip)$ %{ENV:CWD}$1.$3 [L]

# Access block for folders
RewriteRule _(?:recycler|temp)_/ - [F]
RewriteRule fileadmin/templates/.*\.(?:txt|ts)$ - [F]
RewriteRule ^(?:vendor|typo3_src|typo3temp/logs) - [F]
RewriteRule (?:typo3conf/ext|typo3/sysext|typo3/ext)/[^/]+/(?:Configuration|Resources/Private|Tests?|Documentation|docs?)/ - [F]

# Block access to all hidden files and directories with the exception of
# the visible content from within the `/.well-known/` hidden directory (RFC 5785).
RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC]
RewriteCond %{SCRIPT_FILENAME} -d [OR]
RewriteCond %{SCRIPT_FILENAME} -f
RewriteRule (?:^|/)\. - [F]

# Stop rewrite processing, if we are in the typo3/ directory or any other known directory
# NOTE: Add your additional local storages here
RewriteRule ^(?:typo3/|fileadmin/|typo3conf/|typo3temp/|uploads/|favicon\.ico) - [L]

# If the file/symlink/directory does not exist => Redirect to index.php.
# For httpd.conf, you need to prefix each '%{REQUEST_FILENAME}' with '%{DOCUMENT_ROOT}'.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ %{ENV:CWD}index.php [QSA,L]

</IfModule>

# Access block for files
<FilesMatch "(?i:^\.|^#.*#|^(?:ChangeLog|ToDo|Readme|License)(?:\.md|\.txt)?|^composer\.(?:json|lock)|^ext_conf_template\.txt|^ext_typoscript_constants\.txt|^ext_typoscript_setup\.txt|flexform[^.]*\.xml|locallang[^.]*\.(?:xml|xlf)|\.(?:bak|co?nf|cfg|ya?ml|ts|dist|fla|in[ci]|log|sh|sql(?:\..*)?|sw[op]|git.*)|.*(?:~|rc))$">
# Apache < 2.3
<IfModule !mod_authz_core.c>
Order allow,deny
Deny from all
Satisfy All
</IfModule>

# Apache ≥ 2.3
<IfModule mod_authz_core.c>
Require all denied
</IfModule>
</FilesMatch>

# Block access to vcs directories
<IfModule mod_alias.c>
RedirectMatch 404 /\.(?:git|svn|hg)/
</IfModule>

### End: Rewriting and Access ###

### Begin: Miscellaneous ###

# 404 error prevention for non-existing redirected folders
Options -MultiViews

# Make sure that directory listings are disabled.
<IfModule mod_autoindex.c>
Options -Indexes
</IfModule>

<IfModule mod_headers.c>
# Force IE to render pages in the highest available mode
Header set X-UA-Compatible "IE=edge"
<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svgz?|ttf|vcf|webapp|webm|webp|woff2?|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>

# Reducing MIME type security risks
Header set X-Content-Type-Options "nosniff"
</IfModule>

# ETag removal
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None

### End: Miscellaneous ###

# Add your own rules here.

</pre>

== Update auf 6.2 ==
=== Probleme mit dem index ===
https://forge.typo3.org/issues/61154

'''Fehlermeldung''' "Migrate all file links of RTE-enabled fields to FAL" fails with "Reference index was probably out of date."

Description

Meanwhile I did upgrades from TYPO3 4.7 to 6.2 for three different instances and every time I ran into this problem.
Reason are links in content elements of hidden or (from database point of view: logical) deleted pages where the target (usually the file in fileadmin) does not exist anymore.

cli_dispatch.phpsh lowlevel_refindex -c

does not detect these broken links. So this is a deadlock during migration.

I found this workaround which requires using a SQL client for the mysql database:
1) '''check''' if the result of this query matches the list of "Reference index was probably out of date" elements

select * from sys_refindex where softref_key = 'typolink_tag' AND ref_table = '_FILE';

2) If so you can '''update''' these records:

update sys_refindex set softref_key = 'typolink' where softref_key = 'typolink_tag' AND ref_table = '_FILE';

== Update 4.5 , 4.7 ==
=== Umlautprobleme ===
evtl. auch mal bei dbinit
<pre>
SET character_set_client = utf8;
SET character_set_results = utf8;
SET character_set_connection = utf8;
</pre>

Manchmal auch bei Darstellungsproblemen oder weißer Seite

Install-Tool nach dem Parameter "
systemLocale -> de_DE.utf8
'''Bis TYPO3 4.6''': im Install-Tool den Parameter
forceCharset -> utf-8
'''Ab TYPO3 4.7''': im '''Typoscript-Setup'''
config.renderCharset = utf-8
Im '''Install-Tool''' bei "
setDBinit -> SET NAMES utf8;
eintragen (ist ab TYPO3 4.7 bereits als Standard eingetragen).

Nun den kompletten Cache leeren. Jetzt sollten die Umlaute korrekt dargestellt werden.
</pre>
Falls Sie per GIFBUILDER Text in Bilder einbauen, versuchen Sie folgendes:
<pre>
Im Install-Tool beim Parameter "t3lib_cs_convMethod" den Wert "mbstring" eintragen.
Im Install-Tool beim Parameter "t3lib_cs_utils" ebenfalls " mbstring" eintragen.
</pre>
Falls Sie Templavoila verwenden, müssen Sie darauf achten, dass Ihr HTML-Editor die Datei UTF-8-kodiert speichert. In den meisten Editoren können Sie das in den Einstellungen anpassen.

Wenn immer noch Darstellungsprobleme auftreten, kann unter Umständen eine Konvertierung der Datenbank nötig sein.

== Update Infos 4.5 ==
* Weitere Tools werden separat installiert
* utf-8 für Datenbankverbindung wird vorausgesetzt (siehe auch Typo3 auf utf-8 umstellen)
** Install-Tool $TYPO3_CONF_VARS['SYS']['setDBinit'] und $TYPO3_CONF_VARS['BE']['forceCharset'] default haben sich verändert.

* Zugriff auf veraltete php-Funktionen werden geloggt. Vorsichtig Log kann groß werden
* Extbase und Fluid

== Update Infos 4.3 ==
* simulate_static_docs muss separat installiert werden
=== Update Wizard Info ===
'''CSS Styled Content: Default targets for non-frame pages'''

The default page target is empty (so no target is generated). If you use frames, you have to set target to "page" in Constants.

'''CSS Styled Content: htmlspecialchars in menu content elements'''

Page titles will get htmlspecialchar'ed when rendered in "Sitemap/menu" content elements, to avoid generating invalid XHTML.

'''htmlArea RTE: Using CSS classes for indentation and alignment'''

* Indentation is produced by a CSS class instead of the blockquote element.
You will need to specify in Page TSConfig the class to be used for indentation using property buttons.indent.useClass (default is "indent"). You will need to define this class in your stylesheets and ensure that it is allowed by the RTE transformation (RTE.default.proc). Alternatively, you may continue using the blockquote element by setting property buttons.indent.useBlockquote. You may also want to add the new blockquote button to the RTE toolbar.

* Text alignment is produced by CSS classes instead of deprecated align attribute.
You will need to specify in Page TSConfig the class to be used for each text alignment button using property buttons.[left, center, right or justifyfull].useClass (defaults are "align-left", "align-center", "align-right", "align-justify"). You will need to define these classes in your stylesheets, and ensure that they are allowed by the RTE transformation (RTE.default.proc). Alternatively, you may continue using deprecated align attribute by setting property buttons.[left, center, right or justifyfull].useAlignAttribute.

== Update alter Typo3 Installationen (<V.3.8)==
Aus der Mailing Liste Östereich:
- der Core ist relativ easy (fast) immer zu upgraden (muesst' eigentlich von
v3.3 auch gehen ;-) )
- Achte immer auf installierte Extensions
* wenn etwas nicht geht, mal soweit wie moeglich alle Extensions wegschalten (nicht loeschen!).
* dann zuschalten; wenns dann hakt, dann sieht man gleich welche ext "boese" ist.
* dann diese ext updaten, wenns keine updates gibt, mal danach googlen.
* wenns dann net geht, debuggen..

Weitere Probleme:

Alte TS Templates arbeiten noch mit CSet und Content als default Template. Nach umstellen auf css-styled-content muß evt. einiges angepasst werden:
== Update auf 4.2 ==
<pre>
Backup erstellen (sollte selbstverständlich sein)!
Notieren welche Extensions "Global" installiert wurden, da diese später wieder erneut installiert werden müssen
Resource herunterladen:
wget kent.dl.sourceforge.net/sourceforge/typo3/typo3_src-4.2.8.tar.gz
Source-Paket entpacken:
tar -xzf typo3_src-4.2.8.tar.gz
Im Verzeichnis typo3conf müssen Sie eine Datei mit dem Namen "ENALBE_INSTALL_TOOL" erstellen bzw. uploaden (ich mache das immer mit vi ENABLE_INSTALL_TOOL )
eventuell die Rechte und die Gruppe ändern
eventuell basedir_restriction anpassen (für Plesk siehe hier)
typo3_src Symlink löschen:
rm typo3_src
neuen Symlink anlegen:
ln -s ../../typo3_src-4.2.8/ typo3_src
(den richtigen Pfad zum Source-Verzeichnis eventuell anpassen)
index.php löschen und neu erstellen:
rm index.php
ln -s typo3_src/index.php index.php
alte Verzeichnisse löschen (media, tslib)
alte Dateien löschen (showpic.php)
fehlende Verzeichnisse erstellen:
typo3conf/l10n, typo3temp/temp, typo3temp/GB, typo3temp/pics, typo3temp/llxml/, typo3temp/cs/ (sofern diese nicht schon vorhanden sind)
Installtool aufrufen und "Basic Configuration" überprüfen; hier sollte alles im grünen Bereich sein. Wenn nicht entsprechende Probleme beheben.
"Update Wizard" ausführen
Im "Database Analyser" auf "Update required tables" auf "Compare" klicken und bestätigen
Ins Backend einloggen und alle "Global" installierten Extensions nachinstallieren
Im Ext Manager unter Settings "Enable unsupported extensions" aktivieren, da zur Zeit noch nicht alle Exentensions überprüft wurden.
Im Ext Manager unter "Import extensions" auf "Retrieve/Update" klicken, um die aktuelle Liste der Extensions herunterzuladen
(Sollte es dabei zu Fehlermeldungen kommen, muss u.U. auf curl umgestellt werden) Leider ist das neue TER 2.0 extrem speicherhungrig, so dass u.U. die Speicherbeschränkung von PHP nicht ausreicht. Wenn möglich sollten Sie also zuvor den verfügbaren Speicher von PHP auf min. 45MB(!) hochsetzen. Sollten Sie dazu keine Rechte haben oder soviel Speicher nicht zur Verfügung stellen wollen, können Sie sich dadurch behelfen, dass Sie die benötigten Extensions als .t3x-Dateien herunterladen und "von Hand" installieren.
Im Ext Manager die Sprache updaten
Eventuell veraltete local-installierte Extensions erneuern (z.B. TemplaVoila, static_info_tables u.ä.)
Nicht mehr benötigte "Local"-installierte Extensions entfernen, wie z.B. csh_de, htmlarea (ist jetzt eine "System"-Extension und sollte daher local deinstalliert werden)
</pre>
== Update auf 4.1 ==
Unbedingt im Install Tool Compare ausführen und Tabellen aktualisieren. Sonst kann es Probleme mit verschiedenen Extensions geben (z.B. Login..)

== Probleme beim TYPO3 Update lösen ==
=== Weiße Seite ===
* Fehlermeldungen einschalten
=== The requested URL /typo3/alt_main.php was not found on this server.===
Symlink für index.php falsch
=== Nach dem Datenbank Compare fehlen Teile der TYPOScript Templates ===

'''Lösung'''

Von Version 4.2 auf 4.1 werden blob Felder zu Text Feldern umgewandelt. Dabei werden bei Umlauten die Inhalte abgeschnitten, wenn die Datenbank utf-8 arbeitet, TYPO3 aber die Daten in latin abgelegt hat.

Beim Compare muß man dann die blob konvertierungen weglassen (vor allem bei den Templates - in der Regel gibt es da Kommentare mit Umlauten) und leicht abgewandelt selbst durchführen:

ALTER TABLE sys_template CHANGE config config TEXT CHARACTER SET latin1;

Typo3 läßt hier die Angabe welcher Zeichensatz drin ist weg.

Die wichtigsten Statements (Stand Typo3 4.5):

<pre>
ALTER TABLE sys_template CHANGE constants constants text CHARACTER SET latin1;
ALTER TABLE sys_template CHANGE config config text CHARACTER SET latin1;
ALTER TABLE tt_content CHANGE image image text CHARACTER SET latin1;
ALTER TABLE tt_content CHANGE media media text CHARACTER SET latin1;
ALTER TABLE tt_content CHANGE pages pages tinytext CHARACTER SET latin1;
ALTER TABLE tt_content CHANGE multimedia multimedia tinytext CHARACTER SET latin1;
ALTER TABLE pages CHANGE media media text CHARACTER SET latin1;
</pre>

Link: http://dev.mysql.com/doc/refman/5.1/en/alter-table.html (Zugriff: 10/2012)

== Release Notes Version 4.1 ==
Die wichtigsten Neuerungen
* IRRE (Inline Relational Record Editing)
* AJAX Page and File Tree
* Clean-up functions (command line scripts)(Über Extension lowlevel)
* Improved Extension Manager (less memory, stored extension list)
* UTF-8 for filenames
* Backend "Who is online"
* Frontend "Stay logged in" (Konfiguration mit new login box)
* MySQL InnoDB (Wird automatisch bei Neuinstallation zur Verfügung gestellt, wenn es in mySQL aktiviert ist)
* Speed up Backend with .htaccess http://typo3.org/development/articles/release-notes-41/page/4/)

=== Manuelles ändern der Tabellen auf InnoDB ===
Hinweis persönlich rate ich von INNODB und TYPO3 ab, besser ISAM nehmen
<pre>
alter table cache_hash ENGINE = INNODB;
alter table cache_imagesizes ENGINE = INNODB;
alter table cache_md5params ENGINE = INNODB;
alter table cache_pages ENGINE = INNODB;
alter table cache_pagesection ENGINE = INNODB;
alter table cache_typo3temp_log ENGINE = INNODB;
alter table fe_sessions ENGINE = INNODB;
alter table fe_session_data ENGINE = INNODB;
alter table index_fulltext ENGINE = INNODB;
alter table index_grlist ENGINE = INNODB;
alter table index_phash ENGINE = INNODB;
alter table index_rel ENGINE = INNODB;
alter table index_section ENGINE = INNODB;
alter table index_stat_search ENGINE = INNODB;
alter table index_stat_word ENGINE = INNODB;
alter table index_words ENGINE = INNODB;
alter table sys_log ENGINE = INNODB;
</pre>

== Generelle Informationen zum Update unter Linux ==
Quelle: typo3.net Mai 2006

Typo3 ist normalerweise sehr einfach upzudaten - allerdings müssen ein paar Dinge beachtet werden, um updatefähig zu bleiben:

* Es dürfen keine Änderungen an dem Typo3-Sourcecode gemacht worden sein. Falls dieses doch gemacht wurde, müssen natürlich diese Änderungen erst in die neue Version eingearbeitet werden.
* Installierte Extensions sollten möglichst immer LOCAL installiert worden sein. So bleiben diese nach dem Tausch des Typo3-Sourcecodes unberührt und funktionieren nach dem Update (meist) wie gewohnt. Es gibt nur selten den Fall, daß eine Typo3-Version eine Funktion nicht mehr verwendet, die es in der alten Version noch gab.
* Wenn sie HTML-Templates von GLOBAL installierten Erweiterungen direkt im Extensionordner modifiziert haben sollten, müssen diese erst z.B. in den fileadmin kopiert werden. Dann können Sie den Pfad zu dieser Datei im TypoScript anpassen.

Den Pfad finden Sie überigens mithilfe des TypoScript-Object-Browsers schnell. Meist ist er an der Stelle plugin.extensionname.templateFile zu finden.

[[Bild:T3_wichtigeVerzeichnisse.gif]]

Einige der wichtigsten Verzeichnisse

'''Das Update für mittwaldmedien Kunden'''
Für unsere Kunden ist es nun besonders einfach, die vorhandene Installation auf die aktuelle Version zu bringen. Sie müssen sich nur auf der Webseite http://www.typo3server.com einloggen. Nach dem Login finden Sie ein Menü mit einem Link zu dem Typo3-Versionsmanager. Dort können Sie mit einem Klick Ihren Account auf die neue Version updaten.

'''ToDo Versionsmanager für Geo-bit'''

'''Manuelles Update'''

Für diejenigen, die dieses Update manuell machen wollen oder müssen, sind die folgenden Schrittenötig. Die Beispiele - vor allem die Pfade - müssen natürlich angepasst werden. Die Beispiele gehen davon aus, daß Sie eine Verzeichnisstruktur angelegt haben, die dem obigen Bild entspricht.

1. Machen Sie zuerst eine Datensicherung von dem Typo3-Sourcen und Ihrem html-Ordner! Die Datenbank können Sie nun über diesen Befehl sichern:

mysqldump -u benutzername -p -B --add-drop-table datenbank > typo3DBSicherung.sql

Notfalls könnte auch ein Dump mit phpMyAdmin erstellt werden.

2. Verbinden Sie sich mit Ihrem Server über SSH.

3. Wechseln Sie das Verzeichnis auf einer Ebene über dem Rootverzeichnis Ihres Webservers.
z.B.: cd /home/www/p1234/

4. Laden Sie sich die neuen Typo3-Sourcen auf ihren Linuxrechner. Die aktuellen Sourcen finden Sie unter: http://typo3.org/download/packages/.

Die benötigte Datei hat das Format typo3_src-3.x.x.tar.gz

'''Beispiel:'''

wget belnet.dl.sourceforge.net/sourceforge/typo3/typo3_src-3.7.0.tar.gz

5. Entpacken Sie die Datei mit dem Kommando:

'''Beispiel:'''

tar -xzvf typo3_src-3.x.x.tar.gz

6. Ändern Sie nun die Rechte so, wie der bisherige Typo3-Sourcecode-Ordner sie hatte.

'''Beispiel:'''

chown p1234.ftponly typo3_src-3.7.0 -R

7. Entfernen Sie den alten symbolischen Link mit:

rm typo3_src

8. Legen Sie nun einen neuen Link an mit:

ln -s typo3_src-3.x.x typo3_src

(Die Versionsnummer müssen Sie natürlich noch anpassen.)

9. Nun muss die Datenbank noch aktualisiert werden:

Gehen Sie hierzu in das Typo3-Installtool und klicken Sie auf den 2. Menüpunkt Database Analyser. Mit einem Klick auf Compare werden die zu ändernden oder zu ergänzenden Datenbankfelder angezeigt. Mit einem Klick auf "Write to database" wird die Datenbank an die neue Typo3-Version angepasst.

10. Loggen Sie sich nun als Admin im Backend an und löschen Sie alle Caches.

== Neu in Version 4 ==
* Conditions mit AND und OR (|| &&)

== Neu in 4.2 ==
Viele Usability Verbesserungen im Backend
== Update auf 4.2 ==
=== Extensions Updaten ===
* dam 1.0.11 ist nicht kompatibel Update auf min. 1.0.13
* date2cal auf >= 7.1.0
* Kickstarter 0.3.8 ist nicht kompatibel
* Developer tools gehen nicht mehr (wg. Frame oben)

=== Ablauf ===
* Backend Benutzer sperren (only Admins)
* Sicherung der Datenbank
* neue Source + Symlink
* Update Wizard
* Compare

=== Probleme ===
'''DAM Upload geht für Benutzer''' nicht mehr (Fehler Meta Daten können nicht geschrieben werden)
Beim neu indizieren geht dem dam der Media Ordner verloren. Er legt dann einen neuen an, in den er scheiben möchte. Die Benutzer sind abe noch auf den alten eingestellt. D.h. die Benutzergruppen m´üssen auf den neuen eingestellt werden.

Im Dam stehen im IE7 die Benutzerwerkzeuge nicht zur verfügung (löschen etc.) nur der Stift ist noch da.

Lösung: Das Problem ist das CSS für das Fenster. Es verdeckt die restlichen Symbole
Forum: 24.7.

Ich hatte das gleiche Problem bis vor 5 Minuten auch,
gelöst habe ich es so:
- Datei: class.tx_dam_listbase.php im Ordner DAM\lib\
Unter der Zeile 256 ('itemTD' => ' class="typo3-dblist-item"',)
ist in 3 Werten als Breite 1% angegeben. Das auskommentieren

- Datei: stylesheet.cdd in typo3_src\typo3\
table.typo3-dblist width: 98%; durch width: auto; ersetzen und in
table.typo3-dblist tr td {width: auto;} einsetzen,

damit hats bei mir im IE 7, Firefox, safari für Win und Opera alles richtig angezeigt :-)

Ich hoffe, geholrfen zu haben,
Schmoozer

Bug in Mount Points

== Datenbank über Root Shell sichern (mysql backup) ==

mysqldump -opt ...

Beispiele

Die häufigste Anwendung von mysqldump ist wahrscheinlich die '''Erstellung eines Backups einer vollständigen Datenbank''':

shell> mysqldump --opt db_name > backup-file.sql

oder mit User und Passwortangabe:
mysqldump -u meinDBUser -pGEHEIM db_name > backup.sql

--opt ist in neueren MySQL Versionen Standardmäßig an deshalb lassen wir es mal weg.

Die Speicherauszugsdatei können Sie wie folgt '''wieder einspielen'''.

shell> mysql db_name < backup-file.sql

Oder aber so:

shell> mysql -e "source /path-to-backup/backup-file.sql" db_name

mysqldump ist ferner sehr nützlich zum Ausfüllen von Datenbanken durch Kopieren von Daten von einem MySQL Server auf einen anderen:

shell> mysqldump --opt db_name | mysql --host=remote_host -C db_name

Sie können mit einem einzigen Befehl einen Speicherauszug mehrerer Datenbanken erstellen:

shell> mysqldump --databases db_name1 [db_name2 ...] > my_databases.sql

Um einen Speicherauszug aller Datenbanken zu erstellen, verwenden Sie die Option --all-databases:

shell> mysqldump --all-databases > all_databases.sql

Bei InnoDB-Tabellen bietet mysqldump die Möglichkeit, eine Online-Sicherung zu erstellen:

shell> mysqldump --all-databases --single-transaction > all_databases.sql

Diese Datensicherung muss vor Beginn des Speicherauszugsvorgangs lediglich (mit FLUSH TABLES WITH READ LOCK) eine globale Lesesperre für alle Tabellen erwirken. Sobald diese Sperre aktiv ist, werden die Koordinaten des Binärlogs ausgelesen, und die Sperre wird aufgehoben. Wenn beim Absetzen der FLUSH-Anweisung gerade eine umfangreiche Änderungsanweisung ausgeführt wird, dann – und nur dann! – kann der MySQL Server stehen bleiben, bis diese lange Anweisung ausgeführt ist; danach ist der Server sperrfrei. Wenn die vom MySQL Server empfangenen Änderungsanweisungen (in Bezug auf ihre Ausführungsdauer) kurz sind, sollte die anfängliche Sperrperiode auch bei vielen Änderungen nicht spürbar sein.

Bei der Point-in-Time-Wiederherstellung (die auch als „Roll-Forward“ bezeichnet wird, wenn Sie ein altes Backup wiederherstellen und die seitdem durchgeführten Änderungen neu aufspielen müssen) ist es häufig nützlich, das Binärlog zu rotieren (siehe Abschnitt 5.12.3, „Die binäre Update-Logdatei“) oder zumindest die Binärlogkoordinaten zu kennen, denen der Speicherauszug entspricht:

shell> mysqldump --all-databases --master-data=2 > all_databases.sql

Oder:

shell> mysqldump --all-databases --flush-logs --master-data=2
> all_databases.sql

== Mass Update Script ==

Yesterday some updates came out for TYPO3. These updates fixed certain issues and we needed to update all of our excellent shared hosting environments.

We already have a script (which is more elaborate now) that checks all our TYPO3 installations and sends the sysadmins a nice report about its findings. We use part of that report (list of paths to Document Roots) to feed the updater script.

The TYPO3 update requires you to do the followi

* update encryption key
* clear configuration cache
* clear page cache

We do not want to go into 200+ TYPO3 backends and do those tasks manually. We are lazy and we will write a script to automagically do the boring tasks for us.

This script is not perfect but it works well on Debian systems. You can modify it to fit your needs. It was just a quick hack to ease the upgrade pain. Take care to switch the symlink part for upgrade runs of different versions of TYPO3.

I am not responsible for any damage to your system that may occur to misuse of this script. Make sure you understand it before you run it. Run it with a single URI before attempting a whole ist of URI's.

Ein Massen Update Script von:

http://typofree.org/article/archive/2009/january/title/typo3-mass-upgrade-script/
Zugriff am 12.3.2009

http://typofree.org/article/archive/2009/january/title/typo3-mass-upgrade-script/

TYPO3 mass update script

1.
#!/bin/sh
2.
binDir=/usr/bin/
3.
sleep=2
4.

5.
pageCacheTables=(
6.
cache_pages
7.
cache_pagesection
8.
)
9.

10.
sites=(
11.
/var/www/sites/live/www.somedomain.tld
12.
/var/www/sites/live/www.someotherdomain.tld
13.
/var/www/sites/live/www.yetsomeotherdomain.tld
14.
)
15.

16.
len=${#sites[*]}
17.
pageCacheTablesLength=${#pageCacheTables[*]}
18.
i=0
19.
while [ $i -lt $len ]; do
20.
echo updating: ${sites[$i]}
21.
cd ${sites[$i]}
22.
rm typo3_src
23.
ln -s ../../sources/typo3_src-4.2.5 typo3_src
24.

25.
echo generating new key
26.
k=0
27.
key=''
28.
while [ $k -lt 96 ]; do
29.
key=$key$(head -100 /dev/urandom | md5sum | cut -c1)
30.
let k++
31.
done
32.
echo key: $key
33.
sed -i "s/$\$TYPO3_CONF_VARS\['SYS']\['encryptionKey'] = $.*/\1'$key';/g" typo3conf/localconf.php
34.

35.
echo removing configuration cache
36.
rm -f typo3conf/temp_CACHED*
37.

38.
echo clearing page cache
39.
# For some insane reason some values are enclosed in double qotes
40.
database=$(grep "typo_db " typo3conf/localconf.php | tail -1 | sed "s/^[^']*'$[^']*$'.*/\1/" | grep '$typo_db =')
41.
if [ -z "$database" ] ; then
42.
database=$(grep "typo_db " typo3conf/localconf.php | tail -1 | sed "s/^[^']*'$[^']*$'.*/\1/")
43.
else
44.
database=$(grep "typo_db " typo3conf/localconf.php | tail -1 | sed "s/^[^\"]*\"$[^\"]*$\".*/\1/")
45.
fi
46.
username=$(grep "typo_db_username " typo3conf/localconf.php | tail -1 | sed "s/^[^']*'$[^']*$'.*/\1/" | grep '$typo_db_username =')
47.
if [ -z "$username" ] ; then
48.
username=$(grep "typo_db_username " typo3conf/localconf.php | tail -1 | sed "s/^[^']*'$[^']*$'.*/\1/")
49.
else
50.
username=$(grep "typo_db_username " typo3conf/localconf.php | tail -1 | sed "s/^[^\"]*\"$[^\"]*$\".*/\1/")
51.
fi
52.
password=$(grep "typo_db_password " typo3conf/localconf.php | tail -1 | sed "s/^[^']*'$[^']*$'.*/\1/" | grep '$typo_db_password =')
53.
if [ -z "$password" ] ; then
54.
password=$(grep "typo_db_password " typo3conf/localconf.php | tail -1 | sed "s/^[^']*'$[^']*$'.*/\1/")
55.
else
56.
password=$(grep "typo_db_password " typo3conf/localconf.php | tail -1 | sed "s/^[^\"]*\"$[^\"]*$\".*/\1/")
57.
fi
58.
j=0
59.
while [ $j -lt $pageCacheTablesLength ];
60.
do
61.
nice -n 19 ${binDir}mysql --batch -u$username -p"$password" -D$database -e "TRUNCATE ${pageCacheTables[$j]}"
62.
nice -n 19 ${binDir}mysql --batch -u$username -p"$password" -D$database -e "ALTER TABLE ${pageCacheTables[$j]} auto_increment=1"
63.
let j++
64.
done
65.

66.
echo "done! Sleeping $sleep seconds . . ."
67.
sleep $sleep
68.

69.
echo
70.
let i++
71.
done

TYPO3 - Powermail

2017-11-22T17:12:52Z

37.49.32.84: /* Snippets für 2.x */

Powermail Extension
== Snippets für 2.x ==
=== Dynamische Anrede ===

Mit folgendem TypoScript lässt sich in Powermail 2.x eine dynamische Anrede des Benutzers in E-Mails und Bestätigungsseite bewerkstelligen.

TypoScript:
<syntaxhighlight lang="typoscript">
lib.anrede = CASE
lib.anrede {
key.field = 0

default = TEXT
default.value = Sehr geehrte Damen und Herren,

Herr = TEXT
# Die "7" ist die ID des Powermail-Felds {name}
Herr.data = GP:tx_powermail_pi1|field|7
Herr.noTrimWrap = |Sehr geehrter Herr |,|

Frau = TEXT
Frau.data = GP:tx_powermail_pi1|field|7
Frau.noTrimWrap = |Sehr geehrte Frau |, |

# Englische Übersetzung:
Mr = TEXT
Mr.data = GP:tx_powermail_pi1|field|7
Mr.noTrimWrap = |Dear Mr |, |

Mrs = TEXT
Mrs.data = GP:tx_powermail_pi1|field|7
Mrs.noTrimWrap = |Dear Mrs |, |

Ms = TEXT
Ms.data = GP:tx_powermail_pi1|field|7
Ms.noTrimWrap = |Dear Ms |, |
}
</syntaxhighlight>
ViewHelper für Powermail-Plugin:

{f:cObject(typoscriptObjectPath:'lib.anrede',data:'{anrede}')}
Quelle: typo3.net - Forum

Ab Powermail 2.1.x werden Powermail-Felder nicht mehr über die UID, sondern den Markernamen angesprochen. Dementsprechend müssen die Zeilen im TypoScript etwas angepasst werden:

# Powermail-Feld {name}
Herr.data = GP:tx_powermail_pi1|field|name

=== E-Mail Empfänger abhängig von Feldwerten (powermail > 2 ===
http://typo3.3.n7.nabble.com/Powermail-2-Dynamischer-Empfanger-je-nach-Betreff-td269199.html

ich hatte das in einem Projekt so gelöst:
(läuft unter Typo3 6.1 und Powermail 2.0)

1) Betreff-Auswahl mit Select-Feld so wie du

2) Im Powermail-Plugin im Reiter "Empfänger" folgendes:

Name des Empfängers:{f:cObject(typoscriptObjectPath:'lib.receiver_name')}

E-Mail des Empfängers:

{f:cObject(typoscriptObjectPath:'lib.receiver_email')}

Betreff der Mail an den Empfänger:

{f:cObject(typoscriptObjectPath:'lib.subject')}

3)
Im TypoScript:
<pre>
lib.receiver_email = CASE
lib.receiver_email {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = [hidden email]
1 = TEXT
1.value = [hidden email]
2 = TEXT
2.value = [hidden email]
3 = TEXT
3.value = [hidden email]
}
lib.receiver_name = CASE
lib.receiver_name {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = Firma XY
1 = TEXT
1.value = Firma XY Allgemein
2 = TEXT
2.value = Firma XY Abteilung A
3 = TEXT
3.value = Firma XY Abteilung B
}
lib.subject = TEXT
lib.subject {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = Allgemeine Anfrage
1 = TEXT
1.value = Allgemeine Anfrage
2 = TEXT
2.value = Anfrage an Abteilung A
3 = TEXT
3.value = Anfrage an Abteilung B
}
</pre>
==== Korrektur für Powermail > 2.1 ====
ich habe jetzt - mit Hilfe des Powermail-Bug-Trackers - eine Lösung für
> 2.1 gefunden. Und zwar werden Felder nicht mehr nach deren ID,
sondern Feldnamen referenziert:

Im TypoScript der Seite:
<pre>
lib.receiver = CASE
lib.receiver {
# Übergebener Wert
key.field = 0

default = TEXT
default.value = [hidden email]
# Mitgliederverwaltung
member = TEXT
member.value = [hidden email]
}
</pre>
In das Empfänger-Eingabefeld:
{f:cObject(typoscriptObjectPath:'lib.receiver',data:'{betreff}')}

== Letzte Version für TYPO3 4.5 ==
== Powermail Conditions ==

== Snippets ==

=== E-Mail Empfänger abhängig von Feldwerten ===
==== Quellen ====
http://blog.marmalade.de/2010/06/powermail-e-mailempfanger-mit-case-unterscheidung-uber-typoscript-zuweisen/ (3/2012)

http://typo3blogger.de/powermail-empfanger-im-frontend-wahlen/ (3/2012)
Verschiedene Möglichkeiten:
* Direkt (schlecht)
* Über dynamisches TypoScript
* Angepasste Datenbankabfrage

==== Direkt ====
Im Empfänger Feld kann man direkt einen Feldmarker angeben z.B.: ###UID234###, dann wird direkt der Wert des Feldes benutzt. Schlecht, weil einfach zu manipulieren (potentielle Spamschleuder)

==== E-Mail über dynamisches TypoScript ====
TS
<pre>
// Case Objekt das den Wert eines Powermail Feldes auswertet.
emailan = CASE
emailan {
### Unterschiedung anhand Feld mit der UID 34 (Form hat id 25)
key.data = TSFE:fe_user|sesData|powermail_25|uid34
### Standardwert
default = TEXT
default.value = info@indihar.de
### Wert bei Auswahl "empf2"
empf2 = TEXT
empf2.value = schlegel@geo-bit.de
}

// neuen dynamischen Powermailmarker (###POWERMAIL_TYPOSCRIPT_EMPFAENGER###)
// dieser kann im Formular im Empfängerfeld eingetragen werden.
plugin.tx_powermail_pi1.dynamicTyposcript {
empfaenger < emailan
}

</pre>
==== Angepasste Datenbankabfrage ====
http://typo3blogger.de/powermail-empfanger-im-frontend-wahlen/

http://www.typo3.net/forum/list/list_post//76461/?howto=1&page=1

http://typo3.org/documentation/document-library/extension-manuals/powermail/1.4.15/view/1/11/#id4334579

Die Extension Powermail bietet eine komfortable Möglichkeit Formulare zusammenzuklicken – übrigens auch für Redakteure. Selbstverständlich ist Skalierbarkeit und Flexibilität ein großes Thema.
So ist es auch einfach möglich, den Empfänger im Frontend auszuwählen.

Im Netz gibt es schon ein paar Erklärungen zu diesem Thema, aber ich möchte es dennoch noch einmal aufgreifen, da ich oft auf Empfängerwahl angesprochen werde.

Mail-Adressen direkt in der Select Box
Technisch wäre es natürlich kein Problem eine Selectbox mit E-Mail Adressen im Frontend anzeigen zu lassen und im Flexform im Empfängerfeld dieses Feld durch einen Marker wieder aufzugreifen (z.B. ###UID234###).
Der Nachteil liegt aber auf der Hand:
- Mail Adressen können im Frontend aus dem Quelltext ausgelesen werden
- Mail Adressen können einfach manipuliert werden (im schlimmsten Fall stellt ihr so eine Spamschleuder ins Netz)
Diese Methode ist also allenfalls im Intranet nutzbar.

Umweg über Datenbank-UID
Eine andere Idee ist es, Datankbankeinträge (z.B. tt_address oder fe_user) mit E-Mail Adressen vorzunehmen und in einer (z.B.) Selectbox die UID des Datensatzes wieder aufzugreifen.
Beispiel Eintrag im Flexform
In diesem Beispiel hat man die Wahl zwischen UID 1 und 2. Verwendeter Marker ist ###UID42###.
SQL Query Beispiel
Damit Powermail den Umweg über die Datenbank geht, bietet sich der Einsatz des Feldes “Alternative SQL-Query” an.

Weitere Infos
Natürlich kann man auch an ganze Usergroups schicken:

SELECT email FROM fe_users WHERE find_in_set(###UID43###,usergroup) > 0
AND hidden = 0 AND deleted = 0

Beispiel mit fester Usergroup UID44:

SELECT email FROM fe_users WHERE find_in_set(44,usergroup) > 0
AND hidden = 0 AND deleted = 0

Hier ein Beispiel mit Checkboxen (mehrere Empfänger auswählen):

SELECT email FROM fe_users WHERE uid IN(###UID43###)

Eine ganz andere Möglichkeit ist der Einsatz von Dynamictyposcript im Empfängerfeld – auch hier lassen sich einige Anforderungen flexibel umsetzen. Dynamictyposcript in Powermail

=== Formular in Datenbank speichern ===

<pre>
plugin.tx_powermail_pi1{
dbEntry {

# Speicherung für Tabelle ermöglichen
tt_address._enable = TEXT
tt_address._enable.value = 1

# "tt_address.name" mit dem Wert des Powermail felds ausfüllen
tt_content uid 88, field uid18 (###uid18###)
tt_address.name = TEXT
tt_address.name.data = TSFE:fe_user|sesData|powermail_88|uid18

}
}
</pre>

=== Ausführliches Beispiel ===

Constants
<pre>
plugin.powermail.js.alwaysInclude = 1
plugin.powermail.js.includeJquery = 0
plugin.powermail.js.includeJqueryTools = 0
plugin.powermail.js.includeJqueryToolsTabs = 0
plugin.powermail.allow.email2sender = 0
plugin.powermail.PID.dblog = 0
plugin.powermail.markerALL.hideLabel = 1
plugin.powermail.format.datetime = %d.%m.%Y% %H:%M
plugin.powermail.format.date = %d.%m.%Y
plugin.powermail.debug.output =
</pre>

Setup
<pre>
// CSS Pfad ändern (oder gar nicht erst statisch einbinden ;-) )
page.includeCSS.powermail_frontend_basic = fileadmin/templates/onlineboerse/powermail.css
</pre>

==== Datenbank Speicherung mit verschiedenen Optionen ====
Setup
<pre>
// Powermail DB Storage
// Extra userfunc to convert date to unix timestamp
includeLibs.powermailTimestamp = fileadmin/templates/scripts/user_powermailTimestamp.php

plugin.tx_powermail_pi1.dbEntry{
tx_gbbulletin_bulletin {

_enable = TEXT
_enable.value = 1

hidden = TEXT
hidden.value = 1

pid = TEXT
pid.value = 102

tstamp = TEXT
tstamp.data = date:U

crdate = TEXT
crdate.data = date:U

title = TEXT
title.data = TSFE:fe_user|sesData|powermail_214|uid1

author = TEXT
author.data = TSFE:fe_user|sesData|powermail_214|uid2

place = TEXT
place.data = TSFE:fe_user|sesData|powermail_214|uid3

description = TEXT
description.data = TSFE:fe_user|sesData|powermail_214|uid4

contact = TEXT
contact.data = TSFE:fe_user|sesData|powermail_214|uid5

qualification = TEXT
qualification.data = TSFE:fe_user|sesData|powermail_214|uid6

date = USER
date.userFunc = user_powermailTimestamp->preflight
date.userFunc.field = uid7
date.userFunc.formuid = 214

period = TEXT
period.data = TSFE:fe_user|sesData|powermail_214|uid29

end_date = USER
end_date.userFunc = user_powermailTimestamp->preflight
end_date.userFunc.field = uid14
end_date.userFunc.formuid = 214

url = TEXT
url.data = TSFE:fe_user|sesData|powermail_214|uid8

text1 = TEXT
text1.data = TSFE:fe_user|sesData|powermail_214|uid9

cluster = TEXT
cluster.data = TSFE:fe_user|sesData|powermail_214|uid11

# add mm relation to uid 2 of tx_gbbulletin_cluster (via mm table)
_mm = COA
_mm.10 = COA
# 1 is always the mm table
_mm.10.1 = TEXT
_mm.10.1.value = tx_gbbulletin_cluster_mm
# 2 is always the other table
_mm.10.2 = TEXT
_mm.10.2.value = tx_gbbulletin_cluster
# 3 is always the uid of the other table to get a relation to this
# (in this case uid1 of tx_gbbulletin_cluster)
_mm.10.3 = TEXT
_mm.10.3.value = 1

tag = TEXT
tag.data = TSFE:fe_user|sesData|powermail_214|uid12

}

}
</pre>

=== Userfunktion zum umwandeln von Datum in Timestamp ===
Diese Funktion wird im obigen Beispiel zu Datenbankspeicherung verwendet
<pre>
<?php

class user_powermailTimestamp {

// Function preflight() will be used from typoscript
function preflight($content='', $conf=array()) {
$value = $GLOBALS['TSFE']->fe_user->sesData['powermail_'.$conf['userFunc.']['formuid']][$conf['userFunc.']['field']];
return $this->getDate($value);
}

// Main getDate() changes a date in any format to an unix timestamp
function getDate($string, $default = 'now', $timestamp = 1) {
$error = 0; // no error at the beginning
$string = str_replace(array('-', '_', ':', '+', ',', ' '), '.', $string); // change 23-12-2009 -> 23.12.2009 AND "05:00 23.01.2009" -> 05.00.23.01.2009
if (method_exists('t3lib_div', 'trimExplode')) $dateParts = t3lib_div::trimExplode('.', $string, 1); else $dateParts = explode('.', $string); // split at .

if (count($dateParts) === 3) { // only if there are three parts like "23.12.2009"
if (strlen($dateParts[0]) <= 2 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) <= 2) { // xx.xx.xx
$string = strtotime($dateParts[2].'-'.$dateParts[1].'-'.$dateParts[0]); // change to timestamp
}
elseif (strlen($dateParts[0]) == 4 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) <= 2) { // xxxx.xx.xx
$string = strtotime($dateParts[0].'-'.$dateParts[1].'-'.$dateParts[2]); // change to timestamp
}
elseif (strlen($dateParts[0]) <= 2 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) == 4) { // xx.xx.xxxx
$string = strtotime($dateParts[2].'-'.$dateParts[1].'-'.$dateParts[0]); // change to timestamp
}
else { // error
$error = 1; // error
}
} elseif (count($dateParts) === 5) { // only if there are five parts like "05.00.23.01.2009"
$string = strtotime($dateParts[4].'-'.$dateParts[3].'-'.$dateParts[2].' '.$dateParts[0].':'.$dateParts[1].':00'); // change to timestamp
} else { // more than 3 parts - so error
$error = 1; // error
}
$string = date('Y-m-d', $string); // For default: change 1234567 -> 1.1.1979
if ($timestamp) $string = strtotime($string); // Change back 1.1.1979 -> 1234567
if ($error) $string = ($default == 'now' ? time() : $default); // show default value

return $string;
}
}

?>
</pre>

=== Dropdownfeld mit Werten aus der Datenbank ===
==== Beispiel 1 ====
Quelle: http://www.typo3.net/forum/thematik/zeige/thema/77259/?show=1 Zugriff: 2013-10

1. Neues Powermail Feld anlegen (typoscript) im Feld Typoscript Objekt z.B. lib.objectname angeben

2. Eine Selectabfrage in TS (Hole name, uid von tt_address der Seite 5):

TS
<pre>
lib.objectname {
10 = TEXT
10.value = <label for="uid33">Select:</label>
20 = CONTENT
20.wrap = <select id="uid33" name="tx_powermail_pi1[uid33]" size="1">|</select>
20 {
table = tt_address
select {
pidInList = 5
orderBy = name
}
renderObj = COA
renderObj {
10 = COA
10 {
10 = TEXT
10 {
field = uid
wrap = <option value="|">
}
20 = TEXT
20 {
field = name
wrap = |</option>
}
}
}
}
}
</pre>

Ergebnis:

Dynamische Selecterbox, mit dem HTML Code:
<pre>
<label for="uid33">Select:</label>
<select id="uid33" name="tx_powermail_pi1[uid33]" size="1">
<option value="23">Name1</option>
<option value="24">Name2</option>
</select>
</pre>

=== Datenspeicherung in m:n Tabellen ===
Quelle: http://typo3-blog.net/tutorials/news/powermail-tt-news-mn-tabelle.html 2013-10

Powermail lässt sich nicht nur zum Versenden von Mails sondern auch zum Erstellen von Inhaltselementen nutzen. Dazu dient die TYPO3 Option dbEntry. Mit Hilfe dieser Option ist es sogar möglich MN-Tabellen zu befüllen, welches wenig bekannt ist. Anbei ein Beispiel, wie Eine tt_news Nachricht erzeugt und direkt in Kategorie Nr. 2 eingefügt werden kann:
<pre>
plugin.tx_powermail_pi1.upload.folder = uploads/pics/
plugin.tx_powermail_pi1.dbEntry.tt_news {
# Neue Nachrichten müssen durch Admin genehmigt werden
_enable = TEXT
_enable.value = 0
pid = TEXT
pid.value = 2
tstamp = TEXT
tstamp.data = date:U
crdate = TEXT
crdate.data = date:U

_mn = COA
_mn.10 = COA
# 1 muss Namen der mn Tabelle enthalten
_mm.10.1 = TEXT
_mm.10.1.value = tt_news_cat_mm
# 2 ist der Name der Fremdtabelle, hier News Kategorie
_mm.10.2 = TEXT
_mm.10.2.value = tt_news_cat
# 3 die Fremd uid, hier uid der Newskategorie
_mm.10.3 = TEXT
_mm.10.3.value = 2

# 139 ist die uid des Contenelements, welches das Powermailformular darstellt
# 15 ist die uid des einzelnen Feldes.
title = TEXT
title.data = TSFE:fe_user|sesData|powermail_139|uid15
author_email = TEXT
author_email.data = TSFE:fe_user|sesData|powermail_139|uid21
author = TEXT
author.data = TSFE:fe_user|sesData|powermail_139|uid739
# short = TEXT
# short.data = TSFE:fe_user|sesData|powermail_139|uid742
bodytext = TEXT
bodytext.data = TSFE:fe_user|sesData|powermail_139|uid19
datetime = TEXT
datetime.data = TSFE:fe_user|sesData|powermail_139|uid17
keywords = TEXT
keywords.data = TSFE:fe_user|sesData|powermail_139|uid41
}
</pre>

=== Felder vorausfüllen ===
Quelle: http://typo3blogger.de/powermail-trickkiste-teil-2-%E2%80%93-felder-vorbelegen/
==== Über GET Parameter ====
Dropdown
http://www.einpraegsam.net/kontakt.html?tx_powermail_pi1[uid24]=TYPO3%20Extension%20powermail
Input
index.php?id=1&tx_powermail_pi1[uid12]=Hallo

Checkbox
index.php?id=1&tx_powermail_pi1[uid13][0]=1

==== Über TypoScript ====
Vorfüllen mit TypoScript:
Durch eine Vorbelegung mit TypoScript gibt es kaum noch Grenzen. Statische Werte, GET und POST Parameter und userFuncs können verwendet werden. Nachfolgend ein paar Beispiele.
<pre>
plugin.tx_powermail_pi1 {
prefill {
# Fülle Feld 1 mit statischem Wert
uid1 = TEXT
uid1.value = blabla

# Fülle Feld 2 mit aktuellem timestamp
uid2 = TEXT
uid2.data = date:U

# Feld 3 mit Datum
uid3 = TEXT
uid3.data = date:U
uid3.strftime = Datum: %d.%m.%Y

# Feld 4 mit IP Adresse
uid4 = TEXT
uid4.data = getIndpEnv:REMOTE_ADDR

# Feld 5 und 6 mit Wert aus aktueller URL
# index.php?id=123&wert=Ort
uid5 = TEXT
uid5.data = GP:wert
uid5.htmlSpecialChars = 1

# index.php?id=123&tx_ttnews[tt_news]=95
uid5 = TEXT
uid5.data = GP:tx_ttnews|tt_news
uid5.wrap = Wir befinden uns auf der Newsdetailseite mit der UID|
uid5.intval = 1
}
}
</pre>
Hinweis:
1. Im Beispiel 4 und 5 werden Benutzerdefinierte Werte (GET oder POST) verwendet. Hier ist ein Absichern gegen XSS unabdingbar. Mit intval oder htmlSpecialChars lassen sich Werte innerhalb von TypoScript leicht absichern.
2. Falls ein Wert eines Feldes in der Session liegt, hat dieser Vorrang.
3. Ein Selectfeld wird automatisch vorselektiert wenn der vorgegebene Wert auch zur Auswahl steht

=== User basierter Upload Ordner ===
ich möchte die in einem Upload-Formular übermittelten Dateien in ein bestimmtes Verzeichnis (fileadmin/user_upload/verzeichnis/) schieben. Das funktioniert auch mit folgender Konstanten:

plugin.powermail.upload.folder = /fileadmin/user_upload/vkb-uploads/

Die Dateien landen im richtigen Ordner. Allerdings wird in der Powermail-Ansicht im Backend, dieser Pfad nicht übernommen. Ich lasse mir also die eingegangenen Powermails anzeigen und hier ist ja dann die übertragene Datei entsprechend verlinkt, aber eben nicht mit dem von mir vorgegebenem Pfad sondern mit dem Standard-Ordner (uploads/tx_powermail/files/Dateiname.abc).

Lösung anscheinend selbst gefunden.

Ich habe alle möglichen Dateien durchsuchen lassen, in denen der Pfad 'uploads/tx_powermail/files/' gesetzt ist und die Datei pageTSconfig.txt gefunden.

Hieraus konnte ich schlussfolgern, dass der folgende Schnipsel im TSConfig des Sysordners in dem die Mails auflaufen hinterlegt sein muss um mein Problem zu beheben:
<pre>
tx_powermail_mod1.config {
list {
uploadFolder = mein/pfad/zu/den/dateianhängen/
}
}
</pre>

TYPO3 - Powermail

2017-11-22T17:12:17Z

37.49.32.84: /* E-Mail Empfänger abhängig von Feldwerten (powermail > 2 */

Powermail Extension
== Snippets für 2.x ==
=== Dynamische Anrede ===

Mit folgendem TypoScript lässt sich in Powermail 2.x eine dynamische Anrede des Benutzers in E-Mails und Bestätigungsseite bewerkstelligen.

TypoScript:
<syntaxhighlight lang="typoscript">
lib.anrede = CASE
lib.anrede {
key.field = 0

default = TEXT
default.value = Sehr geehrte Damen und Herren,

Herr = TEXT
# Die "7" ist die ID des Powermail-Felds {name}
Herr.data = GP:tx_powermail_pi1|field|7
Herr.noTrimWrap = |Sehr geehrter Herr |,|

Frau = TEXT
Frau.data = GP:tx_powermail_pi1|field|7
Frau.noTrimWrap = |Sehr geehrte Frau |, |

# Englische Übersetzung:
Mr = TEXT
Mr.data = GP:tx_powermail_pi1|field|7
Mr.noTrimWrap = |Dear Mr |, |

Mrs = TEXT
Mrs.data = GP:tx_powermail_pi1|field|7
Mrs.noTrimWrap = |Dear Mrs |, |

Ms = TEXT
Ms.data = GP:tx_powermail_pi1|field|7
Ms.noTrimWrap = |Dear Ms |, |
}
</syntaxhighlight>
ViewHelper für Powermail-Plugin:

{f:cObject(typoscriptObjectPath:'lib.anrede',data:'{anrede}')}
Quelle: typo3.net - Forum

Ab Powermail 2.1.x werden Powermail-Felder nicht mehr über die UID, sondern den Markernamen angesprochen. Dementsprechend müssen die Zeilen im TypoScript etwas angepasst werden:

# Powermail-Feld {name}
Herr.data = GP:tx_powermail_pi1|field|name
== Letzte Version für TYPO3 4.5 ==
== Powermail Conditions ==

== Snippets ==

=== E-Mail Empfänger abhängig von Feldwerten ===
==== Quellen ====
http://blog.marmalade.de/2010/06/powermail-e-mailempfanger-mit-case-unterscheidung-uber-typoscript-zuweisen/ (3/2012)

http://typo3blogger.de/powermail-empfanger-im-frontend-wahlen/ (3/2012)
Verschiedene Möglichkeiten:
* Direkt (schlecht)
* Über dynamisches TypoScript
* Angepasste Datenbankabfrage

==== Direkt ====
Im Empfänger Feld kann man direkt einen Feldmarker angeben z.B.: ###UID234###, dann wird direkt der Wert des Feldes benutzt. Schlecht, weil einfach zu manipulieren (potentielle Spamschleuder)

==== E-Mail über dynamisches TypoScript ====
TS
<pre>
// Case Objekt das den Wert eines Powermail Feldes auswertet.
emailan = CASE
emailan {
### Unterschiedung anhand Feld mit der UID 34 (Form hat id 25)
key.data = TSFE:fe_user|sesData|powermail_25|uid34
### Standardwert
default = TEXT
default.value = info@indihar.de
### Wert bei Auswahl "empf2"
empf2 = TEXT
empf2.value = schlegel@geo-bit.de
}

// neuen dynamischen Powermailmarker (###POWERMAIL_TYPOSCRIPT_EMPFAENGER###)
// dieser kann im Formular im Empfängerfeld eingetragen werden.
plugin.tx_powermail_pi1.dynamicTyposcript {
empfaenger < emailan
}

</pre>
==== Angepasste Datenbankabfrage ====
http://typo3blogger.de/powermail-empfanger-im-frontend-wahlen/

http://www.typo3.net/forum/list/list_post//76461/?howto=1&page=1

http://typo3.org/documentation/document-library/extension-manuals/powermail/1.4.15/view/1/11/#id4334579

Die Extension Powermail bietet eine komfortable Möglichkeit Formulare zusammenzuklicken – übrigens auch für Redakteure. Selbstverständlich ist Skalierbarkeit und Flexibilität ein großes Thema.
So ist es auch einfach möglich, den Empfänger im Frontend auszuwählen.

Im Netz gibt es schon ein paar Erklärungen zu diesem Thema, aber ich möchte es dennoch noch einmal aufgreifen, da ich oft auf Empfängerwahl angesprochen werde.

Mail-Adressen direkt in der Select Box
Technisch wäre es natürlich kein Problem eine Selectbox mit E-Mail Adressen im Frontend anzeigen zu lassen und im Flexform im Empfängerfeld dieses Feld durch einen Marker wieder aufzugreifen (z.B. ###UID234###).
Der Nachteil liegt aber auf der Hand:
- Mail Adressen können im Frontend aus dem Quelltext ausgelesen werden
- Mail Adressen können einfach manipuliert werden (im schlimmsten Fall stellt ihr so eine Spamschleuder ins Netz)
Diese Methode ist also allenfalls im Intranet nutzbar.

Umweg über Datenbank-UID
Eine andere Idee ist es, Datankbankeinträge (z.B. tt_address oder fe_user) mit E-Mail Adressen vorzunehmen und in einer (z.B.) Selectbox die UID des Datensatzes wieder aufzugreifen.
Beispiel Eintrag im Flexform
In diesem Beispiel hat man die Wahl zwischen UID 1 und 2. Verwendeter Marker ist ###UID42###.
SQL Query Beispiel
Damit Powermail den Umweg über die Datenbank geht, bietet sich der Einsatz des Feldes “Alternative SQL-Query” an.

Weitere Infos
Natürlich kann man auch an ganze Usergroups schicken:

SELECT email FROM fe_users WHERE find_in_set(###UID43###,usergroup) > 0
AND hidden = 0 AND deleted = 0

Beispiel mit fester Usergroup UID44:

SELECT email FROM fe_users WHERE find_in_set(44,usergroup) > 0
AND hidden = 0 AND deleted = 0

Hier ein Beispiel mit Checkboxen (mehrere Empfänger auswählen):

SELECT email FROM fe_users WHERE uid IN(###UID43###)

Eine ganz andere Möglichkeit ist der Einsatz von Dynamictyposcript im Empfängerfeld – auch hier lassen sich einige Anforderungen flexibel umsetzen. Dynamictyposcript in Powermail

=== Formular in Datenbank speichern ===

<pre>
plugin.tx_powermail_pi1{
dbEntry {

# Speicherung für Tabelle ermöglichen
tt_address._enable = TEXT
tt_address._enable.value = 1

# "tt_address.name" mit dem Wert des Powermail felds ausfüllen
tt_content uid 88, field uid18 (###uid18###)
tt_address.name = TEXT
tt_address.name.data = TSFE:fe_user|sesData|powermail_88|uid18

}
}
</pre>

=== Ausführliches Beispiel ===

Constants
<pre>
plugin.powermail.js.alwaysInclude = 1
plugin.powermail.js.includeJquery = 0
plugin.powermail.js.includeJqueryTools = 0
plugin.powermail.js.includeJqueryToolsTabs = 0
plugin.powermail.allow.email2sender = 0
plugin.powermail.PID.dblog = 0
plugin.powermail.markerALL.hideLabel = 1
plugin.powermail.format.datetime = %d.%m.%Y% %H:%M
plugin.powermail.format.date = %d.%m.%Y
plugin.powermail.debug.output =
</pre>

Setup
<pre>
// CSS Pfad ändern (oder gar nicht erst statisch einbinden ;-) )
page.includeCSS.powermail_frontend_basic = fileadmin/templates/onlineboerse/powermail.css
</pre>

==== Datenbank Speicherung mit verschiedenen Optionen ====
Setup
<pre>
// Powermail DB Storage
// Extra userfunc to convert date to unix timestamp
includeLibs.powermailTimestamp = fileadmin/templates/scripts/user_powermailTimestamp.php

plugin.tx_powermail_pi1.dbEntry{
tx_gbbulletin_bulletin {

_enable = TEXT
_enable.value = 1

hidden = TEXT
hidden.value = 1

pid = TEXT
pid.value = 102

tstamp = TEXT
tstamp.data = date:U

crdate = TEXT
crdate.data = date:U

title = TEXT
title.data = TSFE:fe_user|sesData|powermail_214|uid1

author = TEXT
author.data = TSFE:fe_user|sesData|powermail_214|uid2

place = TEXT
place.data = TSFE:fe_user|sesData|powermail_214|uid3

description = TEXT
description.data = TSFE:fe_user|sesData|powermail_214|uid4

contact = TEXT
contact.data = TSFE:fe_user|sesData|powermail_214|uid5

qualification = TEXT
qualification.data = TSFE:fe_user|sesData|powermail_214|uid6

date = USER
date.userFunc = user_powermailTimestamp->preflight
date.userFunc.field = uid7
date.userFunc.formuid = 214

period = TEXT
period.data = TSFE:fe_user|sesData|powermail_214|uid29

end_date = USER
end_date.userFunc = user_powermailTimestamp->preflight
end_date.userFunc.field = uid14
end_date.userFunc.formuid = 214

url = TEXT
url.data = TSFE:fe_user|sesData|powermail_214|uid8

text1 = TEXT
text1.data = TSFE:fe_user|sesData|powermail_214|uid9

cluster = TEXT
cluster.data = TSFE:fe_user|sesData|powermail_214|uid11

# add mm relation to uid 2 of tx_gbbulletin_cluster (via mm table)
_mm = COA
_mm.10 = COA
# 1 is always the mm table
_mm.10.1 = TEXT
_mm.10.1.value = tx_gbbulletin_cluster_mm
# 2 is always the other table
_mm.10.2 = TEXT
_mm.10.2.value = tx_gbbulletin_cluster
# 3 is always the uid of the other table to get a relation to this
# (in this case uid1 of tx_gbbulletin_cluster)
_mm.10.3 = TEXT
_mm.10.3.value = 1

tag = TEXT
tag.data = TSFE:fe_user|sesData|powermail_214|uid12

}

}
</pre>

=== Userfunktion zum umwandeln von Datum in Timestamp ===
Diese Funktion wird im obigen Beispiel zu Datenbankspeicherung verwendet
<pre>
<?php

class user_powermailTimestamp {

// Function preflight() will be used from typoscript
function preflight($content='', $conf=array()) {
$value = $GLOBALS['TSFE']->fe_user->sesData['powermail_'.$conf['userFunc.']['formuid']][$conf['userFunc.']['field']];
return $this->getDate($value);
}

// Main getDate() changes a date in any format to an unix timestamp
function getDate($string, $default = 'now', $timestamp = 1) {
$error = 0; // no error at the beginning
$string = str_replace(array('-', '_', ':', '+', ',', ' '), '.', $string); // change 23-12-2009 -> 23.12.2009 AND "05:00 23.01.2009" -> 05.00.23.01.2009
if (method_exists('t3lib_div', 'trimExplode')) $dateParts = t3lib_div::trimExplode('.', $string, 1); else $dateParts = explode('.', $string); // split at .

if (count($dateParts) === 3) { // only if there are three parts like "23.12.2009"
if (strlen($dateParts[0]) <= 2 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) <= 2) { // xx.xx.xx
$string = strtotime($dateParts[2].'-'.$dateParts[1].'-'.$dateParts[0]); // change to timestamp
}
elseif (strlen($dateParts[0]) == 4 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) <= 2) { // xxxx.xx.xx
$string = strtotime($dateParts[0].'-'.$dateParts[1].'-'.$dateParts[2]); // change to timestamp
}
elseif (strlen($dateParts[0]) <= 2 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) == 4) { // xx.xx.xxxx
$string = strtotime($dateParts[2].'-'.$dateParts[1].'-'.$dateParts[0]); // change to timestamp
}
else { // error
$error = 1; // error
}
} elseif (count($dateParts) === 5) { // only if there are five parts like "05.00.23.01.2009"
$string = strtotime($dateParts[4].'-'.$dateParts[3].'-'.$dateParts[2].' '.$dateParts[0].':'.$dateParts[1].':00'); // change to timestamp
} else { // more than 3 parts - so error
$error = 1; // error
}
$string = date('Y-m-d', $string); // For default: change 1234567 -> 1.1.1979
if ($timestamp) $string = strtotime($string); // Change back 1.1.1979 -> 1234567
if ($error) $string = ($default == 'now' ? time() : $default); // show default value

return $string;
}
}

?>
</pre>

=== Dropdownfeld mit Werten aus der Datenbank ===
==== Beispiel 1 ====
Quelle: http://www.typo3.net/forum/thematik/zeige/thema/77259/?show=1 Zugriff: 2013-10

1. Neues Powermail Feld anlegen (typoscript) im Feld Typoscript Objekt z.B. lib.objectname angeben

2. Eine Selectabfrage in TS (Hole name, uid von tt_address der Seite 5):

TS
<pre>
lib.objectname {
10 = TEXT
10.value = <label for="uid33">Select:</label>
20 = CONTENT
20.wrap = <select id="uid33" name="tx_powermail_pi1[uid33]" size="1">|</select>
20 {
table = tt_address
select {
pidInList = 5
orderBy = name
}
renderObj = COA
renderObj {
10 = COA
10 {
10 = TEXT
10 {
field = uid
wrap = <option value="|">
}
20 = TEXT
20 {
field = name
wrap = |</option>
}
}
}
}
}
</pre>

Ergebnis:

Dynamische Selecterbox, mit dem HTML Code:
<pre>
<label for="uid33">Select:</label>
<select id="uid33" name="tx_powermail_pi1[uid33]" size="1">
<option value="23">Name1</option>
<option value="24">Name2</option>
</select>
</pre>

=== Datenspeicherung in m:n Tabellen ===
Quelle: http://typo3-blog.net/tutorials/news/powermail-tt-news-mn-tabelle.html 2013-10

Powermail lässt sich nicht nur zum Versenden von Mails sondern auch zum Erstellen von Inhaltselementen nutzen. Dazu dient die TYPO3 Option dbEntry. Mit Hilfe dieser Option ist es sogar möglich MN-Tabellen zu befüllen, welches wenig bekannt ist. Anbei ein Beispiel, wie Eine tt_news Nachricht erzeugt und direkt in Kategorie Nr. 2 eingefügt werden kann:
<pre>
plugin.tx_powermail_pi1.upload.folder = uploads/pics/
plugin.tx_powermail_pi1.dbEntry.tt_news {
# Neue Nachrichten müssen durch Admin genehmigt werden
_enable = TEXT
_enable.value = 0
pid = TEXT
pid.value = 2
tstamp = TEXT
tstamp.data = date:U
crdate = TEXT
crdate.data = date:U

_mn = COA
_mn.10 = COA
# 1 muss Namen der mn Tabelle enthalten
_mm.10.1 = TEXT
_mm.10.1.value = tt_news_cat_mm
# 2 ist der Name der Fremdtabelle, hier News Kategorie
_mm.10.2 = TEXT
_mm.10.2.value = tt_news_cat
# 3 die Fremd uid, hier uid der Newskategorie
_mm.10.3 = TEXT
_mm.10.3.value = 2

# 139 ist die uid des Contenelements, welches das Powermailformular darstellt
# 15 ist die uid des einzelnen Feldes.
title = TEXT
title.data = TSFE:fe_user|sesData|powermail_139|uid15
author_email = TEXT
author_email.data = TSFE:fe_user|sesData|powermail_139|uid21
author = TEXT
author.data = TSFE:fe_user|sesData|powermail_139|uid739
# short = TEXT
# short.data = TSFE:fe_user|sesData|powermail_139|uid742
bodytext = TEXT
bodytext.data = TSFE:fe_user|sesData|powermail_139|uid19
datetime = TEXT
datetime.data = TSFE:fe_user|sesData|powermail_139|uid17
keywords = TEXT
keywords.data = TSFE:fe_user|sesData|powermail_139|uid41
}
</pre>

=== Felder vorausfüllen ===
Quelle: http://typo3blogger.de/powermail-trickkiste-teil-2-%E2%80%93-felder-vorbelegen/
==== Über GET Parameter ====
Dropdown
http://www.einpraegsam.net/kontakt.html?tx_powermail_pi1[uid24]=TYPO3%20Extension%20powermail
Input
index.php?id=1&tx_powermail_pi1[uid12]=Hallo

Checkbox
index.php?id=1&tx_powermail_pi1[uid13][0]=1

==== Über TypoScript ====
Vorfüllen mit TypoScript:
Durch eine Vorbelegung mit TypoScript gibt es kaum noch Grenzen. Statische Werte, GET und POST Parameter und userFuncs können verwendet werden. Nachfolgend ein paar Beispiele.
<pre>
plugin.tx_powermail_pi1 {
prefill {
# Fülle Feld 1 mit statischem Wert
uid1 = TEXT
uid1.value = blabla

# Fülle Feld 2 mit aktuellem timestamp
uid2 = TEXT
uid2.data = date:U

# Feld 3 mit Datum
uid3 = TEXT
uid3.data = date:U
uid3.strftime = Datum: %d.%m.%Y

# Feld 4 mit IP Adresse
uid4 = TEXT
uid4.data = getIndpEnv:REMOTE_ADDR

# Feld 5 und 6 mit Wert aus aktueller URL
# index.php?id=123&wert=Ort
uid5 = TEXT
uid5.data = GP:wert
uid5.htmlSpecialChars = 1

# index.php?id=123&tx_ttnews[tt_news]=95
uid5 = TEXT
uid5.data = GP:tx_ttnews|tt_news
uid5.wrap = Wir befinden uns auf der Newsdetailseite mit der UID|
uid5.intval = 1
}
}
</pre>
Hinweis:
1. Im Beispiel 4 und 5 werden Benutzerdefinierte Werte (GET oder POST) verwendet. Hier ist ein Absichern gegen XSS unabdingbar. Mit intval oder htmlSpecialChars lassen sich Werte innerhalb von TypoScript leicht absichern.
2. Falls ein Wert eines Feldes in der Session liegt, hat dieser Vorrang.
3. Ein Selectfeld wird automatisch vorselektiert wenn der vorgegebene Wert auch zur Auswahl steht

=== User basierter Upload Ordner ===
ich möchte die in einem Upload-Formular übermittelten Dateien in ein bestimmtes Verzeichnis (fileadmin/user_upload/verzeichnis/) schieben. Das funktioniert auch mit folgender Konstanten:

plugin.powermail.upload.folder = /fileadmin/user_upload/vkb-uploads/

Die Dateien landen im richtigen Ordner. Allerdings wird in der Powermail-Ansicht im Backend, dieser Pfad nicht übernommen. Ich lasse mir also die eingegangenen Powermails anzeigen und hier ist ja dann die übertragene Datei entsprechend verlinkt, aber eben nicht mit dem von mir vorgegebenem Pfad sondern mit dem Standard-Ordner (uploads/tx_powermail/files/Dateiname.abc).

Lösung anscheinend selbst gefunden.

Ich habe alle möglichen Dateien durchsuchen lassen, in denen der Pfad 'uploads/tx_powermail/files/' gesetzt ist und die Datei pageTSconfig.txt gefunden.

Hieraus konnte ich schlussfolgern, dass der folgende Schnipsel im TSConfig des Sysordners in dem die Mails auflaufen hinterlegt sein muss um mein Problem zu beheben:
<pre>
tx_powermail_mod1.config {
list {
uploadFolder = mein/pfad/zu/den/dateianhängen/
}
}
</pre>

TYPO3 - Powermail

2017-11-22T17:11:45Z

37.49.32.84:

Powermail Extension
== Snippets für 2.x ==
=== Dynamische Anrede ===

Mit folgendem TypoScript lässt sich in Powermail 2.x eine dynamische Anrede des Benutzers in E-Mails und Bestätigungsseite bewerkstelligen.

TypoScript:
<syntaxhighlight lang="typoscript">
lib.anrede = CASE
lib.anrede {
key.field = 0

default = TEXT
default.value = Sehr geehrte Damen und Herren,

Herr = TEXT
# Die "7" ist die ID des Powermail-Felds {name}
Herr.data = GP:tx_powermail_pi1|field|7
Herr.noTrimWrap = |Sehr geehrter Herr |,|

Frau = TEXT
Frau.data = GP:tx_powermail_pi1|field|7
Frau.noTrimWrap = |Sehr geehrte Frau |, |

# Englische Übersetzung:
Mr = TEXT
Mr.data = GP:tx_powermail_pi1|field|7
Mr.noTrimWrap = |Dear Mr |, |

Mrs = TEXT
Mrs.data = GP:tx_powermail_pi1|field|7
Mrs.noTrimWrap = |Dear Mrs |, |

Ms = TEXT
Ms.data = GP:tx_powermail_pi1|field|7
Ms.noTrimWrap = |Dear Ms |, |
}
</syntaxhighlight>
ViewHelper für Powermail-Plugin:

{f:cObject(typoscriptObjectPath:'lib.anrede',data:'{anrede}')}
Quelle: typo3.net - Forum

Ab Powermail 2.1.x werden Powermail-Felder nicht mehr über die UID, sondern den Markernamen angesprochen. Dementsprechend müssen die Zeilen im TypoScript etwas angepasst werden:

# Powermail-Feld {name}
Herr.data = GP:tx_powermail_pi1|field|name
== Letzte Version für TYPO3 4.5 ==
== Powermail Conditions ==

== Snippets ==

=== E-Mail Empfänger abhängig von Feldwerten (powermail > 2 ===
http://typo3.3.n7.nabble.com/Powermail-2-Dynamischer-Empfanger-je-nach-Betreff-td269199.html

ich hatte das in einem Projekt so gelöst:
(läuft unter Typo3 6.1 und Powermail 2.0)

1) Betreff-Auswahl mit Select-Feld so wie du

2) Im Powermail-Plugin im Reiter "Empfänger" folgendes:

Name des Empfängers:{f:cObject(typoscriptObjectPath:'lib.receiver_name')}

E-Mail des Empfängers:

{f:cObject(typoscriptObjectPath:'lib.receiver_email')}

Betreff der Mail an den Empfänger:

{f:cObject(typoscriptObjectPath:'lib.subject')}

3)
Im TypoScript:
<pre>
lib.receiver_email = CASE
lib.receiver_email {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = [hidden email]
1 = TEXT
1.value = [hidden email]
2 = TEXT
2.value = [hidden email]
3 = TEXT
3.value = [hidden email]
}
lib.receiver_name = CASE
lib.receiver_name {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = Firma XY
1 = TEXT
1.value = Firma XY Allgemein
2 = TEXT
2.value = Firma XY Abteilung A
3 = TEXT
3.value = Firma XY Abteilung B
}
lib.subject = TEXT
lib.subject {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = Allgemeine Anfrage
1 = TEXT
1.value = Allgemeine Anfrage
2 = TEXT
2.value = Anfrage an Abteilung A
3 = TEXT
3.value = Anfrage an Abteilung B
}
</pre>
==== Korrektur für Powermail > 2.1 ====
ich habe jetzt - mit Hilfe des Powermail-Bug-Trackers - eine Lösung für
> 2.1 gefunden. Und zwar werden Felder nicht mehr nach deren ID,
sondern Feldnamen referenziert:

Im TypoScript der Seite:
<pre>
lib.receiver = CASE
lib.receiver {
# Übergebener Wert
key.field = 0

default = TEXT
default.value = [hidden email]
# Mitgliederverwaltung
member = TEXT
member.value = [hidden email]
}
</pre>
In das Empfänger-Eingabefeld:
{f:cObject(typoscriptObjectPath:'lib.receiver',data:'{betreff}')}
=== E-Mail Empfänger abhängig von Feldwerten ===
==== Quellen ====
http://blog.marmalade.de/2010/06/powermail-e-mailempfanger-mit-case-unterscheidung-uber-typoscript-zuweisen/ (3/2012)

http://typo3blogger.de/powermail-empfanger-im-frontend-wahlen/ (3/2012)
Verschiedene Möglichkeiten:
* Direkt (schlecht)
* Über dynamisches TypoScript
* Angepasste Datenbankabfrage

==== Direkt ====
Im Empfänger Feld kann man direkt einen Feldmarker angeben z.B.: ###UID234###, dann wird direkt der Wert des Feldes benutzt. Schlecht, weil einfach zu manipulieren (potentielle Spamschleuder)

==== E-Mail über dynamisches TypoScript ====
TS
<pre>
// Case Objekt das den Wert eines Powermail Feldes auswertet.
emailan = CASE
emailan {
### Unterschiedung anhand Feld mit der UID 34 (Form hat id 25)
key.data = TSFE:fe_user|sesData|powermail_25|uid34
### Standardwert
default = TEXT
default.value = info@indihar.de
### Wert bei Auswahl "empf2"
empf2 = TEXT
empf2.value = schlegel@geo-bit.de
}

// neuen dynamischen Powermailmarker (###POWERMAIL_TYPOSCRIPT_EMPFAENGER###)
// dieser kann im Formular im Empfängerfeld eingetragen werden.
plugin.tx_powermail_pi1.dynamicTyposcript {
empfaenger < emailan
}

</pre>
==== Angepasste Datenbankabfrage ====
http://typo3blogger.de/powermail-empfanger-im-frontend-wahlen/

http://www.typo3.net/forum/list/list_post//76461/?howto=1&page=1

http://typo3.org/documentation/document-library/extension-manuals/powermail/1.4.15/view/1/11/#id4334579

Die Extension Powermail bietet eine komfortable Möglichkeit Formulare zusammenzuklicken – übrigens auch für Redakteure. Selbstverständlich ist Skalierbarkeit und Flexibilität ein großes Thema.
So ist es auch einfach möglich, den Empfänger im Frontend auszuwählen.

Im Netz gibt es schon ein paar Erklärungen zu diesem Thema, aber ich möchte es dennoch noch einmal aufgreifen, da ich oft auf Empfängerwahl angesprochen werde.

Mail-Adressen direkt in der Select Box
Technisch wäre es natürlich kein Problem eine Selectbox mit E-Mail Adressen im Frontend anzeigen zu lassen und im Flexform im Empfängerfeld dieses Feld durch einen Marker wieder aufzugreifen (z.B. ###UID234###).
Der Nachteil liegt aber auf der Hand:
- Mail Adressen können im Frontend aus dem Quelltext ausgelesen werden
- Mail Adressen können einfach manipuliert werden (im schlimmsten Fall stellt ihr so eine Spamschleuder ins Netz)
Diese Methode ist also allenfalls im Intranet nutzbar.

Umweg über Datenbank-UID
Eine andere Idee ist es, Datankbankeinträge (z.B. tt_address oder fe_user) mit E-Mail Adressen vorzunehmen und in einer (z.B.) Selectbox die UID des Datensatzes wieder aufzugreifen.
Beispiel Eintrag im Flexform
In diesem Beispiel hat man die Wahl zwischen UID 1 und 2. Verwendeter Marker ist ###UID42###.
SQL Query Beispiel
Damit Powermail den Umweg über die Datenbank geht, bietet sich der Einsatz des Feldes “Alternative SQL-Query” an.

Weitere Infos
Natürlich kann man auch an ganze Usergroups schicken:

SELECT email FROM fe_users WHERE find_in_set(###UID43###,usergroup) > 0
AND hidden = 0 AND deleted = 0

Beispiel mit fester Usergroup UID44:

SELECT email FROM fe_users WHERE find_in_set(44,usergroup) > 0
AND hidden = 0 AND deleted = 0

Hier ein Beispiel mit Checkboxen (mehrere Empfänger auswählen):

SELECT email FROM fe_users WHERE uid IN(###UID43###)

Eine ganz andere Möglichkeit ist der Einsatz von Dynamictyposcript im Empfängerfeld – auch hier lassen sich einige Anforderungen flexibel umsetzen. Dynamictyposcript in Powermail

=== Formular in Datenbank speichern ===

<pre>
plugin.tx_powermail_pi1{
dbEntry {

# Speicherung für Tabelle ermöglichen
tt_address._enable = TEXT
tt_address._enable.value = 1

# "tt_address.name" mit dem Wert des Powermail felds ausfüllen
tt_content uid 88, field uid18 (###uid18###)
tt_address.name = TEXT
tt_address.name.data = TSFE:fe_user|sesData|powermail_88|uid18

}
}
</pre>

=== Ausführliches Beispiel ===

Constants
<pre>
plugin.powermail.js.alwaysInclude = 1
plugin.powermail.js.includeJquery = 0
plugin.powermail.js.includeJqueryTools = 0
plugin.powermail.js.includeJqueryToolsTabs = 0
plugin.powermail.allow.email2sender = 0
plugin.powermail.PID.dblog = 0
plugin.powermail.markerALL.hideLabel = 1
plugin.powermail.format.datetime = %d.%m.%Y% %H:%M
plugin.powermail.format.date = %d.%m.%Y
plugin.powermail.debug.output =
</pre>

Setup
<pre>
// CSS Pfad ändern (oder gar nicht erst statisch einbinden ;-) )
page.includeCSS.powermail_frontend_basic = fileadmin/templates/onlineboerse/powermail.css
</pre>

==== Datenbank Speicherung mit verschiedenen Optionen ====
Setup
<pre>
// Powermail DB Storage
// Extra userfunc to convert date to unix timestamp
includeLibs.powermailTimestamp = fileadmin/templates/scripts/user_powermailTimestamp.php

plugin.tx_powermail_pi1.dbEntry{
tx_gbbulletin_bulletin {

_enable = TEXT
_enable.value = 1

hidden = TEXT
hidden.value = 1

pid = TEXT
pid.value = 102

tstamp = TEXT
tstamp.data = date:U

crdate = TEXT
crdate.data = date:U

title = TEXT
title.data = TSFE:fe_user|sesData|powermail_214|uid1

author = TEXT
author.data = TSFE:fe_user|sesData|powermail_214|uid2

place = TEXT
place.data = TSFE:fe_user|sesData|powermail_214|uid3

description = TEXT
description.data = TSFE:fe_user|sesData|powermail_214|uid4

contact = TEXT
contact.data = TSFE:fe_user|sesData|powermail_214|uid5

qualification = TEXT
qualification.data = TSFE:fe_user|sesData|powermail_214|uid6

date = USER
date.userFunc = user_powermailTimestamp->preflight
date.userFunc.field = uid7
date.userFunc.formuid = 214

period = TEXT
period.data = TSFE:fe_user|sesData|powermail_214|uid29

end_date = USER
end_date.userFunc = user_powermailTimestamp->preflight
end_date.userFunc.field = uid14
end_date.userFunc.formuid = 214

url = TEXT
url.data = TSFE:fe_user|sesData|powermail_214|uid8

text1 = TEXT
text1.data = TSFE:fe_user|sesData|powermail_214|uid9

cluster = TEXT
cluster.data = TSFE:fe_user|sesData|powermail_214|uid11

# add mm relation to uid 2 of tx_gbbulletin_cluster (via mm table)
_mm = COA
_mm.10 = COA
# 1 is always the mm table
_mm.10.1 = TEXT
_mm.10.1.value = tx_gbbulletin_cluster_mm
# 2 is always the other table
_mm.10.2 = TEXT
_mm.10.2.value = tx_gbbulletin_cluster
# 3 is always the uid of the other table to get a relation to this
# (in this case uid1 of tx_gbbulletin_cluster)
_mm.10.3 = TEXT
_mm.10.3.value = 1

tag = TEXT
tag.data = TSFE:fe_user|sesData|powermail_214|uid12

}

}
</pre>

=== Userfunktion zum umwandeln von Datum in Timestamp ===
Diese Funktion wird im obigen Beispiel zu Datenbankspeicherung verwendet
<pre>
<?php

class user_powermailTimestamp {

// Function preflight() will be used from typoscript
function preflight($content='', $conf=array()) {
$value = $GLOBALS['TSFE']->fe_user->sesData['powermail_'.$conf['userFunc.']['formuid']][$conf['userFunc.']['field']];
return $this->getDate($value);
}

// Main getDate() changes a date in any format to an unix timestamp
function getDate($string, $default = 'now', $timestamp = 1) {
$error = 0; // no error at the beginning
$string = str_replace(array('-', '_', ':', '+', ',', ' '), '.', $string); // change 23-12-2009 -> 23.12.2009 AND "05:00 23.01.2009" -> 05.00.23.01.2009
if (method_exists('t3lib_div', 'trimExplode')) $dateParts = t3lib_div::trimExplode('.', $string, 1); else $dateParts = explode('.', $string); // split at .

if (count($dateParts) === 3) { // only if there are three parts like "23.12.2009"
if (strlen($dateParts[0]) <= 2 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) <= 2) { // xx.xx.xx
$string = strtotime($dateParts[2].'-'.$dateParts[1].'-'.$dateParts[0]); // change to timestamp
}
elseif (strlen($dateParts[0]) == 4 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) <= 2) { // xxxx.xx.xx
$string = strtotime($dateParts[0].'-'.$dateParts[1].'-'.$dateParts[2]); // change to timestamp
}
elseif (strlen($dateParts[0]) <= 2 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) == 4) { // xx.xx.xxxx
$string = strtotime($dateParts[2].'-'.$dateParts[1].'-'.$dateParts[0]); // change to timestamp
}
else { // error
$error = 1; // error
}
} elseif (count($dateParts) === 5) { // only if there are five parts like "05.00.23.01.2009"
$string = strtotime($dateParts[4].'-'.$dateParts[3].'-'.$dateParts[2].' '.$dateParts[0].':'.$dateParts[1].':00'); // change to timestamp
} else { // more than 3 parts - so error
$error = 1; // error
}
$string = date('Y-m-d', $string); // For default: change 1234567 -> 1.1.1979
if ($timestamp) $string = strtotime($string); // Change back 1.1.1979 -> 1234567
if ($error) $string = ($default == 'now' ? time() : $default); // show default value

return $string;
}
}

?>
</pre>

=== Dropdownfeld mit Werten aus der Datenbank ===
==== Beispiel 1 ====
Quelle: http://www.typo3.net/forum/thematik/zeige/thema/77259/?show=1 Zugriff: 2013-10

1. Neues Powermail Feld anlegen (typoscript) im Feld Typoscript Objekt z.B. lib.objectname angeben

2. Eine Selectabfrage in TS (Hole name, uid von tt_address der Seite 5):

TS
<pre>
lib.objectname {
10 = TEXT
10.value = <label for="uid33">Select:</label>
20 = CONTENT
20.wrap = <select id="uid33" name="tx_powermail_pi1[uid33]" size="1">|</select>
20 {
table = tt_address
select {
pidInList = 5
orderBy = name
}
renderObj = COA
renderObj {
10 = COA
10 {
10 = TEXT
10 {
field = uid
wrap = <option value="|">
}
20 = TEXT
20 {
field = name
wrap = |</option>
}
}
}
}
}
</pre>

Ergebnis:

Dynamische Selecterbox, mit dem HTML Code:
<pre>
<label for="uid33">Select:</label>
<select id="uid33" name="tx_powermail_pi1[uid33]" size="1">
<option value="23">Name1</option>
<option value="24">Name2</option>
</select>
</pre>

=== Datenspeicherung in m:n Tabellen ===
Quelle: http://typo3-blog.net/tutorials/news/powermail-tt-news-mn-tabelle.html 2013-10

Powermail lässt sich nicht nur zum Versenden von Mails sondern auch zum Erstellen von Inhaltselementen nutzen. Dazu dient die TYPO3 Option dbEntry. Mit Hilfe dieser Option ist es sogar möglich MN-Tabellen zu befüllen, welches wenig bekannt ist. Anbei ein Beispiel, wie Eine tt_news Nachricht erzeugt und direkt in Kategorie Nr. 2 eingefügt werden kann:
<pre>
plugin.tx_powermail_pi1.upload.folder = uploads/pics/
plugin.tx_powermail_pi1.dbEntry.tt_news {
# Neue Nachrichten müssen durch Admin genehmigt werden
_enable = TEXT
_enable.value = 0
pid = TEXT
pid.value = 2
tstamp = TEXT
tstamp.data = date:U
crdate = TEXT
crdate.data = date:U

_mn = COA
_mn.10 = COA
# 1 muss Namen der mn Tabelle enthalten
_mm.10.1 = TEXT
_mm.10.1.value = tt_news_cat_mm
# 2 ist der Name der Fremdtabelle, hier News Kategorie
_mm.10.2 = TEXT
_mm.10.2.value = tt_news_cat
# 3 die Fremd uid, hier uid der Newskategorie
_mm.10.3 = TEXT
_mm.10.3.value = 2

# 139 ist die uid des Contenelements, welches das Powermailformular darstellt
# 15 ist die uid des einzelnen Feldes.
title = TEXT
title.data = TSFE:fe_user|sesData|powermail_139|uid15
author_email = TEXT
author_email.data = TSFE:fe_user|sesData|powermail_139|uid21
author = TEXT
author.data = TSFE:fe_user|sesData|powermail_139|uid739
# short = TEXT
# short.data = TSFE:fe_user|sesData|powermail_139|uid742
bodytext = TEXT
bodytext.data = TSFE:fe_user|sesData|powermail_139|uid19
datetime = TEXT
datetime.data = TSFE:fe_user|sesData|powermail_139|uid17
keywords = TEXT
keywords.data = TSFE:fe_user|sesData|powermail_139|uid41
}
</pre>

=== Felder vorausfüllen ===
Quelle: http://typo3blogger.de/powermail-trickkiste-teil-2-%E2%80%93-felder-vorbelegen/
==== Über GET Parameter ====
Dropdown
http://www.einpraegsam.net/kontakt.html?tx_powermail_pi1[uid24]=TYPO3%20Extension%20powermail
Input
index.php?id=1&tx_powermail_pi1[uid12]=Hallo

Checkbox
index.php?id=1&tx_powermail_pi1[uid13][0]=1

==== Über TypoScript ====
Vorfüllen mit TypoScript:
Durch eine Vorbelegung mit TypoScript gibt es kaum noch Grenzen. Statische Werte, GET und POST Parameter und userFuncs können verwendet werden. Nachfolgend ein paar Beispiele.
<pre>
plugin.tx_powermail_pi1 {
prefill {
# Fülle Feld 1 mit statischem Wert
uid1 = TEXT
uid1.value = blabla

# Fülle Feld 2 mit aktuellem timestamp
uid2 = TEXT
uid2.data = date:U

# Feld 3 mit Datum
uid3 = TEXT
uid3.data = date:U
uid3.strftime = Datum: %d.%m.%Y

# Feld 4 mit IP Adresse
uid4 = TEXT
uid4.data = getIndpEnv:REMOTE_ADDR

# Feld 5 und 6 mit Wert aus aktueller URL
# index.php?id=123&wert=Ort
uid5 = TEXT
uid5.data = GP:wert
uid5.htmlSpecialChars = 1

# index.php?id=123&tx_ttnews[tt_news]=95
uid5 = TEXT
uid5.data = GP:tx_ttnews|tt_news
uid5.wrap = Wir befinden uns auf der Newsdetailseite mit der UID|
uid5.intval = 1
}
}
</pre>
Hinweis:
1. Im Beispiel 4 und 5 werden Benutzerdefinierte Werte (GET oder POST) verwendet. Hier ist ein Absichern gegen XSS unabdingbar. Mit intval oder htmlSpecialChars lassen sich Werte innerhalb von TypoScript leicht absichern.
2. Falls ein Wert eines Feldes in der Session liegt, hat dieser Vorrang.
3. Ein Selectfeld wird automatisch vorselektiert wenn der vorgegebene Wert auch zur Auswahl steht

=== User basierter Upload Ordner ===
ich möchte die in einem Upload-Formular übermittelten Dateien in ein bestimmtes Verzeichnis (fileadmin/user_upload/verzeichnis/) schieben. Das funktioniert auch mit folgender Konstanten:

plugin.powermail.upload.folder = /fileadmin/user_upload/vkb-uploads/

Die Dateien landen im richtigen Ordner. Allerdings wird in der Powermail-Ansicht im Backend, dieser Pfad nicht übernommen. Ich lasse mir also die eingegangenen Powermails anzeigen und hier ist ja dann die übertragene Datei entsprechend verlinkt, aber eben nicht mit dem von mir vorgegebenem Pfad sondern mit dem Standard-Ordner (uploads/tx_powermail/files/Dateiname.abc).

Lösung anscheinend selbst gefunden.

Ich habe alle möglichen Dateien durchsuchen lassen, in denen der Pfad 'uploads/tx_powermail/files/' gesetzt ist und die Datei pageTSconfig.txt gefunden.

Hieraus konnte ich schlussfolgern, dass der folgende Schnipsel im TSConfig des Sysordners in dem die Mails auflaufen hinterlegt sein muss um mein Problem zu beheben:
<pre>
tx_powermail_mod1.config {
list {
uploadFolder = mein/pfad/zu/den/dateianhängen/
}
}
</pre>

TYPO3 - Powermail

2017-11-22T16:57:41Z

37.49.32.84: /* E-Mail Empfänger abhängig von Feldwerten */

Powermail Extension
== Letzte Version für TYPO3 4.5 ==
== Powermail Conditions ==

== Snippets ==

=== E-Mail Empfänger abhängig von Feldwerten (powermail > 2 ===
http://typo3.3.n7.nabble.com/Powermail-2-Dynamischer-Empfanger-je-nach-Betreff-td269199.html

ich hatte das in einem Projekt so gelöst:
(läuft unter Typo3 6.1 und Powermail 2.0)

1) Betreff-Auswahl mit Select-Feld so wie du

2) Im Powermail-Plugin im Reiter "Empfänger" folgendes:

Name des Empfängers:{f:cObject(typoscriptObjectPath:'lib.receiver_name')}

E-Mail des Empfängers:

{f:cObject(typoscriptObjectPath:'lib.receiver_email')}

Betreff der Mail an den Empfänger:

{f:cObject(typoscriptObjectPath:'lib.subject')}

3)
Im TypoScript:
<pre>
lib.receiver_email = CASE
lib.receiver_email {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = [hidden email]
1 = TEXT
1.value = [hidden email]
2 = TEXT
2.value = [hidden email]
3 = TEXT
3.value = [hidden email]
}
lib.receiver_name = CASE
lib.receiver_name {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = Firma XY
1 = TEXT
1.value = Firma XY Allgemein
2 = TEXT
2.value = Firma XY Abteilung A
3 = TEXT
3.value = Firma XY Abteilung B
}
lib.subject = TEXT
lib.subject {
# content id 59: field uid 11
key.data = GP:tx_powermail_pi1|field|11
key.intval = 1
default = TEXT
default.value = Allgemeine Anfrage
1 = TEXT
1.value = Allgemeine Anfrage
2 = TEXT
2.value = Anfrage an Abteilung A
3 = TEXT
3.value = Anfrage an Abteilung B
}
</pre>
==== Korrektur für Powermail > 2.1 ====
ich habe jetzt - mit Hilfe des Powermail-Bug-Trackers - eine Lösung für
> 2.1 gefunden. Und zwar werden Felder nicht mehr nach deren ID,
sondern Feldnamen referenziert:

Im TypoScript der Seite:
<pre>
lib.receiver = CASE
lib.receiver {
# Übergebener Wert
key.field = 0

default = TEXT
default.value = [hidden email]
# Mitgliederverwaltung
member = TEXT
member.value = [hidden email]
}
</pre>
In das Empfänger-Eingabefeld:
{f:cObject(typoscriptObjectPath:'lib.receiver',data:'{betreff}')}
=== E-Mail Empfänger abhängig von Feldwerten ===
==== Quellen ====
http://blog.marmalade.de/2010/06/powermail-e-mailempfanger-mit-case-unterscheidung-uber-typoscript-zuweisen/ (3/2012)

http://typo3blogger.de/powermail-empfanger-im-frontend-wahlen/ (3/2012)
Verschiedene Möglichkeiten:
* Direkt (schlecht)
* Über dynamisches TypoScript
* Angepasste Datenbankabfrage

==== Direkt ====
Im Empfänger Feld kann man direkt einen Feldmarker angeben z.B.: ###UID234###, dann wird direkt der Wert des Feldes benutzt. Schlecht, weil einfach zu manipulieren (potentielle Spamschleuder)

==== E-Mail über dynamisches TypoScript ====
TS
<pre>
// Case Objekt das den Wert eines Powermail Feldes auswertet.
emailan = CASE
emailan {
### Unterschiedung anhand Feld mit der UID 34 (Form hat id 25)
key.data = TSFE:fe_user|sesData|powermail_25|uid34
### Standardwert
default = TEXT
default.value = info@indihar.de
### Wert bei Auswahl "empf2"
empf2 = TEXT
empf2.value = schlegel@geo-bit.de
}

// neuen dynamischen Powermailmarker (###POWERMAIL_TYPOSCRIPT_EMPFAENGER###)
// dieser kann im Formular im Empfängerfeld eingetragen werden.
plugin.tx_powermail_pi1.dynamicTyposcript {
empfaenger < emailan
}

</pre>
==== Angepasste Datenbankabfrage ====
http://typo3blogger.de/powermail-empfanger-im-frontend-wahlen/

http://www.typo3.net/forum/list/list_post//76461/?howto=1&page=1

http://typo3.org/documentation/document-library/extension-manuals/powermail/1.4.15/view/1/11/#id4334579

Die Extension Powermail bietet eine komfortable Möglichkeit Formulare zusammenzuklicken – übrigens auch für Redakteure. Selbstverständlich ist Skalierbarkeit und Flexibilität ein großes Thema.
So ist es auch einfach möglich, den Empfänger im Frontend auszuwählen.

Im Netz gibt es schon ein paar Erklärungen zu diesem Thema, aber ich möchte es dennoch noch einmal aufgreifen, da ich oft auf Empfängerwahl angesprochen werde.

Mail-Adressen direkt in der Select Box
Technisch wäre es natürlich kein Problem eine Selectbox mit E-Mail Adressen im Frontend anzeigen zu lassen und im Flexform im Empfängerfeld dieses Feld durch einen Marker wieder aufzugreifen (z.B. ###UID234###).
Der Nachteil liegt aber auf der Hand:
- Mail Adressen können im Frontend aus dem Quelltext ausgelesen werden
- Mail Adressen können einfach manipuliert werden (im schlimmsten Fall stellt ihr so eine Spamschleuder ins Netz)
Diese Methode ist also allenfalls im Intranet nutzbar.

Umweg über Datenbank-UID
Eine andere Idee ist es, Datankbankeinträge (z.B. tt_address oder fe_user) mit E-Mail Adressen vorzunehmen und in einer (z.B.) Selectbox die UID des Datensatzes wieder aufzugreifen.
Beispiel Eintrag im Flexform
In diesem Beispiel hat man die Wahl zwischen UID 1 und 2. Verwendeter Marker ist ###UID42###.
SQL Query Beispiel
Damit Powermail den Umweg über die Datenbank geht, bietet sich der Einsatz des Feldes “Alternative SQL-Query” an.

Weitere Infos
Natürlich kann man auch an ganze Usergroups schicken:

SELECT email FROM fe_users WHERE find_in_set(###UID43###,usergroup) > 0
AND hidden = 0 AND deleted = 0

Beispiel mit fester Usergroup UID44:

SELECT email FROM fe_users WHERE find_in_set(44,usergroup) > 0
AND hidden = 0 AND deleted = 0

Hier ein Beispiel mit Checkboxen (mehrere Empfänger auswählen):

SELECT email FROM fe_users WHERE uid IN(###UID43###)

Eine ganz andere Möglichkeit ist der Einsatz von Dynamictyposcript im Empfängerfeld – auch hier lassen sich einige Anforderungen flexibel umsetzen. Dynamictyposcript in Powermail

=== Formular in Datenbank speichern ===

<pre>
plugin.tx_powermail_pi1{
dbEntry {

# Speicherung für Tabelle ermöglichen
tt_address._enable = TEXT
tt_address._enable.value = 1

# "tt_address.name" mit dem Wert des Powermail felds ausfüllen
tt_content uid 88, field uid18 (###uid18###)
tt_address.name = TEXT
tt_address.name.data = TSFE:fe_user|sesData|powermail_88|uid18

}
}
</pre>

=== Ausführliches Beispiel ===

Constants
<pre>
plugin.powermail.js.alwaysInclude = 1
plugin.powermail.js.includeJquery = 0
plugin.powermail.js.includeJqueryTools = 0
plugin.powermail.js.includeJqueryToolsTabs = 0
plugin.powermail.allow.email2sender = 0
plugin.powermail.PID.dblog = 0
plugin.powermail.markerALL.hideLabel = 1
plugin.powermail.format.datetime = %d.%m.%Y% %H:%M
plugin.powermail.format.date = %d.%m.%Y
plugin.powermail.debug.output =
</pre>

Setup
<pre>
// CSS Pfad ändern (oder gar nicht erst statisch einbinden ;-) )
page.includeCSS.powermail_frontend_basic = fileadmin/templates/onlineboerse/powermail.css
</pre>

==== Datenbank Speicherung mit verschiedenen Optionen ====
Setup
<pre>
// Powermail DB Storage
// Extra userfunc to convert date to unix timestamp
includeLibs.powermailTimestamp = fileadmin/templates/scripts/user_powermailTimestamp.php

plugin.tx_powermail_pi1.dbEntry{
tx_gbbulletin_bulletin {

_enable = TEXT
_enable.value = 1

hidden = TEXT
hidden.value = 1

pid = TEXT
pid.value = 102

tstamp = TEXT
tstamp.data = date:U

crdate = TEXT
crdate.data = date:U

title = TEXT
title.data = TSFE:fe_user|sesData|powermail_214|uid1

author = TEXT
author.data = TSFE:fe_user|sesData|powermail_214|uid2

place = TEXT
place.data = TSFE:fe_user|sesData|powermail_214|uid3

description = TEXT
description.data = TSFE:fe_user|sesData|powermail_214|uid4

contact = TEXT
contact.data = TSFE:fe_user|sesData|powermail_214|uid5

qualification = TEXT
qualification.data = TSFE:fe_user|sesData|powermail_214|uid6

date = USER
date.userFunc = user_powermailTimestamp->preflight
date.userFunc.field = uid7
date.userFunc.formuid = 214

period = TEXT
period.data = TSFE:fe_user|sesData|powermail_214|uid29

end_date = USER
end_date.userFunc = user_powermailTimestamp->preflight
end_date.userFunc.field = uid14
end_date.userFunc.formuid = 214

url = TEXT
url.data = TSFE:fe_user|sesData|powermail_214|uid8

text1 = TEXT
text1.data = TSFE:fe_user|sesData|powermail_214|uid9

cluster = TEXT
cluster.data = TSFE:fe_user|sesData|powermail_214|uid11

# add mm relation to uid 2 of tx_gbbulletin_cluster (via mm table)
_mm = COA
_mm.10 = COA
# 1 is always the mm table
_mm.10.1 = TEXT
_mm.10.1.value = tx_gbbulletin_cluster_mm
# 2 is always the other table
_mm.10.2 = TEXT
_mm.10.2.value = tx_gbbulletin_cluster
# 3 is always the uid of the other table to get a relation to this
# (in this case uid1 of tx_gbbulletin_cluster)
_mm.10.3 = TEXT
_mm.10.3.value = 1

tag = TEXT
tag.data = TSFE:fe_user|sesData|powermail_214|uid12

}

}
</pre>

=== Userfunktion zum umwandeln von Datum in Timestamp ===
Diese Funktion wird im obigen Beispiel zu Datenbankspeicherung verwendet
<pre>
<?php

class user_powermailTimestamp {

// Function preflight() will be used from typoscript
function preflight($content='', $conf=array()) {
$value = $GLOBALS['TSFE']->fe_user->sesData['powermail_'.$conf['userFunc.']['formuid']][$conf['userFunc.']['field']];
return $this->getDate($value);
}

// Main getDate() changes a date in any format to an unix timestamp
function getDate($string, $default = 'now', $timestamp = 1) {
$error = 0; // no error at the beginning
$string = str_replace(array('-', '_', ':', '+', ',', ' '), '.', $string); // change 23-12-2009 -> 23.12.2009 AND "05:00 23.01.2009" -> 05.00.23.01.2009
if (method_exists('t3lib_div', 'trimExplode')) $dateParts = t3lib_div::trimExplode('.', $string, 1); else $dateParts = explode('.', $string); // split at .

if (count($dateParts) === 3) { // only if there are three parts like "23.12.2009"
if (strlen($dateParts[0]) <= 2 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) <= 2) { // xx.xx.xx
$string = strtotime($dateParts[2].'-'.$dateParts[1].'-'.$dateParts[0]); // change to timestamp
}
elseif (strlen($dateParts[0]) == 4 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) <= 2) { // xxxx.xx.xx
$string = strtotime($dateParts[0].'-'.$dateParts[1].'-'.$dateParts[2]); // change to timestamp
}
elseif (strlen($dateParts[0]) <= 2 && strlen($dateParts[1]) <= 2 && strlen($dateParts[2]) == 4) { // xx.xx.xxxx
$string = strtotime($dateParts[2].'-'.$dateParts[1].'-'.$dateParts[0]); // change to timestamp
}
else { // error
$error = 1; // error
}
} elseif (count($dateParts) === 5) { // only if there are five parts like "05.00.23.01.2009"
$string = strtotime($dateParts[4].'-'.$dateParts[3].'-'.$dateParts[2].' '.$dateParts[0].':'.$dateParts[1].':00'); // change to timestamp
} else { // more than 3 parts - so error
$error = 1; // error
}
$string = date('Y-m-d', $string); // For default: change 1234567 -> 1.1.1979
if ($timestamp) $string = strtotime($string); // Change back 1.1.1979 -> 1234567
if ($error) $string = ($default == 'now' ? time() : $default); // show default value

return $string;
}
}

?>
</pre>

=== Dropdownfeld mit Werten aus der Datenbank ===
==== Beispiel 1 ====
Quelle: http://www.typo3.net/forum/thematik/zeige/thema/77259/?show=1 Zugriff: 2013-10

1. Neues Powermail Feld anlegen (typoscript) im Feld Typoscript Objekt z.B. lib.objectname angeben

2. Eine Selectabfrage in TS (Hole name, uid von tt_address der Seite 5):

TS
<pre>
lib.objectname {
10 = TEXT
10.value = <label for="uid33">Select:</label>
20 = CONTENT
20.wrap = <select id="uid33" name="tx_powermail_pi1[uid33]" size="1">|</select>
20 {
table = tt_address
select {
pidInList = 5
orderBy = name
}
renderObj = COA
renderObj {
10 = COA
10 {
10 = TEXT
10 {
field = uid
wrap = <option value="|">
}
20 = TEXT
20 {
field = name
wrap = |</option>
}
}
}
}
}
</pre>

Ergebnis:

Dynamische Selecterbox, mit dem HTML Code:
<pre>
<label for="uid33">Select:</label>
<select id="uid33" name="tx_powermail_pi1[uid33]" size="1">
<option value="23">Name1</option>
<option value="24">Name2</option>
</select>
</pre>

=== Datenspeicherung in m:n Tabellen ===
Quelle: http://typo3-blog.net/tutorials/news/powermail-tt-news-mn-tabelle.html 2013-10

Powermail lässt sich nicht nur zum Versenden von Mails sondern auch zum Erstellen von Inhaltselementen nutzen. Dazu dient die TYPO3 Option dbEntry. Mit Hilfe dieser Option ist es sogar möglich MN-Tabellen zu befüllen, welches wenig bekannt ist. Anbei ein Beispiel, wie Eine tt_news Nachricht erzeugt und direkt in Kategorie Nr. 2 eingefügt werden kann:
<pre>
plugin.tx_powermail_pi1.upload.folder = uploads/pics/
plugin.tx_powermail_pi1.dbEntry.tt_news {
# Neue Nachrichten müssen durch Admin genehmigt werden
_enable = TEXT
_enable.value = 0
pid = TEXT
pid.value = 2
tstamp = TEXT
tstamp.data = date:U
crdate = TEXT
crdate.data = date:U

_mn = COA
_mn.10 = COA
# 1 muss Namen der mn Tabelle enthalten
_mm.10.1 = TEXT
_mm.10.1.value = tt_news_cat_mm
# 2 ist der Name der Fremdtabelle, hier News Kategorie
_mm.10.2 = TEXT
_mm.10.2.value = tt_news_cat
# 3 die Fremd uid, hier uid der Newskategorie
_mm.10.3 = TEXT
_mm.10.3.value = 2

# 139 ist die uid des Contenelements, welches das Powermailformular darstellt
# 15 ist die uid des einzelnen Feldes.
title = TEXT
title.data = TSFE:fe_user|sesData|powermail_139|uid15
author_email = TEXT
author_email.data = TSFE:fe_user|sesData|powermail_139|uid21
author = TEXT
author.data = TSFE:fe_user|sesData|powermail_139|uid739
# short = TEXT
# short.data = TSFE:fe_user|sesData|powermail_139|uid742
bodytext = TEXT
bodytext.data = TSFE:fe_user|sesData|powermail_139|uid19
datetime = TEXT
datetime.data = TSFE:fe_user|sesData|powermail_139|uid17
keywords = TEXT
keywords.data = TSFE:fe_user|sesData|powermail_139|uid41
}
</pre>

=== Felder vorausfüllen ===
Quelle: http://typo3blogger.de/powermail-trickkiste-teil-2-%E2%80%93-felder-vorbelegen/
==== Über GET Parameter ====
Dropdown
http://www.einpraegsam.net/kontakt.html?tx_powermail_pi1[uid24]=TYPO3%20Extension%20powermail
Input
index.php?id=1&tx_powermail_pi1[uid12]=Hallo

Checkbox
index.php?id=1&tx_powermail_pi1[uid13][0]=1

==== Über TypoScript ====
Vorfüllen mit TypoScript:
Durch eine Vorbelegung mit TypoScript gibt es kaum noch Grenzen. Statische Werte, GET und POST Parameter und userFuncs können verwendet werden. Nachfolgend ein paar Beispiele.
<pre>
plugin.tx_powermail_pi1 {
prefill {
# Fülle Feld 1 mit statischem Wert
uid1 = TEXT
uid1.value = blabla

# Fülle Feld 2 mit aktuellem timestamp
uid2 = TEXT
uid2.data = date:U

# Feld 3 mit Datum
uid3 = TEXT
uid3.data = date:U
uid3.strftime = Datum: %d.%m.%Y

# Feld 4 mit IP Adresse
uid4 = TEXT
uid4.data = getIndpEnv:REMOTE_ADDR

# Feld 5 und 6 mit Wert aus aktueller URL
# index.php?id=123&wert=Ort
uid5 = TEXT
uid5.data = GP:wert
uid5.htmlSpecialChars = 1

# index.php?id=123&tx_ttnews[tt_news]=95
uid5 = TEXT
uid5.data = GP:tx_ttnews|tt_news
uid5.wrap = Wir befinden uns auf der Newsdetailseite mit der UID|
uid5.intval = 1
}
}
</pre>
Hinweis:
1. Im Beispiel 4 und 5 werden Benutzerdefinierte Werte (GET oder POST) verwendet. Hier ist ein Absichern gegen XSS unabdingbar. Mit intval oder htmlSpecialChars lassen sich Werte innerhalb von TypoScript leicht absichern.
2. Falls ein Wert eines Feldes in der Session liegt, hat dieser Vorrang.
3. Ein Selectfeld wird automatisch vorselektiert wenn der vorgegebene Wert auch zur Auswahl steht

=== User basierter Upload Ordner ===
ich möchte die in einem Upload-Formular übermittelten Dateien in ein bestimmtes Verzeichnis (fileadmin/user_upload/verzeichnis/) schieben. Das funktioniert auch mit folgender Konstanten:

plugin.powermail.upload.folder = /fileadmin/user_upload/vkb-uploads/

Die Dateien landen im richtigen Ordner. Allerdings wird in der Powermail-Ansicht im Backend, dieser Pfad nicht übernommen. Ich lasse mir also die eingegangenen Powermails anzeigen und hier ist ja dann die übertragene Datei entsprechend verlinkt, aber eben nicht mit dem von mir vorgegebenem Pfad sondern mit dem Standard-Ordner (uploads/tx_powermail/files/Dateiname.abc).

Lösung anscheinend selbst gefunden.

Ich habe alle möglichen Dateien durchsuchen lassen, in denen der Pfad 'uploads/tx_powermail/files/' gesetzt ist und die Datei pageTSconfig.txt gefunden.

Hieraus konnte ich schlussfolgern, dass der folgende Schnipsel im TSConfig des Sysordners in dem die Mails auflaufen hinterlegt sein muss um mein Problem zu beheben:
<pre>
tx_powermail_mod1.config {
list {
uploadFolder = mein/pfad/zu/den/dateianhängen/
}
}
</pre>

Mac - Tipps und Tricks

2017-11-19T22:04:19Z

37.49.32.84: /* Library Ordner anzeigen */

== Shell Skripte ==
http://stackoverflow.com/questions/26235324/how-to-create-a-batch-file-in-mac
<syntaxhighlight lang="winbatch">
#!/bin/bash
FILENAME=`date +"/Volumes/path/to/network/share/Backup/%Y-%m-%d.tgz"`
cd /directory/to/backup || exit 1
tar -cvz "$FILENAME" .
</syntaxhighlight>
You can save that on your Desktop as backup and then go in Terminal and type:
<syntaxhighlight lang="winbatch">
chmod +x ~/Desktop/backup
</syntaxhighlight>

== Mac Wartung ==
=== Recovery Mode ===
=== PRAM löschen ===
== Benutzerordner verschieben ==
=== Variante 1 - Versteckte Option Speicherort ===
Hinweis: Sinnvoll ist ein '''Adminkonto auf dem Startvolume zu belassen''', mit dem man im Notfall arbeiten kann, falls es mal Probleme gibt.
# '''Privatorder''' des Benutzers auf ein anderes Volume '''kopieren''' (dabei darf aber die Funktion "Eigentümer auf diesem Volume ignorieren" nicht aktiviert sein; siehe Info-Fenster für diese Festplatte unter "Freigaben & Zugriffsrechte").
# '''Systemeinstellung > "Benutzer" Kontextmenü''' des betreffenden Benutzers '''"Erweiterte Optionen"'''
# '''"Benutzerordner" > "Auswählen"'''
# Alten Ordner löschen und '''Neustart'''

Nachteil: Manche aus Linux portierte Apps (z.B. Filezilla) arbeiten nicht mit dem Library Ordner und finden u.U. manche User-Einstellungen nicht, bzw. wollen suchen im Standardpfad. Dafür ist die Symlink Methode besser.

=== Variante 2 - Symlink ===
Hinweis: Vielleicht ist es hier Sinnvoll nur die Dokumente zu verschieben. Auf diese Weise bleiben die Library Daten im schnellen Zugriff auf der SSD?

http://www.macnotes.de/2011/08/31/mac-os-x-benutzerordner-auf-anderes-volume-verschieben/

==== Vorbereitung ====
* Temporären Admin User anlegen (s.o.)
* Festplatten sollten finalen Namen haben
* Mit temporärem Admin anmelden
==== Benutzerordner verschieben ====
* Benutzerordner verschieben über Terminal
sudo ditto -rsrcFork /Users/Benutzer /Volumes/Daten/Benutzer
sudo gibt root Rechte, ditto sorgt dafür, daß Metadaten verschoben werden können.

* Original umbenennen / verstecken
sudo mv /Users/Benutzer /Users/Benutzer.backup

* Symlink erzeugen
sudo ln -s /Volumes/Daten/Benutzer /Users/Benutzer

* Prüfen ob alles stimmt
<pre>
rechnername:~ testadmin$ ls -l /Users
total 10
drwxrwxrwt 5 root wheel 170 23 Aug 17:54 Shared
lrwxr-xr-x 1 root admin 21 23 Aug 16:10 testadmin
lrwxr-xr-x 1 root admin 21 23 Aug 16:10 Benutzer.backup
lrwxr-xr-x 1 root admin 21 23 Aug 16:10 Benutzer -> /Volumes/Daten/Benutzer
rechnername:~ testadmin$
</pre>
* Temporären Account wieder löschen

==== Einzelne Ordner verschieben ====
Dafür sind die Schritte mit ditto, mv und ln für alle Ordner zu wiederholen, die weg sollen. Zu beachten ist, dass die Ordner für “Musik”, “Filme”, “Bilder” usw. auf englisch sind – wer nachschauen möchte, wie sie im Original heißen, gibt im Terminal ein:

ls -l /Users/Benutzer/

== Tools ==
=== Screenshots erstellen ===

Command-Shift-3 -> Desktop Foto
Command-Shift-4 -> Bereich auswählen und fotografieren
Command-Shift-4 danach Space -> App Window fotografieren
+ Control -> speichert das Foto in einem beliebigen Ordner

Außerdem ist die App '''Bildschirmfoto''' (Grab) mit an Bord

=== Dictionary ===
Cursor über Text und Command + Control + D

== Sonderzeichen ==
In den meisten Menüs kann man sie über Bearbeiten -> Sonderzeichen aufrufen. Shortcut ctrl+cmd + Leertaste.

Viele sind über Alt+Key zu erreichen z.B. die Tilde über Alt+N

== Nützliche Shortcuts ==
Grundsätzlich viel was auf Windows mit STRG + Taste geht, geht auf dem Mac mit Apfel (CMD) + Taste

Command + Shift + V to paste text without formatting.
Command + Entfernen -> Löschen statt Papierkorb
Command + Option + Control + 8 -> Invertierte Farben

== Prozesse und System ==
=== Schnell mal Speicher frei machen wenn der Rechner langsam wird===

Terminal eingeben:
purge
=== Schnell zwischen Audiodevices umschalten ===
Option + Klick auf Lautsprechersymbol

=== Lautstärke und Helligkeit ===
FineTuning
Shift + Alt + Lautstärke/Helligkeit
Kein Restart Sound
Beim Restart Mute Knopf drücken
Kein Geräusch beim Lautstärke verändern
+ Shift

== Finder Tricks ==
=== Library Ordner anzeigen ===
Gehe zu > Alt Taste

oder im Finder
cmd - j

oder dauerhaft anzeigen mit Terminal
chflags nohidden ~/Library/
verstecke ihn wieder mit
chflags hidden ~/Library/

==== Firefox und Thunderbird Benutzerprofile wieder herstellen ====
https://support.mozilla.org/de/kb/benutzerprofile-mit-ihren-persoenlichen-daten#w_wie-finde-ich-mein-profil

https://support.mozilla.org/de/kb/Benutzerprofile-Thunderbird#w_wo-wird-mein-profil-gespeichert

Firefox Profil im Mac liegt in:
Library > Application Support > Firefox > Profiles

Thunderbird:
Library > Thunderbird > Profiles

Tipp den versteckten Ordner Library kann man sehen wenn man im Finder auf Gehe zu geht und dann die alt Taste drückt.

Man kann Profile einfach verschieben. Das Profil sollte nachher den gleichen Namen haben wir vorher, damit Firefox es übernimmt. Im Zweifel Ordner umbenennen.

== Programme ==
=== Shortcuts ===
http://www.hcs.harvard.edu/~jrus/Site/System%20Bindings.html

=== Einstellungen und Konfiguration von Programmen auf dem Mac ===
Es gibt eine Reihe von Orten in denen Programme ihre Einstellungen hinterlegen, bzw beziehen.
# Systemeinstellungen (Systemeinstellungen > Keyboard) Standardkeybindings sind z.B. hier hinterlegt: ''/System/‍Library/‍Frameworks/‍AppKit.framework/‍Resources/‍StandardKeyBinding.dict''). Man kann sie auch überschreiben im obigen Fall legt man dann eine Datei hier an: ''~/Library/‍KeyBindings/‍DefaultKeyBinding.dict''.
# Programmordner (z.B.: ''/path/‍to/‍TextMate.app/‍Contents/‍Resources/‍'')
# User Ordner (z.b.: ''~/Library/‍Application Support/‍TextMate'' )
In vielen Fällen kann man Einstellungen aus dem Programmordner kopieren und im User Ordner die Datei abändern. Die Einstellungen dort haben dann Vorrang.

==== Beispiel Shortcuts von Textmate ====
Default ist in
/path/‍to/‍TextMate.app/‍Contents/‍Resources/‍KeyBindings.dict
Und kann man hierhin kopieren und ändern:
~/Library/‍Application Support/‍TextMate/KeyBindings.dict

== Autostart von Programmen auf dem Mac ==
# Checken ob das Programm selbst eine ''Option zum Einstellen'' hat
# ''Einstellungen > Benutzer und Gruppen > MeinBenutzer > Anmeldeobjekte ''Alles was hier drin ist wird automatisch gestartet. Ausblenden bedeutet, dass das Programm zwar gestartet, aber nicht im Vordergrund angezeigt wird.
# ''/Library/LaunchDaemons'' oder ''LaunchAgents''
=== Firefox ===
==== Firefox Lesezeichen wieder herstellen ====

JavaScript - iOS Orientation Change Fix

2017-10-30T09:41:25Z

37.49.32.84: Die Seite wurde neu angelegt: „<syntaxhighlight lang="javascript"> /*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto. MIT / GPLv2 License. */ (funct…“

<syntaxhighlight lang="javascript">
/*! A fix for the iOS orientationchange zoom bug.
Script by @scottjehl, rebound by @wilto.
MIT / GPLv2 License.
*/
(function(w){

// This fix addresses an iOS bug, so return early if the UA claims it's something else.
var ua = navigator.userAgent;
if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){
return;
}

var doc = w.document;

if( !doc.querySelector ){ return; }

var meta = doc.querySelector( "meta[name=viewport]" ),
initialContent = meta && meta.getAttribute( "content" ),
disabledZoom = initialContent + ",maximum-scale=1",
enabledZoom = initialContent + ",maximum-scale=10",
enabled = true,
x, y, z, aig;

if( !meta ){ return; }

function restoreZoom(){
meta.setAttribute( "content", enabledZoom );
enabled = true;
}

function disableZoom(){
meta.setAttribute( "content", disabledZoom );
enabled = false;
}

function checkTilt( e ){
aig = e.accelerationIncludingGravity;
x = Math.abs( aig.x );
y = Math.abs( aig.y );
z = Math.abs( aig.z );

// If portrait orientation and in one of the danger zones
if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
if( enabled ){
disableZoom();
}
}
else if( !enabled ){
restoreZoom();
}
}

w.addEventListener( "orientationchange", restoreZoom, false );
w.addEventListener( "devicemotion", checkTilt, false );

})( this );
</syntaxhighlight>

JavaScript - Plugins

2017-10-30T09:40:50Z

37.49.32.84:

Libraries Skripte und Plugins für JavaScript, sortiert nach Kategorien
== Links ==
http://www.jqueryscript.net/

== Images Loaded ==
Testen ob alle Bilder geladen sind, um dann weitere Funktionen auzuführen.

[[JavaScript - Images Loaded]]

== Animation ==
=== CreateJS ===
Tools für Animation und Interaktion

http://createjs.com

=== jQuery Appear ===
[[jQuery Appear - Plugin]] - Events wenn Elemente im Viewport auftauchen / verschwinden

=== jQuery Easing ===
Easing Kurven für Animationen [[jQuery Easing - Plugin]]

=== Simple Text Rotator ===

<syntaxhighlight lang="javascript">
// Simple Text Rotator
!function(e){var t={animation:"dissolve",separator:",",speed:2e3};e.fn.textrotator=function(n){var r=e.extend({},t,n);return this.each(function(){var t=e(this);var n=[];e.each(t.text().split(r.separator),function(e,t){n.push(t)});t.text(n[0]);var i=function(){switch(r.animation){case"dissolve":t.animate({textShadowBlur:20,opacity:0},500,function(){s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.text(n[s+1]).animate({textShadowBlur:0,opacity:1},500)});break;case"flip":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip").show().css({"-webkit-transform":" rotateY(-180deg)","-moz-transform":" rotateY(-180deg)","-o-transform":" rotateY(-180deg)",transform:" rotateY(-180deg)"});break;case"flipUp":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip up").show().css({"-webkit-transform":" rotateX(-180deg)","-moz-transform":" rotateX(-180deg)","-o-transform":" rotateX(-180deg)",transform:" rotateX(-180deg)"});break;case"flipCube":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube").show().css({"-webkit-transform":" rotateY(180deg)","-moz-transform":" rotateY(180deg)","-o-transform":" rotateY(180deg)",transform:" rotateY(180deg)"});break;case"flipCubeUp":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube up").show().css({"-webkit-transform":" rotateX(180deg)","-moz-transform":" rotateX(180deg)","-o-transform":" rotateX(180deg)",transform:" rotateX(180deg)"});break;case"spin":if(t.find(".rotating").length>0){t.html(t.find(".rotating").html())}s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.wrapInner("<span class='rotating spin' />").find(".rotating").hide().text(n[s+1]).show().css({"-webkit-transform":" rotate(0) scale(1)","-moz-transform":"rotate(0) scale(1)","-o-transform":"rotate(0) scale(1)",transform:"rotate(0) scale(1)"});break;case"fade":t.fadeOut(r.speed,function(){s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.text(n[s+1]).fadeIn(r.speed)});break}};setInterval(i,r.speed)})}}(window.jQuery)

</syntaxhighlight>

=== Wow Reveal Animations ===
Kostenpflichtig für kommerzielle Seiten. Developer Lizenz ca 99$. Enthalten z.B. bei angelajochum.de. Kann kostenlos geladen werden zum testen.

https://github.com/matthieua/WOW

http://mynameismatthieu.com/WOW/index.html

=== Flippy Text Effekt ===
https://github.com/yemM/flippy

Verwendet in Hera Template

== Navigation ==
=== Pushy ===
Gutes Mobiles Off-Canvas Menu

[[Pushy Menu]]
=== Meanmenu ===
Verwandelt ein Normales verschachteltes Menu in ein gut zu bediendendes Mobiles Menu.

[[Meanmenu.js - jQuery Plugin]] (1.x,2.x)

=== jQuery Mobile Menu ===
Mobiles Dropdownmenü aus ul Liste

[[jQuery Mobile Menu - Plugin]]

== Parallax ==
=== jquery-parallax (jQuery) ===
Einfach und effektiv.

[[jquery-parallax]]

=== Stellar.js ===
http://markdalgleish.com/projects/stellar.js/

http://markdalgleish.com/projects/stellar.js/docs/

<syntaxhighlight lang="javascript">
/*! Stellar.js v0.6.2 | Copyright 2014, Mark Dalgleish | http://markdalgleish.com/projects/stellar.js | http://markdalgleish.mit-license.org */
!function(a,b,c,d){function e(b,c){this.element=b,this.options=a.extend({},g,c),this._defaults=g,this._name=f,this.init()}var f="stellar",g={scrollProperty:"scroll",positionProperty:"position",horizontalScrolling:!0,verticalScrolling:!0,horizontalOffset:0,verticalOffset:0,responsive:!1,parallaxBackgrounds:!0,parallaxElements:!0,hideDistantElements:!0,hideElement:function(a){a.hide()},showElement:function(a){a.show()}},h={scroll:{getLeft:function(a){return a.scrollLeft()},setLeft:function(a,b){a.scrollLeft(b)},getTop:function(a){return a.scrollTop()},setTop:function(a,b){a.scrollTop(b)}},position:{getLeft:function(a){return-1*parseInt(a.css("left"),10)},getTop:function(a){return-1*parseInt(a.css("top"),10)}},margin:{getLeft:function(a){return-1*parseInt(a.css("margin-left"),10)},getTop:function(a){return-1*parseInt(a.css("margin-top"),10)}},transform:{getLeft:function(a){var b=getComputedStyle(a[0])[k];return"none"!==b?-1*parseInt(b.match(/(-?[0-9]+)/g)[4],10):0},getTop:function(a){var b=getComputedStyle(a[0])[k];return"none"!==b?-1*parseInt(b.match(/(-?[0-9]+)/g)[5],10):0}}},i={position:{setLeft:function(a,b){a.css("left",b)},setTop:function(a,b){a.css("top",b)}},transform:{setPosition:function(a,b,c,d,e){a[0].style[k]="translate3d("+(b-c)+"px, "+(d-e)+"px, 0)"}}},j=function(){var b,c=/^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,d=a("script")[0].style,e="";for(b in d)if(c.test(b)){e=b.match(c)[0];break}return"WebkitOpacity"in d&&(e="Webkit"),"KhtmlOpacity"in d&&(e="Khtml"),function(a){return e+(e.length>0?a.charAt(0).toUpperCase()+a.slice(1):a)}}(),k=j("transform"),l=a("<div />",{style:"background:#fff"}).css("background-position-x")!==d,m=l?function(a,b,c){a.css({"background-position-x":b,"background-position-y":c})}:function(a,b,c){a.css("background-position",b+" "+c)},n=l?function(a){return[a.css("background-position-x"),a.css("background-position-y")]}:function(a){return a.css("background-position").split(" ")},o=b.requestAnimationFrame||b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame||b.oRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,1e3/60)};e.prototype={init:function(){this.options.name=f+"_"+Math.floor(1e9*Math.random()),this._defineElements(),this._defineGetters(),this._defineSetters(),this._handleWindowLoadAndResize(),this._detectViewport(),this.refresh({firstLoad:!0}),"scroll"===this.options.scrollProperty?this._handleScrollEvent():this._startAnimationLoop()},_defineElements:function(){this.element===c.body&&(this.element=b),this.$scrollElement=a(this.element),this.$element=this.element===b?a("body"):this.$scrollElement,this.$viewportElement=this.options.viewportElement!==d?a(this.options.viewportElement):this.$scrollElement[0]===b||"scroll"===this.options.scrollProperty?this.$scrollElement:this.$scrollElement.parent()},_defineGetters:function(){var a=this,b=h[a.options.scrollProperty];this._getScrollLeft=function(){return b.getLeft(a.$scrollElement)},this._getScrollTop=function(){return b.getTop(a.$scrollElement)}},_defineSetters:function(){var b=this,c=h[b.options.scrollProperty],d=i[b.options.positionProperty],e=c.setLeft,f=c.setTop;this._setScrollLeft="function"==typeof e?function(a){e(b.$scrollElement,a)}:a.noop,this._setScrollTop="function"==typeof f?function(a){f(b.$scrollElement,a)}:a.noop,this._setPosition=d.setPosition||function(a,c,e,f,g){b.options.horizontalScrolling&&d.setLeft(a,c,e),b.options.verticalScrolling&&d.setTop(a,f,g)}},_handleWindowLoadAndResize:function(){var c=this,d=a(b);c.options.responsive&&d.bind("load."+this.name,function(){c.refresh()}),d.bind("resize."+this.name,function(){c._detectViewport(),c.options.responsive&&c.refresh()})},refresh:function(c){var d=this,e=d._getScrollLeft(),f=d._getScrollTop();c&&c.firstLoad||this._reset(),this._setScrollLeft(0),this._setScrollTop(0),this._setOffsets(),this._findParticles(),this._findBackgrounds(),c&&c.firstLoad&&/WebKit/.test(navigator.userAgent)&&a(b).load(function(){var a=d._getScrollLeft(),b=d._getScrollTop();d._setScrollLeft(a+1),d._setScrollTop(b+1),d._setScrollLeft(a),d._setScrollTop(b)}),this._setScrollLeft(e),this._setScrollTop(f)},_detectViewport:function(){var a=this.$viewportElement.offset(),b=null!==a&&a!==d;this.viewportWidth=this.$viewportElement.width(),this.viewportHeight=this.$viewportElement.height(),this.viewportOffsetTop=b?a.top:0,this.viewportOffsetLeft=b?a.left:0},_findParticles:function(){{var b=this;this._getScrollLeft(),this._getScrollTop()}if(this.particles!==d)for(var c=this.particles.length-1;c>=0;c--)this.particles[c].$element.data("stellar-elementIsActive",d);this.particles=[],this.options.parallaxElements&&this.$element.find("[data-stellar-ratio]").each(function(){var c,e,f,g,h,i,j,k,l,m=a(this),n=0,o=0,p=0,q=0;if(m.data("stellar-elementIsActive")){if(m.data("stellar-elementIsActive")!==this)return}else m.data("stellar-elementIsActive",this);b.options.showElement(m),m.data("stellar-startingLeft")?(m.css("left",m.data("stellar-startingLeft")),m.css("top",m.data("stellar-startingTop"))):(m.data("stellar-startingLeft",m.css("left")),m.data("stellar-startingTop",m.css("top"))),f=m.position().left,g=m.position().top,h="auto"===m.css("margin-left")?0:parseInt(m.css("margin-left"),10),i="auto"===m.css("margin-top")?0:parseInt(m.css("margin-top"),10),k=m.offset().left-h,l=m.offset().top-i,m.parents().each(function(){var b=a(this);return b.data("stellar-offset-parent")===!0?(n=p,o=q,j=b,!1):(p+=b.position().left,void(q+=b.position().top))}),c=m.data("stellar-horizontal-offset")!==d?m.data("stellar-horizontal-offset"):j!==d&&j.data("stellar-horizontal-offset")!==d?j.data("stellar-horizontal-offset"):b.horizontalOffset,e=m.data("stellar-vertical-offset")!==d?m.data("stellar-vertical-offset"):j!==d&&j.data("stellar-vertical-offset")!==d?j.data("stellar-vertical-offset"):b.verticalOffset,b.particles.push({$element:m,$offsetParent:j,isFixed:"fixed"===m.css("position"),horizontalOffset:c,verticalOffset:e,startingPositionLeft:f,startingPositionTop:g,startingOffsetLeft:k,startingOffsetTop:l,parentOffsetLeft:n,parentOffsetTop:o,stellarRatio:m.data("stellar-ratio")!==d?m.data("stellar-ratio"):1,width:m.outerWidth(!0),height:m.outerHeight(!0),isHidden:!1})})},_findBackgrounds:function(){var b,c=this,e=this._getScrollLeft(),f=this._getScrollTop();this.backgrounds=[],this.options.parallaxBackgrounds&&(b=this.$element.find("[data-stellar-background-ratio]"),this.$element.data("stellar-background-ratio")&&(b=b.add(this.$element)),b.each(function(){var b,g,h,i,j,k,l,o=a(this),p=n(o),q=0,r=0,s=0,t=0;if(o.data("stellar-backgroundIsActive")){if(o.data("stellar-backgroundIsActive")!==this)return}else o.data("stellar-backgroundIsActive",this);o.data("stellar-backgroundStartingLeft")?m(o,o.data("stellar-backgroundStartingLeft"),o.data("stellar-backgroundStartingTop")):(o.data("stellar-backgroundStartingLeft",p[0]),o.data("stellar-backgroundStartingTop",p[1])),h="auto"===o.css("margin-left")?0:parseInt(o.css("margin-left"),10),i="auto"===o.css("margin-top")?0:parseInt(o.css("margin-top"),10),j=o.offset().left-h-e,k=o.offset().top-i-f,o.parents().each(function(){var b=a(this);return b.data("stellar-offset-parent")===!0?(q=s,r=t,l=b,!1):(s+=b.position().left,void(t+=b.position().top))}),b=o.data("stellar-horizontal-offset")!==d?o.data("stellar-horizontal-offset"):l!==d&&l.data("stellar-horizontal-offset")!==d?l.data("stellar-horizontal-offset"):c.horizontalOffset,g=o.data("stellar-vertical-offset")!==d?o.data("stellar-vertical-offset"):l!==d&&l.data("stellar-vertical-offset")!==d?l.data("stellar-vertical-offset"):c.verticalOffset,c.backgrounds.push({$element:o,$offsetParent:l,isFixed:"fixed"===o.css("background-attachment"),horizontalOffset:b,verticalOffset:g,startingValueLeft:p[0],startingValueTop:p[1],startingBackgroundPositionLeft:isNaN(parseInt(p[0],10))?0:parseInt(p[0],10),startingBackgroundPositionTop:isNaN(parseInt(p[1],10))?0:parseInt(p[1],10),startingPositionLeft:o.position().left,startingPositionTop:o.position().top,startingOffsetLeft:j,startingOffsetTop:k,parentOffsetLeft:q,parentOffsetTop:r,stellarRatio:o.data("stellar-background-ratio")===d?1:o.data("stellar-background-ratio")})}))},_reset:function(){var a,b,c,d,e;for(e=this.particles.length-1;e>=0;e--)a=this.particles[e],b=a.$element.data("stellar-startingLeft"),c=a.$element.data("stellar-startingTop"),this._setPosition(a.$element,b,b,c,c),this.options.showElement(a.$element),a.$element.data("stellar-startingLeft",null).data("stellar-elementIsActive",null).data("stellar-backgroundIsActive",null);for(e=this.backgrounds.length-1;e>=0;e--)d=this.backgrounds[e],d.$element.data("stellar-backgroundStartingLeft",null).data("stellar-backgroundStartingTop",null),m(d.$element,d.startingValueLeft,d.startingValueTop)},destroy:function(){this._reset(),this.$scrollElement.unbind("resize."+this.name).unbind("scroll."+this.name),this._animationLoop=a.noop,a(b).unbind("load."+this.name).unbind("resize."+this.name)},_setOffsets:function(){var c=this,d=a(b);d.unbind("resize.horizontal-"+this.name).unbind("resize.vertical-"+this.name),"function"==typeof this.options.horizontalOffset?(this.horizontalOffset=this.options.horizontalOffset(),d.bind("resize.horizontal-"+this.name,function(){c.horizontalOffset=c.options.horizontalOffset()})):this.horizontalOffset=this.options.horizontalOffset,"function"==typeof this.options.verticalOffset?(this.verticalOffset=this.options.verticalOffset(),d.bind("resize.vertical-"+this.name,function(){c.verticalOffset=c.options.verticalOffset()})):this.verticalOffset=this.options.verticalOffset},_repositionElements:function(){var a,b,c,d,e,f,g,h,i,j,k=this._getScrollLeft(),l=this._getScrollTop(),n=!0,o=!0;if(this.currentScrollLeft!==k||this.currentScrollTop!==l||this.currentWidth!==this.viewportWidth||this.currentHeight!==this.viewportHeight){for(this.currentScrollLeft=k,this.currentScrollTop=l,this.currentWidth=this.viewportWidth,this.currentHeight=this.viewportHeight,j=this.particles.length-1;j>=0;j--)a=this.particles[j],b=a.isFixed?1:0,this.options.horizontalScrolling?(f=(k+a.horizontalOffset+this.viewportOffsetLeft+a.startingPositionLeft-a.startingOffsetLeft+a.parentOffsetLeft)*-(a.stellarRatio+b-1)+a.startingPositionLeft,h=f-a.startingPositionLeft+a.startingOffsetLeft):(f=a.startingPositionLeft,h=a.startingOffsetLeft),this.options.verticalScrolling?(g=(l+a.verticalOffset+this.viewportOffsetTop+a.startingPositionTop-a.startingOffsetTop+a.parentOffsetTop)*-(a.stellarRatio+b-1)+a.startingPositionTop,i=g-a.startingPositionTop+a.startingOffsetTop):(g=a.startingPositionTop,i=a.startingOffsetTop),this.options.hideDistantElements&&(o=!this.options.horizontalScrolling||h+a.width>(a.isFixed?0:k)&&h<(a.isFixed?0:k)+this.viewportWidth+this.viewportOffsetLeft,n=!this.options.verticalScrolling||i+a.height>(a.isFixed?0:l)&&i<(a.isFixed?0:l)+this.viewportHeight+this.viewportOffsetTop),o&&n?(a.isHidden&&(this.options.showElement(a.$element),a.isHidden=!1),this._setPosition(a.$element,f,a.startingPositionLeft,g,a.startingPositionTop)):a.isHidden||(this.options.hideElement(a.$element),a.isHidden=!0);for(j=this.backgrounds.length-1;j>=0;j--)c=this.backgrounds[j],b=c.isFixed?0:1,d=this.options.horizontalScrolling?(k+c.horizontalOffset-this.viewportOffsetLeft-c.startingOffsetLeft+c.parentOffsetLeft-c.startingBackgroundPositionLeft)*(b-c.stellarRatio)+"px":c.startingValueLeft,e=this.options.verticalScrolling?(l+c.verticalOffset-this.viewportOffsetTop-c.startingOffsetTop+c.parentOffsetTop-c.startingBackgroundPositionTop)*(b-c.stellarRatio)+"px":c.startingValueTop,m(c.$element,d,e)}},_handleScrollEvent:function(){var a=this,b=!1,c=function(){a._repositionElements(),b=!1},d=function(){b||(o(c),b=!0)};this.$scrollElement.bind("scroll."+this.name,d),d()},_startAnimationLoop:function(){var a=this;this._animationLoop=function(){o(a._animationLoop),a._repositionElements()},this._animationLoop()}},a.fn[f]=function(b){var c=arguments;return b===d||"object"==typeof b?this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))}):"string"==typeof b&&"_"!==b[0]&&"init"!==b?this.each(function(){var d=a.data(this,"plugin_"+f);d instanceof e&&"function"==typeof d[b]&&d[b].apply(d,Array.prototype.slice.call(c,1)),"destroy"===b&&a.data(this,"plugin_"+f,null)}):void 0},a[f]=function(){var c=a(b);return c.stellar.apply(c,Array.prototype.slice.call(arguments,0))},a[f].scrollProperty=h,a[f].positionProperty=i,b.Stellar=e}(jQuery,this,document);

</syntaxhighlight>

== Lightbox, Gallery & co ==

=== Chocolat ===
Nette responsive Lightbox für Anfänger und Profis

http://chocolat.insipi.de

[[Chocolat Lightbox]]

=== Lightbox ===
Der Klassiker: [[Lightbox jQuery Plugin]]

=== Magnific Popup ===
Galt lange als DER Nachfolger der Lightbox [[Magnific Popup jQuery Plugin]]

== Isotope / Masonry ==
[[JavaScript - Masonry / Isotope]]

== Charts / Counter ==
=== jQuery CountTo ===
<syntaxhighlight lang="javascript">
// jQuery CountTo
!function(t){"use strict";function e(t,e){return t.toFixed(e.decimals)}t.fn.countTo=function(e){return e=e||{},t(this).each(function(){function a(){s+=l,c++,n(s),"function"==typeof o.onUpdate&&o.onUpdate.call(i,s),c>=r&&(f.removeData("countTo"),clearInterval(d.interval),s=o.to,"function"==typeof o.onComplete&&o.onComplete.call(i,s))}function n(t){var e=o.formatter.call(i,t,o);f.text(e)}var o=t.extend({},t.fn.countTo.defaults,{from:t(this).data("from"),to:t(this).data("to"),speed:t(this).data("speed"),refreshInterval:t(this).data("refresh-interval"),decimals:t(this).data("decimals")},e),r=Math.ceil(o.speed/o.refreshInterval),l=(o.to-o.from)/r,i=this,f=t(this),c=0,s=o.from,d=f.data("countTo")||{};f.data("countTo",d),d.interval&&clearInterval(d.interval),d.interval=setInterval(a,o.refreshInterval),n(s)})},t.fn.countTo.defaults={from:0,to:0,speed:1e3,refreshInterval:100,decimals:0,formatter:e,onUpdate:null,onComplete:null}}(jQuery);
</syntaxhighlight>

=== Easy Pie Chart ===
<syntaxhighlight lang="javascript">
/**!
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.6
**/
!function(a,b){"object"==typeof exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],b):b(a.jQuery)}(this,function(a){var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};a.fn.easyPieChart=function(b){return this.each(function(){var d;a.data(this,"easyPieChart")||(d=a.extend({},b,a(this).data()),a.data(this,"easyPieChart",new c(this,d)))})}});
</syntaxhighlight>

== Video ==

=== FitVids ===
Embedding Videos from YouTube, Vimeo,...

[[FitVids jQuery Plugin]] https://github.com/davatron5000/FitVids.js

=== Vide - Video Backgrounds ===

<syntaxhighlight lang="javascript">
/*
* Vide - v0.5.1
* Easy as hell jQuery plugin for video backgrounds.
* http://vodkabears.github.io/vide/
*
* Made by Ilya Makarov
* Under MIT License
*/
!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b("object"==typeof exports?require("jquery"):a.jQuery)}(this,function(a){"use strict";function b(a){var b,c,d,e,f,g,h,i={};for(f=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,",").split(","),h=0,g=f.length;h<g&&(c=f[h],c.search(/^(http|https|ftp):\/\//)===-1&&c.search(":")!==-1);h++)b=c.indexOf(":"),d=c.substring(0,b),e=c.substring(b+1),e||(e=void 0),"string"==typeof e&&(e="true"===e||"false"!==e&&e),"string"==typeof e&&(e=isNaN(e)?e:+e),i[d]=e;return null==d&&null==e?a:i}function c(a){a=""+a;var b,c,d,e=a.split(/\s+/),f="50%",g="50%";for(d=0,b=e.length;d<b;d++)c=e[d],"left"===c?f="0%":"right"===c?f="100%":"top"===c?g="0%":"bottom"===c?g="100%":"center"===c?0===d?f="50%":g="50%":0===d?f=c:g=c;return{x:f,y:g}}function d(b,c){var d=function(){c(this.src)};a('<img src="'+b+'.gif">').on("load",d),a('<img src="'+b+'.jpg">').on("load",d),a('<img src="'+b+'.jpeg">').on("load",d),a('<img src="'+b+'.png">').on("load",d)}function e(c,d,e){if(this.$element=a(c),"string"==typeof d&&(d=b(d)),e?"string"==typeof e&&(e=b(e)):e={},"string"==typeof d)d=d.replace(/\.\w*$/,"");else if("object"==typeof d)for(var f in d)d.hasOwnProperty(f)&&(d[f]=d[f].replace(/\.\w*$/,""));this.settings=a.extend({},g,e),this.path=d;try{this.init()}catch(i){if(i.message!==h)throw i}}var f="vide",g={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",posterType:"detect",resizing:!0,bgColor:"transparent",className:""},h="Not implemented";e.prototype.init=function(){var b,e,f=this,g=f.path,i=g,j="",k=f.$element,l=f.settings,m=c(l.position),n=l.posterType;e=f.$wrapper=a("<div>").addClass(l.className).css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-color":l.bgColor,"background-repeat":"no-repeat","background-position":m.x+" "+m.y}),"object"==typeof g&&(g.poster?i=g.poster:g.mp4?i=g.mp4:g.webm?i=g.webm:g.ogv&&(i=g.ogv)),"detect"===n?d(i,function(a){e.css("background-image","url("+a+")")}):"none"!==n&&e.css("background-image","url("+i+"."+n+")"),"static"===k.css("position")&&k.css("position","relative"),k.prepend(e),"object"==typeof g?(g.mp4&&(j+='<source src="'+g.mp4+'.mp4" type="video/mp4">'),g.webm&&(j+='<source src="'+g.webm+'.webm" type="video/webm">'),g.ogv&&(j+='<source src="'+g.ogv+'.ogv" type="video/ogg">'),b=f.$video=a("<video>"+j+"</video>")):b=f.$video=a('<video><source src="'+g+'.mp4" type="video/mp4"><source src="'+g+'.webm" type="video/webm"><source src="'+g+'.ogv" type="video/ogg"></video>');try{b.prop({autoplay:l.autoplay,loop:l.loop,volume:l.volume,muted:l.muted,defaultMuted:l.muted,playbackRate:l.playbackRate,defaultPlaybackRate:l.playbackRate})}catch(o){throw new Error(h)}b.css({margin:"auto",position:"absolute","z-index":-1,top:m.y,left:m.x,"-webkit-transform":"translate(-"+m.x+", -"+m.y+")","-ms-transform":"translate(-"+m.x+", -"+m.y+")","-moz-transform":"translate(-"+m.x+", -"+m.y+")",transform:"translate(-"+m.x+", -"+m.y+")",visibility:"hidden",opacity:0}).one("canplaythrough.vide",function(){f.resize()}).one("playing.vide",function(){b.css({visibility:"visible",opacity:1}),e.css("background-image","none")}),k.on("resize.vide",function(){l.resizing&&f.resize()}),e.append(b)},e.prototype.getVideoObject=function(){return this.$video[0]},e.prototype.resize=function(){if(this.$video){var a=this.$wrapper,b=this.$video,c=b[0],d=c.videoHeight,e=c.videoWidth,f=a.height(),g=a.width();g/e>f/d?b.css({width:g+2,height:"auto"}):b.css({width:"auto",height:f+2})}},e.prototype.destroy=function(){delete a[f].lookup[this.index],this.$video&&this.$video.off(f),this.$element.off(f).removeData(f),this.$wrapper.remove()},a[f]={lookup:[]},a.fn[f]=function(b,c){var d;return this.each(function(){d=a.data(this,f),d&&d.destroy(),d=new e(this,b,c),d.index=a[f].lookup.push(d)-1,a.data(this,f,d)}),this},a(document).ready(function(){var b=a(window);b.on("resize.vide",function(){for(var b,c=a[f].lookup.length,d=0;d<c;d++)b=a[f].lookup[d],b&&b.settings.resizing&&b.resize()}),b.on("unload.vide",function(){return!1}),a(document).find("[data-vide-bg]").each(function(b,c){var d=a(c),e=d.data("vide-options"),g=d.data("vide-bg");d[f](g,e)})})});

</syntaxhighlight>

=== Vegas Slider ===
Siehe Extra Seite

== Slider & Carousel ==
=== Slick Carousel & Slider ===
Der kann fast alles Slider. Gehört mit Owl Slider zu den vielseitigen.

http://kenwheeler.github.io/slick/

=== Owl Carousel===
[[Owl Carousel - JavaScript Plugin]]

=== Revolution Slider ===
https://revolution.themepunch.com/examples-jquery/

=== FlexSlider ===
[[FlexSlider - JavaScript Plugin]]

=== Vegas Slider ===
Schlichter aber vielseitiger Slider mit schönem KenBurns Effekt und div. Übergängen. Erfordert etwas JS Kenntnisse wenn mehr angepasst werden soll.

[[JavaScript - Vegas Slider]]

=== MultiScroll.js ===
http://alvarotrigo.com/multiScroll

Gegenläufiger Scroller
<syntaxhighlight lang="html5">
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script src="vendors/jquery.easings.min.js"></script>

<script type="text/javascript" src="jquery.multiscroll.js"></script>
</syntaxhighlight>

<syntaxhighlight lang="html5">
<div id="multiscroll">
<div class="ms-left">
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
<div class="ms-right">
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
</div>
</syntaxhighlight>

== DOM Elemente manipulieren ==
=== Match Heights ===
Spalten in der Länge anpassen. Siehe auch Flex Grid in CSS3

[[Equal Heights]]

[[JavaScript - Match Height]]

=== Fit Viewport ===
==== Viewport Height ====
Element an die Höhe des Viewports anpassen
<syntaxhighlight lang="javascript">
$(document).ready(function(){
$("#hero").height($(window).height());
$(window).resize(function(){
$("#hero").height($(window).height());
});
});
</syntaxhighlight>

== Scrolling ==
Hinweis die meisten Scroll To and ScrollTops lassen sich auch mit einfachen jquery Snippets realisieren.
=== Einfaches jQuery Scroll To Top ===
Mehr brauchts nicht :-) [[Scroll ToTop (jQuery)]]

=== Perfect Scrollbar ===
[[Perfect Scrollbar]]

=== Ariel Fiesler ScrollTo ===
https://github.com/flesler/jquery.scrollTo

Lightweight, cross-browser and highly customizable animated scrolling with jQuery

=== Ariel Fiesler LocalScroll ===
https://github.com/flesler/jquery.localScroll

Animated anchor navigation made easy with jQuery

=== Smooth Scroll ===
Oil for Scrolling - damit ruckelt es nicht so beim Scrollen mit dem Mausrad
<syntaxhighlight lang="javascript">
//
// SmoothScroll for websites v1.4.0 (Balazs Galambosi)
// http://www.smoothscroll.net/
//
// Licensed under the terms of the MIT license.
//
// You may use it in your theme if you credit me.
// It is also free to use on any individual website.
//
// Exception:
// The only restriction is to not publish any
// extension for browsers or native application
// without getting a written permission first.
//
!function(){function e(){z.keyboardSupport&&m("keydown",a)}function t(){if(!A&&document.body){A=!0;var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(B=document.compatMode.indexOf("CSS")>=0?o:t,D=t,e(),top!=self)X=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=document.createElement("div");a.style.cssText="position:absolute; z-index:-10000; top:0; left:0; right:0; height:"+B.scrollHeight+"px",document.body.appendChild(a);var i;T=function(){i||(i=setTimeout(function(){L||(a.style.height="0",a.style.height=B.scrollHeight+"px",i=null)},500))},setTimeout(T,10),m("resize",T);var l={attributes:!0,childList:!0,characterData:!1};if(M=new V(T),M.observe(t,l),B.offsetHeight<=n){var c=document.createElement("div");c.style.clear="both",t.appendChild(c)}}z.fixedBackground||L||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(){M&&M.disconnect(),h(I,r),h("mousedown",i),h("keydown",a),h("resize",T),h("load",t)}function n(e,t,o){if(p(t,o),1!=z.accelerationMax){var n=Date.now(),r=n-R;if(r<z.accelerationDelta){var a=(1+50/r)/2;a>1&&(a=Math.min(a,z.accelerationMax),t*=a,o*=a)}R=Date.now()}if(q.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:Date.now()}),!P){var i=e===document.body,l=function(n){for(var r=Date.now(),a=0,c=0,u=0;u<q.length;u++){var d=q[u],s=r-d.start,f=s>=z.animationTime,m=f?1:s/z.animationTime;z.pulseAlgorithm&&(m=x(m));var h=d.x*m-d.lastX>>0,w=d.y*m-d.lastY>>0;a+=h,c+=w,d.lastX+=h,d.lastY+=w,f&&(q.splice(u,1),u--)}i?window.scrollBy(a,c):(a&&(e.scrollLeft+=a),c&&(e.scrollTop+=c)),t||o||(q=[]),q.length?_(l,e,1e3/z.frameRate+1):P=!1};_(l,e,0),P=!0}}function r(e){A||t();var o=e.target,r=u(o);if(!r||e.defaultPrevented||e.ctrlKey)return!0;if(w(D,"embed")||w(o,"embed")&&/\.pdf/i.test(o.src)||w(D,"object"))return!0;var a=-e.wheelDeltaX||e.deltaX||0,i=-e.wheelDeltaY||e.deltaY||0;return K&&(e.wheelDeltaX&&b(e.wheelDeltaX,120)&&(a=-120*(e.wheelDeltaX/Math.abs(e.wheelDeltaX))),e.wheelDeltaY&&b(e.wheelDeltaY,120)&&(i=-120*(e.wheelDeltaY/Math.abs(e.wheelDeltaY)))),a||i||(i=-e.wheelDelta||0),1===e.deltaMode&&(a*=40,i*=40),!z.touchpadSupport&&v(i)?!0:(Math.abs(a)>1.2&&(a*=z.stepSize/120),Math.abs(i)>1.2&&(i*=z.stepSize/120),n(r,a,i),e.preventDefault(),void l())}function a(e){var t=e.target,o=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==N.spacebar;document.contains(D)||(D=document.activeElement);var r=/^(textarea|select|embed|object)$/i,a=/^(button|submit|radio|checkbox|file|color|image)$/i;if(r.test(t.nodeName)||w(t,"input")&&!a.test(t.type)||w(D,"video")||y(e)||t.isContentEditable||e.defaultPrevented||o)return!0;if((w(t,"button")||w(t,"input")&&a.test(t.type))&&e.keyCode===N.spacebar)return!0;var i,c=0,d=0,s=u(D),f=s.clientHeight;switch(s==document.body&&(f=window.innerHeight),e.keyCode){case N.up:d=-z.arrowScroll;break;case N.down:d=z.arrowScroll;break;case N.spacebar:i=e.shiftKey?1:-1,d=-i*f*.9;break;case N.pageup:d=.9*-f;break;case N.pagedown:d=.9*f;break;case N.home:d=-s.scrollTop;break;case N.end:var m=s.scrollHeight-s.scrollTop-f;d=m>0?m+10:0;break;case N.left:c=-z.arrowScroll;break;case N.right:c=z.arrowScroll;break;default:return!0}n(s,c,d),e.preventDefault(),l()}function i(e){D=e.target}function l(){clearTimeout(E),E=setInterval(function(){F={}},1e3)}function c(e,t){for(var o=e.length;o--;)F[j(e[o])]=t;return t}function u(e){var t=[],o=document.body,n=B.scrollHeight;do{var r=F[j(e)];if(r)return c(t,r);if(t.push(e),n===e.scrollHeight){var a=s(B)&&s(o),i=a||f(B);if(X&&d(B)||!X&&i)return c(t,$())}else if(d(e)&&f(e))return c(t,e)}while(e=e.parentElement)}function d(e){return e.clientHeight+10<e.scrollHeight}function s(e){var t=getComputedStyle(e,"").getPropertyValue("overflow-y");return"hidden"!==t}function f(e){var t=getComputedStyle(e,"").getPropertyValue("overflow-y");return"scroll"===t||"auto"===t}function m(e,t){window.addEventListener(e,t,!1)}function h(e,t){window.removeEventListener(e,t,!1)}function w(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function p(e,t){e=e>0?1:-1,t=t>0?1:-1,(Y.x!==e||Y.y!==t)&&(Y.x=e,Y.y=t,q=[],R=0)}function v(e){return e?(O.length||(O=[e,e,e]),e=Math.abs(e),O.push(e),O.shift(),clearTimeout(H),H=setTimeout(function(){window.localStorage&&(localStorage.SS_deltaBuffer=O.join(","))},1e3),!g(120)&&!g(100)):void 0}function b(e,t){return Math.floor(e/t)==e/t}function g(e){return b(O[0],e)&&b(O[1],e)&&b(O[2],e)}function y(e){var t=e.target,o=!1;if(-1!=document.URL.indexOf("www.youtube.com/watch"))do if(o=t.classList&&t.classList.contains("html5-video-controls"))break;while(t=t.parentNode);return o}function S(e){var t,o,n;return e*=z.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*z.pulseNormalize}function x(e){return e>=1?1:0>=e?0:(1==z.pulseNormalize&&(z.pulseNormalize/=S(1)),S(e))}function k(e){for(var t in e)C.hasOwnProperty(t)&&(z[t]=e[t])}var D,M,T,E,H,C={frameRate:150,animationTime:400,stepSize:100,pulseAlgorithm:!0,pulseScale:4,pulseNormalize:1,accelerationDelta:50,accelerationMax:3,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!1,fixedBackground:!0,excluded:""},z=C,L=!1,X=!1,Y={x:0,y:0},A=!1,B=document.documentElement,O=[],K=/^Mac/.test(navigator.platform),N={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},q=[],P=!1,R=Date.now(),j=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),F={};window.localStorage&&localStorage.SS_deltaBuffer&&(O=localStorage.SS_deltaBuffer.split(","));var I,_=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),V=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,$=function(){var e;return function(){if(!e){var t=document.createElement("div");t.style.cssText="height:10000px;width:1px;",document.body.appendChild(t);var o=document.body.scrollTop;document.documentElement.scrollTop;window.scrollBy(0,1),e=document.body.scrollTop!=o?document.body:document.documentElement,window.scrollBy(0,-1),document.body.removeChild(t)}return e}}(),U=window.navigator.userAgent,W=/Edge/.test(U),G=/chrome/i.test(U)&&!W,J=/safari/i.test(U)&&!W,Q=/mobile/i.test(U),Z=(G||J)&&!Q;"onwheel"in document.createElement("div")?I="wheel":"onmousewheel"in document.createElement("div")&&(I="mousewheel"),I&&Z&&(m(I,r),m("mousedown",i),m("load",t)),k.destroy=o,window.SmoothScrollOptions&&k(window.SmoothScrollOptions),"function"==typeof define&&define.amd?define(function(){return k}):"object"==typeof exports?module.exports=k:window.SmoothScroll=k}();

</syntaxhighlight>

== Typography ==
=== Letter.js ===
Zerpflückt Texte und wrappt Buchstaben / Wörter / Zeilen in durchnummerierte Klassen. Diese kann man dann cool Stylen.

https://github.com/davatron5000/Lettering.js

=== Fittext ===
Responsive Textgrößen in Typographie-Spielereien für Überschriften etc.

http://fittextjs.com/

== Google Maps mit gmaps.js ==
https://hpneo.github.io/gmaps/
Einfache Karte
<syntaxhighlight lang="javascript">
new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333
});
</syntaxhighlight>
Grey Style Karte
<syntaxhighlight lang="javascript">
//Google map
/*global $:false */
var map;
$(document).ready(function(){"use strict";
map = new GMaps({
disableDefaultUI: true,
scrollwheel: false,
el: '#map',
lat: 48.4912812,
lng: 9.2175255
});
map.drawOverlay({
lat: map.getCenter().lat(),
lng: map.getCenter().lng(),
layer: 'overlayLayer',
content: '<div class="overlay"></div>',
verticalAlign: 'center',
horizontalAlign: 'center'
});
var styles = [
{
"featureType": "poi",
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 },
{ "lightness": 37 },
{ "gamma": 0.62 },
{ "hue": "#ff0000" },
{ "saturation": -93 }
]
},{
"featureType": "poi",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -1 },
{ "color": "#ffffff" },
{ "weight": 0.2 }
]
},{
"featureType": "road",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -98 }
]
},{
"featureType": "landscape",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -89 }
]
},{
"featureType": "water",
"stylers": [
{ "hue": "#cfa144" },
{ "weight": 0.4 },
{ "saturation": -38 }
]
}
];

map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});

map.setStyle("map_style");

});
</syntaxhighlight>
<syntaxhighlight lang="javascript">
"use strict";
(function(root, factory) {
if(typeof exports === 'object') {
module.exports = factory();
}
else if(typeof define === 'function' && define.amd) {
define(['jquery', 'googlemaps!'], factory);
}
else {
root.GMaps = factory();
}

}(this, function() {

/*!
* GMaps.js v0.4.25
* http://hpneo.github.com/gmaps/
*
* Copyright 2017, Gustavo Leon
* Released under the MIT License.
*/

var extend_object = function(obj, new_obj) {
var name;

if (obj === new_obj) {
return obj;
}

for (name in new_obj) {
if (new_obj[name] !== undefined) {
obj[name] = new_obj[name];
}
}

return obj;
};

var replace_object = function(obj, replace) {
var name;

if (obj === replace) {
return obj;
}

for (name in replace) {
if (obj[name] != undefined) {
obj[name] = replace[name];
}
}

return obj;
};

var array_map = function(array, callback) {
var original_callback_params = Array.prototype.slice.call(arguments, 2),
array_return = [],
array_length = array.length,
i;

if (Array.prototype.map && array.map === Array.prototype.map) {
array_return = Array.prototype.map.call(array, function(item) {
var callback_params = original_callback_params.slice(0);
callback_params.splice(0, 0, item);

return callback.apply(this, callback_params);
});
}
else {
for (i = 0; i < array_length; i++) {
callback_params = original_callback_params;
callback_params.splice(0, 0, array[i]);
array_return.push(callback.apply(this, callback_params));
}
}

return array_return;
};

var array_flat = function(array) {
var new_array = [],
i;

for (i = 0; i < array.length; i++) {
new_array = new_array.concat(array[i]);
}

return new_array;
};

var coordsToLatLngs = function(coords, useGeoJSON) {
var first_coord = coords[0],
second_coord = coords[1];

if (useGeoJSON) {
first_coord = coords[1];
second_coord = coords[0];
}

return new google.maps.LatLng(first_coord, second_coord);
};

var arrayToLatLng = function(coords, useGeoJSON) {
var i;

for (i = 0; i < coords.length; i++) {
if (!(coords[i] instanceof google.maps.LatLng)) {
if (coords[i].length > 0 && typeof(coords[i][0]) === "object") {
coords[i] = arrayToLatLng(coords[i], useGeoJSON);
}
else {
coords[i] = coordsToLatLngs(coords[i], useGeoJSON);
}
}
}

return coords;
};

var getElementsByClassName = function (class_name, context) {
var element,
_class = class_name.replace('.', '');

if ('jQuery' in this && context) {
element = $("." + _class, context)[0];
} else {
element = document.getElementsByClassName(_class)[0];
}
return element;

};

var getElementById = function(id, context) {
var element,
id = id.replace('#', '');

if ('jQuery' in window && context) {
element = $('#' + id, context)[0];
} else {
element = document.getElementById(id);
};

return element;
};

var findAbsolutePosition = function(obj) {
var curleft = 0,
curtop = 0;

if (obj.getBoundingClientRect) {
var rect = obj.getBoundingClientRect();
var sx = -(window.scrollX ? window.scrollX : window.pageXOffset);
var sy = -(window.scrollY ? window.scrollY : window.pageYOffset);

return [(rect.left - sx), (rect.top - sy)];
}

if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return [curleft, curtop];
};

var GMaps = (function(global) {
"use strict";

var doc = document;
/**
* Creates a new GMaps instance, including a Google Maps map.
* @class GMaps
* @constructs
* @param {object} options - `options` accepts all the [MapOptions](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) and [events](https://developers.google.com/maps/documentation/javascript/reference#Map) listed in the Google Maps API. Also accepts:
* * `lat` (number): Latitude of the map's center
* * `lng` (number): Longitude of the map's center
* * `el` (string or HTMLElement): container where the map will be rendered
* * `markerClusterer` (function): A function to create a marker cluster. You can use MarkerClusterer or MarkerClustererPlus.
*/
var GMaps = function(options) {

if (!(typeof window.google === 'object' && window.google.maps)) {
if (typeof window.console === 'object' && window.console.error) {
console.error('Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js.');
}

return function() {};
}

if (!this) return new GMaps(options);

options.zoom = options.zoom || 15;
options.mapType = options.mapType || 'roadmap';

var valueOrDefault = function(value, defaultValue) {
return value === undefined ? defaultValue : value;
};

var self = this,
i,
events_that_hide_context_menu = [
'bounds_changed', 'center_changed', 'click', 'dblclick', 'drag',
'dragend', 'dragstart', 'idle', 'maptypeid_changed', 'projection_changed',
'resize', 'tilesloaded', 'zoom_changed'
],
events_that_doesnt_hide_context_menu = ['mousemove', 'mouseout', 'mouseover'],
options_to_be_deleted = ['el', 'lat', 'lng', 'mapType', 'width', 'height', 'markerClusterer', 'enableNewStyle'],
identifier = options.el || options.div,
markerClustererFunction = options.markerClusterer,
mapType = google.maps.MapTypeId[options.mapType.toUpperCase()],
map_center = new google.maps.LatLng(options.lat, options.lng),
zoomControl = valueOrDefault(options.zoomControl, true),
zoomControlOpt = options.zoomControlOpt || {
style: 'DEFAULT',
position: 'TOP_LEFT'
},
zoomControlStyle = zoomControlOpt.style || 'DEFAULT',
zoomControlPosition = zoomControlOpt.position || 'TOP_LEFT',
panControl = valueOrDefault(options.panControl, true),
mapTypeControl = valueOrDefault(options.mapTypeControl, true),
scaleControl = valueOrDefault(options.scaleControl, true),
streetViewControl = valueOrDefault(options.streetViewControl, true),
overviewMapControl = valueOrDefault(overviewMapControl, true),
map_options = {},
map_base_options = {
zoom: this.zoom,
center: map_center,
mapTypeId: mapType
},
map_controls_options = {
panControl: panControl,
zoomControl: zoomControl,
zoomControlOptions: {
style: google.maps.ZoomControlStyle[zoomControlStyle],
position: google.maps.ControlPosition[zoomControlPosition]
},
mapTypeControl: mapTypeControl,
scaleControl: scaleControl,
streetViewControl: streetViewControl,
overviewMapControl: overviewMapControl
};

if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
if (identifier.indexOf("#") > -1) {
/**
* Container element
*
* @type {HTMLElement}
*/
this.el = getElementById(identifier, options.context);
} else {
this.el = getElementsByClassName.apply(this, [identifier, options.context]);
}
} else {
this.el = identifier;
}

if (typeof(this.el) === 'undefined' || this.el === null) {
throw 'No element defined.';
}

window.context_menu = window.context_menu || {};
window.context_menu[self.el.id] = {};

/**
* Collection of custom controls in the map UI
*
* @type {array}
*/
this.controls = [];
/**
* Collection of map's overlays
*
* @type {array}
*/
this.overlays = [];
/**
* Collection of KML/GeoRSS and FusionTable layers
*
* @type {array}
*/
this.layers = [];
/**
* Collection of data layers (See {@link GMaps#addLayer})
*
* @type {object}
*/
this.singleLayers = {};
/**
* Collection of map's markers
*
* @type {array}
*/
this.markers = [];
/**
* Collection of map's lines
*
* @type {array}
*/
this.polylines = [];
/**
* Collection of map's routes requested by {@link GMaps#getRoutes}, {@link GMaps#renderRoute}, {@link GMaps#drawRoute}, {@link GMaps#travelRoute} or {@link GMaps#drawSteppedRoute}
*
* @type {array}
*/
this.routes = [];
/**
* Collection of map's polygons
*
* @type {array}
*/
this.polygons = [];
this.infoWindow = null;
this.overlay_el = null;
/**
* Current map's zoom
*
* @type {number}
*/
this.zoom = options.zoom;
this.registered_events = {};

this.el.style.width = options.width || this.el.scrollWidth || this.el.offsetWidth;
this.el.style.height = options.height || this.el.scrollHeight || this.el.offsetHeight;

google.maps.visualRefresh = options.enableNewStyle;

for (i = 0; i < options_to_be_deleted.length; i++) {
delete options[options_to_be_deleted[i]];
}

if(options.disableDefaultUI != true) {
map_base_options = extend_object(map_base_options, map_controls_options);
}

map_options = extend_object(map_base_options, options);

for (i = 0; i < events_that_hide_context_menu.length; i++) {
delete map_options[events_that_hide_context_menu[i]];
}

for (i = 0; i < events_that_doesnt_hide_context_menu.length; i++) {
delete map_options[events_that_doesnt_hide_context_menu[i]];
}

/**
* Google Maps map instance
*
* @type {google.maps.Map}
*/
this.map = new google.maps.Map(this.el, map_options);

if (markerClustererFunction) {
/**
* Marker Clusterer instance
*
* @type {object}
*/
this.markerClusterer = markerClustererFunction.apply(this, [this.map]);
}

var buildContextMenuHTML = function(control, e) {
var html = '',
options = window.context_menu[self.el.id][control];

for (var i in options){
if (options.hasOwnProperty(i)) {
var option = options[i];

html += '<li><a id="' + control + '_' + i + '" href="#">' + option.title + '</a></li>';
}
}

if (!getElementById('gmaps_context_menu')) return;

var context_menu_element = getElementById('gmaps_context_menu');

context_menu_element.innerHTML = html;

var context_menu_items = context_menu_element.getElementsByTagName('a'),
context_menu_items_count = context_menu_items.length,
i;

for (i = 0; i < context_menu_items_count; i++) {
var context_menu_item = context_menu_items[i];

var assign_menu_item_action = function(ev){
ev.preventDefault();

options[this.id.replace(control + '_', '')].action.apply(self, [e]);
self.hideContextMenu();
};

google.maps.event.clearListeners(context_menu_item, 'click');
google.maps.event.addDomListenerOnce(context_menu_item, 'click', assign_menu_item_action, false);
}

var position = findAbsolutePosition.apply(this, [self.el]),
left = position[0] + e.pixel.x - 15,
top = position[1] + e.pixel.y- 15;

context_menu_element.style.left = left + "px";
context_menu_element.style.top = top + "px";

// context_menu_element.style.display = 'block';
};

this.buildContextMenu = function(control, e) {
if (control === 'marker') {
e.pixel = {};

var overlay = new google.maps.OverlayView();
overlay.setMap(self.map);

overlay.draw = function() {
var projection = overlay.getProjection(),
position = e.marker.getPosition();

e.pixel = projection.fromLatLngToContainerPixel(position);

buildContextMenuHTML(control, e);
};
}
else {
buildContextMenuHTML(control, e);
}

var context_menu_element = getElementById('gmaps_context_menu');

setTimeout(function() {
context_menu_element.style.display = 'block';
}, 0);
};

/**
* Add a context menu for a map or a marker.
*
* @param {object} options - The `options` object should contain:
* * `control` (string): Kind of control the context menu will be attached. Can be "map" or "marker".
* * `options` (array): A collection of context menu items:
* * `title` (string): Item's title shown in the context menu.
* * `name` (string): Item's identifier.
* * `action` (function): Function triggered after selecting the context menu item.
*/
this.setContextMenu = function(options) {
window.context_menu[self.el.id][options.control] = {};

var i,
ul = doc.createElement('ul');

for (i in options.options) {
if (options.options.hasOwnProperty(i)) {
var option = options.options[i];

window.context_menu[self.el.id][options.control][option.name] = {
title: option.title,
action: option.action
};
}
}

ul.id = 'gmaps_context_menu';
ul.style.display = 'none';
ul.style.position = 'absolute';
ul.style.minWidth = '100px';
ul.style.background = 'white';
ul.style.listStyle = 'none';
ul.style.padding = '8px';
ul.style.boxShadow = '2px 2px 6px #ccc';

if (!getElementById('gmaps_context_menu')) {
doc.body.appendChild(ul);
}

var context_menu_element = getElementById('gmaps_context_menu');

google.maps.event.addDomListener(context_menu_element, 'mouseout', function(ev) {
if (!ev.relatedTarget || !this.contains(ev.relatedTarget)) {
window.setTimeout(function(){
context_menu_element.style.display = 'none';
}, 400);
}
}, false);
};

/**
* Hide the current context menu
*/
this.hideContextMenu = function() {
var context_menu_element = getElementById('gmaps_context_menu');

if (context_menu_element) {
context_menu_element.style.display = 'none';
}
};

var setupListener = function(object, name) {
google.maps.event.addListener(object, name, function(e){
if (e == undefined) {
e = this;
}

options[name].apply(this, [e]);

self.hideContextMenu();
});
};

//google.maps.event.addListener(this.map, 'idle', this.hideContextMenu);
google.maps.event.addListener(this.map, 'zoom_changed', this.hideContextMenu);

for (var ev = 0; ev < events_that_hide_context_menu.length; ev++) {
var name = events_that_hide_context_menu[ev];

if (name in options) {
setupListener(this.map, name);
}
}

for (var ev = 0; ev < events_that_doesnt_hide_context_menu.length; ev++) {
var name = events_that_doesnt_hide_context_menu[ev];

if (name in options) {
setupListener(this.map, name);
}
}

google.maps.event.addListener(this.map, 'rightclick', function(e) {
if (options.rightclick) {
options.rightclick.apply(this, [e]);
}

if(window.context_menu[self.el.id]['map'] != undefined) {
self.buildContextMenu('map', e);
}
});

/**
* Trigger a `resize` event, useful if you need to repaint the current map (for changes in the viewport or display / hide actions).
*/
this.refresh = function() {
google.maps.event.trigger(this.map, 'resize');
};

/**
* Adjust the map zoom to include all the markers added in the map.
*/
this.fitZoom = function() {
var latLngs = [],
markers_length = this.markers.length,
i;

for (i = 0; i < markers_length; i++) {
if(typeof(this.markers[i].visible) === 'boolean' && this.markers[i].visible) {
latLngs.push(this.markers[i].getPosition());
}
}

this.fitLatLngBounds(latLngs);
};

/**
* Adjust the map zoom to include all the coordinates in the `latLngs` array.
*
* @param {array} latLngs - Collection of `google.maps.LatLng` objects.
*/
this.fitLatLngBounds = function(latLngs) {
var total = latLngs.length,
bounds = new google.maps.LatLngBounds(),
i;

for(i = 0; i < total; i++) {
bounds.extend(latLngs[i]);
}

this.map.fitBounds(bounds);
};

/**
* Center the map using the `lat` and `lng` coordinates.
*
* @param {number} lat - Latitude of the coordinate.
* @param {number} lng - Longitude of the coordinate.
* @param {function} [callback] - Callback that will be executed after the map is centered.
*/
this.setCenter = function(lat, lng, callback) {
this.map.panTo(new google.maps.LatLng(lat, lng));

if (callback) {
callback();
}
};

/**
* Return the HTML element container of the map.
*
* @returns {HTMLElement} the element container.
*/
this.getElement = function() {
return this.el;
};

/**
* Increase the map's zoom.
*
* @param {number} [magnitude] - The number of times the map will be zoomed in.
*/
this.zoomIn = function(value) {
value = value || 1;

this.zoom = this.map.getZoom() + value;
this.map.setZoom(this.zoom);
};

/**
* Decrease the map's zoom.
*
* @param {number} [magnitude] - The number of times the map will be zoomed out.
*/
this.zoomOut = function(value) {
value = value || 1;

this.zoom = this.map.getZoom() - value;
this.map.setZoom(this.zoom);
};

var native_methods = [],
method;

for (method in this.map) {
if (typeof(this.map[method]) == 'function' && !this[method]) {
native_methods.push(method);
}
}

for (i = 0; i < native_methods.length; i++) {
(function(gmaps, scope, method_name) {
gmaps[method_name] = function(){
return scope[method_name].apply(scope, arguments);
};
})(this, this.map, native_methods[i]);
}
};

return GMaps;
})(this);

GMaps.prototype.createControl = function(options) {
var control = document.createElement('div');

control.style.cursor = 'pointer';

if (options.disableDefaultStyles !== true) {
control.style.fontFamily = 'Roboto, Arial, sans-serif';
control.style.fontSize = '11px';
control.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
}

for (var option in options.style) {
control.style[option] = options.style[option];
}

if (options.id) {
control.id = options.id;
}

if (options.title) {
control.title = options.title;
}

if (options.classes) {
control.className = options.classes;
}

if (options.content) {
if (typeof options.content === 'string') {
control.innerHTML = options.content;
}
else if (options.content instanceof HTMLElement) {
control.appendChild(options.content);
}
}

if (options.position) {
control.position = google.maps.ControlPosition[options.position.toUpperCase()];
}

for (var ev in options.events) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(){
options.events[name].apply(this, [this]);
});
})(control, ev);
}

control.index = 1;

return control;
};

/**
* Add a custom control to the map UI.
*
* @param {object} options - The `options` object should contain:
* * `style` (object): The keys and values of this object should be valid CSS properties and values.
* * `id` (string): The HTML id for the custom control.
* * `classes` (string): A string containing all the HTML classes for the custom control.
* * `content` (string or HTML element): The content of the custom control.
* * `position` (string): Any valid [`google.maps.ControlPosition`](https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning) value, in lower or upper case.
* * `events` (object): The keys of this object should be valid DOM events. The values should be functions.
* * `disableDefaultStyles` (boolean): If false, removes the default styles for the controls like font (family and size), and box shadow.
* @returns {HTMLElement}
*/
GMaps.prototype.addControl = function(options) {
var control = this.createControl(options);

this.controls.push(control);
this.map.controls[control.position].push(control);

return control;
};

/**
* Remove a control from the map. `control` should be a control returned by `addControl()`.
*
* @param {HTMLElement} control - One of the controls returned by `addControl()`.
* @returns {HTMLElement} the removed control.
*/
GMaps.prototype.removeControl = function(control) {
var position = null,
i;

for (i = 0; i < this.controls.length; i++) {
if (this.controls[i] == control) {
position = this.controls[i].position;
this.controls.splice(i, 1);
}
}

if (position) {
for (i = 0; i < this.map.controls.length; i++) {
var controlsForPosition = this.map.controls[control.position];

if (controlsForPosition.getAt(i) == control) {
controlsForPosition.removeAt(i);

break;
}
}
}

return control;
};

GMaps.prototype.createMarker = function(options) {
if (options.lat == undefined && options.lng == undefined && options.position == undefined) {
throw 'No latitude or longitude defined.';
}

var self = this,
details = options.details,
fences = options.fences,
outside = options.outside,
base_options = {
position: new google.maps.LatLng(options.lat, options.lng),
map: null
},
marker_options = extend_object(base_options, options);

delete marker_options.lat;
delete marker_options.lng;
delete marker_options.fences;
delete marker_options.outside;

var marker = new google.maps.Marker(marker_options);

marker.fences = fences;

if (options.infoWindow) {
marker.infoWindow = new google.maps.InfoWindow(options.infoWindow);

var info_window_events = ['closeclick', 'content_changed', 'domready', 'position_changed', 'zindex_changed'];

for (var ev = 0; ev < info_window_events.length; ev++) {
(function(object, name) {
if (options.infoWindow[name]) {
google.maps.event.addListener(object, name, function(e){
options.infoWindow[name].apply(this, [e]);
});
}
})(marker.infoWindow, info_window_events[ev]);
}
}

var marker_events = ['animation_changed', 'clickable_changed', 'cursor_changed', 'draggable_changed', 'flat_changed', 'icon_changed', 'position_changed', 'shadow_changed', 'shape_changed', 'title_changed', 'visible_changed', 'zindex_changed'];

var marker_events_with_mouse = ['dblclick', 'drag', 'dragend', 'dragstart', 'mousedown', 'mouseout', 'mouseover', 'mouseup'];

for (var ev = 0; ev < marker_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this, [this]);
});
}
})(marker, marker_events[ev]);
}

for (var ev = 0; ev < marker_events_with_mouse.length; ev++) {
(function(map, object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(me){
if(!me.pixel){
me.pixel = map.getProjection().fromLatLngToPoint(me.latLng)
}

options[name].apply(this, [me]);
});
}
})(this.map, marker, marker_events_with_mouse[ev]);
}

google.maps.event.addListener(marker, 'click', function() {
this.details = details;

if (options.click) {
options.click.apply(this, [this]);
}

if (marker.infoWindow) {
self.hideInfoWindows();
marker.infoWindow.open(self.map, marker);
}
});

google.maps.event.addListener(marker, 'rightclick', function(e) {
e.marker = this;

if (options.rightclick) {
options.rightclick.apply(this, [e]);
}

if (window.context_menu[self.el.id]['marker'] != undefined) {
self.buildContextMenu('marker', e);
}
});

if (marker.fences) {
google.maps.event.addListener(marker, 'dragend', function() {
self.checkMarkerGeofence(marker, function(m, f) {
outside(m, f);
});
});
}

return marker;
};

GMaps.prototype.addMarker = function(options) {
var marker;
if(options.hasOwnProperty('gm_accessors_')) {
// Native google.maps.Marker object
marker = options;
}
else {
if ((options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) || options.position) {
marker = this.createMarker(options);
}
else {
throw 'No latitude or longitude defined.';
}
}

marker.setMap(this.map);

if(this.markerClusterer) {
this.markerClusterer.addMarker(marker);
}

this.markers.push(marker);

GMaps.fire('marker_added', marker, this);

return marker;
};

GMaps.prototype.addMarkers = function(array) {
for (var i = 0, marker; marker=array[i]; i++) {
this.addMarker(marker);
}

return this.markers;
};

GMaps.prototype.hideInfoWindows = function() {
for (var i = 0, marker; marker = this.markers[i]; i++){
if (marker.infoWindow) {
marker.infoWindow.close();
}
}
};

GMaps.prototype.removeMarker = function(marker) {
for (var i = 0; i < this.markers.length; i++) {
if (this.markers[i] === marker) {
this.markers[i].setMap(null);
this.markers.splice(i, 1);

if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}

GMaps.fire('marker_removed', marker, this);

break;
}
}

return marker;
};

GMaps.prototype.removeMarkers = function (collection) {
var new_markers = [];

if (typeof collection == 'undefined') {
for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
marker.setMap(null);

GMaps.fire('marker_removed', marker, this);
}

if(this.markerClusterer && this.markerClusterer.clearMarkers) {
this.markerClusterer.clearMarkers();
}

this.markers = new_markers;
}
else {
for (var i = 0; i < collection.length; i++) {
var index = this.markers.indexOf(collection[i]);

if (index > -1) {
var marker = this.markers[index];
marker.setMap(null);

if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}

GMaps.fire('marker_removed', marker, this);
}
}

for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
if (marker.getMap() != null) {
new_markers.push(marker);
}
}

this.markers = new_markers;
}
};

GMaps.prototype.drawOverlay = function(options) {
var overlay = new google.maps.OverlayView(),
auto_show = true;

overlay.setMap(this.map);

if (options.auto_show != null) {
auto_show = options.auto_show;
}

overlay.onAdd = function() {
var el = document.createElement('div');

el.style.borderStyle = "none";
el.style.borderWidth = "0px";
el.style.position = "absolute";
el.style.zIndex = 100;
el.innerHTML = options.content;

overlay.el = el;

if (!options.layer) {
options.layer = 'overlayLayer';
}

var panes = this.getPanes(),
overlayLayer = panes[options.layer],
stop_overlay_events = ['contextmenu', 'DOMMouseScroll', 'dblclick', 'mousedown'];

overlayLayer.appendChild(el);

for (var ev = 0; ev < stop_overlay_events.length; ev++) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(e){
if (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
e.cancelBubble = true;
e.returnValue = false;
}
else {
e.stopPropagation();
}
});
})(el, stop_overlay_events[ev]);
}

if (options.click) {
panes.overlayMouseTarget.appendChild(overlay.el);
google.maps.event.addDomListener(overlay.el, 'click', function() {
options.click.apply(overlay, [overlay]);
});
}

google.maps.event.trigger(this, 'ready');
};

overlay.draw = function() {
var projection = this.getProjection(),
pixel = projection.fromLatLngToDivPixel(new google.maps.LatLng(options.lat, options.lng));

options.horizontalOffset = options.horizontalOffset || 0;
options.verticalOffset = options.verticalOffset || 0;

var el = overlay.el,
content = el.children[0],
content_height = content.clientHeight,
content_width = content.clientWidth;

switch (options.verticalAlign) {
case 'top':
el.style.top = (pixel.y - content_height + options.verticalOffset) + 'px';
break;
default:
case 'middle':
el.style.top = (pixel.y - (content_height / 2) + options.verticalOffset) + 'px';
break;
case 'bottom':
el.style.top = (pixel.y + options.verticalOffset) + 'px';
break;
}

switch (options.horizontalAlign) {
case 'left':
el.style.left = (pixel.x - content_width + options.horizontalOffset) + 'px';
break;
default:
case 'center':
el.style.left = (pixel.x - (content_width / 2) + options.horizontalOffset) + 'px';
break;
case 'right':
el.style.left = (pixel.x + options.horizontalOffset) + 'px';
break;
}

el.style.display = auto_show ? 'block' : 'none';

if (!auto_show) {
options.show.apply(this, [el]);
}
};

overlay.onRemove = function() {
var el = overlay.el;

if (options.remove) {
options.remove.apply(this, [el]);
}
else {
overlay.el.parentNode.removeChild(overlay.el);
overlay.el = null;
}
};

this.overlays.push(overlay);
return overlay;
};

GMaps.prototype.removeOverlay = function(overlay) {
for (var i = 0; i < this.overlays.length; i++) {
if (this.overlays[i] === overlay) {
this.overlays[i].setMap(null);
this.overlays.splice(i, 1);

break;
}
}
};

GMaps.prototype.removeOverlays = function() {
for (var i = 0, item; item = this.overlays[i]; i++) {
item.setMap(null);
}

this.overlays = [];
};

GMaps.prototype.drawPolyline = function(options) {
var path = [],
points = options.path;

if (points.length) {
if (points[0][0] === undefined) {
path = points;
}
else {
for (var i = 0, latlng; latlng = points[i]; i++) {
path.push(new google.maps.LatLng(latlng[0], latlng[1]));
}
}
}

var polyline_options = {
map: this.map,
path: path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight,
geodesic: options.geodesic,
clickable: true,
editable: false,
visible: true
};

if (options.hasOwnProperty("clickable")) {
polyline_options.clickable = options.clickable;
}

if (options.hasOwnProperty("editable")) {
polyline_options.editable = options.editable;
}

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

if (options.hasOwnProperty("zIndex")) {
polyline_options.zIndex = options.zIndex;
}

var polyline = new google.maps.Polyline(polyline_options);

var polyline_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];

for (var ev = 0; ev < polyline_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polyline, polyline_events[ev]);
}

this.polylines.push(polyline);

GMaps.fire('polyline_added', polyline, this);

return polyline;
};

GMaps.prototype.removePolyline = function(polyline) {
for (var i = 0; i < this.polylines.length; i++) {
if (this.polylines[i] === polyline) {
this.polylines[i].setMap(null);
this.polylines.splice(i, 1);

GMaps.fire('polyline_removed', polyline, this);

break;
}
}
};

GMaps.prototype.removePolylines = function() {
for (var i = 0, item; item = this.polylines[i]; i++) {
item.setMap(null);
}

this.polylines = [];
};

GMaps.prototype.drawCircle = function(options) {
options = extend_object({
map: this.map,
center: new google.maps.LatLng(options.lat, options.lng)
}, options);

delete options.lat;
delete options.lng;

var polygon = new google.maps.Circle(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];

for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}

this.polygons.push(polygon);

return polygon;
};

GMaps.prototype.drawRectangle = function(options) {
options = extend_object({
map: this.map
}, options);

var latLngBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(options.bounds[0][0], options.bounds[0][1]),
new google.maps.LatLng(options.bounds[1][0], options.bounds[1][1])
);

options.bounds = latLngBounds;

var polygon = new google.maps.Rectangle(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];

for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}

this.polygons.push(polygon);

return polygon;
};

GMaps.prototype.drawPolygon = function(options) {
var useGeoJSON = false;

if(options.hasOwnProperty("useGeoJSON")) {
useGeoJSON = options.useGeoJSON;
}

delete options.useGeoJSON;

options = extend_object({
map: this.map
}, options);

if (useGeoJSON == false) {
options.paths = [options.paths.slice(0)];
}

if (options.paths.length > 0) {
if (options.paths[0].length > 0) {
options.paths = array_flat(array_map(options.paths, arrayToLatLng, useGeoJSON));
}
}

var polygon = new google.maps.Polygon(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];

for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}

this.polygons.push(polygon);

GMaps.fire('polygon_added', polygon, this);

return polygon;
};

GMaps.prototype.removePolygon = function(polygon) {
for (var i = 0; i < this.polygons.length; i++) {
if (this.polygons[i] === polygon) {
this.polygons[i].setMap(null);
this.polygons.splice(i, 1);

GMaps.fire('polygon_removed', polygon, this);

break;
}
}
};

GMaps.prototype.removePolygons = function() {
for (var i = 0, item; item = this.polygons[i]; i++) {
item.setMap(null);
}

this.polygons = [];
};

GMaps.prototype.getFromFusionTables = function(options) {
var events = options.events;

delete options.events;

var fusion_tables_options = options,
layer = new google.maps.FusionTablesLayer(fusion_tables_options);

for (var ev in events) {
(function(object, name) {
google.maps.event.addListener(object, name, function(e) {
events[name].apply(this, [e]);
});
})(layer, ev);
}

this.layers.push(layer);

return layer;
};

GMaps.prototype.loadFromFusionTables = function(options) {
var layer = this.getFromFusionTables(options);
layer.setMap(this.map);

return layer;
};

GMaps.prototype.getFromKML = function(options) {
var url = options.url,
events = options.events;

delete options.url;
delete options.events;

var kml_options = options,
layer = new google.maps.KmlLayer(url, kml_options);

for (var ev in events) {
(function(object, name) {
google.maps.event.addListener(object, name, function(e) {
events[name].apply(this, [e]);
});
})(layer, ev);
}

this.layers.push(layer);

return layer;
};

GMaps.prototype.loadFromKML = function(options) {
var layer = this.getFromKML(options);
layer.setMap(this.map);

return layer;
};

GMaps.prototype.addLayer = function(layerName, options) {
//var default_layers = ['weather', 'clouds', 'traffic', 'transit', 'bicycling', 'panoramio', 'places'];
options = options || {};
var layer;

switch(layerName) {
case 'weather': this.singleLayers.weather = layer = new google.maps.weather.WeatherLayer();
break;
case 'clouds': this.singleLayers.clouds = layer = new google.maps.weather.CloudLayer();
break;
case 'traffic': this.singleLayers.traffic = layer = new google.maps.TrafficLayer();
break;
case 'transit': this.singleLayers.transit = layer = new google.maps.TransitLayer();
break;
case 'bicycling': this.singleLayers.bicycling = layer = new google.maps.BicyclingLayer();
break;
case 'panoramio':
this.singleLayers.panoramio = layer = new google.maps.panoramio.PanoramioLayer();
layer.setTag(options.filter);
delete options.filter;

//click event
if (options.click) {
google.maps.event.addListener(layer, 'click', function(event) {
options.click(event);
delete options.click;
});
}
break;
case 'places':
this.singleLayers.places = layer = new google.maps.places.PlacesService(this.map);

//search, nearbySearch, radarSearch callback, Both are the same
if (options.search || options.nearbySearch || options.radarSearch) {
var placeSearchRequest = {
bounds : options.bounds || null,
keyword : options.keyword || null,
location : options.location || null,
name : options.name || null,
radius : options.radius || null,
rankBy : options.rankBy || null,
types : options.types || null
};

if (options.radarSearch) {
layer.radarSearch(placeSearchRequest, options.radarSearch);
}

if (options.search) {
layer.search(placeSearchRequest, options.search);
}

if (options.nearbySearch) {
layer.nearbySearch(placeSearchRequest, options.nearbySearch);
}
}

//textSearch callback
if (options.textSearch) {
var textSearchRequest = {
bounds : options.bounds || null,
location : options.location || null,
query : options.query || null,
radius : options.radius || null
};

layer.textSearch(textSearchRequest, options.textSearch);
}
break;
}

if (layer !== undefined) {
if (typeof layer.setOptions == 'function') {
layer.setOptions(options);
}
if (typeof layer.setMap == 'function') {
layer.setMap(this.map);
}

return layer;
}
};

GMaps.prototype.removeLayer = function(layer) {
if (typeof(layer) == "string" && this.singleLayers[layer] !== undefined) {
this.singleLayers[layer].setMap(null);

delete this.singleLayers[layer];
}
else {
for (var i = 0; i < this.layers.length; i++) {
if (this.layers[i] === layer) {
this.layers[i].setMap(null);
this.layers.splice(i, 1);

break;
}
}
}
};

var travelMode, unitSystem;

GMaps.prototype.getRoutes = function(options) {
switch (options.travelMode) {
case 'bicycling':
travelMode = google.maps.TravelMode.BICYCLING;
break;
case 'transit':
travelMode = google.maps.TravelMode.TRANSIT;
break;
case 'driving':
travelMode = google.maps.TravelMode.DRIVING;
break;
default:
travelMode = google.maps.TravelMode.WALKING;
break;
}

if (options.unitSystem === 'imperial') {
unitSystem = google.maps.UnitSystem.IMPERIAL;
}
else {
unitSystem = google.maps.UnitSystem.METRIC;
}

var base_options = {
avoidHighways: false,
avoidTolls: false,
optimizeWaypoints: false,
waypoints: []
},
request_options = extend_object(base_options, options);

request_options.origin = /string/.test(typeof options.origin) ? options.origin : new google.maps.LatLng(options.origin[0], options.origin[1]);
request_options.destination = /string/.test(typeof options.destination) ? options.destination : new google.maps.LatLng(options.destination[0], options.destination[1]);
request_options.travelMode = travelMode;
request_options.unitSystem = unitSystem;

delete request_options.callback;
delete request_options.error;

var self = this,
routes = [],
service = new google.maps.DirectionsService();

service.route(request_options, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
for (var r in result.routes) {
if (result.routes.hasOwnProperty(r)) {
routes.push(result.routes[r]);
}
}

if (options.callback) {
options.callback(routes, result, status);
}
}
else {
if (options.error) {
options.error(result, status);
}
}
});
};

GMaps.prototype.removeRoutes = function() {
this.routes.length = 0;
};

GMaps.prototype.getElevations = function(options) {
options = extend_object({
locations: [],
path : false,
samples : 256
}, options);

if (options.locations.length > 0) {
if (options.locations[0].length > 0) {
options.locations = array_flat(array_map([options.locations], arrayToLatLng, false));
}
}

var callback = options.callback;
delete options.callback;

var service = new google.maps.ElevationService();

//location request
if (!options.path) {
delete options.path;
delete options.samples;

service.getElevationForLocations(options, function(result, status) {
if (callback && typeof(callback) === "function") {
callback(result, status);
}
});
//path request
} else {
var pathRequest = {
path : options.locations,
samples : options.samples
};

service.getElevationAlongPath(pathRequest, function(result, status) {
if (callback && typeof(callback) === "function") {
callback(result, status);
}
});
}
};

GMaps.prototype.cleanRoute = GMaps.prototype.removePolylines;

GMaps.prototype.renderRoute = function(options, renderOptions) {
var self = this,
panel = ((typeof renderOptions.panel === 'string') ? document.getElementById(renderOptions.panel.replace('#', '')) : renderOptions.panel),
display;

renderOptions.panel = panel;
renderOptions = extend_object({
map: this.map
}, renderOptions);
display = new google.maps.DirectionsRenderer(renderOptions);

this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints: options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
avoidHighways: options.avoidHighways,
avoidTolls: options.avoidTolls,
optimizeWaypoints: options.optimizeWaypoints,
callback: function(routes, response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
}
}
});
};

GMaps.prototype.drawRoute = function(options) {
var self = this;

this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints: options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
avoidHighways: options.avoidHighways,
avoidTolls: options.avoidTolls,
optimizeWaypoints: options.optimizeWaypoints,
callback: function(routes) {
if (routes.length > 0) {
var polyline_options = {
path: routes[routes.length - 1].overview_path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

self.drawPolyline(polyline_options);

if (options.callback) {
options.callback(routes[routes.length - 1]);
}
}
}
});
};

GMaps.prototype.travelRoute = function(options) {
if (options.origin && options.destination) {
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints : options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
callback: function(e) {
//start callback
if (e.length > 0 && options.start) {
options.start(e[e.length - 1]);
}

//step callback
if (e.length > 0 && options.step) {
var route = e[e.length - 1];
if (route.legs.length > 0) {
var steps = route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
options.step(step, (route.legs[0].steps.length - 1));
}
}
}

//end callback
if (e.length > 0 && options.end) {
options.end(e[e.length - 1]);
}
}
});
}
else if (options.route) {
if (options.route.legs.length > 0) {
var steps = options.route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
options.step(step);
}
}
}
};

GMaps.prototype.drawSteppedRoute = function(options) {
var self = this;

if (options.origin && options.destination) {
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints : options.waypoints,
error: options.error,
callback: function(e) {
//start callback
if (e.length > 0 && options.start) {
options.start(e[e.length - 1]);
}

//step callback
if (e.length > 0 && options.step) {
var route = e[e.length - 1];
if (route.legs.length > 0) {
var steps = route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
var polyline_options = {
path: step.path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

self.drawPolyline(polyline_options);
options.step(step, (route.legs[0].steps.length - 1));
}
}
}

//end callback
if (e.length > 0 && options.end) {
options.end(e[e.length - 1]);
}
}
});
}
else if (options.route) {
if (options.route.legs.length > 0) {
var steps = options.route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
var polyline_options = {
path: step.path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

self.drawPolyline(polyline_options);
options.step(step);
}
}
}
};

GMaps.Route = function(options) {
this.origin = options.origin;
this.destination = options.destination;
this.waypoints = options.waypoints;

this.map = options.map;
this.route = options.route;
this.step_count = 0;
this.steps = this.route.legs[0].steps;
this.steps_length = this.steps.length;

var polyline_options = {
path: new google.maps.MVCArray(),
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

this.polyline = this.map.drawPolyline(polyline_options).getPath();
};

GMaps.Route.prototype.getRoute = function(options) {
var self = this;

this.map.getRoutes({
origin : this.origin,
destination : this.destination,
travelMode : options.travelMode,
waypoints : this.waypoints || [],
error: options.error,
callback : function() {
self.route = e[0];

if (options.callback) {
options.callback.call(self);
}
}
});
};

GMaps.Route.prototype.back = function() {
if (this.step_count > 0) {
this.step_count--;
var path = this.route.legs[0].steps[this.step_count].path;

for (var p in path){
if (path.hasOwnProperty(p)){
this.polyline.pop();
}
}
}
};

GMaps.Route.prototype.forward = function() {
if (this.step_count < this.steps_length) {
var path = this.route.legs[0].steps[this.step_count].path;

for (var p in path){
if (path.hasOwnProperty(p)){
this.polyline.push(path[p]);
}
}
this.step_count++;
}
};

GMaps.prototype.checkGeofence = function(lat, lng, fence) {
return fence.containsLatLng(new google.maps.LatLng(lat, lng));
};

GMaps.prototype.checkMarkerGeofence = function(marker, outside_callback) {
if (marker.fences) {
for (var i = 0, fence; fence = marker.fences[i]; i++) {
var pos = marker.getPosition();
if (!this.checkGeofence(pos.lat(), pos.lng(), fence)) {
outside_callback(marker, fence);
}
}
}
};

GMaps.prototype.toImage = function(options) {
var options = options || {},
static_map_options = {};

static_map_options['size'] = options['size'] || [this.el.clientWidth, this.el.clientHeight];
static_map_options['lat'] = this.getCenter().lat();
static_map_options['lng'] = this.getCenter().lng();

if (this.markers.length > 0) {
static_map_options['markers'] = [];

for (var i = 0; i < this.markers.length; i++) {
static_map_options['markers'].push({
lat: this.markers[i].getPosition().lat(),
lng: this.markers[i].getPosition().lng()
});
}
}

if (this.polylines.length > 0) {
var polyline = this.polylines[0];

static_map_options['polyline'] = {};
static_map_options['polyline']['path'] = google.maps.geometry.encoding.encodePath(polyline.getPath());
static_map_options['polyline']['strokeColor'] = polyline.strokeColor
static_map_options['polyline']['strokeOpacity'] = polyline.strokeOpacity
static_map_options['polyline']['strokeWeight'] = polyline.strokeWeight
}

return GMaps.staticMapURL(static_map_options);
};

GMaps.staticMapURL = function(options){
var parameters = [],
data,
static_root = (location.protocol === 'file:' ? 'http:' : location.protocol ) + '//maps.googleapis.com/maps/api/staticmap';

if (options.url) {
static_root = options.url;
delete options.url;
}

static_root += '?';

var markers = options.markers;

delete options.markers;

if (!markers && options.marker) {
markers = [options.marker];
delete options.marker;
}

var styles = options.styles;

delete options.styles;

var polyline = options.polyline;
delete options.polyline;

/** Map options **/
if (options.center) {
parameters.push('center=' + options.center);
delete options.center;
}
else if (options.address) {
parameters.push('center=' + options.address);
delete options.address;
}
else if (options.lat) {
parameters.push(['center=', options.lat, ',', options.lng].join(''));
delete options.lat;
delete options.lng;
}
else if (options.visible) {
var visible = encodeURI(options.visible.join('|'));
parameters.push('visible=' + visible);
}

var size = options.size;
if (size) {
if (size.join) {
size = size.join('x');
}
delete options.size;
}
else {
size = '630x300';
}
parameters.push('size=' + size);

if (!options.zoom && options.zoom !== false) {
options.zoom = 15;
}

var sensor = options.hasOwnProperty('sensor') ? !!options.sensor : true;
delete options.sensor;
parameters.push('sensor=' + sensor);

for (var param in options) {
if (options.hasOwnProperty(param)) {
parameters.push(param + '=' + options[param]);
}
}

/** Markers **/
if (markers) {
var marker, loc;

for (var i = 0; data = markers[i]; i++) {
marker = [];

if (data.size && data.size !== 'normal') {
marker.push('size:' + data.size);
delete data.size;
}
else if (data.icon) {
marker.push('icon:' + encodeURI(data.icon));
delete data.icon;
}

if (data.color) {
marker.push('color:' + data.color.replace('#', '0x'));
delete data.color;
}

if (data.label) {
marker.push('label:' + data.label[0].toUpperCase());
delete data.label;
}

loc = (data.address ? data.address : data.lat + ',' + data.lng);
delete data.address;
delete data.lat;
delete data.lng;

for(var param in data){
if (data.hasOwnProperty(param)) {
marker.push(param + ':' + data[param]);
}
}

if (marker.length || i === 0) {
marker.push(loc);
marker = marker.join('|');
parameters.push('markers=' + encodeURI(marker));
}
// New marker without styles
else {
marker = parameters.pop() + encodeURI('|' + loc);
parameters.push(marker);
}
}
}

/** Map Styles **/
if (styles) {
for (var i = 0; i < styles.length; i++) {
var styleRule = [];
if (styles[i].featureType){
styleRule.push('feature:' + styles[i].featureType.toLowerCase());
}

if (styles[i].elementType) {
styleRule.push('element:' + styles[i].elementType.toLowerCase());
}

for (var j = 0; j < styles[i].stylers.length; j++) {
for (var p in styles[i].stylers[j]) {
var ruleArg = styles[i].stylers[j][p];
if (p == 'hue' || p == 'color') {
ruleArg = '0x' + ruleArg.substring(1);
}
styleRule.push(p + ':' + ruleArg);
}
}

var rule = styleRule.join('|');
if (rule != '') {
parameters.push('style=' + rule);
}
}
}

/** Polylines **/
function parseColor(color, opacity) {
if (color[0] === '#'){
color = color.replace('#', '0x');

if (opacity) {
opacity = parseFloat(opacity);
opacity = Math.min(1, Math.max(opacity, 0));
if (opacity === 0) {
return '0x00000000';
}
opacity = (opacity * 255).toString(16);
if (opacity.length === 1) {
opacity += opacity;
}

color = color.slice(0,8) + opacity;
}
}
return color;
}

if (polyline) {
data = polyline;
polyline = [];

if (data.strokeWeight) {
polyline.push('weight:' + parseInt(data.strokeWeight, 10));
}

if (data.strokeColor) {
var color = parseColor(data.strokeColor, data.strokeOpacity);
polyline.push('color:' + color);
}

if (data.fillColor) {
var fillcolor = parseColor(data.fillColor, data.fillOpacity);
polyline.push('fillcolor:' + fillcolor);
}

var path = data.path;
if (path.join) {
for (var j=0, pos; pos=path[j]; j++) {
polyline.push(pos.join(','));
}
}
else {
polyline.push('enc:' + path);
}

polyline = polyline.join('|');
parameters.push('path=' + encodeURI(polyline));
}

/** Retina support **/
var dpi = window.devicePixelRatio || 1;
parameters.push('scale=' + dpi);

parameters = parameters.join('&');
return static_root + parameters;
};

GMaps.prototype.addMapType = function(mapTypeId, options) {
if (options.hasOwnProperty("getTileUrl") && typeof(options["getTileUrl"]) == "function") {
options.tileSize = options.tileSize || new google.maps.Size(256, 256);

var mapType = new google.maps.ImageMapType(options);

this.map.mapTypes.set(mapTypeId, mapType);
}
else {
throw "'getTileUrl' function required.";
}
};

GMaps.prototype.addOverlayMapType = function(options) {
if (options.hasOwnProperty("getTile") && typeof(options["getTile"]) == "function") {
var overlayMapTypeIndex = options.index;

delete options.index;

this.map.overlayMapTypes.insertAt(overlayMapTypeIndex, options);
}
else {
throw "'getTile' function required.";
}
};

GMaps.prototype.removeOverlayMapType = function(overlayMapTypeIndex) {
this.map.overlayMapTypes.removeAt(overlayMapTypeIndex);
};

GMaps.prototype.addStyle = function(options) {
var styledMapType = new google.maps.StyledMapType(options.styles, { name: options.styledMapName });

this.map.mapTypes.set(options.mapTypeId, styledMapType);
};

GMaps.prototype.setStyle = function(mapTypeId) {
this.map.setMapTypeId(mapTypeId);
};

GMaps.prototype.createPanorama = function(streetview_options) {
if (!streetview_options.hasOwnProperty('lat') || !streetview_options.hasOwnProperty('lng')) {
streetview_options.lat = this.getCenter().lat();
streetview_options.lng = this.getCenter().lng();
}

this.panorama = GMaps.createPanorama(streetview_options);

this.map.setStreetView(this.panorama);

return this.panorama;
};

GMaps.createPanorama = function(options) {
var el = getElementById(options.el, options.context);

options.position = new google.maps.LatLng(options.lat, options.lng);

delete options.el;
delete options.context;
delete options.lat;
delete options.lng;

var streetview_events = ['closeclick', 'links_changed', 'pano_changed', 'position_changed', 'pov_changed', 'resize', 'visible_changed'],
streetview_options = extend_object({visible : true}, options);

for (var i = 0; i < streetview_events.length; i++) {
delete streetview_options[streetview_events[i]];
}

var panorama = new google.maps.StreetViewPanorama(el, streetview_options);

for (var i = 0; i < streetview_events.length; i++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this);
});
}
})(panorama, streetview_events[i]);
}

return panorama;
};

GMaps.prototype.on = function(event_name, handler) {
return GMaps.on(event_name, this, handler);
};

GMaps.prototype.off = function(event_name) {
GMaps.off(event_name, this);
};

GMaps.prototype.once = function(event_name, handler) {
return GMaps.once(event_name, this, handler);
};

GMaps.custom_events = ['marker_added', 'marker_removed', 'polyline_added', 'polyline_removed', 'polygon_added', 'polygon_removed', 'geolocated', 'geolocation_failed'];

GMaps.on = function(event_name, object, handler) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
return google.maps.event.addListener(object, event_name, handler);
}
else {
var registered_event = {
handler : handler,
eventName : event_name
};

object.registered_events[event_name] = object.registered_events[event_name] || [];
object.registered_events[event_name].push(registered_event);

return registered_event;
}
};

GMaps.off = function(event_name, object) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
google.maps.event.clearListeners(object, event_name);
}
else {
object.registered_events[event_name] = [];
}
};

GMaps.once = function(event_name, object, handler) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
return google.maps.event.addListenerOnce(object, event_name, handler);
}
};

GMaps.fire = function(event_name, object, scope) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
google.maps.event.trigger(object, event_name, Array.prototype.slice.apply(arguments).slice(2));
}
else {
if(event_name in scope.registered_events) {
var firing_events = scope.registered_events[event_name];

for(var i = 0; i < firing_events.length; i++) {
(function(handler, scope, object) {
handler.apply(scope, [object]);
})(firing_events[i]['handler'], scope, object);
}
}
}
};

GMaps.geolocate = function(options) {
var complete_callback = options.always || options.complete;

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
options.success(position);

if (complete_callback) {
complete_callback();
}
}, function(error) {
options.error(error);

if (complete_callback) {
complete_callback();
}
}, options.options);
}
else {
options.not_supported();

if (complete_callback) {
complete_callback();
}
}
};

GMaps.geocode = function(options) {
this.geocoder = new google.maps.Geocoder();
var callback = options.callback;
if (options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) {
options.latLng = new google.maps.LatLng(options.lat, options.lng);
}

delete options.lat;
delete options.lng;
delete options.callback;

this.geocoder.geocode(options, function(results, status) {
callback(results, status);
});
};

if (typeof window.google === 'object' && window.google.maps) {
//==========================
// Polygon containsLatLng
// https://github.com/tparkin/Google-Maps-Point-in-Polygon
// Poygon getBounds extension - google-maps-extensions
// http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
if (!google.maps.Polygon.prototype.getBounds) {
google.maps.Polygon.prototype.getBounds = function(latLng) {
var bounds = new google.maps.LatLngBounds();
var paths = this.getPaths();
var path;

for (var p = 0; p < paths.getLength(); p++) {
path = paths.getAt(p);
for (var i = 0; i < path.getLength(); i++) {
bounds.extend(path.getAt(i));
}
}

return bounds;
};
}

if (!google.maps.Polygon.prototype.containsLatLng) {
// Polygon containsLatLng - method to determine if a latLng is within a polygon
google.maps.Polygon.prototype.containsLatLng = function(latLng) {
// Exclude points outside of bounds as there is no way they are in the poly
var bounds = this.getBounds();

if (bounds !== null && !bounds.contains(latLng)) {
return false;
}

// Raycast point in polygon method
var inPoly = false;

var numPaths = this.getPaths().getLength();
for (var p = 0; p < numPaths; p++) {
var path = this.getPaths().getAt(p);
var numPoints = path.getLength();
var j = numPoints - 1;

for (var i = 0; i < numPoints; i++) {
var vertex1 = path.getAt(i);
var vertex2 = path.getAt(j);

if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) {
if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) {
inPoly = !inPoly;
}
}

j = i;
}
}

return inPoly;
};
}

if (!google.maps.Circle.prototype.containsLatLng) {
google.maps.Circle.prototype.containsLatLng = function(latLng) {
if (google.maps.geometry) {
return google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
}
else {
return true;
}
};
}

google.maps.Rectangle.prototype.containsLatLng = function(latLng) {
return this.getBounds().contains(latLng);
};

google.maps.LatLngBounds.prototype.containsLatLng = function(latLng) {
return this.contains(latLng);
};

google.maps.Marker.prototype.setFences = function(fences) {
this.fences = fences;
};

google.maps.Marker.prototype.addFence = function(fence) {
this.fences.push(fence);
};

google.maps.Marker.prototype.getId = function() {
return this['__gm_id'];
};
}

//==========================
// Array indexOf
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
"use strict";
if (this == null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) {
return -1;
}
var n = 0;
if (arguments.length > 1) {
n = Number(arguments[1]);
if (n != n) { // shortcut for verifying if it's NaN
n = 0;
} else if (n != 0 && n != Infinity && n != -Infinity) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
if (n >= len) {
return -1;
}
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement) {
return k;
}
}
return -1;
}
}

return GMaps;
}));</syntaxhighlight>

== Validation ==
approve.js

== Audio ==
howlerjs.com - Cross Plattform Audio

== Browser Fixing ==
[[JavaScript - iOS Orientation Change Fix]]

Arduino Zubehör

2017-10-30T07:32:20Z

37.49.32.84:

== Displays ==
https://www.youtube.com/watch?v=E6quVf1_BIg

=== SW ===
* Nokia 5110 - geringe Auflösung aber leicht zu programmieren guter Library Support und extrem sparsam im Verbrauch. Im Sonnenlicht ablesbar. Nicht so einfach zu kriegen. Sollte günstig sein wird aber oft teuer verkauft.

=== Color ===
* SPI Color OLED
===e-Ink===

=== Touch ===
Nextion -> inkl. Controller

* Serial
* Einfach zu programmieren

Arduino Zubehör

2017-10-29T18:41:29Z

37.49.32.84: Die Seite wurde neu angelegt: „== Displays == === SW === * Nokia 51110 - geringe Auflösung aber leicht zu programmieren guter Library Support und extrem sparsam im Verbrauch. Im Sonnenlicht…“

== Displays ==
=== SW ===
* Nokia 51110 - geringe Auflösung aber leicht zu programmieren guter Library Support und extrem sparsam im Verbrauch. Im Sonnenlicht ablesbar.

Arduino

2017-10-29T18:40:30Z

37.49.32.84:

== Links ==
Arduino Homepage: http://arduino.cc

Fritzing Software, Links zu Anleitungen, Beispielprojekte, etc. http://fritzing.org

Fritzing Creator Kit Beispiele: http://fritzing.org/creatorkit-code

Graphical Arduino Programming with QM http://www.youtube.com/watch?v=OdX_-6f6-OY

== Bezugsquellen ==
Gutes Starter Kit: http://www.fritzing.org

== Kompatible Versionen ==
=== Chipsized ===
Gute kleine Versionen für verschiedene Projekte: https://www.youtube.com/watch?v=WCv_GnxZjtw
* Microview -> mit Minidisplay
* RFDuino -> für iPhone optimiert mit Bluetooth Module, dive abgestimmte Module.
Kekepad -> Verbindungssystem der Shields mit abgestimmtem Kabel
Digispark -> Münzgroß aber trotzdem mit USB
Tinyduino -> mit stackable shields -> Münzgroß

==Programmieren==
[[Arduino Programmieren]]

== Arduino Projekte ==
[[Arduino Projekte]]

== Arduino Firmware Flashen ==
[[Arduino Firmware]]

== Processing ==
Programmiersprache gedacht für Installationen. Ist im Prinzip ein abgespecktes JAVA

[[Processing]]

== Zubehör ==
[[Arduino Zubehör]]

Arduino

2017-10-29T18:23:31Z

37.49.32.84:

Arduino

2017-10-29T18:19:42Z

37.49.32.84: /* Bezugsquellen */

Processwire - Themes / Templates

2017-10-27T18:14:16Z

37.49.32.84: /* Links */

== Links ==
Siehe auch
* [[Processwire - Templates Grundausstattung]]
* [[ProcessWire - Field Rendering]]
* [[ProcessWire - Skeleton Template]]
* [[Processwire - Template from Scratch]]

== Theme Strategien ==

=== Basic Theme ===
<syntaxhighlight lang="php">
</syntaxhighlight>

<pre>
templates/
_func.inc (wenn benötigt)
home.php
basic_page.php
templates/partials
foot.inc
head.inc
</pre>
+
=== Layout Blocks ===
Anstatt den Templates fest definierte Seitenbereiche zuzuordnen und für jedes Layout ein Template zu erzeugen, kann es sinnvoll sein in '''Layout-Blöcken''' zu denken. also einzelne Gestaltungsbausteine, die der User auswählen kann und aus denen sich die Seite aufbaut.

Um dies umzusetzen bietet sich der '''Feldtyp RepeaterMatrix''' an, der beim den ProField Modul mit dabei ist. Als Alternative würde vielleicht

[[ProcessWire - Layout Blöcke mit RepeaterMatrix]]

== Rendering Strategien ==
=== Beispiele ===
http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-2/
=== Render Funktionen ===
https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#theres-also-page-gt-rendervalue

<syntaxhighlight lang="php">
// New Functions in 3.x
render()
renderValue()

// Functions for 2.x or for easy snippet inclusion (also possible with render
wireRenderFile() // mostly used for delayed output
wireIncludeFile() // for direct output
// i.e.
// returns the output of snippets/contactform.php
// the second argument is optional and will be passed to
// the called file as multiple variables with the name of the key
// also all api varables are available by default

wireRenderFile("snippets/contactform", array("stuff" => $something ));
</syntaxhighlight>
=== Delayed Output and Advanced Templates ===
Über prependTemplateFile und appendTemplateFile verarbeitet man die Templates wenn alle Inhalte zusammengesetzt sind.

'''Ordnerstruktur'''
<pre>
templates/
_func.inc
_init.inc
_main.inc
templates/partials
foot.inc
head.inc
</pre>

'''config.php'''
<syntaxhighlight lang="php">
<?php
...
$config->debug = false;
$config->sessionFingerprint = true;
$config->prependTemplateFile = '_init.php';
$config->appendTemplateFile = '_main.php';
$config->imageSizerOptions = array(
'upscaling' => true, // upscale if necessary to reach target size?
'cropping' => true, // crop if necessary to reach target size?
'autoRotation' => true, // automatically correct orientation?
'sharpening' => 'soft', // sharpening: none | soft | medium | strong
'quality' => 90, // quality: 1-100 where higher is better but bigger
);
</syntaxhighlight>

=== AJAX Driven Theme ===
config.php
// if ajax request set
$ajax = $input->post->ajax;

=== 3.x Strategie ===

== Syntax und Konventionen ==

== Module ==
[[Processwire - Writing Modules]]
=== Recommended Modules ===
<pre>
FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) - TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify
</pre>

== Grundausstattung ==
Siehe [[Processwire - Templates Grundausstattung]]

Processwire - Templates Grundausstattung

2017-10-27T17:20:27Z

37.49.32.84:

== Module ==
<syntaxhighlight lang="html5">
<p>rtest</p>
</syntaxhighlight>
=== Sprache ===

=== Sonstige ===
FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) - TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify

=== Templates mit Layoutblocks ===

== Felder ==
=== Felder ===
* content_main (left/right/aside/sidebar)
* link_to_child (checkbox to link to subpage)
* summary
== Templates ==

Mediawiki - Update

2017-10-27T17:14:35Z

37.49.32.84: Die Seite wurde neu angelegt: „* Updatescript läuft nur über Konsole. Deshalb muss der ssh Zugang aktiv sein * Das Script liegt in /maintenance/update.php * Vorher Extension und upload Ord…“

* Updatescript läuft nur über Konsole. Deshalb muss der ssh Zugang aktiv sein
* Das Script liegt in /maintenance/update.php
* Vorher Extension und upload Ordner sowie das LocalConfiguration File sichern und nach überschreiben der Dateien wieder einfügen.

Processwire - Templates Grundausstattung

2017-10-27T14:48:17Z

37.49.32.84:

== Module ==

=== Sprache ===

=== Sonstige ===
FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) - TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify

=== Templates mit Layoutblocks ===

== Felder ==
=== Felder ===
* content_main (left/right/aside/sidebar)
* link_to_child (checkbox to link to subpage)
* summary
== Templates ==

Processwire - Templates Grundausstattung

2017-10-27T14:47:26Z

37.49.32.84: Die Seite wurde neu angelegt: „== Module == === Defaultsprache Deutsch === === Templates mit Layoutblocks === == Felder == === Felder === * content_main (left/right/aside/sidebar) * link_to…“

== Module ==
=== Defaultsprache Deutsch ===
=== Templates mit Layoutblocks ===

== Felder ==
=== Felder ===
* content_main (left/right/aside/sidebar)
* link_to_child (checkbox to link to subpage)
* summary
== Templates ==

Processwire - Themes / Templates

2017-10-27T14:45:56Z

37.49.32.84: /* Grundausstattung */

== Links ==
Siehe auch
* [[ProcessWire - Field Rendering]]
* [[ProcessWire - Skeleton Template]]
* [[Processwire - Template from Scratch]]

== Theme Strategien ==

=== Basic Theme ===
<syntaxhighlight lang="php">
</syntaxhighlight>

<pre>
templates/
_func.inc (wenn benötigt)
home.php
basic_page.php
templates/partials
foot.inc
head.inc
</pre>
+
=== Layout Blocks ===
Anstatt den Templates fest definierte Seitenbereiche zuzuordnen und für jedes Layout ein Template zu erzeugen, kann es sinnvoll sein in '''Layout-Blöcken''' zu denken. also einzelne Gestaltungsbausteine, die der User auswählen kann und aus denen sich die Seite aufbaut.

Um dies umzusetzen bietet sich der '''Feldtyp RepeaterMatrix''' an, der beim den ProField Modul mit dabei ist. Als Alternative würde vielleicht

[[ProcessWire - Layout Blöcke mit RepeaterMatrix]]

== Rendering Strategien ==
=== Beispiele ===
http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-2/
=== Render Funktionen ===
https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#theres-also-page-gt-rendervalue

<syntaxhighlight lang="php">
// New Functions in 3.x
render()
renderValue()

// Functions for 2.x or for easy snippet inclusion (also possible with render
wireRenderFile() // mostly used for delayed output
wireIncludeFile() // for direct output
// i.e.
// returns the output of snippets/contactform.php
// the second argument is optional and will be passed to
// the called file as multiple variables with the name of the key
// also all api varables are available by default

wireRenderFile("snippets/contactform", array("stuff" => $something ));
</syntaxhighlight>
=== Delayed Output and Advanced Templates ===
Über prependTemplateFile und appendTemplateFile verarbeitet man die Templates wenn alle Inhalte zusammengesetzt sind.

'''Ordnerstruktur'''
<pre>
templates/
_func.inc
_init.inc
_main.inc
templates/partials
foot.inc
head.inc
</pre>

'''config.php'''
<syntaxhighlight lang="php">
<?php
...
$config->debug = false;
$config->sessionFingerprint = true;
$config->prependTemplateFile = '_init.php';
$config->appendTemplateFile = '_main.php';
$config->imageSizerOptions = array(
'upscaling' => true, // upscale if necessary to reach target size?
'cropping' => true, // crop if necessary to reach target size?
'autoRotation' => true, // automatically correct orientation?
'sharpening' => 'soft', // sharpening: none | soft | medium | strong
'quality' => 90, // quality: 1-100 where higher is better but bigger
);
</syntaxhighlight>

=== AJAX Driven Theme ===
config.php
// if ajax request set
$ajax = $input->post->ajax;

=== 3.x Strategie ===

== Syntax und Konventionen ==

== Module ==
[[Processwire - Writing Modules]]
=== Recommended Modules ===
<pre>
FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) - TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify
</pre>

== Grundausstattung ==
Siehe [[Processwire - Templates Grundausstattung]]

PhpMyAdmin

2017-10-27T13:15:07Z

37.49.32.84: Die Seite wurde neu angelegt: „== Passwort für DB setzen == Die config datei heisst "config.inc.php" im phpmyadmin Ordner $cfg['Servers'][$i]['password'] = ''; // MySQL password eintragen :)“

== Passwort für DB setzen ==
Die config datei heisst "config.inc.php" im phpmyadmin Ordner
$cfg['Servers'][$i]['password'] = ''; // MySQL password eintragen :)

MariaDB

2017-10-27T13:12:48Z

37.49.32.84:

Nachfolge SpinOff von mySQL nachdem dieses aufgekauft wurde. Jetzt auch Standard in XAMPP (Stand 2017). Bislang funktioniert alles wie gehabt.

== Maria DB Root Passwort ==
http://localhost/dashboard/docs/reset-mysql-password.html

MariaDB

2017-10-27T13:12:18Z

37.49.32.84: Die Seite wurde neu angelegt: „Nachfolge SpinOff von mySQL nachdem dieses aufgekauft wurde. Jetzt auch Standard in XAMPP (Stand 2017). Bislang funktioniert alles wie gehabt.“

Nachfolge SpinOff von mySQL nachdem dieses aufgekauft wurde. Jetzt auch Standard in XAMPP (Stand 2017). Bislang funktioniert alles wie gehabt.

MySQL

2017-10-27T13:11:22Z

37.49.32.84:

Informationen zur Datenbank aber auch Tipps zur Bedienung etc.

Siehe auch [[MariaDB]]
== mySQL - Tips und Tricks ==
[[mySQL - Tips und Tricks]]

== mySQL - Cheat Sheet ==
[[mySQL - Cheat Sheet]]

== mySQL auf der Kommandozeile ==
[[mySQL - Kommandozeile]]

== Codeschnipsel ==
=== Typ der Tabellen festlegen ===
<pre>
CREATE TABLE `foo` {
...
} ENGINE=InnoDB

CREATE TABLE `bar` {
...
} ENGINE=MyISAM
</pre>

==== Typo aller Tabellen auf einmal ändern ====
Folgendes SQL-Statement erzeugt uns die notwendigen SQL-Kommandos um alle Tabellen in der Datenbank „amel“ auf InnoDB umzustellen, die derzeit noch MyISAM sind:

SELECT CONCAT('ALTER TABLE `',table_schema,'`.`',
table_name,'` engine=MyISAM;')
FROM information_schema.tables
WHERE engine = 'InnoDB' AND table_schema = 'amel';
Dann die erzeugten Statements aus der Druckansicht holen

=== InnoDB aktivieren ===

Zitat aus http://www.marmotli.ch/mysql/node35.html

5.2.1 Aktivieren der InnoDB-Tabellen

Das Arbeiten mit dem Tabellentyp 'InnoDB' setzt voraus, dass der MySQL-Server mit diesem Tabellentyp hochgefahren wird.

Unter Debian 3.0 d.h. falls wir MySQL gemäss dieser Anleitung aufgesetzt haben, steht der InnoDB-Tabellentyp zunächst nicht zur Verfügung. Nicht weil MySQL 4.0.13 das nicht unterstützen würde, sondern weil wir die my.cnf-Datei von der Version 3.23.x übernommen haben und das dort nicht aktiviert war. Um die InnoDB-Tabellen nun zu aktivieren, müssen wir einige Änderungen in der Datei '/etc/mysql/my.cnf' vornehmen:

# Read the manual if you want to enable InnoDB!
# skip-innodb
innodb_data_home_dir =
innodb_data_file_path = /var/lib/mysql/ibdata/ibdata1:100M:autoextend

Zunächst muss 'skip-innodb' deaktiviert werden. Danach müssen wir den Speicherort für die Tabellen angeben. Falls wir 'innodb_data_home_dir' leer belassen, verwendet MySQL den normalen Datenpfad der Datenbanken. Dort werden einige Temporär-Dateien erstellt. Den Speicherort für die InnoDB-Tabellen legen wir mit dem Wert 'innodb_data_file_path' fest. Wir verwenden wiederum den Speicherort für die MySQL-Datenbanken sowie das Unterverzeichnis 'ibdata'. Dieses Verzeichnis muss von Hand angelegt werden:

mkdir /var/lib/mysql/ibdata
chown -R mysql /var/lib/mysql/ibdata
chgrp -R mysql /var/lib/mysql/ibdata

Um die InnoDB-Tabellen endgültig nutzen zu können, müssen wir den MySQL-Server neu initialisieren:

/etc/init.d/mysql restart

Der Neustart dauert einige Sekunden, weil die InnoDB-Tabellen zunächst initialisiert werden müssen. Um zu überprüfen, ob die InnoDB-Tabellen nun aktiviert sind, können wir in '/var/lib/mysql/ibdata' nachsehen. Falls Sie dort eine Datei vorfinden, ist alles ok.

=== Werte aus Komma getrennter Liste auswerten ===
Vor allem im Zusammenhang mit Typo3 Datenbanken kommt es oft dazu, daß man integer Werte in Komma-separierten Listen in einem Datenbank vorfindet. Auf diese Weise erzeugt Typo3 in der Standardeinstellung n:m Verknüpfungen (aber auch 1 : n Verknüpfungen).

Beim Auslesen ist das aber eher nachteilig. Eine geschicktere Methode als IN ab mysql 4 (meines Wissens) ist der Befehl FIND_IN_SET.

Die IN - Abfrage ist nur für Ganze Feldlängen zutreffend, also
'1','2','3','4','5',usw, ...

Bei der Funktion FIND_IN_SET sucht MySQL in einer bestimmten Zeile und gibt die
Stelle zurück an der der Wert in der LISTE steht.

FIND_IN_SET(WERT,LISTE)

In Typo3 gibts auch die Methode:
AND '.$GLOBALS['TYPO3_DB']->listQuery('feldname',5,'tabellenname').'
Die aber ein kompliziertes und wenig Performantes SQL Konstrukt erzeugt.

Vielleicht wird die Funktion ja noch umgebaut ;-)

== MySQL - Daten importieren und exportieren ==
[[MySQL - Daten importieren und exportieren]]

== MySQL Passwort zurücksetzen ==
http://localhost/dashboard/docs/reset-mysql-password.html
http://dev.mysql.com/doc/refman/5.0/en/resetting-permissions.html