Autor: zelle

Font Awesome Unicodes

Nach dem ich heute längere Zeit damit verbracht habe, die passenden Unicodes zu den Font Awesome Icons zu parsen, stelle ich hier nochmal das JSON zur Verfügung. Vielleicht findet ja jemand Verwendung dafür. (Stand 17.02.2015)



{"fa-glass":"\u000","fa-music":"\u001","fa-search":"\u002","fa-envelope-o":"\u003","fa-heart":"\u004","fa-star":"\u005","fa-star-o":"\u006","fa-user":"\u007","fa-film":"\u008","fa-th-large":"\u009","fa-th":"\u00a","fa-th-list":"\u00b","fa-check":"\u00c","fa-remove":"\u00d","fa-close":"\u00d","fa-times":"\u00d","fa-search-plus":"\u00e","fa-search-minus":"\u010","fa-power-off":"\u011","fa-signal":"\u012","fa-gear":"\u013","fa-cog":"\u013","fa-trash-o":"\u014","fa-home":"\u015","fa-file-o":"\u016","fa-clock-o":"\u017","fa-road":"\u018","fa-download":"\u019","fa-arrow-circle-o-down":"\u01a","fa-arrow-circle-o-up":"\u01b","fa-inbox":"\u01c","fa-play-circle-o":"\u01d","fa-rotate-right":"\u01e","fa-repeat":"\u01e","fa-refresh":"\u021","fa-list-alt":"\u022","fa-lock":"\u023","fa-flag":"\u024","fa-headphones":"\u025","fa-volume-off":"\u026","fa-volume-down":"\u027","fa-volume-up":"\u028","fa-qrcode":"\u029","fa-barcode":"\u02a","fa-tag":"\u02b","fa-tags":"\u02c","fa-book":"\u02d","fa-bookmark":"\u02e","fa-print":"\u02f","fa-camera":"\u030","fa-font":"\u031","fa-bold":"\u032","fa-italic":"\u033","fa-text-height":"\u034","fa-text-width":"\u035","fa-align-left":"\u036","fa-align-center":"\u037","fa-align-right":"\u038","fa-align-justify":"\u039","fa-list":"\u03a","fa-dedent":"\u03b","fa-outdent":"\u03b","fa-indent":"\u03c","fa-video-camera":"\u03d","fa-photo":"\u03e","fa-image":"\u03e","fa-picture-o":"\u03e","fa-pencil":"\u040","fa-map-marker":"\u041","fa-adjust":"\u042","fa-tint":"\u043","fa-edit":"\u044","fa-pencil-square-o":"\u044","fa-share-square-o":"\u045","fa-check-square-o":"\u046","fa-arrows":"\u047","fa-step-backward":"\u048","fa-fast-backward":"\u049","fa-backward":"\u04a","fa-play":"\u04b","fa-pause":"\u04c","fa-stop":"\u04d","fa-forward":"\u04e","fa-fast-forward":"\u050","fa-step-forward":"\u051","fa-eject":"\u052","fa-chevron-left":"\u053","fa-chevron-right":"\u054","fa-plus-circle":"\u055","fa-minus-circle":"\u056","fa-times-circle":"\u057","fa-check-circle":"\u058","fa-question-circle":"\u059","fa-info-circle":"\u05a","fa-crosshairs":"\u05b","fa-times-circle-o":"\u05c","fa-check-circle-o":"\u05d","fa-ban":"\u05e","fa-arrow-left":"\u060","fa-arrow-right":"\u061","fa-arrow-up":"\u062","fa-arrow-down":"\u063","fa-mail-forward":"\u064","fa-share":"\u064","fa-expand":"\u065","fa-compress":"\u066","fa-plus":"\u067","fa-minus":"\u068","fa-asterisk":"\u069","fa-exclamation-circle":"\u06a","fa-gift":"\u06b","fa-leaf":"\u06c","fa-fire":"\u06d","fa-eye":"\u06e","fa-eye-slash":"\u070","fa-warning":"\u071","fa-exclamation-triangle":"\u071","fa-plane":"\u072","fa-calendar":"\u073","fa-random":"\u074","fa-comment":"\u075","fa-magnet":"\u076","fa-chevron-up":"\u077","fa-chevron-down":"\u078","fa-retweet":"\u079","fa-shopping-cart":"\u07a","fa-folder":"\u07b","fa-folder-open":"\u07c","fa-arrows-v":"\u07d","fa-arrows-h":"\u07e","fa-bar-chart-o":"\u080","fa-bar-chart":"\u080","fa-twitter-square":"\u081","fa-facebook-square":"\u082","fa-camera-retro":"\u083","fa-key":"\u084","fa-gears":"\u085","fa-cogs":"\u085","fa-comments":"\u086","fa-thumbs-o-up":"\u087","fa-thumbs-o-down":"\u088","fa-star-half":"\u089","fa-heart-o":"\u08a","fa-sign-out":"\u08b","fa-linkedin-square":"\u08c","fa-thumb-tack":"\u08d","fa-external-link":"\u08e","fa-sign-in":"\u090","fa-trophy":"\u091","fa-github-square":"\u092","fa-upload":"\u093","fa-lemon-o":"\u094","fa-phone":"\u095","fa-square-o":"\u096","fa-bookmark-o":"\u097","fa-phone-square":"\u098","fa-twitter":"\u099","fa-facebook-f":"\u09a","fa-facebook":"\u09a","fa-github":"\u09b","fa-unlock":"\u09c","fa-credit-card":"\u09d","fa-rss":"\u09e","fa-hdd-o":"\u0a0","fa-bullhorn":"\u0a1","fa-bell":"\u0f3","fa-certificate":"\u0a3","fa-hand-o-right":"\u0a4","fa-hand-o-left":"\u0a5","fa-hand-o-up":"\u0a6","fa-hand-o-down":"\u0a7","fa-arrow-circle-left":"\u0a8","fa-arrow-circle-right":"\u0a9","fa-arrow-circle-up":"\u0aa","fa-arrow-circle-down":"\u0ab","fa-globe":"\u0ac","fa-wrench":"\u0ad","fa-tasks":"\u0ae","fa-filter":"\u0b0","fa-briefcase":"\u0b1","fa-arrows-alt":"\u0b2","fa-group":"\u0c0","fa-users":"\u0c0","fa-chain":"\u0c1","fa-link":"\u0c1","fa-cloud":"\u0c2","fa-flask":"\u0c3","fa-cut":"\u0c4","fa-scissors":"\u0c4","fa-copy":"\u0c5","fa-files-o":"\u0c5","fa-paperclip":"\u0c6","fa-save":"\u0c7","fa-floppy-o":"\u0c7","fa-square":"\u0c8","fa-navicon":"\u0c9","fa-reorder":"\u0c9","fa-bars":"\u0c9","fa-list-ul":"\u0ca","fa-list-ol":"\u0cb","fa-strikethrough":"\u0cc","fa-underline":"\u0cd","fa-table":"\u0ce","fa-magic":"\u0d0","fa-truck":"\u0d1","fa-pinterest":"\u0d2","fa-pinterest-square":"\u0d3","fa-google-plus-square":"\u0d4","fa-google-plus":"\u0d5","fa-money":"\u0d6","fa-caret-down":"\u0d7","fa-caret-up":"\u0d8","fa-caret-left":"\u0d9","fa-caret-right":"\u0da","fa-columns":"\u0db","fa-unsorted":"\u0dc","fa-sort":"\u0dc","fa-sort-down":"\u0dd","fa-sort-desc":"\u0dd","fa-sort-up":"\u0de","fa-sort-asc":"\u0de","fa-envelope":"\u0e0","fa-linkedin":"\u0e1","fa-rotate-left":"\u0e2","fa-undo":"\u0e2","fa-legal":"\u0e3","fa-gavel":"\u0e3","fa-dashboard":"\u0e4","fa-tachometer":"\u0e4","fa-comment-o":"\u0e5","fa-comments-o":"\u0e6","fa-flash":"\u0e7","fa-bolt":"\u0e7","fa-sitemap":"\u0e8","fa-umbrella":"\u0e9","fa-paste":"\u0ea","fa-clipboard":"\u0ea","fa-lightbulb-o":"\u0eb","fa-exchange":"\u0ec","fa-cloud-download":"\u0ed","fa-cloud-upload":"\u0ee","fa-user-md":"\u0f0","fa-stethoscope":"\u0f1","fa-suitcase":"\u0f2","fa-bell-o":"\u0a2","fa-coffee":"\u0f4","fa-cutlery":"\u0f5","fa-file-text-o":"\u0f6","fa-building-o":"\u0f7","fa-hospital-o":"\u0f8","fa-ambulance":"\u0f9","fa-medkit":"\u0fa","fa-fighter-jet":"\u0fb","fa-beer":"\u0fc","fa-h-square":"\u0fd","fa-plus-square":"\u0fe","fa-angle-double-left":"\u100","fa-angle-double-right":"\u101","fa-angle-double-up":"\u102","fa-angle-double-down":"\u103","fa-angle-left":"\u104","fa-angle-right":"\u105","fa-angle-up":"\u106","fa-angle-down":"\u107","fa-desktop":"\u108","fa-laptop":"\u109","fa-tablet":"\u10a","fa-mobile-phone":"\u10b","fa-mobile":"\u10b","fa-circle-o":"\u10c","fa-quote-left":"\u10d","fa-quote-right":"\u10e","fa-spinner":"\u110","fa-circle":"\u111","fa-mail-reply":"\u112","fa-reply":"\u112","fa-github-alt":"\u113","fa-folder-o":"\u114","fa-folder-open-o":"\u115","fa-smile-o":"\u118","fa-frown-o":"\u119","fa-meh-o":"\u11a","fa-gamepad":"\u11b","fa-keyboard-o":"\u11c","fa-flag-o":"\u11d","fa-flag-checkered":"\u11e","fa-terminal":"\u120","fa-code":"\u121","fa-mail-reply-all":"\u122","fa-reply-all":"\u122","fa-star-half-empty":"\u123","fa-star-half-full":"\u123","fa-star-half-o":"\u123","fa-location-arrow":"\u124","fa-crop":"\u125","fa-code-fork":"\u126","fa-unlink":"\u127","fa-chain-broken":"\u127","fa-question":"\u128","fa-info":"\u129","fa-exclamation":"\u12a","fa-superscript":"\u12b","fa-subscript":"\u12c","fa-eraser":"\u12d","fa-puzzle-piece":"\u12e","fa-microphone":"\u130","fa-microphone-slash":"\u131","fa-shield":"\u132","fa-calendar-o":"\u133","fa-fire-extinguisher":"\u134","fa-rocket":"\u135","fa-maxcdn":"\u136","fa-chevron-circle-left":"\u137","fa-chevron-circle-right":"\u138","fa-chevron-circle-up":"\u139","fa-chevron-circle-down":"\u13a","fa-html5":"\u13b","fa-css3":"\u13c","fa-anchor":"\u13d","fa-unlock-alt":"\u13e","fa-bullseye":"\u140","fa-ellipsis-h":"\u141","fa-ellipsis-v":"\u142","fa-rss-square":"\u143","fa-play-circle":"\u144","fa-ticket":"\u145","fa-minus-square":"\u146","fa-minus-square-o":"\u147","fa-level-up":"\u148","fa-level-down":"\u149","fa-check-square":"\u14a","fa-pencil-square":"\u14b","fa-external-link-square":"\u14c","fa-share-square":"\u14d","fa-compass":"\u14e","fa-toggle-down":"\u150","fa-caret-square-o-down":"\u150","fa-toggle-up":"\u151","fa-caret-square-o-up":"\u151","fa-toggle-right":"\u152","fa-caret-square-o-right":"\u152","fa-euro":"\u153","fa-eur":"\u153","fa-gbp":"\u154","fa-dollar":"\u155","fa-usd":"\u155","fa-rupee":"\u156","fa-inr":"\u156","fa-cny":"\u157","fa-rmb":"\u157","fa-yen":"\u157","fa-jpy":"\u157","fa-ruble":"\u158","fa-rouble":"\u158","fa-rub":"\u158","fa-won":"\u159","fa-krw":"\u159","fa-bitcoin":"\u15a","fa-btc":"\u15a","fa-file":"\u15b","fa-file-text":"\u15c","fa-sort-alpha-asc":"\u15d","fa-sort-alpha-desc":"\u15e","fa-sort-amount-asc":"\u160","fa-sort-amount-desc":"\u161","fa-sort-numeric-asc":"\u162","fa-sort-numeric-desc":"\u163","fa-thumbs-up":"\u164","fa-thumbs-down":"\u165","fa-youtube-square":"\u166","fa-youtube":"\u167","fa-xing":"\u168","fa-xing-square":"\u169","fa-youtube-play":"\u16a","fa-dropbox":"\u16b","fa-stack-overflow":"\u16c","fa-instagram":"\u16d","fa-flickr":"\u16e","fa-adn":"\u170","fa-bitbucket":"\u171","fa-bitbucket-square":"\u172","fa-tumblr":"\u173","fa-tumblr-square":"\u174","fa-long-arrow-down":"\u175","fa-long-arrow-up":"\u176","fa-long-arrow-left":"\u177","fa-long-arrow-right":"\u178","fa-apple":"\u179","fa-windows":"\u17a","fa-android":"\u17b","fa-linux":"\u17c","fa-dribbble":"\u17d","fa-skype":"\u17e","fa-foursquare":"\u180","fa-trello":"\u181","fa-female":"\u182","fa-male":"\u183","fa-gittip":"\u184","fa-gratipay":"\u184","fa-sun-o":"\u185","fa-moon-o":"\u186","fa-archive":"\u187","fa-bug":"\u188","fa-vk":"\u189","fa-weibo":"\u18a","fa-renren":"\u18b","fa-pagelines":"\u18c","fa-stack-exchange":"\u18d","fa-arrow-circle-o-right":"\u18e","fa-arrow-circle-o-left":"\u190","fa-toggle-left":"\u191","fa-caret-square-o-left":"\u191","fa-dot-circle-o":"\u192","fa-wheelchair":"\u193","fa-vimeo-square":"\u194","fa-turkish-lira":"\u195","fa-try":"\u195","fa-plus-square-o":"\u196","fa-space-shuttle":"\u197","fa-slack":"\u198","fa-envelope-square":"\u199","fa-wordpress":"\u19a","fa-openid":"\u19b","fa-institution":"\u19c","fa-bank":"\u19c","fa-university":"\u19c","fa-mortar-board":"\u19d","fa-graduation-cap":"\u19d","fa-yahoo":"\u19e","fa-google":"\u1a0","fa-reddit":"\u1a1","fa-reddit-square":"\u1a2","fa-stumbleupon-circle":"\u1a3","fa-stumbleupon":"\u1a4","fa-delicious":"\u1a5","fa-digg":"\u1a6","fa-pied-piper":"\u1a7","fa-pied-piper-alt":"\u1a8","fa-drupal":"\u1a9","fa-joomla":"\u1aa","fa-language":"\u1ab","fa-fax":"\u1ac","fa-building":"\u1ad","fa-child":"\u1ae","fa-paw":"\u1b0","fa-spoon":"\u1b1","fa-cube":"\u1b2","fa-cubes":"\u1b3","fa-behance":"\u1b4","fa-behance-square":"\u1b5","fa-steam":"\u1b6","fa-steam-square":"\u1b7","fa-recycle":"\u1b8","fa-automobile":"\u1b9","fa-car":"\u1b9","fa-cab":"\u1ba","fa-taxi":"\u1ba","fa-tree":"\u1bb","fa-spotify":"\u1bc","fa-deviantart":"\u1bd","fa-soundcloud":"\u1be","fa-database":"\u1c0","fa-file-pdf-o":"\u1c1","fa-file-word-o":"\u1c2","fa-file-excel-o":"\u1c3","fa-file-powerpoint-o":"\u1c4","fa-file-photo-o":"\u1c5","fa-file-picture-o":"\u1c5","fa-file-image-o":"\u1c5","fa-file-zip-o":"\u1c6","fa-file-archive-o":"\u1c6","fa-file-sound-o":"\u1c7","fa-file-audio-o":"\u1c7","fa-file-movie-o":"\u1c8","fa-file-video-o":"\u1c8","fa-file-code-o":"\u1c9","fa-vine":"\u1ca","fa-codepen":"\u1cb","fa-jsfiddle":"\u1cc","fa-life-bouy":"\u1cd","fa-life-buoy":"\u1cd","fa-life-saver":"\u1cd","fa-support":"\u1cd","fa-life-ring":"\u1cd","fa-circle-o-notch":"\u1ce","fa-ra":"\u1d0","fa-rebel":"\u1d0","fa-ge":"\u1d1","fa-empire":"\u1d1","fa-git-square":"\u1d2","fa-git":"\u1d3","fa-hacker-news":"\u1d4","fa-tencent-weibo":"\u1d5","fa-qq":"\u1d6","fa-wechat":"\u1d7","fa-weixin":"\u1d7","fa-send":"\u1d8","fa-paper-plane":"\u1d8","fa-send-o":"\u1d9","fa-paper-plane-o":"\u1d9","fa-history":"\u1da","fa-genderless":"\u1db","fa-circle-thin":"\u1db","fa-header":"\u1dc","fa-paragraph":"\u1dd","fa-sliders":"\u1de","fa-share-alt":"\u1e0","fa-share-alt-square":"\u1e1","fa-bomb":"\u1e2","fa-soccer-ball-o":"\u1e3","fa-futbol-o":"\u1e3","fa-tty":"\u1e4","fa-binoculars":"\u1e5","fa-plug":"\u1e6","fa-slideshare":"\u1e7","fa-twitch":"\u1e8","fa-yelp":"\u1e9","fa-newspaper-o":"\u1ea","fa-wifi":"\u1eb","fa-calculator":"\u1ec","fa-paypal":"\u1ed","fa-google-wallet":"\u1ee","fa-cc-visa":"\u1f0","fa-cc-mastercard":"\u1f1","fa-cc-discover":"\u1f2","fa-cc-amex":"\u1f3","fa-cc-paypal":"\u1f4","fa-cc-stripe":"\u1f5","fa-bell-slash":"\u1f6","fa-bell-slash-o":"\u1f7","fa-trash":"\u1f8","fa-copyright":"\u1f9","fa-at":"\u1fa","fa-eyedropper":"\u1fb","fa-paint-brush":"\u1fc","fa-birthday-cake":"\u1fd","fa-area-chart":"\u1fe","fa-pie-chart":"\u200","fa-line-chart":"\u201","fa-lastfm":"\u202","fa-lastfm-square":"\u203","fa-toggle-off":"\u204","fa-toggle-on":"\u205","fa-bicycle":"\u206","fa-bus":"\u207","fa-ioxhost":"\u208","fa-angellist":"\u209","fa-cc":"\u20a","fa-shekel":"\u20b","fa-sheqel":"\u20b","fa-ils":"\u20b","fa-meanpath":"\u20c","fa-buysellads":"\u20d","fa-connectdevelop":"\u20e","fa-dashcube":"\u210","fa-forumbee":"\u211","fa-leanpub":"\u212","fa-sellsy":"\u213","fa-shirtsinbulk":"\u214","fa-simplybuilt":"\u215","fa-skyatlas":"\u216","fa-cart-plus":"\u217","fa-cart-arrow-down":"\u218","fa-diamond":"\u219","fa-ship":"\u21a","fa-user-secret":"\u21b","fa-motorcycle":"\u21c","fa-street-view":"\u21d","fa-heartbeat":"\u21e","fa-venus":"\u221","fa-mars":"\u222","fa-mercury":"\u223","fa-transgender":"\u224","fa-transgender-alt":"\u225","fa-venus-double":"\u226","fa-mars-double":"\u227","fa-venus-mars":"\u228","fa-mars-stroke":"\u229","fa-mars-stroke-v":"\u22a","fa-mars-stroke-h":"\u22b","fa-neuter":"\u22c","fa-facebook-official":"\u230","fa-pinterest-p":"\u231","fa-whatsapp":"\u232","fa-server":"\u233","fa-user-plus":"\u234","fa-user-times":"\u235","fa-hotel":"\u236","fa-bed":"\u236","fa-viacoin":"\u237","fa-train":"\u238","fa-subway":"\u239","fa-medium":"\u23a"}

Bash Script OAuth Token

Ein einfaches Bash Script das einen Call auf eine Url macht und dort die response ausliest .. z.B. fürs Oauth Token holen


#!/bin/bash
echo "Username:"
read USERNAME
echo "Password:"
read -s PASSWORD

#PASSWORD="abcde"
CLIENT_ID="id"
CLIENT_SECRET="key"
GRANT_TYPE="password"

URL="url"

CONTENT=$(curl -X POST --data "username=$USERNAME&password=$PASSWORD&client_id=$CLIENT_ID&client_secret=$CLIENT_SECRET&grant_type=$GRANT_TYPE" "$URL"  -s)

echo "$CONTENT"

Description Lists Horizontal

Folgende Problemstellung: Eine Description List die horizontal ausgerichtet wird, jedoch hatte ich das Problem das bei einem zu hohen Text (also im <dd> ) Element der Hintergrund des dt nur bis zur Höhe des dt Elements blieb. Einfache Lösung (eigentlich offensichtlich und vermutlich gibt es schon 100e Anleitungen dazu)


dl.horizontal {
    display: block;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
}

.horizontal dt {

    float: left;
    width: 30%;
    overflow: hidden;
    clear: left;
    text-align: right;
    white-space: nowrap;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    min-height: 25px;
    padding-top: 10px;
    text-align: left;

}
.horizontal dt span{
    padding-left: 15px;
}
.horizontal dd {
    border-top: 1px solid #ddd;
    margin-left: 30%;
    min-height: 25px;
    padding-top: 10px;
    padding-left: 15px;
    border-left: 1px solid #ddd;
    background-color: #ffffff;
}
.horizontal dt:first-of-type {
    border-top: none;
}
.horizontal dd:first-of-type {
    border-top: none;
}

Es wird einfach dem dl Element ein grauer Background gegeben und die dd Elemente erhalten einen weißen Hintergrund. Probleme könnten hier noch auftreteten wenn das dt Element zu groß werden würde. (dl -horizontal wurde aus Boostrap 3 übernommen)

WordPress xmlrpc call Beispiel XML

Nachdem ich jetzt relativ lange nach einen Beispiel XML Code für das Erstellen eines Blogeintrages auf einer WordPress Instanz gesucht habe hier ein Bsp XML. Leider nur metaWeblog.newPost und nicht wp.newPost, die Hilfeseiten auf der WordPress.org Seite lassen leider sehr zu wünschen übrig. Es ist nicht ersichtlich wie das XML aussehen soll meiner Meinung nach,


<?xml version="1.0"?>
<methodCall>
<methodName>metaWeblog.newPost</methodName>
<params>
<param><value><int>1</int></value></param>
<param><value><string>admin</string></value></param>
<param><value><string>password</string></value></param>
<param><value><struct>
  <member><name>title</name><value><string>Beitragstitle</string></value></member>
  <member><name>categories</name><value><array><data>
  <value><string>Kategorie 1</string></value>
  <value><string>Kategorie 2</string></value>
</data></array></value></member>
  <member><name>mt_keywords</name><value><string>tag1, tag2, tag3</string></value></member>
  <member><name>content</name><value><string>Hier könnte Inhalt stehen</string></value></member>
</struct></value></param>
<param><value><boolean>1</boolean></value></param>
</params></methodCall>

Hier das Script für das Erzeugen des XML, mit der Klasse die im WordPress Ordner liegt.

<!--?php require_once("../wp-includes/class-IXR.php"); 
$rpc = new IXR_Client('http://localhost/wordpress/xmlrpc.php'); 
$post = array(); // das Post construct: // Metadaten 
$post['title']     = 'Beitragstitle'; 
$post['categories']   = array('Kategorie 1', 'Kategorie 2'); 
$post['mt_keywords']   = 'tag1, tag2, tag3'; // Posttext 
$post['content']   = 'Hier könnte Inhalt stehen'; 

print_r($rpc--->getXml('metaWeblog.newPost', // Methode
1, // Blog ID, in der Regel 1
'username', // Benutzer
'password', // Passwort
$post, // Post construct
true // Veröffentlichen?
));

echo "\n \n send to server \n";
$status = $rpc-&gt;query('metaWeblog.newPost', // Methode
1, // Blog ID, in der Regel 1
'username', // Benutzer
'password', // Passwort
$post, // Post construct
true // Veröffentlichen?
);

// Ergebnis überprüfen und ggf. eine Fehlermeldung ausgeben
if(!$status) {
echo 'Error ('.$rpc-&gt;getErrorCode().'): '.$rpc-&gt;getErrorMessage();
echo " \n";
exit;
}

// Sonst: ID des neuen Posts ausgeben
echo 'New Post ID: '.$rpc-&gt;getResponse();
echo " \n";

http://felixtriller.de/2009/12/22/wordpress-mit-php-und-xml-rpc-bloggen/. Code wurde hier entnommen und die Klasse wurde um 1e Methode erweitert.



    function getXml($args){
        $args = func_get_args();
        $method = array_shift($args);
        $request = new IXR_Request($method, $args);
        return $request->getXml();
    }

Twitters Typeahead and Ajax

Twitters JQuery-Autocompleter Typeahead (nicht Bootstrap Typeahead, welcher in Bootstrap 3 auch nicht mehr integriert ist) ist ein recht praktikabler Autocompleter den man mit ein paar Zeilen gut an seine eigenen Bedürfnisse anpassen kann. Ich zeige es hier Anhand eines Ajax Calls mit zuerst noch nicht passenden Daten für Typeahead. Um diesen jetzt mit Custom Ajax Daten zu befüllen, werden der typeahead Funktion folgende Optionen übergeben.

Remote sagt hier aus das die Daten nachgeladen werden (könnte z.B. auch eine Json Datei auf einen Server sein oder ähnliches). Remote wiederum besteht aus mehreren Parametern die befüllt werden können. Die Url gibt logischerweise nur das Ziel des Ajax Calls an. Wie man bei URL sieht stelle ich mir hier z.B. die url durch eine Variable und den Wert des Inputfelds zusammen %QUERY wird anschließend von der Funktion automatisch mit dem Wert des Inputfeldes ersetzt. Um jetzt die noch nicht ganz passenden Daten in passende Daten zu konvertieren gibt es hier auch noch das filter – Feld. Diese erwartet eine Funktion, wobei der erste Parameter die vom Server geholten Daten repräsentieren. Hier erstelle ich ganz ein ganz simples Array, welches ich anschließend zurückgebe (Twitter Doku) 


        $('#input').typeahead({
            remote: {
                url: baseUrl+'?q=%QUERY',
                filter: function(parsedResponse){
                    var data = [];
                    $.each(parsedResponse, function(index, item){
                        data.push(  {
                            value: item.name,
                            tokens: [item.name],
                            name: item.name
                        });
                    });
                    return data;
                }//A function with the signature filter(parsedResponse) that transforms the response body into an array of datums. Expected to return an array of datums.
            }
        });

So hat man mit ein paar Zeilen Daten vom Server abgeholt und an seine Bedürfnisse angepasst. Für Bootstrap 3 müssen momentan noch ein paar Zeilen CSS eingefügt werden (Typeahead CSS ). Zusätzlich musste ich aber hierbei noch für die hints display: none setzen da der Hint nicht an die passende Stelle wollte. Zusätzlich musste ich für den Span die Breite auf 100% erhöhen da sonst das input Feld zu klein bleibt.


.twitter-typeahead .tt-hint
{
    display: none;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius:4px;
}

.twitter-typeahead .hint-small
{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.twitter-typeahead .hint-large
{
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 2px;
}

.tt-dropdown-menu {
    min-width: 240px;
    margin-top: 2px;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
    color: #fff;
}

.tt-suggestion p {
    margin: 0;
}

.twitter-typeahead {
    width: 100%;
}

Language Switch

Heute stelle ich eine Lösung für einen Language switch im Zend2 Framework mit Ajax und Cookies.

Zu allererst muss die module.config.php Datei angepasst werden. In der Sekeletton Application von Zend2 ist der Translator bereits Konfiguriert und im Service Manager eingebunden. Ich habe lediglich die Übersetzungsdatei auf ein php – Array umgestellt:

(type => phparray und pattern => %s.php)


    'service_manager' => array(
        'factories' => array(
            'translator' => 'Zend\I18n\Translator\TranslatorServiceFactory',
        ),
    ),
    'translator' => array(
        'locale' => 'de_DE',
        'translation_file_patterns' => array(
            array(
                'type'     => 'phparray',
                'base_dir' => __DIR__ . '/../language',
                'pattern'  => '%s.php',
            ),
        ),
    ),

Außerdem habe ich für die Cookies die Module Klasse modifiziert:


class Module
{
    public function onBootstrap(MvcEvent $e)
    {
        $e->getApplication()->getServiceManager()->get('translator');

        $translator = $e->getApplication()->getServiceManager()->get('translator');
        if(isset($e->getRequest()->getCookie()->language) && $e->getRequest()->getCookie()->language != '' && $e->getRequest()->getCookie()->language != null){
            $language = $e->getRequest()->getCookie()->language;
            $translator->setLocale($language)->setFallbackLocale('en_EN');
        }
     }
}

Hierbei wird der Translator geladen. Weiters wird in der onBoostrap – Methode der Request abgefangen und ausgelesen. Ich hole mir mithilfe von getCookie() die Cookies aus den Request. Warum hier konkret language geholt wird werden wir anschließend im Controller sehen. Wenn die Sprache gesetzt worden ist wird sie dem Translator übergeben bzw. die Locale gesetzt. Also jene Variable die die Sprache bestimmt. Als Fallback wird hier z.B. Englisch angenommen.

Weiters benötigen wir für die Lösung einen Controller der uns den Cookie setzt. ich habe ihn hier in einen ApiController von mir geladen der Json für den Ajax Call als Antwort zurückliefert. 


class LanguageApiController extends AbstractActionController
{

   public function indexAction(){
      $language = htmlspecialchars($this->getRequest()->getQuery('language', 'de_DE'));
      $cookie = new SetCookie('language', $language);
      $this->getResponse()->setStatusCode(Response::STATUS_CODE_201);
      $this->getResponse()->getHeaders()->addHeader($cookie);
      return new JsonModel(array('cookiecreated'=>'ok', 'language'=>$language));
   }
}

Hier wird, wie wir später noch sehen werden, einfach die Sprache mit einen GET Parameter gesetzt. Es wird ein Cookie erstellt der ‚language‘ auf den ausgelesen Wert speichert. Anschließend wird er der Response übergeben und dem Header des Requests hinzugefügt. Zum Schluss benötigen wir noch das notwendige JavaScript um die Sprache umzustellen. 


$(document).ready(function(){

    $(document).on('click','a[data-action|=languagechanger]',function(event){
        event.preventDefault();

        $.ajax({
            url: baseUrl + '/languagesetter',
            data: 'language='+$(this).attr('data-value')
        }).always(function(){
           location.reload();
        });
    })

});

Mit dieser einfachen Methode wird nun der Controller aufgerufen und der Cookie gesetzt. Anschließend wird die Seite neu geladen und wir haben die Sprache im Cookie gespeichert. Wir können nun einfach in der View die translate Methode des Viewhelpers aufrufen. 


## übersetzungsfile
return array(
    'Search'=>'Suche', 
....);

## in der view
echo $this->translate('Search')

Ankeränderungen

Des öfteren kommt es vor das man anhand des Ankers auch in JavaScript bestimmte Aktionen setzen will, vor allem um z.B. Permalinks zu bieten oder Suchergebnisse, anhand des Links weiter geben zu können.

Nach kurzer Suche bin ich über folgenden Eintrag in Stackoverflow gestoßen http://stackoverflow.com/questions/2161906/handle-url-anchor-change-event-in-js 


if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

Da in den neueren Browsern das event bereits unterstützt wird, kann hier auf die übliche Art eine Callbackfunction gelegt werden, für ältere Browser geht der Umweg über eine Variable als Sicherung und der Prüfung auf Zeit ob sich der Hash geändert hat.

Zusätzlich zu den Änderungen will man auch oft den Hashwert nach Seitenaufbau (z.B. $(document).ready(function(){…}); ) wissen, hierzu kann einfach nach Seitenaufbau wieder das window Objekt hergenommen werden 


 if(window.location.hash != null && window.location.hash != undefined && window.location.hash != ""){
        hashChanged(window.location.hash);
 }