[Виджет] to do (дела, задачи) в меню и сцены, ver 3.23

Готовое оформление с исполнительным кодом

Модераторы: immortal, newz20

Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Виджет to do (дела, задачи) в меню

Сообщение Vovix » Вт ноя 24, 2015 10:01 am

eygen писал(а): ....
Да тут дело оказалось в браузре, IE какого то не отображает их. Хром показал как надо.
И еще вопросик, через Majordroid разъезжается строка New items то есть "+" у меня переходит в следующую строку. Это как то исправить возможно? И такой вопрос личного так сказать характера, чем обусловлен красный цвет? :) Я наверное перекрашу :)
Цвет - закос под аналогичное приложение для iPhone!
c New items разберусь, понял почему ;)
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Виджет to do (дела, задачи) в меню

Сообщение nick7zmail » Вт ноя 24, 2015 10:12 am

Vovix писал(а): 1) ВЫПОЛНЯТЬ НЕ НУЖНО Необходимо создать класс, например: ToDo*
2) ВЫПОЛНЯТЬ НЕ НУЖНО Необходимо сделать в этом классе свойство: StreamingCode1*
3) ВЫПОЛНЯТЬ НЕ НУЖНО Создать объект в этом классе: TodoList*
* эти пункты выполнятся сами при первом запуске скрипта todo_view_menu
Еще один шаг по оптимизации).
Раз уж создаешь объекты/свойства - можно и действия запилить не отдельными скриптами, а в методы объекта или класса ToDo. Чтобы все в одном месте было.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Виджет to do (дела, задачи) в меню

Сообщение Vovix » Вт ноя 24, 2015 11:08 am

nick7zmail писал(а): ....
Еще один шаг по оптимизации).
Раз уж создаешь объекты/свойства - можно и действия запилить не отдельными скриптами, а в методы объекта или класса ToDo. Чтобы все в одном месте было.
можно, но я всю ночь решал другую проблему:
nick7zmail писал(а):Еще бы обновлялся чисто блок, а не вся страница - было бы вообще норм
и я её, таки, решил!!!

физика процесса такова:
после того как браузер отобразил мой модуль todo, вся работа с ним ведется в параллельном режиме, т.е. для целей отображения (в рамках текущей сессии) все изменения JS производит в теле <div id="list">....</div> документа! и одновременно запускает соответствующие скрипты которые уже правят файл todo.txt на сервере!
таким образом данные в файле оказываются дождественны с данными в окне браузера!

хочу пока остаться с "базой данных" в виде файла, но наверно его вынесу в Dropbox по аналогии с листом list.txt штатного модуля продукты!
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Виджет to do (дела, задачи) в меню

Сообщение Vovix » Вт ноя 24, 2015 11:34 am

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

"Поступай с другими так, как хочешь, чтобы поступали с тобой!" перефразировано из Евангелие от Матфея (гл. 7 стр. 12)
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Виджет to do (дела, задачи) в меню

Сообщение Vovix » Вт ноя 24, 2015 1:54 pm

немного изменил код в меню:
(только там в начале - строчка №5 - нужно будет поправить вручную, ID элемента на свой, к сожалению)
нужно проверить как будет в других браузерах
(Хром - порядок, Мелкомягкий Edge - порядок, на iPhone (Safari) - отлично)
СпойлерПоказать

Код: Выделить всё

<style>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

 
#item194 { /* здесь item194 - это номер ID пункта меню этого элемента */
 padding: 0;
 }
 
#list {
  position: relative;
 /* width: calc(100% + 40px); */
 /* margin: 0 -20px 0 -20px; */
 width: calc(100%);
 margin: 0;
 
}
#list .new {
 width: 100%;
 height: 50px;
  padding: 0;
  margin: 0;
 }
 
#list .new #newtask {
  float: left;
  width: calc(100% - 76px);
  height: 50px;
  padding: 0;
  margin: 0;
  background: #222;
  /*line-height: 50px;*/
  text-indent: 10px;
}

#list .new input {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 14px;
  color: #FFF;
  text-align: justify;
  line-height: normal;
  outline: 0;
  border: 0;
  border-radius: 0px;
 /* font-smoothing: antialiased; */
}


#list .new #newtask::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#list .new button {
  cursor: pointer;
  float: right;
  width: 76px;
  height: 50px;
  padding: 0;
  outline: 0;
  border: 0;
  border-radius: 0px;
  margin: -9px 0 0 0;
  background: #111111;
  font-size: 24px;
  color: #FFF;
}
#list .list .item {
  clear: both;
  width: 100%;
  height: 38px;
 margin: 0;
  
}
#list .list .item span {
  cursor: default;
  float: left;
  width: calc(100% - 76px);
  height: 20px;
  padding: 5px 0 0 0;
  margin: 0 0 0 0;
  outline: 0;
  border: 0;
  background: transparent;
  text-indent: 10px;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 14px;
  color: #FFF;
  text-align: justify;
  line-height: 1.9;
  
}
#list .list .item span.checked {
  opacity: .5;
  text-decoration: line-through;
}
#list .list .item .rightblock {
  float: right;
  width: 76px;
  height: 38px;
  padding: 0;
  margin: 0;
  
}
#list .list .item .rightblock button {
 cursor: pointer;
  float: left;
  width: 38px;
  height: 38px;
  padding: 0px;
  margin: 0;
  outline: 0;
  border: 0;
  border-radius: 0px;
  background: rgba(0,0,0,0.1);
  font-size: 20px;
  color: #FFF;  
}

</style>
 
<script type="text/javascript">

function btnRunClicked() {
    var newtask = $('#newtask').val(),
        bc = 20,
        ni = $("div.item").length + 1;
        
    $('#newtask').val('');
    
     if (newtask) {
        
        
        var codItem1 = '<div class="item" id="taskbox_' + ni + '" style ="background: rgba(223,' + (bc + ni * 14) + ',31,0.9);">';
        var    codItem2 = '<span id="task_' + ni + '">' + newtask + '</span>';
          var codItem3 = '<div class="rightblock"><button id="check_' + ni + '" class="check fa fa-check ui-btn ui-shadow ui-corner-all" onClick="checkClicked(' + ni +');"></button>';
        var codItem4 = '<button id="delete_' + ni + '" class="delete fa fa-times ui-btn ui-shadow ui-corner-all" onClick="deleteClicked(' + ni + ');"></button></div></div>';
 
        $.get( "/objects/", { script:"todo_new", task:newtask } );
         $(codItem1 + codItem2 + codItem3 + codItem4).appendTo("div.list");
        
         //    setTimeout(function() { location.reload() }, 1000);
        return false;
     } 
} 

function checkClicked(ctask) {
    if (ctask) {
         // var el = document.getElementById('task_'+ctask);
        $.get( "/objects/", { script:"todo_check", task:ctask } );

         // el.className = (el.className == 'checked' ? '' : 'checked');

        $('#task_'+ctask).toggleClass('checked');
        return false;
    } 
}   

function deleteClicked(dtask) {
    if (dtask) {
           $.get( "/objects/", { script:"todo_delete", task:dtask } );
         //    document.getElementById('taskbox_'+dtask).remove();
            $('#taskbox_'+dtask).remove();
           return false;
     } 
}
 
</script>

%TodoList.StreamingCode1%
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
eygen
Сообщения: 392
Зарегистрирован: Чт сен 25, 2014 5:37 pm
Откуда: Екатеринбург
Благодарил (а): 25 раз
Поблагодарили: 52 раза

Re: Виджет to do (дела, задачи) в меню

Сообщение eygen » Вт ноя 24, 2015 6:22 pm

А что должно измениться?
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Виджет to do (дела, задачи) в меню

Сообщение Vovix » Вт ноя 24, 2015 8:49 pm

eygen писал(а):А что должно измениться?
раньше были "костыли" по всовыванию блока, чтобы раздвинуть блок до края!
при трассировке страницы в браузере видны были лишние вылеты блока, что могло создать проблемы в некоторых браузерах при отображении!
например в CSS было:

Код: Выделить всё

 width: calc(100% + 40px);
 margin: 0 -20px 0 -20px;  
теперь правильнее, это проблема возникает, т.к. код обрабатывается движком MDM (или конкретнее jQuery) перед его отображением!
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Виджет to do (дела, задачи) в меню

Сообщение Vovix » Чт ноя 26, 2015 8:38 pm

все изменения и обновления в первом сообщении
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Аватара пользователя
Vovix
Сообщения: 1155
Зарегистрирован: Пн янв 27, 2014 1:43 am
Откуда: г.Ижевск
Благодарил (а): 60 раз
Поблагодарили: 531 раз
Контактная информация:

Re: Виджет to do (дела, задачи) в меню

Сообщение Vovix » Сб ноя 28, 2015 4:48 am

Последние и существенные изменения:

1) данные теперь хранятся в свойстве объекта (текстовый файл больше не нужен)!
2) для установки модуля достаточно импортировать класс с одним объектом и одним методом
3) немного изменено отображение в меню (отступы, края и т.п.)

порядок установки:

1) Скачать файл с импортом Класса, объекта и метода - ToDo_app_install.txt в архиве.
2) Импортировать его себе в объекты
3) зайти в метод install объекта и нажать Настроить
СпойлерПоказать
111.jpg
111.jpg (35.38 КБ) 7355 просмотров
4) запустить его на выполнение вручную (нажать test)
СпойлерПоказать
222.png
222.png (96.25 КБ) 7355 просмотров
Для установки это всё!

Использовать еще проще:
1) В меню создать пункт типа HTML с данными: %TodoList.StreamingCode1%
СпойлерПоказать
333.jpg
333.jpg (79.13 КБ) 7355 просмотров
*единственно, для более корректного отображения нужно заменить на свой ID (тот который у вас у пункта меню с модулем)
менять нужно в TodoList.CSSandJS вот на строке с видом (в начале):

Код: Выделить всё

#item194 { /* здесь item194 - это номер ID пункта меню в котором он размещен */
 padding: 0;
 } 
в итоге получим это:
СпойлерПоказать
To do_2015_11_28.jpg
To do_2015_11_28.jpg (40.04 КБ) 7355 просмотров
Вложения
ToDo_app_install.zip
(3.22 КБ) 287 скачиваний
Последний раз редактировалось Vovix Пн ноя 30, 2015 1:42 am, всего редактировалось 1 раз.
За это сообщение автора Vovix поблагодарили (всего 3):
DiArt (Сб ноя 28, 2015 9:27 am) • nick7zmail (Сб ноя 28, 2015 10:49 am) • Varrcan (Сб ноя 28, 2015 8:59 pm)
Рейтинг: 3.49%
Мой -CONNECT-
Windows 7(PHP 7.2) + Raspberry Pi(освещение на 1-Wire) + MP751(управление) + ESP8266(сенсоры) + LAN(сенсоры)
-=: Если вам помогло моё сообщение, нажмите кнопку "Поблагодарить за сообщение автора: Vovix" (кнопка Спасибо) справа! :=-
Aleks130699
Сообщения: 103
Зарегистрирован: Чт ноя 19, 2015 5:33 pm
Благодарил (а): 7 раз
Поблагодарили: 8 раз

Re: Виджет to do (дела, задачи) в меню

Сообщение Aleks130699 » Сб ноя 28, 2015 11:33 am

Vovix писал(а): Использовать еще проще:
1) В меню создать пункт типа HTML с данными: %TodoList.StreamingCode1%
333.jpg
*единственно, для более корректного отображения нужно заменить на свой ID (тот который у вас у пункта меню с модулем)
менять нужно в TodoList.CSSandJS вот на строке с видом (в начале):

Код: Выделить всё

#item194 { /* здесь item194 - это номер ID пункта меню в котором он размещен */
 padding: 0;
 } 
в итоге получим это:
To do_2015_11_28.jpg
А как на сцену установить?
Ответить