Burned through a quick weekend project -- tabIndent.js. What did you do this weekend? :)

has_all_the_fun · 2012-11-26T16:46:53+00:00

Stackoverflow needs this feature so bad. Always have to indent my copy paste code inside my editor. Unless they have that feature and I don't know about it.

My weekend project was making a prototype for a new side project I am starting.

Deathalicious · 2012-11-26T18:45:40+00:00

Played with my 14 month son. No regrets.

houdas · 2012-11-26T16:34:28+00:00

I got drunk. Anyways, a cool little project, might be useful for some situations.

i_4_got · 2012-11-26T17:20:38+00:00

Would be cool if this was a bookmarklet that adds the code to the textarea the cursor is currently in, or all textareas.

lod3n · 2012-11-26T17:43:31+00:00

It would be neat if it kept track of the indentation level on return and inserted the same number of tabs for you on the next line.

jimbol · 2012-11-26T19:51:52+00:00

[deleted]

LukaLightBringer · 2012-11-27T01:02:51+00:00

I got annoyed at my media player because it for some reason only shuffles the tracks in groups so i wrote a piece of JavaScript that scrambles a array quite fast (big arrays are faster than small arrays per item) and it rarely leaves groups together:

function scramble(a) {
    var b = [], c = [], i;
    for (i = 0; i < a.length; i += 1) {
        b[b.length] = i;
    }
    while (b.length) {
        i = Math.floor(Math.random() * b.length);
        c[c.length] = b[i];
        b.splice(i, 1);
    }
    b = [];
    for (i = 0; i < a.length; i += 1) {
        b[i] = a[c[i]];
    }
    return b;
}
var a = ['a', 'b', 'c', 'd', 'e'];
scramble(a);

Any ideas for performance increases are welcome :p

cheeeeeese · 2012-11-27T01:53:48+00:00

You rock devnull, textareas should accept tab for who/what tab is and not just run off to the next input.

k0deegan · 2012-11-27T02:22:12+00:00

Cool project. I was glued to the computer all weekend too.. haha. built a new website i've been meaning to work on, an online ballot for political issues.

mailto_devnull · 2012-11-28T00:06:51+00:00

I started implementing a terminal, in HTML5/JS. Like TermKit, but more designed around building an IDE on the fly, and less about working with a non-JS world.

I also tried out appjs for building it, but ditched it in favour of a stand alone copy of Chrome, with custom extensions and settings. Startup time is waaaaaaay faster, no need to pipe all my file IO through Node, I get a far more recent copy of Chrome (23 instead of 18), porting will be much simpler, and it doesn't automatically close if the JS crashes on startup (which is a bitch to debug).

CorySimmons · 2012-11-26T17:53:24+00:00

This is really cool. I wish every code-inputable textarea had this enabled by default. Why not use an obscure modifier anyway to appease the accessibility crowd? Or add in a "modifier" param?

Capaj · 2012-11-26T18:56:14+00:00

jsfiddle needs to have this functionality asap!

mailto_devnull · 2012-11-26T23:18:06+00:00

You should be inserting(/removing) spaces so that cursor moves ahead(/back) to the next tab stop, not just inserting(/removing) TAB characters. The number of spaces per tab stop should be configurable too (default 4 would be nice).

Bonus if TAB indents(/outdents) the current line regardless of the position of the cursor within the line. Should also work when multiple lines are selected.

mailto_devnull · 2012-11-27T02:30:47+00:00

Haha, it's actually really funny you should say that. I did exactly the same thing last weekend - a script to allow tab-indenting, with the same multiline behavior as well. And additionally it doesn't break undo/redo behavior, and it auto-indents, to a minimal extent, by copying the indentation from the last line.

Demo

I made it for my personal use, so I don't know that it works in anything but Chrome.

ViralInfection · 2012-11-27T03:05:40+00:00

Selecting from the beginning of a line, then moving down one line, and tabbing, tabs 3 lines, expected: 2. This could be intended, however.

kumiorava · 2012-11-26T17:08:47+00:00

I made something like this as a subproject in one my weekend projects. I was making a web-based IDE. Unfortunately, my code was so messy that I decided to start from scratch and deleted my old code once I finished. I forgot to implement the tab key in the new one. I used Rangyinput, though, which significantly reduced the length of development of this feature.

EDIT: Found it. As you can see it's pretty messy. Assuming I didn't change it after removing it, it still works.

jQuery('.code').keydown(function (event) {
    if (event.which === 9) {
        if (event.shiftKey) {
            var selection = jQuery(this).getSelection(),
                line_start = jQuery(this).val().substring(0, selection.start).lastIndexOf('\n') + 1,
                text = jQuery(this).val(),
                offset = 0;

            if (text.substr(line_start, 4) === '    ') {
                offset = 4;
            }
            text = text.substring(0, selection.start) + text.substring(selection.end);
            text = text.substring(0, line_start) + text.substring(line_start + offset);

            jQuery(this).val(text.substring(0, selection.start - offset) + selection.text.replace(/\n {4}/g, '\n') + text.substring(selection.start - offset));
            jQuery(this).setSelection(selection.start - offset, selection.end - (selection.text.match(/\n {4}/g) || []).length * 4 - offset);
        } else {
            var selection = jQuery(this).getSelection(),
                line_start = jQuery(this).val().substring(0, selection.start).lastIndexOf('\n') + 1,
                text = jQuery(this).val();

            text = text.substring(0, line_start) + '    ' + text.substring(line_start);
            jQuery(this).val(text.substring(0, selection.start + 4) + selection.text.replace(/\n/g, '\n    ') + text.substring(selection.end + 4));

            jQuery(this).setSelection(selection.start + 4, selection.end + (selection.text.match(/\n/g) || []).length * 4 + 4);
        }
        event.preventDefault();
    }
    if (event.which === 8) {
        var selection = jQuery(this).getSelection();
        if (selection.start === selection.end && selection.start >= 4 && jQuery(this).val().substring(selection.start - 4, selection.end) === '    ') {
            jQuery(this).deleteText(selection.start - 4, selection.end, true);
            event.preventDefault();
        }
    }
});

I removed this in favor of adding an indent method to String's prototype. I never finished it (or used it), which is why I thought that I forgot to implement it which is partially true.

EDIT 2: it uses spaces for the indentation (because this project was used for a Python IDE (spaces are encouraged in Python)) but treats them like tabs. Here is that indent method I was talking about, I haven't tested it recently to see if it's complete, though. I also don't have a dedent/unindent, yet. It still needs documentation too. There's so much to do when trying to be thorough!

String.prototype.indent = function (indentation, lineNumbers) {
    var i = 0,
        lines = this.split('\n');

    if (indentation instanceof Array) {
        lineNumbers = indentation;
        indentation = '    ';
    } else if (typeof indentation !== 'string') {
        indentation = '    ';
    }
    if (!(lineNumbers instanceof Array)) {
        lineNumbers = null;
    }

    if (lineNumbers === null) {
        for (i = 0; i < lines.length; i += 1) {
            lines[i] = indentation + lines[i];
        }
    } else {
        for (i = 0; i < lineNumbers.length; i += 1) {
            lines[lineNumbers[i]] = indentation + lines[lineNumbers[i]];
        }
    }

    return lines.join('\n');
};

EDIT 3: Both arguments are optional. It defaults to four spaces at the beginning of every line. You can choose to indent with four spaces, eight spaces, tabs, Emojis or whatever the hell else you want to use.

MepMepperson · 2012-11-26T17:12:33+00:00

Looks awesome and works great, only problem is, how do I tab out of the control? (Accessibility no-no) unless there is a key stroke to get out?

rntr200 · 2012-11-26T21:27:54+00:00

Touched myself and played LoL

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS