200.grМеню.js 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. function grМеню(события, подсказки, реплики)
  2. {
  3. this.создать = function()
  4. {
  5. события.подписать(this);
  6. this.установитьМеню();
  7. this.улавливатьВыбор();
  8. };
  9. this.обработатьСобытие = function(событие)
  10. {
  11. let мышь = "мышь/нажатие/";
  12. let сами = "меню/";
  13. if (событие.startsWith(мышь))
  14. {
  15. let значения = событие.substring(мышь.length).split("/");
  16. let элемент = значения[2];
  17. let имя = подсказки.подсказкаДляЭлемента(элемент);
  18. if (имя && имя in реплики.задано)
  19. {
  20. this.отобразитьМеню(имя);
  21. }
  22. }
  23. else if (событие.startsWith(сами))
  24. {
  25. UIkit.modal("#меню").hide();
  26. }
  27. };
  28. this.отобразитьМеню = function(имя)
  29. {
  30. this.активнаяПодсказка = имя;
  31. let подсказка = подсказки.задано[имя];
  32. document.getElementById("меню-заголовок").innerHTML = подсказка.текст;
  33. UIkit.modal("#меню").show();
  34. };
  35. this.улавливатьВыбор = function()
  36. {
  37. var тут = this;
  38. let глаз = document.getElementById("меню-кнопка-глаз");
  39. глаз.addEventListener(
  40. "click",
  41. function() {
  42. события.уведомить(`меню/глаз/${тут.активнаяПодсказка}`);
  43. }
  44. );
  45. let рука = document.getElementById("меню-кнопка-рука");
  46. рука.addEventListener(
  47. "click",
  48. function() {
  49. события.уведомить(`меню/рука/${тут.активнаяПодсказка}`);
  50. }
  51. );
  52. let рот = document.getElementById("меню-кнопка-рот");
  53. рот.addEventListener(
  54. "click",
  55. function() {
  56. события.уведомить(`меню/рот/${тут.активнаяПодсказка}`);
  57. }
  58. );
  59. let нога = document.getElementById("меню-кнопка-нога");
  60. нога.addEventListener(
  61. "click",
  62. function() {
  63. события.уведомить(`меню/нога/${тут.активнаяПодсказка}`);
  64. }
  65. );
  66. };
  67. this.установитьМеню = function()
  68. {
  69. let html = `
  70. <div id="меню" uk-modal>
  71. <div class="uk-modal-dialog uk-modal-body">
  72. <button class="uk-modal-close-default" type="button" uk-close></button>
  73. <h2 id="меню-заголовок" class="uk-modal-title">Заголовок</h2>
  74. <div class="uk-child-width-1-4 uk-text-center" uk-grid>
  75. <div>
  76. <div id="меню-кнопка-глаз" class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">👁️</div>
  77. </div>
  78. <div>
  79. <div id="меню-кнопка-рука" class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">🤚</div>
  80. </div>
  81. <div>
  82. <div id="меню-кнопка-рот" class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">🗣</div>
  83. </div>
  84. <div>
  85. <div id="меню-кнопка-нога" class="uk-card uk-card-small uk-card-hover uk-card-default uk-card-body">🥾</div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. `;
  91. document.body.insertAdjacentHTML("beforeend", html);
  92. };
  93. // Конструктор.
  94. this.создать();
  95. };