Pixaweb - Resources

Welcome

Pixaweb are a small web development firm from the UK.

Our Services

We offer a range of services including;

Contact Pixaweb

Feel free to Contact Us via Email, Telephone or using our Online Enquiry Form;

Email; contact@pixaweb.co.uk

Skype; pixaweb_uk uk

Resources

Calibre, CSS, CSS3

A replacement GUI for Calibre Content-Servers that has the added benefit of remote operation via PHP cURL.

This is the CSS used by the App.

Example

/* reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a {outline:none;}
a img {border:none;}
a:link,a:visited,a:active {text-decoration:none;}
a:hover {text-decoration:none;}

html    {   width: 100%: height: 100%;  }

body    {   width: 100%: background-color: #fff; color: #565656; font-size: 16px; font-family: Tahoma, Verdana, Geneva, sans-serif; position: relative;    }

/* tags */
header, footer, hgroup,
article, section, nav   {   display: block; }
h1, h2,
h3, h4,
h5, h6  {}
p       {}
ul      {   list-style: none;   }
ul li   {}

dl      {   overflow: auto; }
dt      {   clear: left; float: left; font-size: 12px; height: 30px; line-height: 30px;   }
dd      {   float: left; height: 30px;    }

a:link,
a:visited   {   text-decoration: none; color: #666;  }
a:active,
a:hover     {   color: #333;    }

/* classes */
.float-parent   {   overflow: auto; }
.float-left     {   float: left;    }
.float-right    {   float: right;   }
.float-clear    {   clear: both;    }
.float-left-clear  {   clear: left;    }
.float-right-clear {   clear: right;   }
.hidden         {   display: none;  }

.hover_off      {}
.hover_on       {   background-color: #ccc; color: #333; }


/* layout */
#wrapper    {   margin: 0; padding: 0;   }

/* header */
#header     {   padding: 10px; border-bottom: 1px solid #e5e5e5;    }

#header hgroup  {   margin: 0 30px 10px 0;   }

#header h1  {   font-size: 20px; font-weight: bold; line-height: 30px; color: #333;    }

#header p       {   padding: 0 10px; color: #444; font-size: 12px;    }
#header p img   {   vertical-align: top; }

#header > section       {   height: 90px; padding: 0; margin: 0 30px 0 0;   }
#header > section h1    {   font-size: 16px; color: #565656;    }

/* footer */
#footer     {   padding: 10px; height: 50px; border-top: 1px solid #e5e5e5;  }
#footer div         {   float: left; line-height: 40px;    }

#footer .copyright  {   font-size: 12px; color: #999;   }

#footer .privacy    {   float: right; width: 50%; line-height: 13px; text-align: right; padding: 15px 0 0; font-size: 11px; color: #ccc;   }

#footer .logo       {   width: 60px; height: 50px; background: url(../images/logo.png) no-repeat right -3px;   }
#footer .logo a     {   display: block; text-indent: -9999em;   }

/* search */
#search         {}
#search input   {   float: left; padding: 5px 5px 3px; width: 100px; height: 17px; margin: 0; font-size: 14px;   }
#search a           {   clear: left;    }
#search a:active    {}
#search a:hover     {}

/* sort/order */
#sort           {   width: 150px;   }
#order          {   width: 100px;   }

#sort header,
#order header   {}

#sort section,
#order section  {}

#sort ul,
#order ul       {}

#sort ul li     {   width: 50%; }
#order ul li    {}

#sort ul li.float-left  {}
#sort ul li.float-right {}

#sort ul li a,
#order ul li a          {   float: none; margin: 0; font-size: 14px; text-align: center;    }

/* menu */
#menu       {   width: 100%; height: 48px; position: fixed; top: 0; left: 0;   }

ul.menu             {   height: 48px;   }
ul.menu li          {   float: left; width: 25%; height: 48px; line-height: 48px;    }

ul.menu li a:link,
ul.menu li a:visited    {   display: block; height: 48px; padding: 0 10px; background-color: #222;    }
ul.menu li a:active,
ul.menu li a:hover      {   background-color: #333; }

ul.menu li a span.icon  {   float: none; margin: 0 auto;  }
ul.menu li a span.text  {}

/* content */
#content    {   width: 100%; min-height: 150px; padding: 0; background-color: #f8f8f8;    }

#content.loading    {   background: #f8f8f8 url(../images/loading.gif) no-repeat center 50px;  }

/* lists */
ul.list     {   height: 50px; padding: 0 5px; border-bottom: 1px dashed #444;   }
ul.list li  {   float: left; height: 50px; line-height: 50px;   }

/* error */
article.error           {   padding: 0 10px;    }

article.error h1        {   font-size: 16px; font-weight: bold; }
article.error p         {}

article.error a         {}
article.error a:hover   {}

/* server config */
article.server          {   padding: 0 10px;    }

article.server header   {}
article.server section  {}

article.server header h1    {   font-size: 17px; font-weight: bold; color: #595959; }

article.server section dl   {   padding: 0 0 10px;  }
article.server section dt   {   width: 150px;   }
article.server section dd   {}

article.server section dd input {   margin: 2px 0 0; padding: 5px 5px 3px; height: 17px; font-size: 14px;  }

article.server section dd input[type=checkbox]  {   margin: 9px 0 5px;  }

article.server section dd a.button  {   margin: 5px 0 0;    }

/* books */
article.book            {   padding: 0 10px;  }
article.book.active     {   background-color: #f1f1f1;  }

article.book header     {}
article.book section    {}

article.book header h2  {   height: 30px; line-height: 30px; font-size: 18px; font-weight: bold;    }

article.book .content   {   height: 180px; position: relative;  }

article.book .details       {   max-width: 70%; }
article.book .details ul    {}
article.book .details ul li {   line-height: 30px;    }

article.book .details ul li span    {   display: block; height: 30px;   }
article.book .details ul li .label  {   font-size: 11px; height: 20px; line-height: 20px; color: #888;   }
article.book .details ul li .data   {   font-size: 14px; padding: 0 0 0 10px; color: #444;   }

article.book .details ul li a           {   background-color: #fff; }
article.book .details ul li a:hover     {   background-color: #dff4ff;  }
article.book .details ul li a:active    {   background-color: #6299c5;  }

article.book .image     {   overflow: visible; z-index: 3;  }
article.book .image img {   max-height: 160px; z-index: 4;  }
article.book .image img.large   {   max-height: none; max-width: 100%; position: absolute; top: 0; right: 0; z-index: 5;   }

/* file links */
a.file                  {   background-image: url(../images/file.png); background-position: 5px 5px; background-repeat: no-repeat; padding: 5px 10px 5px 27px !important; margin: 0 10px 10px 0 !important;  }
a.file[href$=".rtf"]    {   background-image: url(../images/rtf.png);   }
a.file[href$=".lit"]    {   background-image: url(../images/lit.png);   }
a.file[href$=".pdf"]    {   background-image: url(../images/pdf.png);   }
a.file[href$=".doc"]    {   background-image: url(../images/dov.png);   }
a.file[href$=".txt"]    {   background-image: url(../images/txt.png);   }
a.file[href$=".epub"]   {   background-image: url(../images/epub.png);  }
a.file[href$=".zip"]    {   background-image: url(../images/zip.png);   }
a.file[href$=".rar"]    {   background-image: url(../images/rar.png);   }

/* paginate */
section.paginate        {   padding: 0 10px; border-bottom: 1px solid #e5e5e5;  }
section.paginate ul     {   height: 31px; position: relative; }
section.paginate ul li  {}

section.paginate ul li.prev     {   position: absolute; left: 0; top: 2px;  }
section.paginate ul li.next     {   position: absolute; right: 0; top: 2px; }

section.paginate ul li.current  {   float: none; width: 90px; height: 32px; line-height: 32px; margin: 0 auto; font-size: 12px; text-align: center;  }

section.paginate a          {   display: block; background-color: #fff;     }
section.paginate a:hover    {   background-color: #dff4ff; }
section.paginate a:active   {   background-color: #6299c5; }

/* button */
a.button        {   display: block; float: left; line-height: 15px; height: 15px; margin: 0; padding: 5px 10px 5px 7px; border: 1px solid #dedede; border-top: 1px solid #eee; border-left: 1px solid #eee; background-color: #f5f5f5; font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size: 13px; text-decoration: none; font-weight: bold; color: #565656; cursor: pointer;  }
a.button:hover,
a.button.hover  {   background-color: #dff4ff; border: 1px solid #c2e1ef; color: #336699;    }
a.button.active,
a.button:active {   background-color: #6299c5; border: 1px solid #6299c5; color: #fff;  }

a.button.define {   float: none; width: 150px;    }
a.button.save   {}
/* media queries */
/* portrait mode */
@media all and (orientation:portrait) and (max-width: 500px) and (max-device-width: 500px) {
    
    #search,
    #sort, #order           {   float: none;    }

    article.book            {}

    article.book header h2  {   height: auto; line-height: 22px;    }

    article.book .content   {   height: auto;   }
    article.book .details   {   float: none;    }
    article.book .image     {   float: none; clear: both; padding: 10px 0 0;    }
    
    article.book .details ul li.author,
    article.book .details ul li.series  {   float: none;    }

    article.book .details ul li .data   {   font-size: 14px; color: #444; padding: 0 10px;   }
    
}
/* landscape mode */
@media all and (orientation:landscape) {
    
}

Calibre, HTML5

A replacement GUI for Calibre Content-Servers that has the added benefit of remote operation via PHP cURL.

This is the HTML used by the App (that is not generated by PHP).

Example

<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="keywords" content="" />
        <meta http-equiv="description" content="" />
        
        <meta name="viewport" content="width=device-width" />

        <title>Calibre Remote WebApp - by pixaweb.co.uk</title>
        
        <link rel="shortcut icon" href="favicon.png" />

        <link rel="stylesheet" href="css/calibre.css" type="text/css" media="screen,print,projection,mobile" />

        <script type="text/javascript" src="js/jquery.js"></script>

    </head>

    <body>

        <div id="wrapper">
        
            <header id="header">
            
                <hgroup>
                    <h1>Calibre Remote Web App</h1>
                    <p>by <a href="http://www.pixaweb.co.uk" target="_blank">Pixaweb.co.uk <img src="favicon.png" alt="Pixaweb - London Web Development" /></a></p>
                </hgroup>

                <section id="server" class="server panel hidden float-left">
                    <section>
                        <div id="host" class="hidden"></div>
                        <div id="port" class="hidden"></div>
                        <div id="username" class="hidden"></div>
                        <div id="password" class="hidden"></div>
                    </section>
                </section>

                <section id="search" class="search panel float-left">
                    <header>
                        <h1>Search</h1>
                    </header>
                    <section>
                        <input type="text" name="search" value="" class="search" />
                        <a href="#search" class="search button">Search</a>
                    </section>
                </section>

                <section id="order" class="order panel float-left">
                    <header>
                        <h1>Order</h1>
                    </header>
                    <section>
                        <ul>
                            <li>
                                <a href="order/ascending" class="active qs-link button">Ascending</a>
                            </li>
                            <li>
                                <a href="order/descending" class="qs-link button">Descending</a>
                            </li>
                        </ul>
                    </section>
                </section>
                
                <section id="sort" class="sort panel float-left">
                    <header>
                        <h1>Sort</h1>
                    </header>
                    <section>
                        <ul>
                            <li class="float-left">
                                <a href="sort/title" class="active qs-link button">Title</a>
                            </li>
                            <li class="float-right">
                                <a href="sort/author" class="qs-link button">Author</a>
                            </li>
                            <li class="float-left float-left-clear">
                                <a href="sort/date" class="qs-link button">Date</a>
                            </li>
                            <li class="float-right float-right-clear">
                                <a href="sort/series" class="qs-link button">Series</a>
                            </li>
                        </ul>
                    </section>
                </section>

                <div class="float-clear"></div>

            </header>

            <section id="content">

                <article class="server config">

                    <header>
                        <h1>Server Config</h1>
                    </header>

                    <section>

                        <dl>

                            <dt>Host</dt>
                            <dd><input type="text" name="host" /></dd>

                            <dt>Port</dt>
                            <dd><input type="text" name="port" value="8080" /></dd>

                            <dt>Username</dt>
                            <dd><input type="text" name="username" /></dd>

                            <dt>Password</dt>
                            <dd><input type="password" name="password" /></dd>

                            <dt></dt>
                            <dd><a class="button save server" href="#connect">Connect</a></dd>

                        </dl>

                    </section>

                </article>

            </section>

        </div>

        <footer id="footer">
            
            <div class="logo">
                <a href="http://www.pixaweb.co.uk" target="_blank">Pixaweb - London Web Development</a>
            </div>
            
            <div class="copyright">
                <p>Copyright &copy; 2010 Pixaweb.co.uk</p>
            </div>

            <div class="privacy">
                <p>Server details are stored temporarily inside page elements; refreshing the page will mean they are reset to defaults. Please see <a href="http://www.pixaweb.co.uk/projects/Calibre" target="_blank">http://www.pixaweb.co.uk/projects/Calibre</a> for the Source Code.</p>
            </div>
            
        </footer>

    </body>
    
    <script type="text/javascript" src="js/calibre.js"></script>

</html>

Calibre, jQuery

A replacement GUI for Calibre Content-Servers that has the added benefit of remote operation via PHP cURL.

This is the jQuery used by the App.

Example

$(document).ready( function() {

    var _content    = $('#content'),
        _url        = "calibre.php";

    hover();
    
    $('#header section a.qs-link').live("click", function(event) {
        event.preventDefault();
        var _this   = $(this);
        _this.parents("section").find("a").removeClass("active").end().end().addClass("active");
        var qs = get_query_string();
        empty_content(_content);
        $.get(_url + qs, function(response) {
            load_content(_content, response);
        });
    });

    $('#search input').live("focus", function(event) {
        $(this).val("");
    });

    $('#search a.button').live("click", function(event) {
        event.preventDefault();
        var _search = $(this).siblings("input").val();
        if(_search == this.defaultValue || _search.length < 1)
            return false;
        var qs = get_query_string();
        empty_content(_content);
        $.get(_url + qs, function(response) {
            load_content(_content, response);
        });
    });

    $('a.define.server').live("click", function(event) {
        event.preventDefault();
        $('article.error').hide(0);
        $('.server.config input').each( function() {
            $(this).val(this.defaultValue);
        });
        $('.server.config').show(0);
    });

    $('a.save.server').live("click", function(event) {
        event.preventDefault();
        $('.server.config input').each( function() {
            var attrib = $(this).attr("name");
            $('#server #'+ attrib).text($(this).val());
        });
        $('.server.config').hide(0);
        var qs = get_query_string();
        empty_content(_content);
        $.get(_url + qs, function(response) {
            load_content(_content, response);
        });
    });

    $('.paginate a').live("click", function(event) {
        event.preventDefault();
        var href = $(this).attr("href").split("/");
        var qs = get_query_string();
        empty_content(_content);
        $.get(_url + qs +"&start="+ href[1], function(response) {
            load_content(_content, response);
        });
    });
    
    $('.paginate select.paginate').live("change", function() {
        var page = $(this).find(":selected").val();
        var qs = get_query_string();
        empty_content(_content);
        $.get(_url + qs +"&start="+ page, function(response) {
            load_content(_content, response);
        });
    });

    $('article.book img').live("click", function() {
        $(this).toggleClass("large").parents("article.book").toggleClass("active");
    });
    
});

function get_query_string() {
    var qs = [];
    $('a.qs-link.active').each( function(i) {
        var hr = $(this).attr("href").split("/");
        qs[i] = hr[0] +"="+ hr[1];
    });
    return "?"+ qs.join("&") +"&"+ get_server_config();
};

function get_server_config() {
    var sc = [];
    $('#server div').each( function(i) {
        sc[i] = $(this).attr("id") +"="+ $(this).text();
    });
    return sc.join("&") + get_search_terms();
};

function get_search_terms() {
    var server ="&search=";
    if($('input.search').val().length > 0)
        server += $('input.search').val();
    return server;
};

function empty_content(_content) {
    _content.addClass("loading").find(".book, .error, .paginate").remove();
    _content.find(".server.config").hide(0);
};

function load_content(_content, response) {
    _content.removeClass("loading").find(".book, .error, .paginate").remove();
    _content.append(response);
};

function hover() {
    $('.hover_off').hover(
        function() {
            $(this).addClass("hover_on").removeClass("hover_off");
        },
        function() {
            $(this).addClass("hover_off").removeClass("hover_on");
        }
    );
};

Calibre, PHP, HTML5

A replacement GUI for Calibre Content-Servers that has the added benefit of remote operation via PHP cURL.

This is the PHP Class used by the App (and a bit of the HTML as I'm lazy).

Example

<?php

    class calibre {

        public $settings = array(
            "server"    => array(
                // calibre server details
                "host"      => "",
                "port"      => "8080",
                "username"  => "",
                "password"  => "",
            ),
            // calibre server tokens/values
            "start"     => 0,
            "num"       => 20,
            "order"     => "ascending",
            "sort"      => "title",
            "search"    => "",
        );

        // .. curl data
        private $curl_meta, $curl_data;

        // xml, object (simplexml) data
        private $xml, $object;

        // html data
        private $paginate;

        private $authors    = array();
        private $series     = array();
        
        public function __construct() {}
        
        public function debug() {
            
            echo "<pre>";
            print_r($this);
            echo "</pre>";
            die;
            
        }

        private function fetch_query_string() {
            
            $data = $this->settings;
            
            unset($data["server"]);
            
            return "?". http_build_query($data, "&amp;");
        
        }
        
        private function parse_response() {

            try {

                $this->object = new SimpleXMLElement($this->curl_data);
            
                $this->xml = $this->object->asXML();

            } catch(Exception $e) {
                throw new CalibreException($e->getMessage());
            }
            
        }
        
        public function set($settings) {
            
            if(is_array($settings)) {

                foreach($settings AS $key => $value) {

                    if(empty($key) || empty($value)) continue;

                    $this->settings[$key] = $value;

                }
            }
            
            return $this;
            
        }
        
        public function fetch_library() {

            if(empty($this->settings["server"]["host"]) || empty($this->settings["server"]["port"]))
                throw new CalibreException('No Server/Port Defined! <a class="button define server" href="#define">Define Server Settings</a>');

            $qs = $this->fetch_query_string();

            $curl = curl_init();

            if(!empty($this->settings["server"]["username"]) && !empty($this->settings["server"]["password"])) {

                curl_setopt($curl, CURLOPT_USERPWD, "{$this->settings["server"]["username"]}:{$this->settings["server"]["password"]}");
                curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY);

            }
            
            curl_setopt_array($curl, array(
                CURLOPT_RETURNTRANSFER => TRUE,
                CURLOPT_HEADER => 0,
                CURLOPT_USERAGENT => "",
                CURLOPT_URL => "http://{$this->settings["server"]["host"]}/library{$qs}",
                CURLOPT_PORT => $this->settings["server"]["port"],
                CURLOPT_TIMEOUT => 3,
            ));
            
            $this->curl_data = curl_exec($curl);
            $this->curl_meta = curl_getinfo($curl);
            
            curl_close($curl);

            if($this->curl_data === FALSE)
                throw new CalibreException('cURL Data is empty! Is the Server running? <a class="button define server" href="#define">Define Server Settings</a>');

            try {
                $this->parse_response();
            } catch(CalibreException $e) {
                throw new CalibreException($e->getMessage());
            }

            return $this;

        }

        public function as_json() {
            return json_encode($this->object);
        }

        public function as_object() {
            return $this->object;
        }
        
        public function as_xml() {
            return $this->xml;
        }
        
        private function page_select($page_count, $current = 1) {
            
            $options = array();
            
            for($i = 1; $i <= $page_count; $i++) {
                
                $selected = $i == $current ? "selected" : "" ;
                
                $options[] = '<option value="'. $i .'" '. $selected .'>'. $i .'</option>';
                
            }
            
            return '<select class="paginate">'. implode("", $options) .'</select>';
            
        }

        public function paginate($total) {
            
            $page_count = ceil($total / $this->settings["num"]);

            $current = ceil($this->settings["start"] / $this->settings["num"]);
            $current = empty($current) ? 1 : $current ;
            
            $prev = $current == 1 ? 1 : $current - 1 ;
            $next = $current == $page_count ? $page_count : $current + 1 ;
            
            $links = array();

            $links[] = '
<section class="paginate">
    <ul>
        <li class="prev">
            <a href="page/'. $prev .'" class="button">&laquo; Prev</a>
        </li>
        <li class="current">'. $this->page_select($page_count, $current) .' of '. $page_count .'</li>
        <li class="next">
            <a href="page/'. $next .'" class="button">Next &raquo;</a>
        </li>
    </ul>
</section>
            ';

            $this->paginate = implode("", $links);

        }
        
        public function parse_html($book) {

            $data = array();
            
            foreach($book->attributes() AS $key => $value) {

                if($key == "formats") {
                    $data[$key] = $this->parse_formats((string) $value, $data["title"], $data["id"]);
                } elseif($key == "authors") {
                    $data[$key] = $this->parse_authors((string) $value);
                } elseif($key == "series") {
                    $data[$key] = $this->parse_series((string) $value);
                } else {
                    $data[$key] = (string) $value;
                }
            }

            return $data;
        
        }
        
        private function parse_formats($format, $title, $id) {
        
            $formats = stristr($format, ",") ? explode(",", $format) : array($format) ;
            
            $output = array();
            
            foreach($formats AS $f)
                $output[] = '<a href="http://'. $this->settings["server"]["host"] .':'. $this->settings["server"]["port"] .'/get/'. strtolower($f) .'/'. $title .'_'. $id .'.'. strtolower($f) .'" class="file button">'. strtoupper($f) .'</a>';
            
            return implode("", $output);
            
        }
        
        private function parse_authors($authors) {
            
            $authors = stristr($authors, ",") ? explode(",", $authors) : array($authors) ;
            
            $output = array();
            
            foreach($authors AS $author)
                $output[] = ucwords(trim($author));

            $this->authors = array_merge($this->authors, $output);

            return implode("", $output);
            
        }
        
        private function parse_series($series) {
            return empty($series) ? "Unknown" : ucwords($series) ;
        }

        public function as_html() {
            
            $books = array();

            $attrib = $this->object->attributes();
            
            $this->paginate((int) $attrib->total);
            
            foreach($this->object->children() AS $key => $value) {
                
                $book = $this->parse_html($value);

                $this->series[] = $book["series"];
                
                $books[] = '
<article class="book">
    
    <header><h2>'. $book["title"] .'</h2></header>
    
    <section class="content">

        <section class="details float-left">
        
            <ul>
            
                <li class="author">
                    <span class="label">Author</span>
                    <span class="data">'. $book["authors"] .'</span>
                </li>
                <li class="author">
                    <span class="label">Series</span>
                    <span class="data">'. $book["series"] .'</span>
                </li>
                <li class="formats">
                    <span class="label">Download</span>
                    <span class="data">'. $book["formats"] .'</span>
                </li>

            </ul>
        
        </section>

        <section class="image float-right">

            <img src="http://'. $this->settings["server"]["host"] .':'. $this->settings["server"]["port"] .'/get/cover/'. $book["id"] .'" alt="Cover Image" />

        </section>
        
    </section>
    
</article>
                ';
            }
            
            $paginate = $this->paginate;

            return $paginate . implode("", $books) . $paginate;
            
        }

    }

    class CalibreException extends Exception {
        public function __construct($message, $code = 0) {
            parent::__construct($message, $code);
        }
    }
    // 
    $calibre = new calibre;
    // should probably escape all this..
    $sort   = empty($_GET['sort']) ? $calibre->settings["sort"] : $_GET['sort'] ;
    $order  = empty($_GET['order']) ? $calibre->settings["order"] : $_GET['order'] ;
    $search = empty($_GET['search']) ? "" : $_GET['search'] ;
    //
    $start  = empty($_GET['start']) ? 0 : (int) $_GET['start'] ;
    $per_page = $calibre->settings["num"];
    // esp. this
    $server = array(
        "host"      => $_GET['host'],
        "port"      => $_GET['port'],
        "username"  => $_GET['username'],
        "password"  => $_GET['password'],
    );
    //
    $settings = array(
        "start" => $start * $per_page,
        "num"   => $per_page,
        "sort"  => $sort,
        "order" => $order,
        "search"=> $search,
        "server"=> $server,
    );

    // try getting library as html
    try {
        echo $calibre->set($settings)->fetch_library()->as_html();
    } catch(CalibreException $e) {
        echo '<article class="error">'. $e->getMessage() .'</article>';
    }
    
    die;
    
    //$calibre->debug(); // very long page
    
?>

Pixaweb, PHP5, CMS

this snippet generates the page you are currently viewing plus some others based around general crud duties (the function names are self-explanatory)

Example

<?php
    /**
     * resources.php
     *
     * @author Jared Clarke <jared@pixaweb.co.uk>
     * @copyright 2010 (c) Jared Clarke @ Pixaweb.co.uk
     * @version 3.1
     */
    class resources extends modules {

        public function __construct() {

            $form_columns = array("resource", "description", "example", "download_file", "example_file", "tags");

            parent::__construct(__CLASS__, $form_columns);

        }

        public function create($return = FALSE) {

            $this->load_js("autocomplete");

            $additional = array(
                "form"  => array(
                    "tags"  => array("class" => "tags tag ac"),
                ),
            );

            return parent::create($return, $additional);

        }

        public function modify($id, $return = FALSE) {

            $additional = array();

            return parent::modify($id, $return, $additional);

        }

        public function manage($return = FALSE) {

            $additional = array();

            return parent::manage($return, $additional);

        }

        public function display($id, $return = FALSE) {

            $this->load_js(array("prettify", "ui", "dialog"));

            $additional = array(
                "example_file_link"     => array($this, "get_example_file"),
                "download_file_link"    => array($this, "get_download_file"),
            );

            $where = array();

            if(isset($this->get->tag))
                $where["tags"] = "%%{$this->get->tag}%";

            $additional["where"] = $where;

            return parent::display($id, $return, $additional);

        }

        public function latest($limit = 5, $return = TRUE) {

            $additional = array();

            return parent::latest($limit, $return, $additional);

        }

        public function get_example_file($resource) {
            return (!empty($resource->example_file)) ? template::to_link("{$this->baseurl}/{$resource->example_file}", "Live Example", array("class" => "dialog")) : "" ;
        }

        public function get_download_file($resource) {
            return (!empty($resource->download_file)) ? template::to_link("{$this->baseurl}/{$resource->download_file}", "Download {$resource->resource}") : "" ;
        }

    }
    
?>

PHP, PHP5, API, Google, Translation

A PHP Class that allows you to use google translation services (with an api-key). Basic but does the job.

Example

<?php

    class translation {

        public $original_text;
        public $translated_text;

        private $source_language;
        private $translated_language;

        private $apikey = ""; // google api key
        private $format = "text";
        // if OS = windows
        private $ca_cert = ""; // location of ca-bundle.crt

        public function __construct($source_lang, $trans_lang, $text) {

            $this->original_text        = array_map("strip_tags", !is_array($text) ? array($text) : $text);
            
            $this->source_language      = $source_lang;
            $this->translated_language  = $trans_lang;

            $this->_get_translation();
            
        }

        public function __toString() {
            return $this->get_translated_text();
        }

        public function get_original_text($index = 0) {
            return $this->original_text[$index];
        }

        public function get_translated_text($index = 0) {
            return $this->translated_text[$index];
        }
        
        private function _get_translation() {

            $url = "https://www.googleapis.com/language/translate/v2";

            $url .= "?key={$this->apikey}";
            $url .= "&format={$this->format}";
            $url .= "&source={$this->source_language}";
            $url .= "&target={$this->translated_language}";

            foreach($this->original_text AS $text) {

                $url .= "&q=". urlencode(strip_tags($text));

            }

            $curl = curl_init($url);

            curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2);
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 1);
            curl_setopt($curl, CURLOPT_POST, 0);
            curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

            if(stristr(PHP_OS, "win")) {
                curl_setopt($curl, CURLOPT_CAINFO, $this->ca_cert);
            }

            $response = curl_exec($curl);
            
            curl_close($curl);

            $this->_parse_response($response);

        }

        private function _parse_response($response) {

            if(empty($response) || is_null($response)) {

                $this->translated_text = NULL;

                return;

            }

            $response = json_decode($response, TRUE);

            foreach($response["data"]["translations"] AS $text) {

                $this->translated_text[] = $text["translatedText"];

            }
        }

    }

    // usage example
    // language codes from http://code.google.com/apis/language/translate/v2/using_rest.html#language-params
    $translation = new translation("en", "da", "Some text to translate from English (en) to Danish (da)");

    echo $translation->get_translated_text() ."<br />";

    $translation = new translation("en", "zh-CN", array("small collection", "of strings", "to translate"));

    $index = 2;

    echo $translation->get_original_text($index) ." = ". $translation->get_translated_text($index);

    print_r($translation->translated_text);

?>

PHP, PHP5, HTML

This PHP class generates HTML tags

Example

<?php
    /**
     * html
     *
     * @copyright Copyright 2010 (c) Jared Clarke @ Pixaweb.co.uk
     * @author Jared Clarke <jared@pixaweb.co.uk>
     * @version 0.1
     */
    class html {

        public $element;
        public $innerHTML;
        public $attributes = array();

        private $special = array("img", "input", "hr", "br", "meta", "link");

        public function __construct($element, $innerHTML = NULL, $attributes = NULL) {

            $this->element = $element;

            if(!is_null($innerHTML))
                $this->innerHTML($innerHTML);

            if(!is_null($attributes))
                $this->attributes($attributes);
                
        }

        public function __toString() {
            return $this->generate();
        }

        public function attributes($attributes) {

            $this->attributes = array_merge($this->attributes, (array) $attributes);

            return $this;

        }

        public function innerHTML($innerHTML) {
            
            $this->innerHTML = $innerHTML;

            return $this;

        }

        public function output() {
            return $this->generate();
        }
        
        private function generate() {

            $html = "<{$this->element}";

            if(!empty($this->attributes)) {
                foreach($this->attributes AS $key => $value) {
                    // allow boolean array("disabled" => true);
                    if(is_bool($value)) {
                        // most browsers support <.. disabled OR disabled="disabled" />
                        if(!$value) continue;

                        $value = $key;

                    }

                    $html .= ' '. $key .'="'. $value .'"';

                }
            }

            if(in_array($this->element, $this->special)) {

                $html .= "/>";

                return $html;

            }

            $html .= ">{$this->innerHTML}</{$this->element}>";

            return $html;

        }

    }
    
    $input = new html("input");
    echo $input->attributes(array("name" => "test", "value" => "testing", "disabled" => true))->output();
    // <input name="test" value="testing" disabled="disabled"/>

    echo new html("a", "Link Text", array("href" => "http://www.google.com"));
    // <a href="http://www.google.com">Link Text</a>

    $html = new html("a");
    $html->innerHTML("Link Text");
    $html->attributes(array("href" => "http://www.google.com"));
    echo $html->output();
    // <a href="http://www.google.com">Link Text</a>
    
    echo $html->innerHTML("Link Text")->attributes(array("href" => "http://www.google.com"))->output();
    // <a href="http://www.google.com">Link Text</a>
    
    $html->innerHTML = "Override Text";
    echo $html->output();
    // <a href="http://www.google.com">Override Text</a>
    
    $html->attributes["href"] = "http://www.yahoo.com";
    echo $html->output();
    // <a href="http://www.yahoo.com">Override Text</a>
    
    echo (string) new html("p", "InnerHTML", array("class" => "attributes"));
    // <p class="attributes">InnerHTML</p>
    
?>

Pixaweb, jQuery, PWDefaultValue

toggles a default value inside an input until it is filled with user input

Example

<!DOCTYPE html>
<html>

    <head>

        <title>PWDefaultValue Example</title>

        <!-- include jquery -->
        <script src="jquery.js" charset="utf-8"></script>

        <!-- include pwdefaultvalue -->
        <script src="jquery.pwdefaultvalue.js" charset="utf-8"></script>
        
        <!-- enable pwdefaultvalue -->
        <script charset="utf-8">
            // on document load
            $(document).ready( function() {
                
                // select the input(s)
                $('input.default').pwDefaultValue();
            
            });
            
        </script>
        
    </head>
    
    <body>
    
        <h1>PWDefaultValue Example</h1>
        
        <p><input type="text" name="defaultvalue" class="default" value="PWDefaultValue" /></p>
        
        <p><input type="text" name="defaultvalue" class="default" value="ABC 123 DEF 456" /></p>
        
        <p><input type="text" name="defaultvalue" class="default" value="Label" /></p>
        
    </body>
</html>

Pixaweb, jQuery, PWFilter

filters a set of html elements via an attribute using user input from a form field

Example

<!DOCTYPE html>
<html>

    <head>

        <title>PWFilter Example</title>

        <!-- include jquery -->
        <script src="jquery.js" charset="utf-8"></script>

        <!-- include pwfilter -->
        <script src="jquery.pwfilter.js" charset="utf-8"></script>
        
        <!-- enable pwfilter -->
        <script charset="utf-8">
            // on document load
            $(document).ready( function() {
                
                // select the input
                $('input.filter').pwFilter({
                    items       : "div.filter.example .items", // individual items
                    item        : ".item", // the element to search
                    attr        : "text", // the attribute to search
                    duration    : 200 // duration of fade
                });
            
            });
            
        </script>
        
    </head>
    
    <body>
    
        <h1>PWFilter Example</h1>
        
        <p><input type="text" name="filter" class="filter" /></p>
        
        <!-- items parent -->
        <div class="filter example">
            
            <!-- items -->
            <div class="items">
                
                <!-- filter item / attribute (text) -->
                <h2 class="item">Pellentesque habitant</h2>
                
                <!-- other elements -->
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                
                <hr />
                <!-- // -->
            </div>
            
            <div class="items">
                
                <h2 class="item">tristique senectus</h2>
                
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                
                <hr />
                
            </div>
            
            <div class="items">
                
                <h2 class="item">netus et malesuada</h2>
                
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                
                <hr />
                
            </div>
            
            <div class="items">
                
                <h2 class="item">turpis egestas</h2>
                
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                
                <hr />
                
            </div>
            
            <div class="items">
                
                <h2 class="item">Vestibulum tortor</h2>
                
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                
                <hr />
                
            </div>
            
            <div class="items">
                
                <h2 class="item">ultricies eget</h2>
                
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
                
                <hr />
                
            </div>
        
        </div>
        
    </body>
</html>

Pixaweb, jQuery, PWTabs

Creates a basic set of Tabs

Example

<!DOCTYPE html>
<html>

    <head>

        <title>PWFilter Example</title>

        <!-- include jquery -->
        <script src="jquery.js" charset="utf-8"></script>

        <!-- include pwtabs -->
        <script src="jquery.pwtabs.js" charset="utf-8"></script>
        
        <!-- enable pwtabs -->
        <script charset="utf-8">
            // on document load
            $(document).ready( function() {
                // select parent element (of both tabs/panels)
                $('.tabs.parent').pwTabs({
                    panels  : ".panels .panel",
                    tabs    : "ul a",
                    active_class : "active"
                });
            
            });
            
        </script>
        
        <style type="text/css">
            /* style the tabs a bit (none of it is required) */
            .tabs       {}
            .tabs ul    {   list-style: none; height: 30px; line-height: 30px;   }
            .tabs ul li {   float: left; height: 30px; padding: 0; margin: 0 5px;   }
            
            .tabs ul a          {   padding: 0 10px; background-color: #f1f1f1; }
            .tabs ul a.active,
            .tabs ul a:hover    {   background-color: #e5e5e5;  }
            
            .tabs .panels   {   margin: 0 50px; border: 1px solid #e5e5e5;    }
            .tabs .panel    {}
            
        </style>
        
    </head>
    
    <body>
    
        <h1>PWTabs Example</h1>
        
        <div class="tabs parent">
        
            <div class="tabs links">
                <ul>
                    <li><a href="#tab_one">Tab One</a></li>
                    <li><a href="#tab_two">Tab Two</a></li>
                    <li><a href="#tab_three">Tab Three</a></li>
                    <li><a href="#tab_four">Tab Four</a></li>
                </ul>
            </div>
            
            
            <div class="tabs panels">
                
                <div class="panel" id="tab_one">Tab Panel One</div>
                
                <div class="panel" id="tab_two">Tab Panel Two</div>
                
                <div class="panel" id="tab_three">Tab Panel Three</div>
                
                <div class="panel" id="tab_four">Tab Panel Four</div>
            
            </div>
        
        </div>
        
        
    </body>
</html>

Pixaweb - UK Web Development - Offering CMS, Social Integration, Hosting Solutions, and Branding

Welcome

Our Services

Contact Pixaweb

Resources

Calibre - CSS

Example

Calibre - HTML

Example

Calibre - jQuery

Example

Calibre - PHP

Example

CMS Snippet

Example

PHP Google Translate API

Example

PHP HTML Class

Example

PWDefaultValue

Example

PWFilter

Example

PWTabs

Example