diff --git a/assets/css/editing-helper.css b/assets/css/editing-helper.css index 98029d54a7465acc5915118ab403febec8c62ad3..72d0c8dc4744c0d4a065ece2a6797c2d36262dfb 100644 --- a/assets/css/editing-helper.css +++ b/assets/css/editing-helper.css @@ -1,2 +1,68 @@ -.editing-helper-block .help-wrapper{margin-bottom:8px}.editing-helper-block .toggle-help{background-color:#df000f;border:none;border-radius:5px;box-shadow:0 4px 6px rgba(#df000f,.4);color:#fff;cursor:pointer;font-size:14px;margin-bottom:15px;padding:6px 12px;pointer-events:all!important;transition:background-color .3s ease}.editing-helper-block .toggle-help:hover{background-color:#a0040e}.editing-helper-block .help-content{background-color:#e9ecef;border-radius:6px;box-shadow:0 4px 8px rgba(0,0,0,.1);max-height:0;overflow:hidden;padding:0 15px;transition:max-height .3s ease-in-out;visibility:hidden}.editing-helper-block .help-content p{color:#333;font-size:14px;margin:0} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3N0eWxlL2VkaXRpbmctaGVscGVyLnBjc3MuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNFLG9DQUNFLGlCQUNGLENBQ0EsbUNBQ0Usd0JBQXlCLENBR3pCLFdBQVksQ0FDWixpQkFBa0IsQ0FJbEIscUNBQXdDLENBUHhDLFVBQVcsQ0FLWCxjQUFlLENBRGYsY0FBZSxDQUtmLGtCQUFtQixDQVJuQixnQkFBaUIsQ0FPakIsNEJBQThCLENBRjlCLG9DQUlGLENBRUEseUNBQ0Usd0JBQ0YsQ0FFQSxvQ0FDRSx3QkFBeUIsQ0FDekIsaUJBQWtCLENBQ2xCLG1DQUF3QyxDQUV4QyxZQUFhLENBRGIsZUFBZ0IsQ0FFaEIsY0FBZSxDQUVmLHFDQUF1QyxDQUR2QyxpQkFFRixDQUVBLHNDQUdFLFVBQVcsQ0FEWCxjQUFlLENBRGYsUUFHRiIsImZpbGUiOiJlZGl0aW5nLWhlbHBlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZWRpdGluZy1oZWxwZXItYmxvY2sge1xuICAuaGVscC13cmFwcGVyIHtcbiAgICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gIH1cbiAgLnRvZ2dsZS1oZWxwIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGYwMDBmO1xuICAgIGNvbG9yOiAjZmZmO1xuICAgIHBhZGRpbmc6IDZweCAxMnB4O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTtcbiAgICBib3gtc2hhZG93OiAwIDRweCA2cHggcmdiYSgjZGYwMDBmLCAwLjQpO1xuICAgIHBvaW50ZXItZXZlbnRzOiBhbGwgIWltcG9ydGFudDtcbiAgICBtYXJnaW4tYm90dG9tOiAxNXB4O1xuICB9XG5cbiAgLnRvZ2dsZS1oZWxwOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjYTAwNDBlO1xuICB9XG5cbiAgLmhlbHAtY29udGVudCB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2U5ZWNlZjtcbiAgICBib3JkZXItcmFkaXVzOiA2cHg7XG4gICAgYm94LXNoYWRvdzogMCA0cHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIG1heC1oZWlnaHQ6IDA7XG4gICAgcGFkZGluZzogMCAxNXB4O1xuICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICB0cmFuc2l0aW9uOiBtYXgtaGVpZ2h0IDAuM3MgZWFzZS1pbi1vdXQ7XG4gIH1cblxuICAuaGVscC1jb250ZW50IHAge1xuICAgIG1hcmdpbjogMDtcbiAgICBmb250LXNpemU6IDE0cHg7XG4gICAgY29sb3I6ICMzMzM7XG4gIH1cbn1cbiJdfQ== */ \ No newline at end of file + + .editing-helper-block .help-wrapper { + position: relative; + margin-bottom: 8px; + width: -moz-fit-content; + width: fit-content; + font-size: 14px; + } +.editing-helper-block .toggle-help { + background-color: #df000f; + border: none; + cursor: pointer; + margin-bottom: 15px; + border-radius: 50%; + background-image: url(../../assets/icons/question-icon.svg); + width: 32px; + height: 32px; + background-repeat: no-repeat; + background-position: center; + } +.editing-helper-block .toggle-help:hover { + background-color: #a0040e; + } +.editing-helper-block .help-content { + position: absolute; + top: 0; + left: calc(100% + 15px); + width: 320px; + z-index: 5; + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + padding: 24px; + display: none; + color: #002856; + } +.editing-helper-block .help-content h2 { + font-size: 18px; + color: #002856; + } +.editing-helper-block .help-content span { + color: rgba(0,40,86,0.50196); + } +.editing-helper-block .help-content.active { + display: block; + } +.editing-helper-block .help-content p { + margin: 0; + } +.editing-helper-block .top-content { + display: flex; + justify-content: space-between; + } +.editing-helper-block .helper-close-btn { + background-image: url(../../assets/icons/close-btn.svg); + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + } +[dir="rtl"] .editing-helper-block .help-content { + right: calc(100% + 15px); + left: auto; +} + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3N0eWxlL2VkaXRpbmctaGVscGVyLnBjc3MuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7RUFDRTtJQUNFLGtCQUFrQjtJQUNsQixrQkFBa0I7SUFDbEIsdUJBQWtCO0lBQWxCLGtCQUFrQjtJQUNsQixlQUFlO0VBQ2pCO0FBQ0E7SUFDRSx5QkFBeUI7SUFDekIsWUFBWTtJQUNaLGVBQWU7SUFDZixtQkFBbUI7SUFDbkIsa0JBQWtCO0lBQ2xCLDJEQUEyRDtJQUMzRCxXQUFXO0lBQ1gsWUFBWTtJQUNaLDRCQUE0QjtJQUM1QiwyQkFBMkI7RUFDN0I7QUFDQTtJQUNFLHlCQUF5QjtFQUMzQjtBQUVBO0lBQ0Usa0JBQWtCO0lBQ2xCLE1BQU07SUFDTix1QkFBdUI7SUFDdkIsWUFBWTtJQUNaLFVBQVU7SUFDVix1QkFBdUI7SUFDdkIsa0JBQWtCO0lBQ2xCLHdDQUF3QztJQUN4QyxnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLGFBQWE7SUFDYixjQUFjO0VBQ2hCO0FBRUE7SUFDRSxlQUFlO0lBQ2YsY0FBYztFQUNoQjtBQUNBO0lBQ0UsNEJBQWdCO0VBQ2xCO0FBQ0E7SUFDRSxjQUFjO0VBQ2hCO0FBRUE7SUFDRSxTQUFTO0VBQ1g7QUFDQTtJQUNFLGFBQWE7SUFDYiw4QkFBOEI7RUFDaEM7QUFDQTtJQUNFLHVEQUF1RDtJQUN2RCxXQUFXO0lBQ1gsWUFBWTtJQUNaLDRCQUE0QjtJQUM1QiwyQkFBMkI7SUFDM0IsZUFBZTtFQUNqQjtBQUVGO0VBQ0Usd0JBQXdCO0VBQ3hCLFVBQVc7QUFDYiIsImZpbGUiOiJlZGl0aW5nLWhlbHBlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZWRpdGluZy1oZWxwZXItYmxvY2sge1xuICAuaGVscC13cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgbWFyZ2luLWJvdHRvbTogOHB4O1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICBmb250LXNpemU6IDE0cHg7XG4gIH1cbiAgLnRvZ2dsZS1oZWxwIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGYwMDBmO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgbWFyZ2luLWJvdHRvbTogMTVweDtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKC4uLy4uL2Fzc2V0cy9pY29ucy9xdWVzdGlvbi1pY29uLnN2Zyk7XG4gICAgd2lkdGg6IDMycHg7XG4gICAgaGVpZ2h0OiAzMnB4O1xuICAgIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyO1xuICB9XG4gIC50b2dnbGUtaGVscDpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2EwMDQwZTtcbiAgfVxuXG4gIC5oZWxwLWNvbnRlbnQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogY2FsYygxMDAlICsgMTVweCk7XG4gICAgd2lkdGg6IDMyMHB4O1xuICAgIHotaW5kZXg6IDU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gICAgYm9yZGVyLXJhZGl1czogOHB4O1xuICAgIGJveC1zaGFkb3c6IDAgNHB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBwYWRkaW5nOiAyNHB4O1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgY29sb3I6ICMwMDI4NTY7XG4gIH1cblxuICAuaGVscC1jb250ZW50IGgyIHtcbiAgICBmb250LXNpemU6IDE4cHg7XG4gICAgY29sb3I6ICMwMDI4NTY7XG4gIH1cbiAgLmhlbHAtY29udGVudCBzcGFuIHtcbiAgICBjb2xvcjogIzAwMjg1NjgwO1xuICB9XG4gIC5oZWxwLWNvbnRlbnQuYWN0aXZlIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuXG4gIC5oZWxwLWNvbnRlbnQgcCB7XG4gICAgbWFyZ2luOiAwO1xuICB9XG4gIC50b3AtY29udGVudCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIH1cbiAgLmhlbHBlci1jbG9zZS1idG4ge1xuICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybCguLi8uLi9hc3NldHMvaWNvbnMvY2xvc2UtYnRuLnN2Zyk7XG4gICAgd2lkdGg6IDE0cHg7XG4gICAgaGVpZ2h0OiAxNHB4O1xuICAgIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxufVxuW2Rpcj1cInJ0bFwiXSAuZWRpdGluZy1oZWxwZXItYmxvY2sgLmhlbHAtY29udGVudCB7XG4gIHJpZ2h0OiBjYWxjKDEwMCUgKyAxNXB4KTtcbiAgbGVmdDogdW5zZXQ7XG59XG4iXX0= */ \ No newline at end of file diff --git a/assets/icons/close-btn.svg b/assets/icons/close-btn.svg new file mode 100644 index 0000000000000000000000000000000000000000..238cee07c03d7b339a3dc1bd601a8914807c0a40 --- /dev/null +++ b/assets/icons/close-btn.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M0.227806 0.227806C0.531547 -0.0759353 1.02401 -0.0759353 1.32775 0.227806L7 5.90006L12.6723 0.227806C12.976 -0.0759349 13.4685 -0.0759349 13.7722 0.227806C14.0759 0.531547 14.0759 1.02401 13.7722 1.32775L8.09994 7L13.7722 12.6723C14.0759 12.976 14.0759 13.4685 13.7722 13.7722C13.4685 14.0759 12.976 14.0759 12.6723 13.7722L7 8.09994L1.32775 13.7722C1.02401 14.0759 0.531547 14.0759 0.227806 13.7722C-0.0759353 13.4685 -0.0759353 12.976 0.227806 12.6723L5.90006 7L0.227806 1.32775C-0.0759349 1.02401 -0.0759349 0.531547 0.227806 0.227806Z" + fill="#000" /> +</svg> \ No newline at end of file diff --git a/assets/icons/question-icon.svg b/assets/icons/question-icon.svg new file mode 100644 index 0000000000000000000000000000000000000000..c5a381536811cdc6684b086577835504c890b306 --- /dev/null +++ b/assets/icons/question-icon.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="14" height="22" viewBox="0 0 14 22" fill="none"> + <path + d="M13.08 5.79104C13.08 6.74322 12.8726 7.62538 12.4716 8.40952C12.0844 9.16566 11.4483 9.96381 10.6048 10.776C9.5815 11.7701 9.2358 12.2882 9.13901 12.5543C9.04221 12.8203 8.90393 13.3944 8.87628 14.5427C8.87628 14.8227 8.6412 15.0467 8.36464 15.0467H5.66818C5.37779 15.0467 5.15655 14.8087 5.15655 14.5286C5.15655 13.9125 5.19803 13.3104 5.29483 12.7083C5.37779 12.2042 5.48842 11.7841 5.65435 11.4481C5.91709 10.874 6.35958 10.2859 7.0095 9.64175C7.12012 9.52973 7.23074 9.43171 7.3552 9.31969C8.07425 8.66157 8.6412 8.04546 9.01455 7.48535C9.36025 6.98126 9.52619 6.44916 9.52619 5.88906C9.52619 5.20293 9.30494 4.65683 8.87628 4.20875C8.44761 3.76067 7.82535 3.55063 7.02332 3.55063H6.98184C6.19365 3.55063 5.59904 3.76067 5.19803 4.19475C4.74171 4.68484 4.40983 5.18893 4.20241 5.70703C4.09179 5.97308 3.8014 6.0991 3.53867 6.00108C3.53867 6.00108 3.53867 6.00108 3.52484 6.00108L1.2294 4.9929C0.980494 4.88087 0.856042 4.60082 0.952838 4.33477C1.16026 3.76067 1.45065 3.21457 1.81017 2.72448C2.18353 2.22039 2.62602 1.7583 3.12383 1.36623C4.1471 0.540076 5.44693 0.119999 6.95419 0.119999H6.99567C8.90393 0.119999 10.4112 0.680102 11.4759 1.78631C12.5269 2.89251 13.08 4.23676 13.08 5.79104ZM6.95419 17.0351C5.6267 17.0351 4.56194 18.1273 4.56194 19.4576C4.56194 20.7878 5.64053 21.88 6.95419 21.88C8.26784 21.88 9.34643 20.7878 9.34643 19.4576C9.34643 18.1273 8.26784 17.0351 6.95419 17.0351Z" + fill="white" /> +</svg> \ No newline at end of file diff --git a/assets/js/editing-helper.js b/assets/js/editing-helper.js index fe3ecf06ad1c19ebaa6b7415652007196de9b16b..2ff1b516f50d5c2c3943bb37760d641015e43d4a 100644 --- a/assets/js/editing-helper.js +++ b/assets/js/editing-helper.js @@ -6,10 +6,9 @@ Drupal.behaviors.help_description = { attach: function (context, settings) { const parentElements = document.querySelectorAll(".editing-helper-block"); // Select all help sections - parentElements.forEach((parentElement) => { const helpContent = parentElement.querySelector(".help-content"); // Get the specific help content for each section - + let closeBtn = parentElement.querySelector(".helper-close-btn"); if (helpContent) { // Check if the event listener is already attached if (!parentElement.getAttribute("data-listener-attached")) { @@ -20,29 +19,15 @@ // Check if the clicked element is the toggle button if (clickedElement.classList.contains("toggle-help")) { // Prevent any parent events from being triggered - event.stopPropagation(); - - // Toggle the help content - if ( - helpContent.style.visibility === "hidden" || - helpContent.style.visibility === "" - ) { - helpContent.style.visibility = "visible"; - helpContent.style.maxHeight = helpContent.scrollHeight + "px"; // Expand smoothly - } else { - helpContent.style.maxHeight = 0; // Collapse smoothly - setTimeout(function () { - helpContent.style.visibility = "hidden"; - }, 300); // Adjust this timeout to match your transition duration - } + helpContent.classList.toggle("active"); } }); - // Mark the element as having the event listener attached parentElement.setAttribute("data-listener-attached", "true"); } - } else { - console.error("Help content not found within the parent element!"); + closeBtn.addEventListener("click", function (event) { + helpContent.classList.remove("active"); + }); } }); }, diff --git a/assets/style/editing-helper.pcss.css b/assets/style/editing-helper.pcss.css index 36bf73c5cebba77347abbae7c93e36c33fabeb17..262ae63f84b3e206802d3234fac5fee3f475a59f 100644 --- a/assets/style/editing-helper.pcss.css +++ b/assets/style/editing-helper.pcss.css @@ -1,39 +1,69 @@ .editing-helper-block { .help-wrapper { + position: relative; margin-bottom: 8px; + width: fit-content; + font-size: 14px; } .toggle-help { background-color: #df000f; - color: #fff; - padding: 6px 12px; border: none; - border-radius: 5px; - font-size: 14px; cursor: pointer; - transition: background-color 0.3s ease; - box-shadow: 0 4px 6px rgba(#df000f, 0.4); - pointer-events: all !important; margin-bottom: 15px; + border-radius: 50%; + background-image: url(../../assets/icons/question-icon.svg); + width: 32px; + height: 32px; + background-repeat: no-repeat; + background-position: center; } - .toggle-help:hover { background-color: #a0040e; } .help-content { - background-color: #e9ecef; - border-radius: 6px; + position: absolute; + top: 0; + left: calc(100% + 15px); + width: 320px; + z-index: 5; + background-color: white; + border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; - max-height: 0; - padding: 0 15px; - visibility: hidden; - transition: max-height 0.3s ease-in-out; + padding: 24px; + display: none; + color: #002856; + } + + .help-content h2 { + font-size: 18px; + color: #002856; + } + .help-content span { + color: #00285680; + } + .help-content.active { + display: block; } .help-content p { margin: 0; - font-size: 14px; - color: #333; } + .top-content { + display: flex; + justify-content: space-between; + } + .helper-close-btn { + background-image: url(../../assets/icons/close-btn.svg); + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + } +} +[dir="rtl"] .editing-helper-block .help-content { + right: calc(100% + 15px); + left: unset; } diff --git a/config/schema/editing_helper.schema.yml b/config/schema/editing_helper.schema.yml new file mode 100755 index 0000000000000000000000000000000000000000..b3a9ff832a0e515752fcc9788a53bc9f06e1284e --- /dev/null +++ b/config/schema/editing_helper.schema.yml @@ -0,0 +1,7 @@ +field.field.*.*.*.third_party.editing_helper: + type: mapping + label: "Field settings for tablefield_required" + mapping: + editing_helper_description: + type: string + label: "Editing Helper Description" diff --git a/editing_helper.info.yml b/editing_helper.info.yml index bf9a6e38df562be8e45c6b9c4b126b0619b95add..a5dd3ad3af982c926cc143c0e7accb3e56310916 100644 --- a/editing_helper.info.yml +++ b/editing_helper.info.yml @@ -3,3 +3,8 @@ type: module description: Provides description helper for editor to provide optimized user experience. core_version_requirement: ^9 || ^10 || ^11 configure: editing_helper.config + +# Information added by Drupal.org packaging script on 2024-12-11 +version: '1.0.3' +project: 'editing_helper' +datestamp: 1733909405 diff --git a/editing_helper.module b/editing_helper.module index 2ff31a5a7d53437420256c346e0e49c2c8a67a5f..50ff289928f58d47123e3e58ff0ac8ecfd2bceca 100644 --- a/editing_helper.module +++ b/editing_helper.module @@ -6,7 +6,9 @@ */ use Drupal\block_content\BlockContentInterface; +use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Routing\RouteMatchInterface; +use Drupal\field\Entity\FieldConfig; /** * Implements hook_help(). @@ -20,6 +22,46 @@ function editing_helper_help($route_name, RouteMatchInterface $route_match) { } } +/** + * Implements hook_form_FORM_ID_alter(). + */ +function editing_helper_form_field_config_edit_form_alter(array &$form, FormStateInterface $form_state) { + /** @var \Drupal\field\Entity\FieldConfig $field_config */ + $field_config = $form_state->getFormObject()->getEntity(); + + $editing_helper_description = $field_config->getThirdPartySettings('editing_helper'); + + $form['editing_helper_description'] = [ + '#type' => 'textarea', + '#title' => t('Editing Helper Description.'), + '#default_value' => $editing_helper_description["editing_helper_description"] ?? '', + '#description' => t('Instructions to present to the user below this field on the editing form. + Allowed HTML tags'), + ]; + + $form['#entity_builders'][] = 'editing_helper_form_builder'; +} + +/** + * Update the field configuration once form is saved. + * + * @param \Drupal\field\Entity\FieldConfig $config + * The field configuration entity. + * @param array $form + * The complete form array. + * @param \Drupal\Core\Form\FormStateInterface $form_state + * The current state of the form. + */ +function editing_helper_form_builder($entity_type, FieldConfig $config, array &$form, FormStateInterface $form_state) { + + $editing_helper_description = $form_state->getValue('editing_helper_description'); + if ($editing_helper_description) { + $config->setThirdPartySetting('editing_helper', 'editing_helper_description', $editing_helper_description); + return; + } + $config->unsetThirdPartySetting('editing_helper', 'editing_helper_description'); +} + /** * Implements hook_preprocess_block(). */ @@ -34,8 +76,7 @@ function editing_helper_preprocess_block(array &$variables) { // Check if the block is a field or views block. if ($plugin_id) { - [$block_type, $block_info] = explode(':', $plugin_id) + [NULL, NULL]; - + [$block_type, $block_info, $block_bundle, $block_field] = explode(':', $plugin_id) + [NULL, NULL, NULL, NULL]; switch ($block_type) { case 'block_content': $variables["attributes"]["class"][] = "editing-helper-block editing-helper-block-content"; @@ -47,8 +88,13 @@ function editing_helper_preprocess_block(array &$variables) { break; case 'field_block': - $variables["attributes"]["class"][] = "editing-helper-block editing-helper-field"; - $help_text = $config->get('view_field_text'); + $field_config = FieldConfig::loadByName($block_info, $block_bundle, $block_field); + if (!is_null($field_config)) { + $editing_helper_description = $field_config->getThirdPartySettings('editing_helper'); + + $variables["attributes"]["class"][] = "editing-helper-block editing-helper-field"; + $help_text = !empty($editing_helper_description) ? $editing_helper_description["editing_helper_description"] : $config->get('view_field_text'); + } break; case 'views_block': @@ -60,14 +106,23 @@ function editing_helper_preprocess_block(array &$variables) { // Get the current display. $display = $view->getDisplay($view_display); - $extenders = $display["display_options"]["display_extenders"]["editing_helper_display_extender"]; - if (!isset($extenders)) { + switch ($view->get('base_field')) { + case 'nid': + $help_default_text = $config->get('view_node_text'); + break; + + case 'tid': + $help_default_text = $config->get('view_taxonomy_text'); + break; + } + + if (!isset($display["display_options"]["display_extenders"]["editing_helper_display_extender"])) { return; } // Retrieve the settings of our plugins using our custom plugin method. - $description_values = $extenders["view_description_helper"]["description"]; - $help_text = $description_values; + $description_values = $display["display_options"]["display_extenders"]["editing_helper_display_extender"]["view_description_helper"]["description"]; + $help_text = !empty($description_values) ? $description_values : $help_default_text; } break; } @@ -82,21 +137,14 @@ function editing_helper_preprocess_block(array &$variables) { 'toggle_help_button' => [ '#type' => 'html_tag', '#tag' => 'button', - '#value' => t('Want Help!'), '#attributes' => [ 'class' => ['toggle-help'], 'type' => 'button', ], ], 'help_content' => [ - '#type' => 'container', - '#attributes' => [ - 'class' => ['help-content'], - 'style' => 'visibility:hidden;', - ], - 'content' => [ - '#markup' => '<p>' . $help_text . '</p>', - ], + '#theme' => 'help_content', + '#help_text' => $help_text, ], '#attached' => [ 'library' => [ @@ -105,5 +153,20 @@ function editing_helper_preprocess_block(array &$variables) { ], '#weight' => 100, ]; + } } + +/** + * Implements hook_theme(). + */ +function editing_helper_theme() { + return [ + 'help_content' => [ + 'variables' => [ + 'help_text' => NULL, + ], + 'template' => 'help-content', + ], + ]; +} diff --git a/src/Form/HelpDescriptionConfigForm.php b/src/Form/HelpDescriptionConfigForm.php index 2583fb0dba6fd4ea4ec1db2717d9b520d2c274e7..de00ae2dfeeee5c0728030bb2d816ace05a786f8 100644 --- a/src/Form/HelpDescriptionConfigForm.php +++ b/src/Form/HelpDescriptionConfigForm.php @@ -49,6 +49,12 @@ class HelpDescriptionConfigForm extends ConfigFormBase { '#tree' => FALSE, ]; + $form['help_config']['block_title'] = [ + '#type' => 'textfield', + '#title' => $this->t('Block Title'), + '#default_value' => $config->get('block_title'), + ]; + $form['help_config']['block_inline_text'] = [ '#type' => 'textarea', '#title' => $this->t('Block Inline Text'), @@ -64,6 +70,17 @@ class HelpDescriptionConfigForm extends ConfigFormBase { '#title' => $this->t('View Field Text'), '#default_value' => $config->get('view_field_text'), ]; + $form['help_config']['view_node_text'] = [ + '#type' => 'textarea', + '#title' => $this->t('View Node Text'), + '#default_value' => $config->get('view_node_text'), + ]; + $form['help_config']['view_taxonomy_text'] = [ + '#type' => 'textarea', + '#title' => $this->t('View Taxonomy Term Text'), + '#default_value' => $config->get('view_taxonomy_text'), + ]; + return parent::buildForm($form, $form_state); } @@ -79,9 +96,12 @@ class HelpDescriptionConfigForm extends ConfigFormBase { */ public function submitForm(array &$form, FormStateInterface $form_state) { $this->config('editing_helper.help_config') + ->set('block_title', $form_state->getValue('block_title')) ->set('block_inline_text', $form_state->getValue('block_inline_text')) ->set('block_reusable_text', $form_state->getValue('block_reusable_text')) ->set('view_field_text', $form_state->getValue('view_field_text')) + ->set('view_node_text', $form_state->getValue('view_node_text')) + ->set('view_taxonomy_text', $form_state->getValue('view_taxonomy_text')) ->save(); $this->messenger()->addStatus($this->t("Seeds Layout configuration has been saved successfully")); } diff --git a/templates/help-content.html.twig b/templates/help-content.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..59ac7d21aa893745fa2c66c4cc2511335390cc0f --- /dev/null +++ b/templates/help-content.html.twig @@ -0,0 +1,8 @@ +<div class="help-content"> + <div class="top-content"> + <div class="toggle-help"></div> + <div class="helper-close-btn"></div> + </div> + <h2 class="text">{{'Want Help!'|t}}</h2> + <p>{{help_text|raw}}</p> +</div>