convert-indentation-to-list.js

by Andrea Ercolino

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="structure_1" class="convert-indentation-to-list" data-list-container-id="structure_1"><pre>
client/
  apps/
    auth/
      components/
        login/
          login.html
          login.js
        register/
          register.html
          register.js
        reset-password/
          reset-password.html
          reset-password.js
      index/
        index.css
      index.html
      shared/
        config.js
        modules/
        services/
      start.js
    core/
      components/
        bears/
          bears.html
          bears.js
        home/
          home.html
        users/
          users.html
          users.js
      index
        index.css
      index.html
      shared/
        config.js
        modules/
        services/
          bears.service.js
          users.service.js
      start.js
  bower_components/
  docs/
  shared/
    config.js
    modules/
    services/
      authentication.service.js
      base64.service.js
      flash.service.js
      storage.service.js
    my-project.js
    routes.js
</pre></div>

CSS

/* CSS Tree menu styles */
ol.tree
{
	padding: 0 0 0 30px;
	width: 300px;
}
	li
	{
		position: relative;
		margin-left: -15px;
		list-style: none;
	}
	li.file
	{
		
	}
		li.file a
		{
			color: #4C4C4C;
			padding-left: 21px;
			text-decoration: none;
			display: block;
		}
	li input
	{
		position: absolute;
		left: 0;
		margin-left: 0;
		opacity: 0;
		z-index: 2;
		cursor: pointer;
		height: 1em;
		width: 1em;
		top: 0;
	}
		li input + ol
		{
			margin: -0.938em 0 0 -44px; /* 15px */
			height: 1em;
		}
		li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
  li label
	{
		display: block;
    color:navy;
	}
    li label.toggle
    {
      cursor: pointer;
      font-weight: 600;
    }

	li input:checked + ol
	{
		margin: -1.25em 0 0 -44px; /* 20px */
		padding: 1.563em 0 0 80px;
		height: auto;
	}
		li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
		li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

JavaScript

function IndentationToList(options) {
    'use strict';

    return Main(options);
    

    function Interpolate(template, variables) {
        var names = Object.keys(variables);
        var result = template;
        for (var i = 0, iTop = names.length; i < iTop; i++) {
            var name = names[i];
            var value = variables[name];
            var re = RegExp('\\b' + name + '\\b', 'g');
            result = result.replace(re, value);
        }
        return result;
    }

    function Parse(lineText, lineNumber, indent) {
        var aux = lineText.split(indent);
        var result = {
            'level': aux.length - 1,
            'label': aux.pop(),
            'line':  lineNumber
        };
        return result;
    }

    function InitOptions(options) {
        var defaultOptions = {
            indent: '  ',
            templates: {
                folder: '<li><label class="toggle" for="ID">FOLDER</label> <input type="checkbox" id="ID" /><ol>CONTENT</ol></li>',
                file: '<li class="file" href="">FILE</li>',
                folderWithoutContent: '<li><label for="ID">FOLDER</label> <input type="checkbox" id="ID" /></li>',
                contentWithoutFolder: '<ol class="tree">CONTENT</ol>'
            },
            text: ''
        };
        if (options.constructor.name !== 'Object') {
            options = {
                text: String(options)
            };
        }
        var result = {
            indent:    options.indent || defaultOptions.indent,
            templates: options.templates || defaultOptions.templates,
            text:      options.text
        };
        return result;
    }

    function InitLines(text) {
        var result = text.
            replace('\r\n', '\n').   // remove double line endings
            replace('\r', '\n').     // remove odd line endings
            split('\n').             // get lines
            filter(function(value) { // remove empty lines
                return value !==...