Пользовательский интерфейс Маджонга | Mahjong user interface
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

176 lines
4.0KB

  1. // // // //
  2. ПлавноСкрытьПодложку = мир =>
  3. {
  4. мир.окна.подложка.плавно.скрыть();
  5. };
  6. // // // //
  7. ПлавноПоказатьПодложку = мир =>
  8. {
  9. мир.окна.подложка.плавно.отобразить();
  10. };
  11. // // // //
  12. СоздатьПодложку = мир =>
  13. {
  14. var окно = document.createElement("div");
  15. окно.id = "окно-подложка";
  16. document.body.appendChild(окно);
  17. окно.style = `
  18. position: fixed;
  19. left: 0;
  20. top: 0;
  21. right: 0;
  22. bottom: 0;
  23. background-color: white;
  24. opacity: 0.5;
  25. display: none;
  26. `;
  27. мир.окна.подложка = {
  28. "указатель": "окно-подложка",
  29. "элемент": окно,
  30. "плавно": new ПлавноОтобразитьСкрыть(окно, {
  31. "прозрачность": 0.5,
  32. }),
  33. };
  34. };
  35. // // // //
  36. СоздатьКнопкуРаскладки = мир =>
  37. {
  38. var кнопка = document.createElement("div");
  39. кнопка.innerHTML = `
  40. <a id="показать-раскладки" uk-icon="icon: thumbnails; ratio: 2"></a>
  41. `;
  42. кнопка.style = `
  43. position: fixed;
  44. right: 0;
  45. bottom: 0;
  46. margin: 0.5em;
  47. `;
  48. мир.окна.управление.элемент.appendChild(кнопка);
  49. $(`#показать-раскладки`).click(function() {
  50. мир.уведомить("кнопка показать раскладки");
  51. });
  52. };
  53. // // // //
  54. СообщитьТекущееЗначениеМасштаба = мир =>
  55. {
  56. var масштаб = мир.масштаб * 100;
  57. var сообщение = `🔍 ${масштаб}%`;
  58. UIkit.notification({
  59. message: сообщение,
  60. timeout: 500
  61. });
  62. };
  63. // // // //
  64. УменьшитьМасштаб = мир =>
  65. {
  66. мир.масштаб -= 0.5;
  67. if (мир.масштаб < 1)
  68. {
  69. мир.масштаб = 1;
  70. }
  71. мир.уведомить("изменили масштаб");
  72. };
  73. // // // //
  74. УвеличитьМасштаб = мир =>
  75. {
  76. мир.масштаб += 0.5;
  77. мир.уведомить("изменили масштаб");
  78. };
  79. // // // //
  80. СоздатьЭлементыУправленияМасштабом = мир =>
  81. {
  82. var элементы = document.createElement("div");
  83. элементы.innerHTML = `
  84. <ul class="uk-iconnav uk-iconnav-vertical">
  85. <li><a id="увеличить-масштаб" uk-icon="icon: plus; ratio: 2"></a></li>
  86. <li><a id="уменьшить-масштаб" uk-icon="icon: minus; ratio: 2"></a></li>
  87. </ul>
  88. `;
  89. элементы.style = `
  90. position: fixed;
  91. right: 0;
  92. top: 50%;
  93. transform: translateX(-50%) translateY(-50%);
  94. `;
  95. мир.окна.управление.элемент.appendChild(элементы);
  96. $(`#увеличить-масштаб`).click(function() {
  97. мир.уведомить("кнопка увеличения масштаба");
  98. });
  99. $(`#уменьшить-масштаб`).click(function() {
  100. мир.уведомить("кнопка уменьшения масштаба");
  101. });
  102. };
  103. // // // //
  104. ПлавноПоказатьОкноУправления = мир =>
  105. {
  106. мир.окна.управление.плавно.отобразить();
  107. };
  108. // // // //
  109. ПлавноСкрытьОкноУправления = мир =>
  110. {
  111. мир.окна.управление.плавно.скрыть();
  112. }
  113. // // // //
  114. СоздатьОкноУправления = мир =>
  115. {
  116. var окно = document.createElement("div");
  117. окно.id = "окно-управления";
  118. document.body.appendChild(окно);
  119. окно.style = `
  120. position: absolute;
  121. left: 0;
  122. top: 0;
  123. right: 0;
  124. bottom: 0;
  125. `;
  126. окно.style.display = "none";
  127. мир.окна.управление = {
  128. "указатель": окно.id,
  129. "элемент": окно,
  130. "плавно": new ПлавноОтобразитьСкрыть(окно),
  131. };
  132. };