“Tastydir” Documentation by “vladh” v1.2

This is for programmers! If you don't want to modify Tastydir, just go ahead and install it.

---

“Tastydir”

---

Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. JavaScript and PHP (with AJAX)
4. Additional info

---

A) HTML Structure - top

Tastydir's layout is separated into six sections.

• #header
• #nav
• #path
• #body
• #bottombar (only visible while copying/moving files)
• #footer

#header

The #header div contains an <h1> tag. The text inside this tag corresponds to the text in the logo, although the logo is actually an image - this is done to help search engines. Please check out the CSS Files and Structure section for further instructions on changing the logo.

#nav

The #nav div contains:

• #navnav
• #meta

The former contains navigation buttons with straightforward onclick attributes, such as history.go(-1).
The latter contains div.item elements separated by div.sep separators. The first div.item in the code is the rightmost, the last is the leftmost. The aforementioned items are actually the login section and the info tooltip - again, pretty straightforward.

#path

The #nav div has a slightly deeper structure, so here's an example:

div#path
....div.pathpart{
........a#path1{
............home
............div.breadcrumb{}
........}
....}

Where div.pathpart is the section of the path, a#path1 is the link that changes the directory to that path, and div.breadcrumb is the arrow separator.

#body

Initially, this contains: table-containing div (div#files_outer), files table (table#files_table), table header (thead#files_head), table body - where the files go (tbody#files).
Then, Javascript does something like this for every file/folder.

Folder:
tr #folder0 .frow
....td .fcell .folder
........a .fname .folder [href=path]{ folder name }
....td
........span .fsize{}
....td
........a .fperms
............span (.ok, .no, or no class){ drwxr-xr-x }
....td .actions
........img .action_editfolder
........img .action_deletefolder

File:
tr #file0 .frow
....td .fcell .file
........a .fname .file .action_downloadfile [href=_tastydir/do.php?download=path] [style=background image that changes with extension]{ file name }
....td
........span .fsize{191.00 B}
....td
........a .fperms
............span (.ok, .no, or no class){ drwxr-xr-x }
....td .actions
........img .action_editfile
........img .action_deletefile
........img .action_copyfile

There's a lot of Javascript stuff going on here, and you can read about that in the JavaScript and PHP (with AJAX) section.

#bottombar

The #bottombar div contains:

• #bottombar_l (floats left, has some text)
• #bottombar_r (floats right, has some links with basic onclick attributes)

Nothing really interesting here.

#footer

This div contains:

• #makefiles (basic links, similar in structure to #meta (see above))
• #uploadfile (your usual hidden iframe hacky file upload)

Again, pretty simple.

---

B) CSS Files and Structure - top

Tastydir only uses one CSS file - _tastydir/style.css. This contains:

• My css reset
• Actual tastydir styling
• jQuery UI styling

You can find details about the CSS reset in the CSS itself. As for the jQuery UI styling, it's pretty long - please don't try to edit it manually. Instead, use jQuery's themeroller to make a jQuery UI theme.

As for the actual styling, it's pretty self-explanatory and similar in structure to the HTML. You may want to change the logo though, so here's how:

• Edit logo.png using the PSD file I've provided. (path: _tastydir/images/logo.png|psd. the font is Museo Slab, and you can get it here)
• Update the width and height in style.css(search for #header h1)
• Update the content of #header h1 in index.php to reflect the content of your new logo (it's good for search engines!)
• You're all done!

---

C) JavaScript and PHP (with AJAX) - top

Since Tastydir mainly uses AJAX, most of its core functionality is in the Javascript.

The main Javascript file is located in _tastydir/js/site.js (this file also has awesome ASCII art headings!) - it makes requests to _tastydir/do.php, which actually performs file operations. Other files: _tastydir/common.php (common functions etc.), _tastydir/install.php (install scripts).

Tastydir uses some pretty complicated Javascript, and documenting all of it would be very difficult. Instead, I'll just outline a basic request/file operation. Let's have a look at file editing:

• The user clicks an image with the class .action_editfile, which is bound to the editFileDialog() function - the click handler looks through the DOM for the name of the file to edit (it's associated with the image the user clicked), and passes it to the function.
• editFileDialog() performs a getf request - this returns the file's contents, which are then displayed to the user.
• The user edits the file, and clicks the Edit button. If the filename has changed, the moveFile() function is called, which does a bunch of other stuff to move the file. Then, writeFile() writes the new data to either the original (if unchanged) or new filename.
• To do so, writeFile() sends an editf request using POST - this request contains the new file data.

Additional example: if the user was actually creating a new file, the same operations would be performed, with two main differences:

• There would be no existing file to be moved, so no moving.
• A fcheck request would be sent to check if the file already exists - if it does, the user is presented with an overwrite confirmation dialog.

Also: all of these requests return a status code (each request has a custom set of them), which is then checked by the Javascript - which either continues the operation or presents the user with an error or confirmation dialog.

Remember: there are many such requests, so good luck!

---

D) Additional info - top

Please read the README file for additional information and credits.

---

Once again, thank you for purchasing Tastydir. Feel free to email me regarding any issues or questions you may have, and I'll do my best to help. Have a nice day!

Vlad Harbuz (vladh.net)

Go To Table of Contents

---