Skip to content

Commit

Permalink
number settings in progress bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@farhan-shafi
farhan-shafi committed Mar 11, 2024
1 parent e064859 commit 5cc7312
Show file tree
Hide file tree
Showing 15 changed files with 244 additions and 61 deletions.
2 changes: 1 addition & 1 deletion dist/blocks.build.asset.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '743eceba5750f94e7b64');
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '1b751209a223fdb9d3a8');
101 changes: 86 additions & 15 deletions dist/blocks.build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73593,7 +73593,10 @@ function Circle(props) {
percent = props.percent,
labelColor = props.labelColor,
alignment = props.alignment,
size = props.size;
size = props.size,
showNumber = props.showNumber,
numberPrefix = props.numberPrefix,
numberSuffix = props.numberSuffix;
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
setTimeout(function () {
setIndicator(percent);
Expand Down Expand Up @@ -73641,13 +73644,19 @@ function Circle(props) {
style: {
strokeDasharray: "".concat(strokeArcLength, "px, ").concat(circlePathLength, "px")
}
})), /*#__PURE__*/React.createElement("div", {
})), showNumber && /*#__PURE__*/React.createElement("div", {
className: "ub_progress-bar-label",
style: {
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit"
}
}, percent, "%"));
}, /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-prefix"
}, numberPrefix), /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-value"
}, percent), /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-suffix"
}, numberSuffix)));
}

/***/ }),
Expand Down Expand Up @@ -73687,7 +73696,10 @@ function HalfCircle(props) {
percent = props.percent,
labelColor = props.labelColor,
alignment = props.alignment,
size = props.size;
size = props.size,
showNumber = props.showNumber,
numberPrefix = props.numberPrefix,
numberSuffix = props.numberSuffix;
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
setTimeout(function () {
setIndicator(percent);
Expand Down Expand Up @@ -73735,13 +73747,19 @@ function HalfCircle(props) {
style: {
strokeDasharray: "".concat(strokeArcLength, "px, ").concat(circlePathLength, "px")
}
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
})), showNumber && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "ub_progress-bar-label",
style: {
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit"
}
}, percent, "%"));
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "ub-progress-number-prefix"
}, numberPrefix), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "ub-progress-number-value"
}, percent), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "ub-progress-number-suffix"
}, numberSuffix)));
}

/***/ }),
Expand Down Expand Up @@ -73814,7 +73832,10 @@ function Line(props) {
detailAlign = props.detailAlign,
detail = props.detail,
setAttributes = props.setAttributes,
alignment = props.alignment;
alignment = props.alignment,
showNumber = props.showNumber,
numberPrefix = props.numberPrefix,
numberSuffix = props.numberSuffix;
(0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(function () {
setTimeout(function () {
setIndicator(percent);
Expand Down Expand Up @@ -73851,14 +73872,20 @@ function Line(props) {
});
},
keepPlaceholderOnFocus: true
})), percentagePosition === "top" && /*#__PURE__*/React.createElement("div", {
})), showNumber && percentagePosition === "top" && /*#__PURE__*/React.createElement("div", {
className: "ub_progress-bar-label ub_progress-bar-label-top",
style: {
width: "".concat(percent, "%"),
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit"
}
}, percent, "%")), /*#__PURE__*/React.createElement("svg", {
}, /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-prefix"
}, numberPrefix), /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-value"
}, percent), /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-suffix"
}, numberSuffix))), /*#__PURE__*/React.createElement("svg", {
className: "ub_progress-bar-line",
viewBox: "0 0 100 ".concat(barThickness),
preserveAspectRatio: "none"
Expand All @@ -73880,7 +73907,7 @@ function Line(props) {
height: "100%"
}, /*#__PURE__*/React.createElement("div", {
className: "ub_progress-bar-line-stripe"
})), percentagePosition === "inside" && /*#__PURE__*/React.createElement("foreignObject", {
})), showNumber && percentagePosition === "inside" && /*#__PURE__*/React.createElement("foreignObject", {
width: "100%",
height: "100%",
viewBox: "0 0 120 10",
Expand All @@ -73893,14 +73920,26 @@ function Line(props) {
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit"
}
}, /*#__PURE__*/React.createElement("p", null, percent, "%")))), percentagePosition === "bottom" && /*#__PURE__*/React.createElement("div", {
}, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-prefix"
}, numberPrefix), /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-value"
}, percent), /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-suffix"
}, numberSuffix))))), showNumber && percentagePosition === "bottom" && /*#__PURE__*/React.createElement("div", {
className: "ub_progress-bar-label",
style: {
width: "".concat(percent, "%"),
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit"
}
}, percent, "%"));
}, /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-prefix"
}, numberPrefix), /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-value"
}, percent), /*#__PURE__*/React.createElement("span", {
className: "ub-progress-number-suffix"
}, numberSuffix)));
}

/***/ }),
Expand Down Expand Up @@ -73971,6 +74010,9 @@ function ProgressBarMain(props) {
barBorderRadius = _props$attributes.barBorderRadius,
isStripe = _props$attributes.isStripe,
isCircleRounded = _props$attributes.isCircleRounded,
showNumber = _props$attributes.showNumber,
numberPrefix = _props$attributes.numberPrefix,
numberSuffix = _props$attributes.numberSuffix,
isSelected = props.isSelected,
setAttributes = props.setAttributes,
block = props.block,
Expand Down Expand Up @@ -74007,7 +74049,10 @@ function ProgressBarMain(props) {
detailAlign: detailAlign,
detail: detail,
setAttributes: setAttributes,
alignment: detailAlign
alignment: detailAlign,
showNumber: showNumber,
numberPrefix: numberPrefix,
numberSuffix: numberSuffix
};
var percentagePositionOptions = [{
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Top", "ultimate-blocks"),
Expand Down Expand Up @@ -74069,7 +74114,7 @@ function ProgressBarMain(props) {
})), isSelected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, {
group: "settings"
}, /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_9__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("General")
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("General", "ultimate-blocks")
}, /*#__PURE__*/React.createElement("br", null), !isStyleCircle && !isStyleHalfCircle && /*#__PURE__*/React.createElement(_components__WEBPACK_IMPORTED_MODULE_10__.CustomToggleGroupControl, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Percentage Position", "ultimate-blocks"),
attributeKey: "percentagePosition",
Expand All @@ -74094,6 +74139,32 @@ function ProgressBarMain(props) {
min: 0,
max: 100,
allowReset: true
})), /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_9__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Number Settings", "ultimate-blocks")
}, /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_9__.ToggleControl, {
checked: showNumber,
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Show Number", "ultimate-blocks"),
onChange: function onChange() {
return setAttributes({
showNumber: !showNumber
});
}
}), /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_9__.TextControl, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Number Prefix", "ultimate-blocks"),
value: numberPrefix,
onChange: function onChange(newValue) {
return setAttributes({
numberPrefix: newValue
});
}
}), /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_9__.TextControl, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Number Suffix", "ultimate-blocks"),
value: numberSuffix,
onChange: function onChange(newValue) {
return setAttributes({
numberSuffix: newValue
});
}
}))), /*#__PURE__*/React.createElement(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, {
group: "styles"
}, /*#__PURE__*/React.createElement(_wordpress_components__WEBPACK_IMPORTED_MODULE_9__.PanelBody, {
Expand Down Expand Up @@ -133573,7 +133644,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/tru
/***/ ((module) => {

"use strict";
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/progress-bar","title":"Progress Bar","category":"ultimateblocks","description":"Add Cirle/Line Progress bar with this blocks. Comes with options to change thickness, color.","keywords":["Progress Bar","Circle","Ultimate Blocks"],"attributes":{"blockID":{"type":"string","default":""},"percentage":{"type":"number","default":-1},"barType":{"type":"string","default":"linear"},"detail":{"type":"string","default":""},"detailAlign":{"type":"string","default":"center"},"barColor":{"type":"string","default":"#2DB7F5"},"barBackgroundColor":{"type":"string","default":"#d9d9d9"},"barThickness":{"type":"number","default":1},"circleSize":{"type":"number","default":150},"labelColor":{"type":"string","default":""},"percentagePosition":{"type":"string","default":"bottom"},"isStripe":{"type":"boolean","default":false},"barBorderRadius":{"type":"object","default":{}},"padding":{"type":"object","default":{}},"isCircleRounded":{"type":"boolean","default":true},"margin":{"type":"object","default":{}}},"supports":{}}');
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"ub/progress-bar","title":"Progress Bar","category":"ultimateblocks","description":"Add Cirle/Line Progress bar with this blocks. Comes with options to change thickness, color.","keywords":["Progress Bar","Circle","Ultimate Blocks"],"attributes":{"blockID":{"type":"string","default":""},"percentage":{"type":"number","default":-1},"barType":{"type":"string","default":"linear"},"detail":{"type":"string","default":""},"detailAlign":{"type":"string","default":"center"},"barColor":{"type":"string","default":"#2DB7F5"},"barBackgroundColor":{"type":"string","default":"#d9d9d9"},"barThickness":{"type":"number","default":1},"circleSize":{"type":"number","default":150},"showNumber":{"type":"boolean","default":true},"labelColor":{"type":"string","default":""},"numberPrefix":{"type":"string","default":""},"numberSuffix":{"type":"string","default":"%"},"percentagePosition":{"type":"string","default":"bottom"},"isStripe":{"type":"boolean","default":false},"barBorderRadius":{"type":"object","default":{}},"padding":{"type":"object","default":{}},"isCircleRounded":{"type":"boolean","default":true},"margin":{"type":"object","default":{}}},"supports":{}}');

/***/ }),

Expand Down
2 changes: 1 addition & 1 deletion dist/blocks.build.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/blocks.style.build.css
View file

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions dist/blocks/progress-bar/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,22 @@
"type": "number",
"default": 150
},
"showNumber": {
"type": "boolean",
"default": true
},
"labelColor": {
"type": "string",
"default": ""
},
"numberPrefix": {
"type": "string",
"default": ""
},
"numberSuffix": {
"type": "string",
"default": "%"
},
"percentagePosition": {
"type": "string",
"default": "bottom"
Expand Down
1 change: 1 addition & 0 deletions readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ That's it. You're done!

= 3.1.4 =

* NEW: Number settings (Show Number, Number Prefix, Number Suffix) in the progress bar block.
* IMPROVE: Change default counter, and label font size in the counter block.
* FIX: Counter bug when change animation.
* FIX: Image slider not showing properly in row block
Expand Down
27 changes: 17 additions & 10 deletions src/blocks/progress-bar/Circle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ export default function Circle(props) {
labelColor,
alignment,
size,
showNumber,
numberPrefix,
numberSuffix,
} = props;

useEffect(() => {
Expand Down Expand Up @@ -67,7 +70,7 @@ export default function Circle(props) {
},
["left", "right"].includes(alignment)
? { float: alignment }
: { margin: "auto" }
: { margin: "auto" },
)}
>
<svg
Expand Down Expand Up @@ -96,15 +99,19 @@ export default function Circle(props) {
}}
/>
</svg>
<div
className="ub_progress-bar-label"
style={{
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit",
}}
>
{percent}%
</div>
{showNumber && (
<div
className="ub_progress-bar-label"
style={{
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit",
}}
>
<span className="ub-progress-number-prefix">{numberPrefix}</span>
<span className="ub-progress-number-value">{percent}</span>
<span className="ub-progress-number-suffix">{numberSuffix}</span>
</div>
)}
</div>
);
}
27 changes: 17 additions & 10 deletions src/blocks/progress-bar/HalfCircle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export default function HalfCircle(props) {
labelColor,
alignment,
size,
showNumber,
numberPrefix,
numberSuffix,
} = props;

useEffect(() => {
Expand Down Expand Up @@ -44,7 +47,7 @@ export default function HalfCircle(props) {
},
["left", "right"].includes(alignment)
? { float: alignment }
: { margin: "auto" }
: { margin: "auto" },
)}
>
<svg
Expand Down Expand Up @@ -73,15 +76,19 @@ export default function HalfCircle(props) {
}}
/>
</svg>
<div
className="ub_progress-bar-label"
style={{
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit",
}}
>
{percent}%
</div>
{showNumber && (
<div
className="ub_progress-bar-label"
style={{
visibility: isActive ? "visible" : "hidden",
color: labelColor || "inherit",
}}
>
<span className="ub-progress-number-prefix">{numberPrefix}</span>
<span className="ub-progress-number-value">{percent}</span>
<span className="ub-progress-number-suffix">{numberSuffix}</span>
</div>
)}
</div>
);
}
Loading

0 comments on commit 5cc7312

Please sign in to comment.