<dom-module id=“gs-attire”>
<script> Polymer({ is: 'gs-attire', properties: { attireUrl: Object, observer: '_attireChanged' }, attached: function () { this._setAttire(); }, _attireChanged: function () { this._setAttire(); }, _setAttire: function () { $.getJSON(this.attireUrl, function (attire) { GobstonesBoard && GobstonesBoard.setDefaultAttire(attire); attire.rules.forEach((rule) => $.get(rule.image)); }); } }); </script>
</dom-module>
<dom-module id=“gs-attire-toggle-button”>
<style> :host-context(.mu-kids-states) .button { position: absolute; cursor: pointer; top: -2px; right: 0; -ms-transform-origin: right center; -webkit-transform-origin: right center; transform-origin: right center; } :host-context(.boards-container) .button { cursor: pointer; margin-top: -8px; } </style> <template> <template is="dom-if" if="{{shouldDisplay}}"> <div class="button" on-click="_onButtonClick"> <template is="dom-if" if="{{isEnabled}}"> <img src="./attires_enabled.svg"> </template> <template is="dom-if" if="{{!isEnabled}}"> <img src="./attires_disabled.svg"> </template> </div> </template> </template> <script> Polymer({ is: 'gs-attire-toggle-button', properties: { isEnabled: { type: Boolean, value: true } }, ready: function () { this._updateVisibility(); document.addEventListener('board-attire-changed', this._updateVisibility.bind(this)); this._relocateButton(); }, _updateVisibility: function () { this.boards = $(this).parents(".mu-kids-states, .boards-container").find("gs-board"); this.shouldDisplay = this.boards.toArray().some(board => board.attire); }, _onButtonClick: function () { this.isEnabled = !this.isEnabled; this.boards.each((__, board) => { if (board.attire) board.set("attire.enabled", this.isEnabled); board.updateStyles(); }); }, _getEditor: function () { return $("mu-gobstones-custom-editor")[0]; }, _relocateButton: function () { const $container = $('.mu-kids-gbs-board-initial'); if(!$container.length || this._getEditor().interactiveMode) return; const $header = $('.mu-initial-state-header'); const headerWidth = $header.width() || $container.width(); const $attireToggle = $container.find('.button.gs-attire-toggle-button'); if(!$attireToggle.length) return setTimeout(() => this._relocateButton()); const margin = 4; // Leave a margin between text and image const maxSize = 65.75; // Original width mumuki.resize(() => { $attireToggle.css('transform', 'scale(1)'); let buttonSize = (($container.width() - headerWidth) / 2) - margin; let scaleX = Math.min(buttonSize, maxSize) / $attireToggle.width(); $attireToggle.css('transform', `scale(${scaleX})`); }); }, }); </script>
</dom-module>