ФорумПрограммированиеJavaScript → Блин, ну типа лассо(jQuery plugin)...

Блин, ну типа лассо(jQuery plugin)...

  • AlexanderC

    Сообщения: 270 Репутация: N Группа: Кто попало

    Spritz 25 августа 2011 г. 15:41

    Короче для практики решил написать что-то бесполезное на Silex(микро фреймворк такой в общем),
    Написал псевдо консоль… написал TODO приложение… всё красиво, всё с jQuery….
    Вот сегодня решил написать файл менеджер(под висту чтоб косил).
    Короче: для полноценности плюшек не хватала лассо(т.е. выделение зоны с файлами).

    Родился велосипедик…(для работы нужно jquery и jquery.event.move-Stephen Band )

    (function($){
    $.fn.lasso = function(options) {

    var defaults = {
    // path to css to be imported
    stylePath: null,
    lassoClass: "lasso",
    // elements that must be returned as param for onClickAfter event, full selector text
    toListenFor: "*",
    // fired after selected area, array os selected elements as param
    afterSelected: function(arr){},
    // function fired while selecting a zone, event as param(see event properties)
    whileSelecting: function(e){},
    removeAfterSelected: true,
    };
    // extend options
    var options = $.extend(defaults, options);

    // lasso html
    var lassoHtml = "<div class='"+options.lassoClass+"'></div>";

    // do the job fot each initialization
    this.each(function() {
    obj = $(this);

    // set style
    if ( options.stylePath == null || options.stylePath == "" )
    {
    options.stylePath = "border:1px dotted white; background: black; opacity: 0.3";
    }
    else
    {
    $("body").prepend("<style type='text/css'>@import url("+options.stylePath+");</style>");
    }

    // deny text selection
    obj.css({ /* Normal browsers */
    "-webkit-user-select" : "none",
    "-khtml-user-select": "none",
    "-moz-user-select" : "none",
    "-o-user-select" : "none",
    "user-select" : "none"
    });
    /* IE */ obj.bind("selectstart", function(){ return false });

    // bid selection event
    obj.bind("movestart move moveend", function(e){
    e.stopPropagation();
    // get lasso object
    var lassoObj = $("." + options.lassoClass);

    switch( e.type )
    {
    case "movestart":
    // remove old lasso case exists
    if ( lassoObj.length > 0 )
    {
    lassoObj.remove();
    }
    // append lasso html
    $("body").append(lassoHtml);
    // setup lasso style
    $("." + options.lassoClass).css({
    "position" : "absolute",
    "border" : "1px solid silver",
    "background" : "#908089",
    "opacity" : "0.2",
    "filter" : "alpha(opacity=20)",
    "z-index" : 10000,
    "width" : 0,
    "height" : 0,
    "margin" : 0,
    "padding" : 0,
    "top" : e.startX + "px",
    "left" : e.startY + "px",
    });
    $("body").css("cursor", "default");
    break;
    case "move":
    var ws = options.whileSelecting;
    // check and call it
    if ( typeof ws == "function" ) ws(e);
    // extend lasso
    $("." + options.lassoClass).css({
    "width" : Math.abs(e.deltaX),
    "height" : Math.abs(e.deltaY),
    "left" : (e.deltaX > 0 ? e.startX : e.pageX) + "px",
    "top" : (e.deltaY > 0 ? e.startY : e.pageY) + "px",
    });
    break;
    case "moveend":
    var lstr = "." + options.lassoClass;
    $("*").bind("click.tempLasso", function(){
    if ( $(lstr).length > 0 ) $(lstr).remove();
    // collect garbages
    $().unbind("click.tempLasso");
    });
    // get selected elements
    var chArr = [];

    if ( e.deltaX < 0 )
    {
    e.startX += e.deltaX;
    e.startX = Math.abs(e.startX);
    }
    if ( e.deltaY < 0 )
    {
    e.startY += e.deltaY;
    e.startY = Math.abs(e.startY);
    }
    var endX = e.startX + Math.abs(e.deltaX);
    var endY = e.startY + Math.abs(e.deltaY);

    obj.children(options.toListenFor).each(function(){
    var os = $(this).offset();
    var Xfrom = os.left;
    var Yfrom = os.top;
    // true as outer* param case required with margins
    var Xto = $(this).outerWidth() + Xfrom;
    var Yto = $(this).outerHeight() + Yfrom;
    if ( ( (e.startX <= Xfrom && Xfrom <= endX) || (e.startX <= Xto && Xto <= endX) ) &&
    ( (e.startY <= Yfrom && Yfrom <= endY) || (e.startY <= Yto && Yto <= endY) ) )
    {
    chArr.push( $(this) );
    }
    });
    var as = options.afterSelected; // чернобыльская…
    // check and call it
    if ( typeof as == "function" ) as(chArr);
    if ( options.removeAfterSelected ) lassoObj.remove();
    break;
    }
    return;
    });
    });
    };
    })(jQuery);


    П.С. во вложениях изображение- как оно должно выглядеть(там курсор не захватило при принтскрине)
    файл с примером(там же весь код, можно смело переименовать после закачки )…

    П.П.С единственное выдаёт иногда х*.. плз взгляните, а то мозг у меня уже не варит…
    1. lasso.txt (43)
    2. lasso.jpg (151)
  • md5

    Сообщения: 11949 Репутация: N Группа: в ухо

    Spritz 25 августа 2011 г. 22:09, спустя 6 часов 28 минут 35 секунд

    деку выложи
    вот, мы еще файлы не скичивали))
    все умрут, а я изумруд
  • AlexanderC

    Сообщения: 270 Репутация: N Группа: Кто попало

    Spritz 26 августа 2011 г. 2:06, спустя 3 часа 56 минут 58 секунд

    http://alexanderc.org/uploads/scripts/lasso.html - Демка(смотреть в консоль если что)
  • md5

    Сообщения: 11949 Репутация: N Группа: в ухо

    Spritz 26 августа 2011 г. 2:15, спустя 8 минут 11 секунд

    ой, прикольно)
    все умрут, а я изумруд
  • AlexanderC

    Сообщения: 270 Репутация: N Группа: Кто попало

    Spritz 26 августа 2011 г. 2:27, спустя 12 минут 6 секунд

    методы:

    $().ready(function(){
    $("#lassoHere").lasso({
    /* метод вызванный после окончания выделения,
    как параметр получает массив элементов в зоне выделения(которые выли указаны в toListenFor)*/
    afterSelected : function(arr){
    var i;
    for ( i=0; i<arr.length; i++ )
    {
    console.log(arr.html());
    }
    },
    /* вызывается во время выделения(на каждое движение),
    как параметр получает ивент, т.е.
    е.pageX:
    е.pageY: Page coordinates of pointer.
    е.startX:
    е.startY: Page coordinates of pointer at movestart.
    е.deltaX:
    е.deltaY: Distance the pointer has moved since movestart.
    e.type event type
    …….
    */
    whileSelecting: function(e)
    {
    console.log('Moving… x['+e.pageX+'], y['+e.pageY+']');
    },
    /* класс лассо */
    lassoClass: "myLassoClass",
    /* путь к стилю для импорта */
    stylePath: null,
    /* убрать лассо после выделения,
    если false то будет убрано про клике на любой элемент */
    removeAfterSelected: false,
    });
    });
    Спустя 132 сек.
    …будет убрано про клике на… бл*ский день ((…

Пожалуйста, авторизуйтесь, чтобы написать комментарий!