html2canvas Resize image

html2canvas(document.getElementById('divId'), {
    onrendered: function(canvas) {
        var extra_canvas = document.createElement('canvas');
             extra_canvas.setAttribute('width', 70);
             extra_canvas.setAttribute('height', 70);
        var ctx = extra_canvas.getContext('2d');
             ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 70, 70);
        var dataURL = extra_canvas.toDataURL();
        var img = $(document.createElement('img'));
              img.setAttribute('src', dataURL);
        document.body.appendChild(img);
});

html2canvas Error : Index or size is negative or greater than the allowed amount Bug fix

Для исправления ошибки "Error : Index or size is negative or greater than the allowed amoun" в библиотеке html2canvas необходимо заменить строку

ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);

на строки:

var imgData = canvas.getContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height);
ctx.putImageData(imgData, 0, 0);

Sublime Text 3 User settings

{
"bold_folder_labels": true,
"color_scheme": "Packages/User/Mac Classic (SL).tmTheme",
"default_line_ending": "unix",
"draw_white_space": "all",
"fallback_encoding": "UTF-8",
"font_face": "Verdana",
"font_options": "subpixel_antialias",
"font_size": 15.0,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
[
"Vintage"
],
"line_padding_bottom": 1,
"line_padding_top": 1,
"rulers":
[
80
],
"scroll_past_end": true,
"tab_completion": false,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": false
}

Alertbox - не блокирующие Alert, Comfirm, Prompt

Файл alertbox.js

define(function(){

    // Вывод собственных вариантов Alert, Confirm, Prompt
   
    // Примеры использования:
   
    // Замена alert(text')
   
    // AlertBox.alert(
    //        'Внимание!'
    //      , function(returnedValue){
    //          console.log('Alert всегда возвращает значение: ' + returnedValue + '.');
    //       }
    // );
   
    // Замена confirm('text');
   
    // AlertBox.confirm(
    //        'Вы уверены, что хотите выйти?'
    //      , function(returnedValue){console.log('Вы выбрали "Нет", поскольку получено значение: ' + returnedValue + '.');}
    //      , function(returnedValue){console.log('Вы выбрали "Да", поскольку получено значение: ' + returnedValue + '.');}
    // );
   
    // Замена confirm('text', 'default value');
   
    // AlertBox.prompt(
    //       'Сколько будет равно 2+2?'
    //     , '2'
    //     , function(returnedValue){console.log('Вы решили не отвечать на вопрос, поскольку получено значение: ' + returnedValue + '.');}
    //     , function(returnedValue){
    //          returnedValue = parseInt(returnedValue, 10);
    //          if (returnedValue === 4) {
    //              console.log('Ответ правильный.');
    //          } else {
    //              console.log('Ответ неправильный. 2+2=4');
    //          }
    //       }
    // );
   
    // Во всех случаях функции обратного вызова можно не писать.

    var AlertBox = (function(){

        // Constructor
       
        var AlertBox = {};

        // Private variables
       
        var stack = []
            , currentAlertBoxObject = null;
       
        // Private functions
       
        function correctValue (object, property) {
            if (object[property] === undefined || object[property] === null) {
                return '';
            }
            return object[property];
        }
       
        function addMessageToStack (args) {
            var type = correctValue(args, 'type')
                , text = correctValue(args, 'text')
                , inputDefaultValue = correctValue(args, 'inputDefaultValue')
                , cancelFunction = args.cancelFunction || function () {}
                , okFunction = args.okFunction  || function () {}
                , message = {};
            message.type = '' + type;
            message.text = '' + text;
            if (message.type === 'prompt') {
                message.inputDefaultValue = '' + inputDefaultValue;
            }
            message.cancelFunction = cancelFunction;
            if (message.type !== 'alert') {
                message.okFunction = okFunction;
            }
            stack.push(message);
        }
       
        function showMessageFromStack () {
            var alertBoxBlock = document.getElementById('alertbox');
            if (
                    ( alertBoxBlock === null || (alertBoxBlock.offsetWidth <= 0 && alertBoxBlock.offsetHeight <= 0) )
                && stack.length !== 0
            ) {
                currentAlertBoxObject = stack.shift();
                document.body.appendChild(renderAlertBoxTemplate());
                addOnClickFunctions(currentAlertBoxObject);
            }
        }
       
        function renderAlertBoxTemplate () {
            var alertBoxElement = document.createElement('div');
                  alertBoxElement.id = 'alertbox';
            var alertBoxHTML = '<div id="alertbox-opaque-layer"></div>'
                                        + '<div id="alertbox-' + currentAlertBoxObject.type + '">'
                                        + '<div id="alertbox-' + currentAlertBoxObject.type + '-wrapper">'
                                        + '<p id="alertbox-text">' + currentAlertBoxObject.text + '</p>'
                                        + '</div>';
            if (currentAlertBoxObject.type === 'alert') {
                alertBoxHTML += '<div id="alertbox-alert-buttons">'
                                        + '<div id="alertbox-cancel">Ok</div>';
            } else if (currentAlertBoxObject.type === 'confirm') {
                alertBoxHTML += '<div id="alertbox-confirm-buttons">'
                                        + '<div id="alertbox-cancel">Нет</div>'
                                        + '<div id="alertbox-ok">Да</div>';
            } else if (currentAlertBoxObject.type === 'prompt') {
                alertBoxHTML += '<div id="alertbox-input-wrapper">'
                                        + '<input id="alertbox-input" value="' + currentAlertBoxObject.inputDefaultValue + '" />'
                                        + '</div>'
                                        + '<div id="alertbox-prompt-buttons">'
                                        + '<div id="alertbox-cancel">Отмена</div>'
                                        + '<div id="alertbox-ok">Ok</div>';
            }
                alertBoxHTML += '</div>'
                                        + '</div>'
                                        + '</div>';
            alertBoxElement.innerHTML = alertBoxHTML;
            return alertBoxElement;
        }
       
        function onAlertBoxClick (event) {
            if (event.stopPropagation) {event.stopPropagation();}
            event.cancelBubble = true;
        }
       
        function addOnClickFunctions (currentAlertBoxObject) {
            on('click', document.getElementById('alertbox-opaque-layer'), onAlertBoxClick);
            if (currentAlertBoxObject.type === 'alert') {
                on('click', document.getElementById('alertbox-alert'), onAlertBoxClick);
                on('click', document.getElementById('alertbox-alert-buttons'), onAlertBoxClick);
            }
            if (currentAlertBoxObject.type === 'confirm') {
                on('click', document.getElementById('alertbox-confirm'), onAlertBoxClick);
                on('click', document.getElementById('alertbox-confirm-buttons'), onAlertBoxClick);
            }
            if (currentAlertBoxObject.type === 'prompt') {
                on('click', document.getElementById('alertbox-prompt'), onAlertBoxClick);
                on('click', document.getElementById('alertbox-prompt-buttons'), onAlertBoxClick);
            }
            on('click', document.getElementById('alertbox-cancel'), onCancelClick);
            if (currentAlertBoxObject.type !== 'alert') {
                on('click', document.getElementById('alertbox-ok'), onOkClick);
            }
            on('keydown', document, onKeyDown);
        }
       
        function addOffClickFunctions (currentAlertBoxObject) {
            off('click', document.getElementById('alertbox-opaque-layer'), onAlertBoxClick);
            if (currentAlertBoxObject.type === 'alert') {
                off('click', document.getElementById('alertbox-alert'), onAlertBoxClick);
                off('click', document.getElementById('alertbox-alert-buttons'), onAlertBoxClick);
            }
            if (currentAlertBoxObject.type === 'confirm') {
                off('click', document.getElementById('alertbox-confirm'), onAlertBoxClick);
                off('click', document.getElementById('alertbox-confirm-buttons'), onAlertBoxClick);
            }
            if (currentAlertBoxObject.type === 'prompt') {
                off('click', document.getElementById('alertbox-prompt'), onAlertBoxClick);
                off('click', document.getElementById('alertbox-prompt-buttons'), onAlertBoxClick);
            }
            if (currentAlertBoxObject.type !== 'alert') {
                off('click', document.getElementById('alertbox-ok'), onOkClick);
            }
            off('click', document.getElementById('alertbox-cancel'), onCancelClick);
            off('keydown', document, onKeyDown);
        }

        function onCancelClick (event) {
            onAlertBoxClick(event);
            var alertBoxValue;
                       if (currentAlertBoxObject.type === 'alert') {alertBoxValue = undefined;
            } else if (currentAlertBoxObject.type === 'confirm') {alertBoxValue = false;
            } else if (currentAlertBoxObject.type === 'prompt') {alertBoxValue = null;
            }
            currentAlertBoxObject.cancelFunction(alertBoxValue);
            addOffClickFunctions(currentAlertBoxObject);
            document.body.removeChild(document.getElementById('alertbox'));
            showMessageFromStack();
        }

        function onOkClick (event) {
            onAlertBoxClick(event);
            var alertBoxValue;
                       if (currentAlertBoxObject.type === 'alert') {alertBoxValue = undefined;
            } else if (currentAlertBoxObject.type === 'confirm') {alertBoxValue = true;
            } else if (currentAlertBoxObject.type === 'prompt') {alertBoxValue = document.getElementById('alertbox-input').value;
            }
            currentAlertBoxObject.okFunction(alertBoxValue);
            addOffClickFunctions(currentAlertBoxObject);
            document.body.removeChild(document.getElementById('alertbox'));
            showMessageFromStack();
        }
                   
        function onKeyDown (event) {
            onAlertBoxClick(event);
            var alertBoxValue;
            if (event.keyCode === 13 || event.keyCode === 32) { // Enter or Space
                           if (currentAlertBoxObject.type === 'alert') {alertBoxValue = undefined;
                } else if (currentAlertBoxObject.type === 'confirm') {alertBoxValue = true;
                } else if (currentAlertBoxObject.type === 'prompt') {alertBoxValue = document.getElementById('alertbox-input').value;
                }
                if (currentAlertBoxObject.type === 'alert') {
                    currentAlertBoxObject.cancelFunction(alertBoxValue);
                } else {
                    currentAlertBoxObject.okFunction(alertBoxValue);
                }
                addOffClickFunctions(currentAlertBoxObject);
                document.body.removeChild(document.getElementById('alertbox'));
                showMessageFromStack();
            } else if (event.keyCode === 27) { // Escape
                          if (currentAlertBoxObject.type === 'alert') {alertBoxValue = undefined;
                } else if (currentAlertBoxObject.type === 'confirm') {alertBoxValue = false;
                } else if (currentAlertBoxObject.type === 'prompt') {alertBoxValue = null;
                }
                currentAlertBoxObject.cancelFunction(alertBoxValue);
                addOffClickFunctions(currentAlertBoxObject);
                document.body.removeChild(document.getElementById('alertbox'));
                showMessageFromStack();
            }
        }

        function on (type, element, handler) {
            if (document.addEventListener) {
                element.addEventListener(type, handler, false);
            } else {
                element.attachEvent('on' + type, handler);
            }
        }
       
        function off (type, element, handler) {
            if (document.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else {
                element.detachEvent('on' + type, handler);
            }
        }
       
        // Static functions
       
        AlertBox.alert = function (text, cancelFunction) {
            addMessageToStack({
                  type: 'alert'
                , text: text
                , cancelFunction: cancelFunction
            });
            showMessageFromStack();
        };
       
        AlertBox.confirm = function (text, cancelFunction, okFunction) {
            addMessageToStack({
                  type: 'confirm'
                , text: text
                , cancelFunction: cancelFunction
                , okFunction: okFunction
            });
            showMessageFromStack();
        };

        AlertBox.prompt = function (text, inputDefaultValue, cancelFunction, okFunction) {
            addMessageToStack({
                  type: 'prompt'
                , text: text
                , inputDefaultValue: inputDefaultValue
                , cancelFunction: cancelFunction
                , okFunction: okFunction
            });
            showMessageFromStack();
        };

        // Return constructor

        return AlertBox;
       
    })();
   
    return AlertBox;

});


Файл alertbox.css

/*****************************************************************\
  AlertBox CSS
\*****************************************************************/

#alertbox {
    font-size: 1.4em;
}

#alertbox-opaque-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    -khtml-opacity: 0.7;
    -moz-opacity: 0.7;
    opacity: 0.7;
    *filter:progid:DXImageTransform.Microsoft.Alpha(opacity = 70);
    z-index: 100000;
}

#alertbox-alert,
#alertbox-confirm,
#alertbox-prompt {
    width: 500px;
    height: 90px;
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #bbbbbb;
    z-index: 100001;
}

#alertbox-prompt {
    height: 130px;
}

#alertbox-alert-wrapper,
#alertbox-confirm-wrapper,
#alertbox-prompt-wrapper {
    height: 60px;
    overflow-y: auto;
}

#alertbox-prompt-wrapper {
    height: 40px;
}

#alertbox-input-wrapper {
    margin-top: 10px;
    padding: 2px;
    border: 1px solid #bbbbbb;
}

#alertbox-input {
    width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 0;
    border: none;
}

#alertbox-alert-buttons,
#alertbox-confirm-buttons,
#alertbox-prompt-buttons {
    position: absolute;
    width: 186px;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 10px;
}

#alertbox-alert-buttons {
    width: 50px;
}

#alertbox-cancel,
#alertbox-ok {
    display: inline-block;
    width: 50px;
    padding: 3px 9px;
    background-color: #5a8cd3;
    text-align: center;
    color: #ffffff;
    white-space: nowrap;
    cursor: pointer;
}

#alertbox-ok {
    margin-left: 50px;
}

#alertbox-alert-buttons #alertbox-ok {
    margin-left: 0px;
}

#alertbox-cancel:hover,
#alertbox-ok:hover {
    background-color: #29a2fd;
}

Замена typeof на правильную функциию

Object.toType = (function toType(global) {
  return function(obj) {
    if (obj === global) {
      return 'global';
    }
    return ({}).toString.call(obj).match(/\s([a-z|A-Z]+)/)[1].toLowerCase();
  }
})(this);

Object.toType(window); // "global" (all browsers)
Object.toType([1,2,3]); // "array" (all browsers)
Object.toType(/a-z/); // "regexp" (all browsers)
Object.toType(JSON); // "json" (all browsers)


Или можно просто проверять тип так:

Object.prototype.toString.call([1,2,3]); // "[object Array]"

Асинхронная обработка массивов и асинхронные вызовы функций из очереди

Асинхронная обработка массивов:

function processArray(items, process, callback){
    var todo = items.concat(); // создать копию массива оригинала
    setTimeout(function(){
        process(todo.shift());
        if (todo.length > 0){
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}

processArray([1,2,3], function(element){console.log(element);}, function(){console.log('End');});

Полуасинхронно-пакетная обработка массивов:

function timedProcessArray(items, process, callback){
    var todo = items.concat(); // создать копию массива оригинала
    setTimeout(function(){
        var start = +new Date();
        do {
            process(todo.shift());
        } while (todo.length > 0 && (+new Date() - start < 50));
        if (todo.length > 0){
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}

timedProcessArray([1,2,3], function(element){console.log(element);}, function(){console.log('End');});

Асинхронный вызов функций из очереди:

function multistep(steps, args, callback){
    var tasks = steps.concat(); // скопировать массив
    setTimeout(function(){
        // выполнить следующее задание
        var task = tasks.shift();
        task.apply(null, args || []);
        // проверить наличие других заданий
        if (tasks.length > 0){
            setTimeout(arguments.callee, 25);
        } else {
            callback();
        }
    }, 25);
}

multistep([function(a){console.log(a);}, function(b){console.log(b);}, function(c){console.log(c);}], [1], function(){console.log('End');});

Вывод console.log в любом браузере

Данный код позволяет сделать вывод console.log() даже в устаревших браузерах.

<div id="consolelog" style="font-family: 'Courier New', Courier, monospace; font-size: 12px; margin: 40px 30px 0px; background-color: white; border: 2px solid black; padding: 10px;"></div>

<input type="text" id="consoleinput" style="margin: 0px 30px; width: 400px;" onkeypress="return evalConsoleInput(event, this.value);" />

<script type="text/javascript">
var appendConsole = function(message, type) {
  var color = "black";
  if (type === "error") {
    color = "red";
  } else if (type === "debug") {
    color = "blue";
  }

  var div = document.createElement('div');
  div.style.color = color;
  div.style.marginBottom = "10px";

  div.innerHTML = message;

  document.getElementById("consolelog").appendChild(div);
}

var originalConsole = null;

if (window.console != null) {
  originalConsole = window.console;
}

window.console = {
  log: function(message) {
    appendConsole(message, "info");
    originalConsole.log(message);
  },
  info: function(message) {
    appendConsole(message, "info");
    originalConsole.info(message);
  },
  debug: function(message) {
    appendConsole(message, "debug");
    originalConsole.debug(message);
  },
  error: function(message) {
    appendConsole(message, "error");
    originalConsole.error(message);
  }
};

function evalConsoleInput(e, message)
{
  if (e.keyCode == 13) { // 13 is the keycode for the enter key
    var inputField = document.getElementById("consoleinput");
    var evalString = inputField.value;

    console.log("> " + evalString);

    try {
      var returnValue = eval(evalString);
      console.log(returnValue);
    } catch (e) {
      console.error(e.message);
    } finally {
      inputField.value = "";
    }
  }
}
</script>

Сюда еще можно добавить поддержку Stacktrace.js.