Button-StEP RC1

00-Interactable.php

<?php
/*
 * Copyright (c) 2011 mlunzena@uos.de, aklassen@uos.de
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License as
 * published by the Free Software Foundation; either version 2 of
 * the License, or (at your option) any later version.
 */

namespace Studip;

/**
 * Represents an abstract interactable element.
 */
abstract class Interactable
{

    public $label, $attributes;

    /**
     * Constructs a new element to interact e.g. button or link
     *
     * @param string $label      the label of the button
     * @param array  $attributes the attributes of the button element
     */
    function __construct($label, $attributes)
    {
        $this->label      = $label;
        $this->attributes = $attributes;
    }

    /**
     * Magic method (triggered when invoking inaccessible methods in a static
     * context) used to dynamically create an interactable element with an
     * additional CSSclass. This works for every static method call matching:
     * /^get(.+)/ The matched group is used as CSS class for the interactable
     * element.
     *
     * @code
     * echo Button::getSubmit();
     *
     * # => <button ... class="submit">...
     * @endcode
     *
     * @param string $name  name of the method being called
     * @param array  $args  enumerated array containing the parameters
     *                      passed to the $name'ed method
     *
     * @return Interactable returns a Button, if $name =~ /^get/
     * @throws              throws a BadMethodCallException if $name does not
     *                      match
     */
    public static function __callStatic($name, $args)
    {
        # only trigger, if $name =~ /^get/ and at least using $label
        if (substr($name, 0, 3) === 'get') {

            # instantiate button from arguments
            $interactable = call_user_func_array(array(get_called_class(), 'get'), $args);
            # but customize with class from $name:
            $class = self::hyphenate(substr($name, 3));

            # a.) set name unless set
            if (!is_string(@$args[1])) {
                $interactable->attributes['name'] =  $class;
            }

            # b.) set/append CSS class
            if (array_key_exists('class', $button->attributes)) {
                $interactable->attributes['class'] .= " $class";
            } else {
                $interactable->attributes['class'] =  $class;
            }

            return $interactable;
        }

        # otherwise bail out
        throw new BadMethodCallException();
    }

    /**
     * @param string $label      the label of the current element
     * @param string $trait      the specific trait of the current element
     * @param array  $attributes the attributes of the button element
     *
     * @return returns a Interactable element
     */
    static function get($label = NULL, $trait = NULL, $attributes = array())
    {
        $argc = func_num_args();

        // if label is empty, use default
        $label = $label ?: _('ok');

        // if there are two parameters, there are two cases:
        //   1.) label and trait OR
        //   2.) label and attributes
        //
        // in the latter case, use parameter $trait as attributes
        // and use the default for name
        if ($argc === 2 && is_array($trait)) {
            list($attributes, $trait) = array($trait, NULL);
        }

        $interactable = new static($label, $attributes);

        $interactable->initialize($label, $trait, $attributes);

        return $interactable;
    }

    /**
     * Initialize an interactable element
     *
     * @param string $label      the label of the current element
     * @param string $trait      the specific trait of the current element
     * @param array  $attributes the attributes of the button element
     */
    abstract function initialize($label, $trait, $attributes);

    /**
     * @param string $label      the label of the current element
     * @param string $trait      the specific trait of the current element
     * @param array  $attributes the attributes of the button element
     */
    static function getAccept($label = NULL, $trait = NULL, $attributes = array())
    {
        $args = func_num_args() ? func_get_args() : array('übernehmen');
        return self::__callStatic(__FUNCTION__, $args);
    }
    /**
     * @param string $label      the label of the current element
     * @param string $trait      the specific trait of the current element
     * @param array  $attributes the attributes of the button element
     */
    static function getCancel($label = NULL, $trait = NULL, $attributes = array())
    {
        $args = func_num_args() ? func_get_args() : array('abbrechen');
        return self::__callStatic(__FUNCTION__, $args);
    }
    
    /**
     * Hyphenates the passed word.
     *
     * @param string $word  word to be hyphenated
     *
     * @return string   hyphenated word
     */
    private static function hyphenate($word)
    {
        return strtolower(preg_replace('/(?<=\w)([A-Z])/', '-\\1', $word));
    }
}

01-Button.php

<?php
/*
 * Copyright (c) 2011 mlunzena@uos.de
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License as
 * published by the Free Software Foundation; either version 2 of
 * the License, or (at your option) any later version.
 */


namespace Studip;

require('Interactable.class.php');

/**
 * Represents an HTML button element.
 */
class Button extends Interactable
{

    /**
     * Easy factory method to get a Button instance.
     * All parameters are optional.
     *
     * @code
     * echo Button::get();
     * # => <button type="submit" name="ok">ok</button>
     *
     * echo Button::get('yes')
     * # => <button type="submit" name="yes">yes</button>
     *
     * echo Button::get('yes', 'aName')
     * # => <button type="submit" name="aName">yes</button>
     *
     * echo Button::get('yes', array('a' => 1, 'b' => 2))
     * # => <button type="submit" a="1" b="2" name="yes">yes</button>
     *
     * echo Button::get('yes', 'aName', array('a' => 1, 'b' => 2)),
     * # => <button type="submit" a="1" b="2" name="aName">yes</button>
     * @endcode
     *
     * @param string $label      the label of the button
     * @param string $name       the name attribute of the button element
     * @param array  $attributes the attributes of the button element
     */

    function initialize($label, $name, $attributes)
    {
        $this->attributes['name'] = $name ?: $this->label;
    }

    /**
     * @return  returns a HTML representation of this button.
     */
    function __toString()
    {
        $attributes = array();
        ksort($this->attributes);
        foreach ($this->attributes as $k => $v) {
            $attributes[] = sprintf(' %s="%s"', $k, htmlReady($v));
        }

        return sprintf('<button type="submit"%s>%s</button>',
                       join('', $attributes),
                       htmlReady($this->label));
    }
}

@require(dirname(__FILE__) . '/../bootstrap.php');
require('vendor/simpletest/autorun.php');

class ButtonTest extends \UnitTestCase
{
    function testGet()
    {
        $this->assertEqual('' . Button::get(), '<button type="submit" name="ok">ok</button>');
    }

    function testGetWithLabel()
    {
        $this->assertEqual('' . Button::get('yes'), '<button type="submit" name="yes">yes</button>');
    }

    function testGetWithLabelAndString()
    {
        $this->assertEqual('' . Button::get('yes', 'aName'), '<button type="submit" name="aName">yes</button>');
    }

    function testGetWithLabelAndArray()
    {
        $this->assertEqual('' . Button::get('yes', array('a' => 1, 'b' => 2)),
                           '<button type="submit" a="1" b="2" name="yes">yes</button>');
    }

    function testGetWithLabelNameAndArray()
    {
        $this->assertEqual('' . Button::get('yes', 'aName', array('a' => 1, 'b' => 2)),
                           '<button type="submit" a="1" b="2" name="aName">yes</button>');
    }

    function testGetAccept()
    {
        $this->assertEqual('' . Button::getAccept(),
                           '<button type="submit" class="accept" name="accept">&uuml;bernehmen</button>');
    }

    function testGetCancel()
    {
        $this->assertEqual('' . Button::getCancel(),
                           '<button type="submit" class="cancel" name="cancel">abbrechen</button>');
    }

    function testGetPreOrder()
    {
        $this->assertEqual('' . Button::getPreOrder(),
                           '<button type="submit" class="pre-order" name="pre-order">ok</button>');
    }

    function testGetWithInsaneArguments()
    {
        $this->assertEqual('' . Button::get('>ok<', 'm&m', array('mad' => '<S>tu"ff')),
                           '<button type="submit" mad="&lt;S&gt;tu&quot;ff" name="m&amp;m">&gt;ok&lt;</button>');
    }
}

02-LinkButton.php

<?php
/*
 * Copyright (c) 2011 aklassen@uos.de
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License as
 * published by the Free Software Foundation; either version 2 of
 * the License, or (at your option) any later version.
 */


namespace Studip;

require('Interactable.class.php');

/**
 * Represents an HTML link element.
 */
class LinkButton extends Interactable
{
    /**
     * Easy factory method to get a LinkButton instance.
     * All parameters are optional.
     *
     * @code
     * echo LinkButton::get();
     * # => <button type="submit" name="ok">ok</button>
     *
     * echo LinkButton::get('yes')
     * # => <a class="button" href="?">yes</a>
     *
     * echo LinkButton::get('example', 'http://www.example.com')
     * # => <a class="button" href="http://www.example.com">example</a>
     *
     * echo LinkButton::get('yes', array('a' => 1, 'b' => 2))
     * # => <a class="button" a="1" b="2" href="?">yes</a>
     *
     * echo Button::get('example', 'http://www.example.com', array('a' => 1, 'b' => 2)),
     * # => <a class="button" a="1" b="2" href="http://www.example.com">example</a>
     * @endcode
     *
     * @param string $label      the label of the link
     * @param string $url        the target url for the link
     * @param array  $attributes the attributes of the link element
     */

    function initialize($label, $url, $attributes)
    {
        $this->attributes['href'] = $url ?: @\URLHelper::getURL();
    }

    /**
     * @return  returns a HTML representation of this button.
     */
    function __toString()
    {
        // add "button" to attribute "class"
        @$this->attributes["class"] .= " button";

        $attributes = array();
        ksort($this->attributes);
        foreach ($this->attributes as $k => $v) {
            $attributes[] = sprintf(' %s="%s"', $k, htmlReady($v));
        }
        // TODO: URLHelper...?!
        return sprintf('<a%s>%s</a>',
                       join('', $attributes),
                       htmlReady($this->label));
    }
}

@require(dirname(__FILE__) . '/../bootstrap.php');
require('vendor/simpletest/autorun.php');

class ButtonTest extends \UnitTestCase
{
    function testGet()
    {
        $this->assertEqual('' . LinkButton::get(), '<a class="button" href="?">ok</a>');
    }

    function testGetWithLabel()
    {
        $this->assertEqual('' . LinkButton::get('yes'), '<a class="button" href="?">yes</a>');
    }

    function testGetWithLabelAndUrl()
    {
        $this->assertEqual('' . LinkButton::get('yes', 'http://example.net'), '<a class="button" href="http://example.net">yes</a>');
    }

    function testGetWithLabelAndArray()
    {
        $this->assertEqual('' . LinkButton::get('yes', array('a' => 1, 'b' => 2)),
                           '<a a="1" b="2" class="button" href="?">yes</a>');
    }

    function testGetWithLabelUrlAndArray()
    {
        $this->assertEqual('' . LinkButton::get('yes', 'http://example.net', array('a' => 1, 'b' => 2)),
                           '<a a="1" b="2" class="button" href="http://example.net">yes</a>');
    }

    function testGetAccept()
    {
        $this->assertEqual('' . LinkButton::getAccept(),
                           '<a class="accept button" href="?" name="accept">&uuml;bernehmen</a>');
    }

    function testGetCancel()
    {
        $this->assertEqual('' . LinkButton::getCancel(),
                           '<a class="cancel button" href="?" name="cancel">abbrechen</a>');
    }

    function testGetPreOrder()
    {
        $this->assertEqual('' . LinkButton::getPreOrder(),
                           '<a class="pre-order button" href="?" name="pre-order">ok</a>');
    }

    function testGetWithInsaneArguments()
    {
        $this->assertEqual('' . LinkButton::get('>ok<', 'http://example.net?m=&m=', array('mad' => '<S>tu"ff')),
                           '<a class="button" href="http://example.net?m=&amp;m=" mad="&lt;S&gt;tu&quot;ff">&gt;ok&lt;</a>');
    }
}

03-buttons.css

a.button, button {
  display: inline-block;
  position: relative;
  margin: 0.7em 0.5em 0.7em 0;
  padding: 5px 15px 5px 15px;
  border-style: solid;
  border-width: 1px;
  border-top-color: #cdd;
  border-left-color: #ccf;
  border-right-color: #bbF;
  border-bottom-color: #99b;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: #cddae4;
  font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
  font-size: 10px;
  line-height: 130%;
  text-decoration: none;
  color: #181818;
  cursor: pointer;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f4f7), to(#97abb7));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
  background-image: -moz-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
  background-image: -ms-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
  background-image: -o-linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
  background-image: linear-gradient(top, #f0f4f7 0%, #cddae4 50%, #97abb7 100%);
  min-width: 93px;
  text-align: center;
  vertical-align: middle;
}

a.button:hover, button:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#b5c3cc));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    background-image: -moz-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    background-image: -ms-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    background-image: -o-linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    background-image: linear-gradient(top, white 0%, #eef3f6 50%, #b5c3cc 100%);
    border-top-color: #f33;
    border-left-color: #f00;
    border-right-color: #f55;
    border-bottom-color: #f55;
}

a.button:active, button:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cfdce5), to(#7993a2));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    background-image: -moz-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    background-image: -ms-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    background-image: -o-linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
    background-image: linear-gradient(top, #cfdce5 0%, #acc1d2 50%, #7993a2 100%);
}

a.button::-moz-focus-inner, button::-moz-focus-inner {
    border: 0;
}

button {
  width: auto;
  overflow: visible; }
  

a.accept, a.cancel, button.accept, button.cancel {
    padding-right: 25px;
}

a.accept:after, button.accept:after{
    content: url(../images/icons/16/green/accept.png);
    margin-top: -4px;
    position: absolute;
    right: 5px;
}

a.cancel:after, button.cancel:after;{
    content: url(../images/icons/16/red/decline.png);
    margin-top: -4px;
    position: absolute;
    right: 5px;
}

.cancel::after {
background: url("http://develop.studip.de/studip/assets/images/icons/16/red/decline.png") 0px 3px no-repeat transparent;
content: " ";
height: 25px;
width: 16px;
}