DirToHTML5 - Create a HTML5 and CSS3 only directory structure without JavaScript.

guinness · May 25, 2014

Never say I don't give this community some little gems once in a while. I came up with the concept of creating a directory structure using nothing but valid HTML5 and CSS3. It uses an unknown "checkbox hack" concept which some HTML5/CSS3 purists consider to be beyond the semantics of the language. But I say if it's supported by all major browsers and it works, then why not!

Note: I used >KaFu's idea for the current level and next level, but the rest I came up with myself, albeit I have used this "checkbox hack" before in other projects I have created.

#include <File.au3>
#include <MsgBoxConstants.au3>
#include <WinAPIFiles.au3>

MsgBox($MB_SYSTEMMODAL, '', 'This example only uses HTML5 and CSS3, I know, no JavaScript!')

; Thanks to KaFu for the idea: http://www.autoitscript.com/forum/topic/156913-dir2html-create-html-site-with-links-from-a-dir-structure/?p=1136522
Example()

Func Example()
    Local Const $sSaveFilePath = @ScriptDir
    Local $sHTML = '', $sTab = @TAB
    _HTML_Add($sHTML, '<!DOCTYPE html>')
    _HTML_Add($sHTML, '<html lang="en">')
    _HTML_Add($sHTML, '<head>')
    _HTML_Add($sHTML, '<meta charset="utf-8">', $sTab)
    _HTML_Add($sHTML, '<title>Directory To HTML5 Concept</title>', $sTab)
    _HTML_Add($sHTML, '<style type="text/css">', $sTab)
    _Tab_Add($sTab)
    _HTML_Add($sHTML, '@import url(http://weloveiconfonts.com/api/?family=fontawesome);.dirtohtml a{background:transparent;color:#08c;position:relative;text-decoration:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.dirtohtml a:hover{color:#0af}.dirtohtml input[type=checkbox],.dirtohtml input[type=checkbox]+ul{display:none}.dirtohtml input[type=checkbox]:checked+ul{display:block}.dirtohtml label{cursor:pointer}.dirtohtml ul li{list-style:none}[class*="fontawesome-"]:before{font-family:"FontAwesome",sans-serif;margin-right:5px}', $sTab)
    _Tab_Remove($sTab)
    _HTML_Add($sHTML, '</style>', $sTab)
    _Tab_Remove($sTab)
    _HTML_Add($sHTML, '</head>')
    _HTML_Add($sHTML, '<body>')
    _Tab_Add($sTab)

    Local Const $sDirectorySelection = FileSelectFolder('Select a folder to map to HTML', '')
    Local $aFileList = _FileListToArrayRec($sDirectorySelection, '*', 0, 1, 2, 2)
    If @error Then
        _HTML_Add($sHTML, '<p>No files were present in the selected directory.</p>', $sTab)
    Else
        _HTML_Add($sHTML, '<div class="dirtohtml">', $sTab)
        _Tab_Add($sTab)
        _HTML_Add($sHTML, '<ul>', $sTab)
        _Tab_Add($sTab)
        Local $bIsRelative = False, _
                $iCheckboxCount = 1, $iCurrentLevel = 0, $iNestedDepth = 0, $iNextIndex = 0, $iNextLevel = 0, _
                $sFileName = '', $sRelativeFilePath = ''
        For $i = 1 To $aFileList[0]
            $aFileList[$i] = StringRegExpReplace($aFileList[$i], '(?:\\|/)', '\\')
            $iCurrentLevel = @extended

            If $i < $aFileList[0] Then
                $iNextIndex = $i + 1
                $aFileList[$iNextIndex] = StringRegExpReplace($aFileList[$iNextIndex], '(?:\\|/)', '\\')
                $iNextLevel = @extended
            EndIf

            $sFileName = StringRegExpReplace($aFileList[$i], '^.+\\', '')
            If _WinAPI_PathIsDirectory($aFileList[$i]) = $FILE_ATTRIBUTE_DIRECTORY Then
                If $iNextLevel > $iCurrentLevel Or $iNextLevel = $iCurrentLevel Then
                    _HTML_Add($sHTML, '<li>', $sTab)
                    _Tab_Add($sTab)
                    _HTML_Add($sHTML, '<label for="dirtohtml_' & $iCheckboxCount & '"><i class="fontawesome-folder-close-alt"></i>' & $sFileName & '</label>', $sTab)
                    _HTML_Add($sHTML, '<input id="dirtohtml_' & $iCheckboxCount & '" type="checkbox">', $sTab)
                    _HTML_Add($sHTML, '<ul>', $sTab)
                    $iCheckboxCount += 1
                    $iNestedDepth += 1
                ElseIf $iNextLevel < $iCurrentLevel Then
                    _HTML_Add($sHTML, '<li>' & $sFileName, $sTab)
                EndIf
                _Tab_Add($sTab)
            Else
                $sRelativeFilePath = _PathGetRelative($sSaveFilePath, $aFileList[$i])
                $bIsRelative = Not @error
                _HTML_Add($sHTML, '<li><i class="fontawesome-file"></i><a href="' & ($bIsRelative ? '' : 'file://') & StringReplace($sRelativeFilePath, '\', '/') & '">' & $sFileName & '</a></li>', $sTab)
                If $iNextLevel < $iCurrentLevel Then
                    For $j = 1 To ($iCurrentLevel - $iNextLevel)
                        _Tab_Remove($sTab)
                        _HTML_Add($sHTML, '</ul>', $sTab)
                        _Tab_Remove($sTab)
                        _HTML_Add($sHTML, '</li>', $sTab)
                        $iNestedDepth -= 1
                    Next
                EndIf
            EndIf
        Next

        If $iNestedDepth Then
            For $j = 1 To $iNestedDepth
                _Tab_Remove($sTab)
                _HTML_Add($sHTML, '</ul>', $sTab)
                _Tab_Remove($sTab)
                _HTML_Add($sHTML, '</li>', $sTab)
            Next
        EndIf
        _Tab_Remove($sTab)
        _HTML_Add($sHTML, '</ul>', $sTab)
        _Tab_Remove($sTab)
        _HTML_Add($sHTML, '</div>', $sTab)
    EndIf

    _HTML_Add($sHTML, '</body>')
    _HTML_Add($sHTML, '</html>')

    Local Const $sHTMLFilePath = _WinAPI_PathRemoveBackslash($sSaveFilePath) & '\index.html'
    Local Const $hFileOpen = FileOpen($sHTMLFilePath, BitOR($FO_OVERWRITE, $FO_UTF8))
    If $hFileOpen > -1 Then
        FileWrite($hFileOpen, $sHTML)
        FileClose($hFileOpen)
        MsgBox($MB_SYSTEMMODAL, '', 'HTML file created successfully.' & @CRLF & $sHTMLFilePath)
    Else
        MsgBox($MB_SYSTEMMODAL, '', 'An error occurred writing to the HTML file.')
    EndIf
    ConsoleWrite($sHTML & @CRLF)
    ; ShellExecute($sHTMLFilePath)
    Return True
EndFunc   ;==>Example

Func _HTML_Add(ByRef $sHTML, $sData, $sTab = Default)
    $sHTML &= (($sTab = Default) ? '' : $sTab) & $sData & @CRLF
EndFunc   ;==>_HTML_Add

Func _Tab_Add(ByRef $sTab)
    $sTab &= @TAB
EndFunc   ;==>_Tab_Add

Func _Tab_Remove(ByRef $sTab)
    Local Static $TAB_LENGTH = StringLen(@TAB)
    $sTab = StringTrimRight($sTab, $TAB_LENGTH)
EndFunc   ;==>_Tab_Remove

Edited January 13, 2015 by guinness

guinness · May 25, 2014

Changed the a links styling.

mLipok · May 25, 2014

Nice scirpt.

But I notice there is an issue with Polish language in file names.

Look in attached example.

there is:

Dla programist�w - SerwerSMS.pl - Jasna strona komunikacji.htm

instead

Dla programistów - SerwerSMS.pl - Jasna strona komunikacji.htm

index.html

guinness · May 25, 2014

Ha, I was just issuing a fix for that. See first post.

Edit: The reason I didn't encode the file before was this was a proof of concept only.

Edited June 13, 2014 by guinness

mLipok · May 25, 2014

[#AutoIt3Wrapper_Au3Check_Parameters=-d -w 1 -w 2 -w 3 -w- 4 -w 5 -w 6 -w 7

look at first char

EDIT:

ignoring this fact, it works now

Edited May 25, 2014 by mLipok

guinness · May 25, 2014

Fixed.

guinness · June 13, 2014

Just updated the example, though no bug fixes (as I haven't found any.)

guinness · June 30, 2014

I added @error checking for _FileListToArrayRec() which will print out no files were found if no files were found.

Edited January 12, 2015 by guinness

guinness · January 13, 2015

Just a minor syntax fix.

TouchOdeath · January 13, 2015

Nice script guiness, very creative use of the selector, and thanks for sharing. This 'hack' is a well known css selector (:checked) and is apart of the HTML5 standard. You could have combined your two elements into one to make less HTML like this:

<head>

<style>

.fontawesome-file{

color: blue;

font-style: italic;

cursor: pointer;

}

.fontawesome-file:hover{

color: #0af;

}

<style>

</head>

<div class="fontawesome-file" href="guinesstest.au3">guinesstest.au3</div>

Also, the subdirectory names, having the name 'out there' is not good practice because you would have to have tricky/extra javascript code to change the 'subdir' name (if in the future you decided to) without changing the rest of the innerHTML. It would be better to include it inside a div tag, or apart of some value="xx".

Edit:

err... I mean, having the <i> tag inside a <label>, the 'subdir' inside <label> is fine.

Edited January 13, 2015 by TouchOdeath

guinness · January 13, 2015

Thanks. I hope you don't mind but I have a couple of responses to your post.

1. If the user decided to change the sub-directory name then I would expect them to re-run this script again to generate a new HTML file, though I guess I could have put it in a date-* attribute.

2. As for your code suggestion, I am pretty sure using the href attribute in a div element is invalid. Also didn't want to use a class name that I have no control over, as I linking externally to it.

3. Oh, and about the css hack comment, I meant that using the :checked pseudo selector in this way is what some "css purists" would call a hack.

Cheers for looking at the coding.

TouchOdeath · January 13, 2015

By all means, we are all here to improve one another. I need to look at others code more often for sure.

#2 you are correct on this, you could change the <div> to an <a>, and replace the <style> with this:

<style>

.fontawesome-file::before{font-style: italic;} /*to keep close to the same look*/

<style>

Thanks for letting me know.

#3 I guess I miss understood that part, but regardless it does have a nice "how the hell?" feel to it, even if you are a css purist.

Again big thanks for sharing and commenting back.

Edited January 13, 2015 by TouchOdeath

guinness · January 13, 2015

Okay thanks. You're also welcome, as I believe sharing is caring!

wakillon · February 23, 2016

Hi guinness, interesting Topic

In some cases, directories arborescence is not respected.

For test, I reproduce the problem with this archive Nouveau dossier 1.7z

Edited February 23, 2016 by wakillon

guinness · February 23, 2016

Thanks. This was just a proof of concept, so you will have to debug yourself. Good luck.

wakillon · February 24, 2016

It does not matter
Problem comes from Dir2HTML by Kafu on which you take the "levels" idea.
Fortunately Dir2HTML by Xenobiologist is fully functional !

guinness · February 24, 2016

Great to hear.

Sign In

DirToHTML5 - Create a HTML5 and CSS3 only directory structure without JavaScript.

Recommended Posts

guinness

guinness

mLipok

guinness

mLipok

guinness

guinness

guinness

guinness

TouchOdeath

guinness

TouchOdeath

guinness

wakillon

guinness

wakillon

guinness

Create an account or sign in to comment

Create an account

Sign in

Similar Content

How to click a link/button in a HTML5 container?

IE Embedded doesn't display some sites well

Downloads folder macro?

Include Full Directory

Canvas and Scripting

Browse

AutoIt Resources

Release

Beta