Адаптировать скрипт для мобильных экранов
это скрипт - 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">