»Webdesign«

...my designs for websites...

TheBigTrunk - Filebrowser out of the box

TheBigTrunk - What's that?

TheBigTrunk is a "plug and play" filebrowser based on my MVC-Structure of the kirby PHP Toolkit. It is easily customizable and provides support for custom themes. Just upload the whole webapplication to your server, adapt the configuration-file according to your needs and there you go.

Features

  • Works out of the box ("Plug and Play")
  • Fully and easily customizable
  • Custom and multiple theme-support
  • built-in JSON-API for AJAX-Requests and Cross-Site-Requests
  • totally lightweight: Just a filebrowser, nothing more

How does it work?

Somewhere on your server you should set up a folder that later contains all of your files and directories you want to be rendered by TheBigTrunk. By default, any contents of the folder "repos" will be rendered by the filebrowser. You can change that to any directory you want by customizing the "config.php"-file located inside the folder "includes".

Using the API

Using the API is pretty much straightforward as well: In order to request JSON-Data, just add the extension .json to the requested URL; and you will receive all data in a huge JSON-Array.

Demo

Default version Live Demo: http://files.bumuckl.com API Demo: On the bottom-right of this website, just click on "Switch to files" - anything you can see there is powered by AJAX

Download

Download: TheBigTrunk R1

Codebase

Codebase is a code/math repository and a fast collaboration tool for script sharing, math sharing and developing purposes. It is released under the GPL License which means that you are allowed to make any changes and you may use it for yourself, but in case you want to publish your modification, you need to release it again under the GPL License. You can download Codebase below.

What exactly is "Codebase"?

"Codebase" is a fast collaboration tool for scripts and codes. It is written in PHP and uses a MySQL database. At the beginning it was meant to be an easier-to-use and easier-to-install alternative to the famous pastebin, but its emphasis changed a little bit. "Codebase" offers more of an integration to social networks, auto-generates a Google-sitemap for SEO and also includes math tools.

**Where can I try it? Is there a demo? **

A while ago I was hosting Codebase at http://www.parabela.org. Due to spamming I decided to stop providing that service.

How does it work in general?

You enter your code or mathematical expression in the textarea, fill out some further information and press the "+ Add this ..." button. Your submission will now be encrypted and stored in the database. You will be given a special URL that you have to use in order to view your submission again (you can share it, too).

What does this LaTeX stuff mean?

LaTeX is a special syntax for writing mathematical expressions on the computer. There are some rules to obey. Learn more at http://www.forkosh.com/mathtextutorial.html.

How to install Codebase?

In order to install Parabella Codebase or any older versions on your webspace, just load everything up. Then make sure to create a new MySQL database, if you haven't done so yet. At last, you have to edit the configuration file. There you specify the name of your Codebase, the MySQL database/user/password and some other values.

You can edit the theme and the FAQ, but also the "core" of your Codebase version if you've got some further knowlege in PHP-programming.

Download: CodebaseR3 alias Parabella Codebase

MrNicePage Tooltips Plugin J1.5

MrNicePage Tooltips Plugin is a Joomla 1.5 native tooltip plugin with enormous flexibility. Here you will find some examples on how to use MNP Tooltips Plugin and a short documentation.

You can simply use the plugin by placing {mnptooltip="Tooltip Text"} around the text of your choice {/mnptooltip}. This way, the default CSS-stylesheets that you can easily change in the Joomla Backend will be used.

Using the plugin is not restricted to plain text, you can also create tooltips for HTML code. Furthermore you can give each tooltip an individual style by overriding the standard CSS-stylesheets. Just extend the tooltip-tag the following way:

{mnptooltip="Tooltip Text 2",[TITLE,'mytitle',BGCOLOR,'#ffffff']}Text of your choice{/mnptooltip}

Below there is a list of all available commands you can use to override the standard CSS-stylesheets:

  • ABOVE,false // false or true - tooltip above mousepointer
  • BGCOLOR,'#E2E7FF' // Background colour (HTML colour value, in quotes)
  • BGIMG,'picture.png' // Path to background image, none if empty string ''
  • BORDERCOLOR,'#003099'// Color of the tooltip-border
  • BORDERSTYLE,'solid' // Any permitted CSS value, but I recommend 'solid', 'dotted' or 'dashed'
  • BORDERWIDTH,1 // Width of the tooltip-border
  • CENTERMOUSE,false // false or true - center the tip horizontally below (or above) the mousepointer
  • CLICKCLOSE,false // false or true - close tooltip if the user clicks somewhere
  • CLICKSTICKY,false // false or true - make tooltip sticky if user left-clicks on the hovered element while the tooltip is active
  • CLOSEBTN,false // false or true - closebutton in titlebar
  • CLOSEBTNCOLORS,['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title colours
  • CLOSEBTNTEXT,' X ' // Close button text (may also be an image tag)
  • COPYCONTENT,true // When converting a HTML element to a tooltip, copy only the element's content, rather than converting the element by its own
  • DELAY,400 // Time span in ms until tooltip shows up
  • DURATION,0 // Time span in ms after which the tooltip disappears; 0 for infinite duration, < 0 for delay in ms after the onmouseout until the tooltip disappears
  • EXCLUSIVE,false // false or true - no other tooltip can appear until the current one has actively been closed
  • FADEIN,100 // Fade-in duration in ms, e.g. 400; 0 for no animation
  • FADEOUT,100 // Fade-out duration in ms, e.g. 400; 0 for no animation
  • FADEINTERVAL,30 // Duration of each fade step in ms (recommended: 30) - shorter is smoother but causes more CPU-load
  • FIX,null // Fixated position, two modes. Mode 1: x- an y-coordinates in brackets, e.g. [210, 480]. Mode 2: Show tooltip at a position related to an HTML element: [ID of HTML element, x-offset, y-offset from HTML element], e.g. ['SomeID', 10, 30]. Value null (default) for no fixated positioning.
  • FOLLOWMOUSE,true // false or true - tooltip follows the mouse
  • FONTCOLOR,'#000044' // Color of the font
  • FONTFACE,'Verdana,Geneva,sans-serif'
  • FONTSIZE,'8pt' // E.g. '9pt' or '12px' - unit is mandatory
  • FONTWEIGHT,'normal' // 'normal' or 'bold';
  • HEIGHT,0 // Tooltip height; 0 for automatic adaption to tooltip content, < 0 (e.g. -100) for a maximum for automatic adaption
  • JUMPHORZ,false // false or true - jump horizontally to other side of mouse if tooltip would extend past clientarea boundary
  • JUMPVERT,true // false or true - jump vertically "
  • LEFT,false // false or true - tooltip on the left of the mouse
  • OFFSETX,14 // Horizontal offset of left-top corner from mousepointer
  • OFFSETY,8 // Vertical offset
  • OPACITY,100 // Integer between 0 and 100 - opacity of tooltip in percent
  • PADDING,3 // Spacing between border and content
  • SHADOW,false // false or true
  • SHADOWCOLOR,'#C0C0C0'// Color of the shadow
  • SHADOWWIDTH,5 // Width of the shadow
  • STICKY,false // false or true - fixate tip, ie. don't follow the mouse and don't hide on mouseout
  • TEXTALIGN,'left' // 'left', 'right' or 'justify'
  • TITLE,'' // Default title text applied to all tips (no default title: empty string '')
  • TITLEALIGN,'left' // 'left' or 'right' - text alignment inside the title bar
  • TITLEBGCOLOR,'' // If empty string '', BorderColor will be used
  • TITLEFONTCOLOR,'#FFFFFF' // Color of title text - if '', BgColor (of tooltip body) will be used
  • TITLEFONTFACE,'' // If '' use FontFace (boldified)
  • TITLEFONTSIZE,'' // If '' use FontSize
  • TITLEPADDING,2 // Padding of the tooltip-title
  • WIDTH,200 // Width of the Tooltip

The plugin uses wz_tooltips Javascript Library made by Walter Zorn (http://www.walterzorn.de)

Download: MNP Tooltips Plugin 1.1

Croogo: How to pass data from a plugin to an existing admin view

Hi fellow bakers, this is meant to be a tiny tutorial on how to pass data from your own plugin to an existing admin view, e.g. your plugin adds an additional tab to the Users edit view, and you want to provide the data displayed in that tab.

I've been searching for the answer on how to achieve this myself for months, and I couldn't believe how easy it actually was. I'm gonna show you how to do that right now.

What you need

You need an element that shall serve as an admin tab, and you need to tell Croogo that it indeed is. I added a new tab to the User admin add and User admin edit views inside the plugins bootstrap file.

Croogo::hookAdminTab('Users/adminadd', 'Pluginname', 'pluginfolder.adminuserextended');
Croogo::hookAdminTab('Users/adminedit', 'Pluginname', 'pluginfolder.adminuserextended');

What does this element contain?

Everything you want to be displayed inside that tab. For testing purposes I think the following piece of cake, er code is good enough:

data); ?>
This will display all data that is available to be displayed - really handy in combination with the form helper!

Now that's just the preparation, now we're going into it. We need a behavior, and we need to bind that behavior to an existing model, which is done inside the plugin bootstrap as well:

Croogo::hookBehavior('User', 'Pluginname.ExtendedUser', array(
    'relationship' => array(
        'hasMany' => array(
            'Customfield' => array(
                'className' => 'Pluginname.Customfield',
                'foreignKey' => 'Pluginname.User_id',
                'conditions' => array('Customfield.status' => 1),
            ),
        ),
    )
));

Here you can see how you can bind a behavior, which is part of your plugin, to an existing model provided by Croogo. But that's by far not all: As the third argument an array containing a relationship (this is not limited to just one association, you can set up as many as you want to) is supplied. This array is passed to the behavior and actually serves as an array containing custom data for your personal needs inside the behavior. This also means, that until now, nothing would happen. There is no functionality implemented in your behavior that could handle this tiny array containing the definition of a relationship. Luckily, we can do that ;)

And it might look like this:

<?php class ExtendedUserBehavior extends ModelBehavior {

function setup(&$model, $config = array()) {
    //Merging the specified (or not specified) config array with an array containing default values
    $config = Set::merge(array(
        'relationship' => false,
        'joins' => false,
        'enabled' => true,
        ), $config);
    //Each Model($model->alias) gets its own key containing the specific config array
    $this->settings[$model->alias] = $config;
    //Now let's setup any desired relationships
    $this->_setupRelationships($model, $config);
}

function _setupRelationships(&$model, $config = array()) {
    if (!empty($this->settings[$model->alias]['relationship'])) {
        //Here we add the specified relationship to our model ON THE FLY
        $model->bindModel($config['relationship'], false);
        //To make sure we really get all the desired data, we need to set the recursive level!
        //This really drove me mad, don't forget to adapt this according to your needs
        $model->recursive = 2;
    }
}

function beforeFind(&$model, $query) {
    //Needs to be done!
    return $query;

}

function afterFind(&$model, $results, $primary) {
    return $results;
    //Here we just merge all available fields with the ones the user already has filled out, and return that as a new array

}

function beforeSave(&$model, $query) {
    //Since save() wont save any associated data, we got to do this on our own
    $temp_data = $model->data['UsersExtendedField'];
    $model->UsersExtended->saveAll($temp_data);
    return $query;

} ?>

What this behavior actually does is pretty simple. It fetches the array 'relationships' out of the configuration array specified in the plugin bootstrap and binds those relationships on the fly to the model. Easy, huh?!

Categories

Tags