language switches

bin/Controls/LanguageSwitches/DropDown.js

+/**
+ * @module package/quiqqer/bricks/bin/Controls/LanguagesSwitches/DropDown
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * @require qui/QUI
+ * @require qui/controls/Control
+ */
+define('package/quiqqer/bricks/bin/Controls/LanguageSwitches/DropDown', [
+
+    'qui/QUI',
+    'qui/controls/Control'
+
+], function (QUI, QUIControl) {
+    "use strict";
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type   : 'package/quiqqer/bricks/bin/Controls/LanguageSwitches/DropDown',
+
+        Binds: [
+            'open',
+            'close',
+            '$onImport'
+        ],
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.$Display  = null;
+            this.$DropDown = null;
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
+
+        /**
+         * event : on inject
+         */
+        $onImport: function () {
+            this.$Elm.set({
+                tabindex: -1,
+                styles  : {
+                    outline       : 'none',
+                    '-moz-outline': 'none'
+                }
+            });
+
+            this.$Elm.addClass('button');
+
+            this.$Elm.addEvents({
+                click: function (event) {
+                    event.target.focus();
+                },
+                focus: this.open,
+                blur : this.close
+            });
+
+
+            this.$DropDown = this.$Elm.getElement(
+                '.quiqqer-control-languageswitch-dropdown-dd'
+            );
+
+            this.$DropDown.addEvent('mousedown', function (event) {
+                event.stop();
+            });
+
+            // click events
+            var links = this.$DropDown.getElements(
+                '.quiqqer-control-languageswitch-dropdown-dd-entry'
+            );
+
+            links.addEvent('click', function (event) {
+                if (window.location.search === '' &&
+                    window.location.hash === '') {
+                    return;
+                }
+
+                var href = this.get('href');
+
+                if (href.match(/\?/)) {
+                    return;
+                }
+
+                event.stop();
+
+                var search = window.location.search;
+                var hash   = window.location.hash;
+
+                window.location = href + search + hash;
+            });
+        },
+
+        /**
+         * Show the currency dropdown
+         */
+        open: function () {
+            this.$DropDown.setStyles({
+                display: 'inline'
+            });
+        },
+
+        /**
+         * Close the currency dropdown
+         */
+        close: function () {
+            this.$DropDown.setStyles({
+                display: 'none'
+            });
+        }
+    });
+});

bin/Controls/LanguageSwitches/Flags.js

+/**
+ * @module package/quiqqer/bricks/bin/Controls/LanguagesSwitches/Flags
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * @require qui/QUI
+ * @require qui/controls/Control
+ */
+define('package/quiqqer/bricks/bin/Controls/LanguageSwitches/Flags', [
+
+    'qui/QUI',
+    'qui/controls/Control'
+
+], function (QUI, QUIControl) {
+    "use strict";
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type   : 'package/quiqqer/bricks/bin/Controls/LanguageSwitches/Flags',
+
+        Binds: [
+            '$onImport'
+        ],
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.$Display  = null;
+            this.$DropDown = null;
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
+
+        /**
+         * event : on inject
+         */
+        $onImport: function () {
+            // click events
+            var links = this.$Elm.getElements(
+                '.quiqqer-bricks-languageswitch-flag-entry'
+            );
+
+            links.addEvent('click', function (event) {
+                if (window.location.search === '' &&
+                    window.location.hash === '') {
+                    return;
+                }
+
+                var href = this.get('href');
+
+                if (href.match(/\?/)) {
+                    return;
+                }
+
+                event.stop();
+
+                var search = window.location.search;
+                var hash   = window.location.hash;
+
+                window.location = href + search + hash;
+            });
+        }
+    });
+});

src/QUI/Bricks/Controls/LanguageSwitches/DropDown.css

+
+.quiqqer-control-languageswitch-dropdown {
+    cursor: pointer;
+    float: left;
+    position: relative;
+    z-index: 1;
+}
+
+.quiqqer-control-languageswitch-dropdown-lang {
+    float: left;
+    padding: 5px 10px;
+}
+
+.quiqqer-control-languageswitch-dropdown-lang-icon {
+    margin-right: 5px;
+}
+
+.quiqqer-control-languageswitch-dropdown__withArrow {
+    padding: 0 30px 0 10px;
+}
+
+.quiqqer-control-languageswitch-dropdown-arrow {
+    position: absolute;
+    right: 10px;
+    top: 20px;
+}
+
+/** lang dropdown
+ ===================================================== */
+
+.quiqqer-control-languageswitch-dropdown-dd {
+    background: #fff;
+    border: 1px solid #DDDDDD;
+    display: none;
+    top: 100%;
+    left: 0;
+    position: absolute;
+    width: 100%;
+}
+
+.quiqqer-control-languageswitch-dropdown-dd:after {
+    background-color: transparent;
+    background-image: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.2), transparent);
+    background-image: -webkit-gradient(linear, center top, left bottom, from(rgba(0, 0, 0, 0.2)), to(transparent));
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent);
+    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent);
+    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent);
+    background-image: linear-gradient(top, rgba(0, 0, 0, 0.2), transparent);
+    bottom: -8px;
+    content: "";
+    height: 8px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+}
+
+.quiqqer-control-languageswitch-dropdown-dd-entry {
+    clear: both;
+    float: left;
+    line-height: 24px;
+    padding: 10px;
+    text-align: left;
+    width: 100%;
+}

src/QUI/Bricks/Controls/LanguageSwitches/DropDown.html

+{assign var=Site value=$this->getAttribute('Site')}
+{assign var=siteLang value=$Project->getLang()}
+
+{if count($langs) > 1}
+<div class="quiqqer-control-languageswitch-dropdown quiqqer-control-languageswitch-dropdown__withArrow">
+    <div class="quiqqer-control-languageswitch-dropdown-text">
+        {if $this->getAttribute('showFlags')}
+            <span class="quiqqer-control-languageswitch-dropdownicon">
+                <img src="{$smarty.const.URL_BIN_DIR}16x16/flags/{$siteLang}.png"/>
+            </span>
+        {/if}
+
+        {if $this->getAttribute('showText')}
+            <span class="quiqqer-control-languageswitch-dropdown-text">
+                {$siteLang}
+            </span>
+        {/if}
+    </div>
+
+    <div class="quiqqer-control-languageswitch-dropdown-arrow fa fa-angle-down"></div>
+
+    <div class="quiqqer-control-languageswitch-dropdown-dd">
+        {foreach from=$langs item=lang}
+        {if $siteLang != $lang && $Site->existLang($lang)}
+        <a class="quiqqer-control-languageswitch-dropdown-dd-entry" href="{url id=$Site->getId( $lang ) lang=$lang}">
+            {if $this->getAttribute('showFlags')}
+                <span class="quiqqer-control-languageswitch-dropdown-dd-icon">
+                    <img src="{$smarty.const.URL_BIN_DIR}16x16/flags/{$lang}.png"/>
+                </span>
+            {/if}
+
+            {if $this->getAttribute('showText')}
+                <span class="quiqqer-control-languageswitch-dropdown-dd-text">
+                    {$lang}
+                </span>
+            {/if}
+        </a>
+        {/if}
+        {/foreach}
+    </div>
+</div>
+{/if}

src/QUI/Bricks/Controls/LanguageSwitches/DropDown.php

+<?php
+
+/**
+ * This file contains \QUI\Bricks\Controls\LanguageSwitches\DropDown
+ */
+
+namespace QUI\Bricks\Controls\LanguageSwitches;
+
+use QUI;
+
+/**
+ * Class Language Switch - DropDown
+ *
+ * @package quiqqer/quiqqer
+ * @author  www.pcsg.de (Henning Leutz)
+ * @licence For copyright and license information, please view the /README.md
+ */
+class DropDown extends QUI\Control
+{
+    /**
+     * constructor
+     *
+     * @param array $attributes
+     */
+    public function __construct($attributes = array())
+    {
+        // defaults values
+        $this->setAttributes(array(
+            'Site' => false,
+            'showFlags' => true,
+            'showText' => true,
+            'data-qui' => 'package/quiqqer/bricks/bin/Controls/LanguageSwitches/DropDown'
+        ));
+
+        parent::__construct($attributes);
+
+        $this->addCSSFile(
+            dirname(__FILE__) . '/DropDown.css'
+        );
+
+        $this->setAttribute('class', 'quiqqer-bricks-languageswitch-dropdown');
+    }
+
+    /**
+     * (non-PHPdoc)
+     *
+     * @see \QUI\Control::create()
+     */
+    public function getBody()
+    {
+        $Engine = QUI::getTemplateManager()->getEngine();
+        $Site   = $this->getSite();
+
+        if (!$Site) {
+            return '';
+        }
+
+        $Project = $Site->getProject();
+
+        if (count($Project->getLanguages()) < 2) {
+            QUI\System\Log::addNotice(
+                'The Project "' . $Project->getName() . '" has only one Language.' .
+                'The Control (\QUI\Bricks\Controls\LanguageSwitches) makes here no sense.'
+            );
+
+            return '';
+        }
+
+        $Engine->assign(array(
+            'Site' => $Site,
+            'Project' => $Project,
+            'langs' => $Project->getLanguages(),
+            'this' => $this
+        ));
+
+        return $Engine->fetch(dirname(__FILE__) . '/DropDown.html');
+    }
+
+    /**
+     * Return the Project
+     *
+     * @return QUI\Projects\Site
+     */
+    protected function getSite()
+    {
+        if ($this->getAttribute('Site')) {
+            return $this->getAttribute('Site');
+        }
+
+        return QUI::getRewrite()->getSite();
+    }
+}

src/QUI/Bricks/Controls/LanguageSwitches/Flags.css

+
+.quiqqer-bricks-languageswitch-flag {
+    float: left;
+}
+
+.quiqqer-bricks-languageswitch-flag-entry {
+    float: left;
+    padding: 0 10px;
+}
+
+.quiqqer-bricks-languageswitch-flag-entry-icon {
+    margin-right: 5px;
+}

src/QUI/Bricks/Controls/LanguageSwitches/Flags.html

+{assign var=Site value=$this->getAttribute('Site')}
+{assign var=siteLang value=$Project->getLang()}
+{assign var=all value=$this->getAttribute('all')}
+
+{if count($langs) > 1}
+{strip}
+<div class="quiqqer-bricks-languageswitch-flag">
+    {foreach from=$langs item=lang}
+    {if $all || $siteLang != $lang && $Site->existLang( $lang )}
+    <a class="quiqqer-bricks-languageswitch-flag-entry" href="{url id=$Site->getId( $lang ) lang=$lang}">
+        {if $this->getAttribute('showFlags')}
+            <span class="quiqqer-bricks-languageswitch-flag-entry-icon">
+                <img src="{$smarty.const.URL_BIN_DIR}16x16/flags/{$lang}.png"/>
+            </span>
+        {/if}
+
+        {if $this->getAttribute('showText')}
+            <span class="quiqqer-bricks-languageswitch-flag-entry-text">
+                {$lang}
+            </span>
+        {/if}
+    </a>
+    {/if}
+    {/foreach}
+</div>
+{/strip}
+{/if}
\ No newline at end of file

src/QUI/Bricks/Controls/LanguageSwitches/Flags.php

+<?php
+
+/**
+ * This file contains \QUI\Bricks\Controls\LanguageSwitches\Flags
+ */
+
+namespace QUI\Bricks\Controls\LanguageSwitches;
+
+use QUI;
+
+/**
+ * Class LangSwitch
+ *
+ * @package quiqqer/quiqqer
+ * @author  www.pcsg.de (Henning Leutz)
+ * @licence For copyright and license information, please view the /README.md
+ */
+class Flags extends QUI\Control
+{
+    /**
+     * constructor
+     *
+     * @param array $attributes
+     */
+    public function __construct($attributes = array())
+    {
+        // defaults values
+        $this->setAttributes(array(
+            'Site' => false,
+            'showFlags' => true,
+            'showText' => true,
+            'all' => true,
+            'data-qui' => 'package/quiqqer/bricks/bin/Controls/LanguageSwitches/Flags'
+        ));
+
+        parent::__construct($attributes);
+
+        $this->addCSSFile(
+            dirname(__FILE__) . '/Flags.css'
+        );
+
+        $this->setAttribute('class', 'quiqqer-bricks-languageswitch-flag');
+    }
+
+    /**
+     * (non-PHPdoc)
+     *
+     * @see \QUI\Control::create()
+     */
+    public function getBody()
+    {
+        $Engine = QUI::getTemplateManager()->getEngine();
+        $Site   = $this->getSite();
+
+        if (!$Site) {
+            return '';
+        }
+
+        $Project = $Site->getProject();
+
+        if (count($Project->getLanguages()) < 2) {
+            QUI\System\Log::addNotice(
+                'The Project "' . $Project->getName() . '" has only one Language.' .
+                'The Control (\QUI\Bricks\Controls\LanguageSwitches\Flags) makes here no sense.'
+            );
+
+            return '';
+        }
+
+        $Engine->assign(array(
+            'Site' => $Site,
+            'Project' => $Project,
+            'langs' => $Project->getLanguages(),
+            'this' => $this
+        ));
+
+        return $Engine->fetch(dirname(__FILE__) . '/Flags.html');
+    }
+
+    /**
+     * Return the Project
+     *
+     * @return QUI\Projects\Site
+     */
+    protected function getSite()
+    {
+        if ($this->getAttribute('Site')) {
+            return $this->getAttribute('Site');
+        }
+
+        return QUI::getRewrite()->getSite();
+    }
+}