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

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