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

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

  • AlexanderC

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

    Spritz 25 августа 2011 г. 18: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 = &quot;<div class=&#39;&quot;+options.lassoClass+&quot;&#39;></div>&quot;;

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

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

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

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

    switch( e.type )
    {
    case &quot;movestart&quot;:
    // remove old lasso case exists
    if ( lassoObj.length > 0 )
    {
    lassoObj.remove();
    }
    // append lasso html
    $(&quot;body&quot;).append(lassoHtml);
    // setup lasso style
    $(&quot;.&quot; + options.lassoClass).css({
    &quot;position&quot; : &quot;absolute&quot;,
    &quot;border&quot; : &quot;1px solid silver&quot;,
    &quot;background&quot; : &quot;#908089&quot;,
    &quot;opacity&quot; : &quot;0.2&quot;,
    &quot;filter&quot; : &quot;alpha(opacity=20)&quot;,
    &quot;z-index&quot; : 10000,
    &quot;width&quot; : 0,
    &quot;height&quot; : 0,
    &quot;margin&quot; : 0,
    &quot;padding&quot; : 0,
    &quot;top&quot; : e.startX + &quot;px&quot;,
    &quot;left&quot; : e.startY + &quot;px&quot;,
    });
    $(&quot;body&quot;).css(&quot;cursor&quot;, &quot;default&quot;);
    break;
    case &quot;move&quot;:
    var ws = options.whileSelecting;
    // check and call it
    if ( typeof ws == &quot;function&quot; ) ws(e);
    // extend lasso
    $(&quot;.&quot; + options.lassoClass).css({
    &quot;width&quot; : Math.abs(e.deltaX),
    &quot;height&quot; : Math.abs(e.deltaY),
    &quot;left&quot; : (e.deltaX > 0 ? e.startX : e.pageX) + &quot;px&quot;,
    &quot;top&quot; : (e.deltaY > 0 ? e.startY : e.pageY) + &quot;px&quot;,
    });
    break;
    case &quot;moveend&quot;:
    var lstr = &quot;.&quot; + options.lassoClass;
    $(&quot;*&quot;).bind(&quot;click.tempLasso&quot;, function(){
    if ( $(lstr).length > 0 ) $(lstr).remove();
    // collect garbages
    $().unbind(&quot;click.tempLasso&quot;);
    });
    // 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 &amp;&amp; Xfrom <= endX) || (e.startX <= Xto &amp;&amp; Xto <= endX) ) &amp;&amp;
    ( (e.startY <= Yfrom &amp;&amp; Yfrom <= endY) || (e.startY <= Yto &amp;&amp; Yto <= endY) ) )
    {
    chArr.push( $(this) );
    }
    });
    var as = options.afterSelected; // чернобыльская…
    // check and call it
    if ( typeof as == &quot;function&quot; ) as(chArr);
    if ( options.removeAfterSelected ) lassoObj.remove();
    break;
    }
    return;
    });
    });
    };
    })(jQuery);


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

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

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

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

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

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

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

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

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

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

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

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

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

    методы:

    $().ready(function(){
    $(&quot;#lassoHere&quot;).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(&#39;Moving… x[&#39;+e.pageX+&#39;], y[&#39;+e.pageY+&#39;]&#39;);
    },
    /* класс лассо */
    lassoClass: &quot;myLassoClass&quot;,
    /* путь к стилю для импорта */
    stylePath: null,
    /* убрать лассо после выделения,
    если false то будет убрано про клике на любой элемент */
    removeAfterSelected: false,
    });
    });
    {+++132+++} …будет убрано про клике на… бл*ский день ((…

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