Если нельзя, но очень хочется, то нужно обязательно и ничего в мире не стоит того, чтобы делать из этого проблему!


Интересна Java? Кликай по ссылке и регистрируйся!
Если тебе полезно что-то из того, чем я делюсь в своем блоге - можешь поделиться своими деньгами со мной.
с пожеланием
столько времени читатели провели на блоге - 
сейчас онлайн - 

понедельник, 17 ноября 2014 г.

Slidecaster на javascript

Сегодня будем писать слайдкастер. Эту такая штука, которая в браузере позволит совместить слайды с аудио. Вместо того, чтобы писать avisynth скрипт вручную, дергая постоянно virtualdub, я буду загружать весь контент в браузер и мышкой мувать ползунки - где когда какой слайд начать. Удобно - я такую фичу на SlideShare видел. Хочу такую же! Бесплатно и для всех докладчиков.

В начале реализаици любой фичи идет ее декомпозиция на подзадачи, каждая из которых гуглится - т.е. решение можно за 5-10 минут найти в сети и попробовать у себя в интеграции с существущим кодом. Самое первое, что мне приходит в голову - это сделать банальный прогрессбар и научиться управлять им со скрипта. Вперед! Гуглим что-то типа "jquery progressbar" и смотрим что предлагает гугл. И первый же пример мне подходит! берем волшебный copy past driven development и копируем исходник себе в файлик 1.html, оставляя пометку // спасибо за http://jqueryui.com/progressbar/ чтобы не терять связь с автором.

Вот он код. Что я сделал - поменял заголовок. У нас жеж наше приложение. Добавил комментарий и пути к скриптам сделал абсолютными.
<!doctype html>
<-- thanks for http://jqueryui.com/progressbar/ -->
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Slidecaster</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
        $(function() {
            $( "#progressbar" ).progressbar({
                value: 37
            });
        });
    </script>
</head>
<body> 
    <div id="progressbar"></div>
</body>
</html>
Вот как это выглядит

Сразу после этого я создам git репозиторий в той же папке что и скрипт и отправлю изменения в файловый рай.

Шаг второй - добавить сверху на прогрессбарчик мувалку - наверное это будет какой-то дивчик, который я смогу мувать по прогрессбарчику. Вместе с этим позиция прогрессбарчика будет меняться в точку где размещен дивчик - ползунок.

Задачу так же можно дробить. Для начала просто отрисую поверх прогрессбара дивчик. Потом научусь его мувать. Потом свяжу позицию с состоянием на прогрессбарчике. Вроде как не дробится больше.

Что надо сделать - добавить новый дивчик, задать ему стиль.
<!doctype html>
<!-- thanks for http://jqueryui.com/progressbar/ -->
<html lang="en">
<head>
    ...
    <script>
     ...
    </script>
    <style>
        .move {
            width: 2px;
            height: 40px;
            background-color: black;
            cursor: e-resize;
            position: absolute;
        }
    </style>
</head>
<body> 
    <div id="progressbar"></div>
    <div class="move"></div>
</body>
</html>
Идем дальше. Дивчик надо заставить муваться. Для понимания как это сделать гуглим "jquery drag div" и первая же статья наша. Добавили в скрипт строчку
$(".move").draggable();
Но теперь надо ограничить передвижения дивчика. Как? Гуглим "jquery draggable only x" и первый же ответ stack overflow наш. Добавляем вызов функции draggable один параметр
$(".move").draggable({ axis: "x" });
Еще один маленький штришок - надо сделать чтобы дивчик мувался по прогрессбару а не под ним. Добавим еще одну строчку.
$(".move").css("top", $("#progressbar").position().top - 5);
$(".move").height($("#progressbar").height() + 10);
Как это делается я помню, так как неоднократно делал уже. Но если че загуглить можно было бы по "jquery position get/change". Надо бы сохраниться! И посмотреть как это выглядит.


Следующий шаг - влиять на прогрессбар. И тут начинается самое интересное, поскольку оказывается, что тот прогрессбар, который предоставляется jquery немного не попиксельно перемещается. Вот как-то так изменилась функция.
$(function() {
    $("#progressbar").progressbar({  
        value: 0,  // позицию по умолчанию в ноль - там где и курсор
        max: $("#progressbar").width()     // количество делений прогрессбара такое же как и ширина 
    });
    $(".move").css("top", $("#progressbar").position().top - 5);
    $(".move").height($("#progressbar").height() + 10);
    $(".move").draggable({ axis: "x" }); 
   
    // добавили новый обработчик драга дивчика при его перемещении - меняется и состояние прогрессбара
    var drag = function(event){
        var pos = $(".move").position().left - $('#progressbar').position().left;
        $("#progressbar").progressbar("value", pos);
    };
       $('body').bind('drag', drag);
});
Посмотреть как это выглядит можно по этой линке или ниже в iframe.


Продолжение следует! А пока можешь погуглить в чем дело :)

Комментариев нет:

Отправить комментарий