Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 12.08.2013, 19:29
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Shitbox2
А нужен ли observer? Я делаю проще. Подключаю $rootScope где надо и просто подписываюсь $rootScope.$on('myAction', fn). В любом случае все события до корневой области дойдут)
правильное замечание, спасибо Скорее всего перепишу код - уберу observer.

Он еще внутри используется: аккумулирует события и перераспределяет их (aka proxy). Скорее всего создам для этого изолированный scope, чтобы с ним можно было работать подобным образом (on, off, fire).

Еще было бы неплохо внедрение в scope контроллера сделать, чтобы обертки не писать.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #22 (permalink)  
Старый 12.08.2013, 23:59
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Переписал и сделал немного удобней

https://github.com/nervgh/angular-fi...controllers.js
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #23 (permalink)  
Старый 14.08.2013, 10:03
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Странное вынесение колбэков. Почему не сделать так?
var uploader = $fileUploader.create({
    url: '/upload.php',
    filters: [
        function( item ) {                    // first user filter
            console.log( 'filter1' );
            return true;
        }
    ],
    //Колбэки
    afteraddingfile: function () { ... },
    afteraddingall: function () { ... },
    ...
});

Распространенная практика упаковывать колбэки в объект настроек, чтобы всё было в одном месте. Вынесение АПИ в отдельный объект применяется, как правило, для методов, т. к. методы как раз приходится вызывать из разных мест, напр.: uploader.send()
Ответить с цитированием
  #24 (permalink)  
Старый 14.08.2013, 13:40
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Shitbox2
Странное вынесение колбэков
это не коллбеки, это события Т.е. на одно событие можно подписаться много раз:

// create a uploader with options
var uploader = $fileUploader.create({
    url: '/upload.php',
    filters: [
        function( item ) {                    // first user filter
            console.log( 'filter1' );
            return true;
        }
    ]
});

// REGISTER HANDLERS

uploader.bind( 'afteraddingfile', function( event, item ) {
    console.log( 'After adding a file 1', item );
});

uploader.bind( 'afteraddingfile', function( event, item ) {
    console.log( 'After adding a file 2', item );
});
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #25 (permalink)  
Старый 14.08.2013, 20:31
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

А зачем?)

P.S.
И еще не очень с очередью понятно. К примеру, у меня, как помнишь, так:
create: function (file, uploadFile) {
    //Создаем пустой элемент для будущего файла
    $scope.add('after', function (index, fileEl, permit) {

    angular.extend(fileEl, file) //Записываем айдишник элемента в объект файла
                
    uploadFile($scope.url + '/' + fileEl.id, fileEl, permit) //Загружаем файл
})

Т.е. fileEl (надо будет переименовать в queue содержит информацию об выбранных файлах. Это массив и его можно менять как угодно стандартными методами. Зачем делать очередь с отдельными методами добавления, доступа?

Последний раз редактировалось Shitbox2, 14.08.2013 в 21:34.
Ответить с цитированием
  #26 (permalink)  
Старый 15.08.2013, 00:57
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Shitbox2
А зачем?)
потому, что это удобно По твоему, зачем в DOM есть метод addEventListener?

Сообщение от Shitbox2
Зачем делать очередь с отдельными методами добавления, доступа?
все просто: моя очередь не приватная - это свойство загрузчика, которое является массивом. С одной стороны это не безопасно, с другой, позволяет внедрить ее в аргуляр без проблем:
$scope.uploader = uploader;

где шаблон
<ul>
    <li ng-repeat="item in uploader.queue">
</ul>

подробнее в разметке
Методов доступа к ней не писал (предполагается использование стандартных способов работы с массивами). Есть метод добавления в очередь, удаления из нее (методы загрузчика).

Метод addToQueue нужен потому, что:
- перед добавлением в очередь, каждый элемент проходит фильтры (что позволяет валидировать очередь) ссылка
- после добавления элемента[file|input] в очередь, он становится элементом очереди (приобретает свое api), что позволяет писать разметку вида
<ul>
    <li ng-repeat="item in uploader.queue">
        <div>Name: {{ item.file.name }}</div>
        <div>Size: {{ item.file.size }}</div>
        <div>
            Progress: {{ item.progress }}
            <div class="item-progress-box">
                <div class="item-progress" ng-style="{ 'width': item.progress + '%' }"></div>
            </div>
        </div>
        <div>Uploaded: {{ item.isUploaded }}</div>
        <div>
            <a ng-href="#" ng-click="item.upload()" ng-hide="item.isUploaded" >upload</a>
            <a ng-href="#" ng-click="item.remove()">delete</a>
        </div>
    </li>
</ul>

- вызываются события "afteraddingfile", "afteraddingall", "changedqueue". На примере события "afteraddingfile" покажу процесс кастомизации:
uploader.bind( 'afteraddingfile', function( event, item ) {
    // здесь, например, можно менять свойства элемента очереди, такие как alias, url, headers ... etc
   // можно дать команду на немедленную загрузку - item.upload()
   // или удалить item.remove() и т.п.
});

- на этапе добавления в очередь убираются браузерные различия (xh2 & iframe):
item.upload();
uploader.uploadItem( [index|item] );
uploader.uploadAll( [index|item] );

- почему надо делать удаление через методы загрузчика - iframe transport (остаются скрытые инпуты, формы и фреймы)

возможно, сделаю очередь защищенным свойством и добавлю пару методов для феншуя, но особых проблем не вижу, если руки прямые
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 15.08.2013 в 01:10.
Ответить с цитированием
  #27 (permalink)  
Старый 21.08.2013, 17:51
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

А ты тестировал iframe? Пытаюсь так же добавить поддержку, твой код не работает. В Хроме выдает ответ в модальном окне (с адресом запроса) с ошибкой UPLOAD_ERR_NO_FILE ПХП загрузчика. В IE просто не работает)

Последний раз редактировалось Shitbox2, 21.08.2013 в 17:56.
Ответить с цитированием
  #28 (permalink)  
Старый 21.08.2013, 18:43
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Shitbox2
А ты тестировал iframe?
да

Сообщение от Shitbox2
твой код не работает
не верю, давай песочницу, где мой код не работает.

чтобы протестировать мой код с фреймовым загрузчиком, достаточно сделать это (разумеется выбирать через инпут)

// It is attached to <input type="file" /> element
.directive( 'ngFileSelect', function() {
    return {
        link: function( $scope, $element ) {
            if ( !window.File || !window.FormData ) {
                $element.removeAttr( 'multiple' );
            }

            $element.bind( 'change', function() {
                $scope.$emit( 'file:add', this );
//                    $scope.$emit( 'file:add', this.files ? this.files : this );
            });
        }
    }
});
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 21.08.2013 в 18:49.
Ответить с цитированием
  #29 (permalink)  
Старый 21.08.2013, 19:32
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Я тестировал так: http://learn.javascript.ru/play/GLyoJ
Изменения с 255 строки в files.js
Ответить с цитированием
  #30 (permalink)  
Старый 21.08.2013, 20:44
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Shitbox2
Я тестировал так
привет от политики безопасности - нельзя создать инпут type="file" c полем value, и присвоить ему значениеhttp://learn.javascript.ru/play/UyWPy
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
drag & drop, mouseup cyber Events/DOM/Window 108 02.07.2012 00:31
drag & drop , html 5 cyber Events/DOM/Window 1 30.06.2012 15:16
Дебаг js, или как найти обработчик события для тега jimm88 Events/DOM/Window 1 18.04.2012 15:11
Отмена drag and drop браузера l-liava-l Элементы интерфейса 0 02.04.2012 13:53
Как отлаживать события? Или как сделать трассировку вызовов функций? gennad Events/DOM/Window 1 18.08.2010 13:21