Пользовательский интерфейс Маджонга | 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.

201 lines
4.5KB

  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. pointer-events: none;
  27. `;
  28. мир.окна.подложка = {
  29. "указатель": "окно-подложка",
  30. "элемент": окно,
  31. "плавно": new ПлавноОтобразитьСкрыть(окно, {
  32. "прозрачность": 0.5,
  33. }),
  34. };
  35. };
  36. // // // //
  37. СоздатьКнопкуТем = мир =>
  38. {
  39. var кнопка = document.createElement("div");
  40. кнопка.innerHTML = `
  41. <a id="показать-темы" uk-icon="icon: image; ratio: 2"></a>
  42. `;
  43. кнопка.style = `
  44. position: fixed;
  45. right: 0;
  46. top: 0;
  47. margin: 0.5em;
  48. `;
  49. мир.окна.управление.элемент.appendChild(кнопка);
  50. $(`#показать-темы`).click(function() {
  51. мир.уведомить("кнопка показать темы");
  52. });
  53. };
  54. // // // //
  55. СоздатьКнопкуРаскладки = мир =>
  56. {
  57. var кнопка = document.createElement("div");
  58. кнопка.innerHTML = `
  59. <a id="показать-раскладки" uk-icon="icon: thumbnails; ratio: 2"></a>
  60. `;
  61. кнопка.style = `
  62. position: fixed;
  63. right: 0;
  64. bottom: 0;
  65. margin: 0.5em;
  66. `;
  67. мир.окна.управление.элемент.appendChild(кнопка);
  68. $(`#показать-раскладки`).click(function() {
  69. мир.уведомить("кнопка показать раскладки");
  70. });
  71. };
  72. // // // //
  73. СообщитьТекущееЗначениеМасштаба = мир =>
  74. {
  75. var масштаб = мир.масштаб * 100;
  76. var сообщение = `🔍 ${масштаб}%`;
  77. UIkit.notification({
  78. message: сообщение,
  79. timeout: 500
  80. });
  81. };
  82. // // // //
  83. УменьшитьМасштаб = мир =>
  84. {
  85. мир.масштаб -= 0.5;
  86. if (мир.масштаб < 1)
  87. {
  88. мир.масштаб = 1;
  89. }
  90. мир.уведомить("изменили масштаб");
  91. };
  92. // // // //
  93. УвеличитьМасштаб = мир =>
  94. {
  95. мир.масштаб += 0.5;
  96. мир.уведомить("изменили масштаб");
  97. };
  98. // // // //
  99. СоздатьЭлементыУправленияМасштабом = мир =>
  100. {
  101. var элементы = document.createElement("div");
  102. элементы.innerHTML = `
  103. <ul class="uk-iconnav uk-iconnav-vertical">
  104. <li><a id="увеличить-масштаб" uk-icon="icon: plus; ratio: 2"></a></li>
  105. <li><a id="уменьшить-масштаб" uk-icon="icon: minus; ratio: 2"></a></li>
  106. </ul>
  107. `;
  108. элементы.style = `
  109. position: fixed;
  110. right: 0;
  111. top: 50%;
  112. transform: translateX(-50%) translateY(-50%);
  113. `;
  114. мир.окна.управление.элемент.appendChild(элементы);
  115. $(`#увеличить-масштаб`).click(function() {
  116. мир.уведомить("кнопка увеличения масштаба");
  117. });
  118. $(`#уменьшить-масштаб`).click(function() {
  119. мир.уведомить("кнопка уменьшения масштаба");
  120. });
  121. };
  122. // // // //
  123. ПлавноПоказатьОкноУправления = мир =>
  124. {
  125. мир.окна.управление.плавно.отобразить();
  126. };
  127. // // // //
  128. ПлавноСкрытьОкноУправления = мир =>
  129. {
  130. мир.окна.управление.плавно.скрыть();
  131. }
  132. // // // //
  133. СоздатьОкноУправления = мир =>
  134. {
  135. var окно = document.createElement("div");
  136. окно.id = "окно-управления";
  137. document.body.appendChild(окно);
  138. окно.style = `
  139. position: absolute;
  140. left: 0;
  141. top: 0;
  142. right: 0;
  143. bottom: 0;
  144. `;
  145. //окно.style.display = "none";
  146. мир.окна.управление = {
  147. "указатель": окно.id,
  148. "элемент": окно,
  149. "плавно": new ПлавноОтобразитьСкрыть(окно),
  150. };
  151. };