Адаптировать скрипт для мобильных экранов

2 000 руб. за проект • наличный расчёт, безналичный расчёт, электронные деньги
30 января 2016, 23:40 • 2 отклика • 67 просмотров
Адаптировать скрипт для мобильных экранов
это скрипт - loader - инжектирует панель в страницу сайта.
сайт http://context2.com/
script http://context2.com/app/mainEmbedded.js
исходники на https://github.com/dj-raphael/Comments-for-Habr
На десктопах скрипт должен отрабатывать также как и сейчас, только доработать инициализацию и позиционирование.
На мобильных показывать уменьшенный вариант ярлыка. см скриншоты

. При нажатии на ярлык, создать невидимый iframe, инициировать его загрузку. инициировать css анимацию разворачивания белого прямоугольника из ярлыка. по окончании анимации разворачивать панель на весь экран, отключить скроллинг основного окна. изменение размера панели не нужно. сам ярлык скрыть, оставить только iframe развернутый на всё окно.
написать обработчик сообщения ожидающее собщения от iframe о том что надо закрыть панель.

вариант подключения
<script>
function initContext2() {
var options = {
language: "ru",
position: "top|bottom|middle",
margin-top: "13px",
margin-bottom: "13em",
content: "Comments",
mobile-position: "top|bottom|middle",
mobile-margin-top: "13pt",
mobile-margin-bottom: "13%",
mobile-content: "",
}
return options;
}
</script>
<script src="http://context2.com/App/mainEmbedded.js">

пример подключения на сторонний сайт http://hobbyostrov.ru/

Знания ангуляра желательны для дальнейшего сотрудничества по доработке панели
Файлы