Skip to content

Commit

Permalink
improve action-button
Browse files Browse the repository at this point in the history
  • Loading branch information
@olton
olton committed Feb 27, 2025
1 parent 7727826 commit f55c8da
Show file tree
Hide file tree
Showing 14 changed files with 261 additions and 51 deletions.
25 changes: 14 additions & 11 deletions __html__/action-button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,23 @@
</nav>

<div class="d-flex flex-center h-100">
<div class="action-button" style="--num-icons: 8;">
<button class="" onclick="$(this).toggleClass('active')">
<div data-role="action-button">
<button class="main-action" onclick="$(this).toggleClass('active')">
<span class="icon"><span class="mif-git"></span></span>
</button>
<ul class="actions">
<li style="--i: 0;"><a href="#"><span class="mif-git-branch"></span></a></li>
<li style="--i: 1;"><a href="#"><span class="mif-git-clone"></span></a></li>
<li style="--i: 2"><a href="#"><span class="mif-git-commit"></span></a></li>
<li style="--i: 3;"><a href="#"><span class="mif-git-compare"></span></a></li>
<li style="--i: 4;"><a href="#"><span class="mif-git-diff"></span></a></li>
<li style="--i: 5;"><a href="#"><span class="mif-git-draft"></span></a></li>
<li style="--i: 6;"><a href="#"><span class="mif-git-fork"></span></a></li>
<li style="--i: 7;"><a href="#"><span class="mif-git-pull"></span></a></li>
<li style="--i: 8;"><a href="#"><span class="mif-git-push"></span></a></li>
<li><a href="#"><span class="mif-git-branch"></span></a></li>
<li><a href="#"><span class="mif-git-clone"></span></a></li>
<li><a href="#"><span class="mif-git-commit"></span></a></li>
<li><a href="#"><span class="mif-git-compare"></span></a></li>
<li><a href="#"><span class="mif-git-diff"></span></a></li>
<li><a href="#"><span class="mif-git-draft"></span></a></li>
<li><a href="#"><span class="mif-git-fork"></span></a></li>
<li><a href="#"><span class="mif-git-pull"></span></a></li>
<li><a href="#"><span class="mif-git-push"></span></a></li>
<li><a href="#"><span class="mif-git-pull-add"></span></a></li>
<li><a href="#"><span class="mif-git-pull-closed"></span></a></li>
<li><a href="#"><span class="mif-git-rebase"></span></a></li>
</ul>
</div>
</div>
Expand Down
7 changes: 4 additions & 3 deletions lib/metro.all.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46479,7 +46479,8 @@ button.light.outline,
--action-button-color: #f3fcff;
}
.action-button {
--num-icons: 0;
--num-actions: 0;
--action-shift: 60px;
padding: 0;
margin: 0;
width: 56px;
Expand Down Expand Up @@ -46575,8 +46576,8 @@ button.light.outline,
background: inherit;
}
.action-button button.active + .actions li {
--angle: calc(360deg / var(--num-icons) * var(--i));
transform: translate(-50%, -50%) rotate(var(--angle)) translate(60px) rotate(calc(-1 * var(--angle))) scale(1);
--angle: calc(360deg / var(--num-actions) * var(--action-index));
transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--action-shift)) rotate(calc(-1 * var(--angle))) scale(1);
}

/* source/components/button/button.less */
Expand Down
4 changes: 2 additions & 2 deletions lib/metro.all.css.map
View file

Large diffs are not rendered by default.

81 changes: 74 additions & 7 deletions lib/metro.all.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝

* Metro UI v5.1.0 Components Library (https://metroui.org.ua)
* Build: 25.02.2025, 20:34:17
* Build: 27.02.2025, 21:37:51
* Copyright 2012-2025 by Serhii Pimenov
* Licensed under MIT
*/
Expand Down Expand Up @@ -2179,8 +2179,8 @@
}
var matches2 = Element.prototype.matches;
var $ = (selector, context) => new $.init(selector, context);
$.version = "1.2.2";
$.build_time = "16.02.2025, 06:01:24";
$.version = "1.3.0";
$.build_time = "27.02.2025, 21:49:24";
$.info = () => console.info(`%c Dom %c v${$.version} %c ${$.build_time} `, "color: white; font-weight: bold; background: #fd6a02", "color: white; background: darkgreen", "color: white; background: #0080fe;");
$.fn = $.prototype = Object.create(Array.prototype);
$.prototype.constructor = $;
Expand Down Expand Up @@ -3603,6 +3603,16 @@
setStyleProp(el, key, val);
}
});
},
cssVar: function(name2, val) {
if (not2(name2)) return this;
if (not2(val)) {
return getComputedStyle(this[0]).getPropertyValue("--" + name2);
} else {
return this.each(function() {
this.style.setProperty("--" + name2, val);
});
}
}
});
$.fn.extend({
Expand Down Expand Up @@ -9058,7 +9068,7 @@
(function($3) {
"use strict";
globalThis["__version__"] = "5.1.0";
globalThis["__build_time__"] = "25.02.2025, 20:34:17";
globalThis["__build_time__"] = "27.02.2025, 21:37:51";
const meta_init = $3.meta("metro:init").attr("content");
const meta_locale = $3.meta("metro:locale").attr("content");
const meta_week_start = $3.meta("metro:week_start").attr("content");
Expand Down Expand Up @@ -9324,7 +9334,7 @@
const normalizeComponentName = (name2) => typeof name2 !== "string" ? void 0 : name2.replace(/-/g, "").toLowerCase();
const Metro2 = {
version: "5.1.0",
build_time: "25.02.2025, 20:34:17",
build_time: "27.02.2025, 21:37:51",
buildNumber: 0,
isTouchable: isTouch3,
fullScreenEnabled: document.fullscreenEnabled,
Expand Down Expand Up @@ -11491,6 +11501,63 @@
});
})(Metro, Dom);

// source/components/action-button/action-button.js
(function(Metro2, $3) {
"use strict";
let ActionButtonDefaultConfig = {
onClick: Metro2.noop,
onActionClick: Metro2.noop,
onActionButtonCreate: Metro2.noop
};
Metro2.actionButtonSetup = function(options) {
ActionButtonDefaultConfig = $3.extend({}, ActionButtonDefaultConfig, options);
};
if (typeof window["metroActionButtonSetup"] !== void 0) {
Metro2.actionButtonSetup(window["metroActionButtonSetup"]);
}
Metro2.Component("action-button", {
init: function(options, elem) {
this._super(elem, options, ActionButtonDefaultConfig, {
// define instance vars here
});
return this;
},
_create: function() {
const that = this, element2 = this.element, o2 = this.options;
this._createStructure();
this._createEvents();
this._fireEvent("action-button-create");
},
_createStructure: function() {
const that = this, element2 = this.element, o2 = this.options;
const actions = element2.find(".actions li, .actions button");
element2.addClass("action-button");
element2.cssVar("num-actions", actions.length);
if (actions.length > 8) {
element2.cssVar("action-shift", 60 + (actions.length - 8) * 6 + "px");
}
actions.each(function(index) {
$3(this).cssVar("action-index", index).addClass("sub-action");
});
element2.children("button").addClass("main-action");
},
_createEvents: function() {
const that = this, element2 = this.element, o2 = this.options;
element2.on(Metro2.events.click, ".actions li, .actions button", function() {
that._fireEvent("action-click", { action: this });
});
element2.on(Metro2.events.click, ".action-button", function() {
that._fireEvent("click");
});
},
changeAttribute: function(attr, newValue) {
},
destroy: function() {
this.element.remove();
}
});
})(Metro, Dom);

// source/components/dialog/dialog.js
(function(Metro2, $3) {
"use strict";
Expand Down Expand Up @@ -38451,8 +38518,8 @@
@olton/dom/dist/dom.js:
(*!
* DOM - Work with HTML elements (@olton/dom, https://metroui.org.ua)
* Version: 1.2.2
* Build date: 16.02.2025, 06:01:24
* Version: 1.3.0
* Build date: 27.02.2025, 21:49:24
* Copyright 2012-2025 by Serhii Pimenov
* Licensed under MIT
*)
Expand Down
8 changes: 4 additions & 4 deletions lib/metro.all.js.map
View file

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions lib/metro.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46479,7 +46479,8 @@ button.light.outline,
--action-button-color: #f3fcff;
}
.action-button {
--num-icons: 0;
--num-actions: 0;
--action-shift: 60px;
padding: 0;
margin: 0;
width: 56px;
Expand Down Expand Up @@ -46575,8 +46576,8 @@ button.light.outline,
background: inherit;
}
.action-button button.active + .actions li {
--angle: calc(360deg / var(--num-icons) * var(--i));
transform: translate(-50%, -50%) rotate(var(--angle)) translate(60px) rotate(calc(-1 * var(--angle))) scale(1);
--angle: calc(360deg / var(--num-actions) * var(--action-index));
transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--action-shift)) rotate(calc(-1 * var(--angle))) scale(1);
}

/* source/components/button/button.less */
Expand Down
4 changes: 2 additions & 2 deletions lib/metro.css.map
View file

Large diffs are not rendered by default.

81 changes: 74 additions & 7 deletions lib/metro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝

* Metro UI v5.1.0 Components Library (https://metroui.org.ua)
* Build: 25.02.2025, 20:34:17
* Build: 27.02.2025, 21:37:51
* Copyright 2012-2025 by Serhii Pimenov
* Licensed under MIT
*/
Expand Down Expand Up @@ -2179,8 +2179,8 @@
}
var matches2 = Element.prototype.matches;
var $ = (selector, context) => new $.init(selector, context);
$.version = "1.2.2";
$.build_time = "16.02.2025, 06:01:24";
$.version = "1.3.0";
$.build_time = "27.02.2025, 21:49:24";
$.info = () => console.info(`%c Dom %c v${$.version} %c ${$.build_time} `, "color: white; font-weight: bold; background: #fd6a02", "color: white; background: darkgreen", "color: white; background: #0080fe;");
$.fn = $.prototype = Object.create(Array.prototype);
$.prototype.constructor = $;
Expand Down Expand Up @@ -3603,6 +3603,16 @@
setStyleProp(el, key, val);
}
});
},
cssVar: function(name2, val) {
if (not2(name2)) return this;
if (not2(val)) {
return getComputedStyle(this[0]).getPropertyValue("--" + name2);
} else {
return this.each(function() {
this.style.setProperty("--" + name2, val);
});
}
}
});
$.fn.extend({
Expand Down Expand Up @@ -9058,7 +9068,7 @@
(function($3) {
"use strict";
globalThis["__version__"] = "5.1.0";
globalThis["__build_time__"] = "25.02.2025, 20:34:17";
globalThis["__build_time__"] = "27.02.2025, 21:37:51";
const meta_init = $3.meta("metro:init").attr("content");
const meta_locale = $3.meta("metro:locale").attr("content");
const meta_week_start = $3.meta("metro:week_start").attr("content");
Expand Down Expand Up @@ -9324,7 +9334,7 @@
const normalizeComponentName = (name2) => typeof name2 !== "string" ? void 0 : name2.replace(/-/g, "").toLowerCase();
const Metro2 = {
version: "5.1.0",
build_time: "25.02.2025, 20:34:17",
build_time: "27.02.2025, 21:37:51",
buildNumber: 0,
isTouchable: isTouch3,
fullScreenEnabled: document.fullscreenEnabled,
Expand Down Expand Up @@ -11491,6 +11501,63 @@
});
})(Metro, Dom);

// source/components/action-button/action-button.js
(function(Metro2, $3) {
"use strict";
let ActionButtonDefaultConfig = {
onClick: Metro2.noop,
onActionClick: Metro2.noop,
onActionButtonCreate: Metro2.noop
};
Metro2.actionButtonSetup = function(options) {
ActionButtonDefaultConfig = $3.extend({}, ActionButtonDefaultConfig, options);
};
if (typeof window["metroActionButtonSetup"] !== void 0) {
Metro2.actionButtonSetup(window["metroActionButtonSetup"]);
}
Metro2.Component("action-button", {
init: function(options, elem) {
this._super(elem, options, ActionButtonDefaultConfig, {
// define instance vars here
});
return this;
},
_create: function() {
const that = this, element2 = this.element, o2 = this.options;
this._createStructure();
this._createEvents();
this._fireEvent("action-button-create");
},
_createStructure: function() {
const that = this, element2 = this.element, o2 = this.options;
const actions = element2.find(".actions li, .actions button");
element2.addClass("action-button");
element2.cssVar("num-actions", actions.length);
if (actions.length > 8) {
element2.cssVar("action-shift", 60 + (actions.length - 8) * 6 + "px");
}
actions.each(function(index) {
$3(this).cssVar("action-index", index).addClass("sub-action");
});
element2.children("button").addClass("main-action");
},
_createEvents: function() {
const that = this, element2 = this.element, o2 = this.options;
element2.on(Metro2.events.click, ".actions li, .actions button", function() {
that._fireEvent("action-click", { action: this });
});
element2.on(Metro2.events.click, ".action-button", function() {
that._fireEvent("click");
});
},
changeAttribute: function(attr, newValue) {
},
destroy: function() {
this.element.remove();
}
});
})(Metro, Dom);

// source/components/dialog/dialog.js
(function(Metro2, $3) {
"use strict";
Expand Down Expand Up @@ -38451,8 +38518,8 @@
@olton/dom/dist/dom.js:
(*!
* DOM - Work with HTML elements (@olton/dom, https://metroui.org.ua)
* Version: 1.2.2
* Build date: 16.02.2025, 06:01:24
* Version: 1.3.0
* Build date: 27.02.2025, 21:49:24
* Copyright 2012-2025 by Serhii Pimenov
* Licensed under MIT
*)
Expand Down
8 changes: 4 additions & 4 deletions lib/metro.js.map
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
},
"dependencies": {
"@olton/datetime": "^3.2.1",
"@olton/dom": "^1.2.2",
"@olton/dom": "^1.3.0",
"@olton/farbe": "^1.0.4",
"@olton/guardian": "^0.7.1",
"@olton/hooks": "^0.12.6",
Expand Down
Loading

0 comments on commit f55c8da

Please sign in to comment.