CORE_V5 // sections

PATH: home / rwabteecom / project_11 / resources / views / dashboard / sections /

Editing: divider.blade.php

// let uuid = $("#sortable").sortable("toArray").length;
            var uuid = () => {
            var w = () => {
                return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
            }
            return `${w()}${w()}-${w()}-${w()}-${w()}-${w()}${w()}${w()}`;
        }
        let linksArray = $("#sortable").sortable();
        var uuid = uuid()
            let newElement = `
                <div class="link-form  my-4" data-uuid="${uuid}" data-id="${uuid}" id="${uuid}" >
                    <form method="post" action="{{ route('dashboard.link.store') }}"  id="form${uuid}">
                @csrf
                    <input name="link[${uuid}][pen]" readonly class="pen_check onchange_store"  hidden>
                    <input name="link[${uuid}][order]" readonly class="order_link"   hidden>
                    <input hidden value="divider" name="link[${uuid}][link_type]" class="onchange_store" readonly>
                    <input hidden value="${uuid}" name="link[${uuid}][uuid]" class="onchange_store" readonly>
                <div class="d-flex">
                     <div class="d-flex">
                       <button type="button" class="drage-btn">
                         <svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path
                             d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
                             stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                           <path
                             d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z"
                             stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                           <path
                             d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z"
                             stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                           <path
                             d="M20 13C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13Z"
                             stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                           <path
                             d="M20 6C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4C19.4477 4 19 4.44772 19 5C19 5.55228 19.4477 6 20 6Z"
                             stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                           <path
                             d="M20 20C20.5523 20 21 19.5523 21 19C21 18.4477 20.5523 18 20 18C19.4477 18 19 18.4477 19 19C19 19.5523 19.4477 20 20 20Z"
                             stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
                       </button>
                     </div>
                     <div class="divider-form-con p-3 pt-4 w-100">
                       <div class="d-flex py-3">
                         <div class="divider-preview"></div>
                       </div>
                       <div class="d-flex align-items-center justify-content-between mt-3">
                         <div class="d-flex">
                           <div class="form-check form-switch visibility-switch" data-mdb-tooltip-init
                             title="{{ __('Link Visibility') }}">
                             <input class="form-check-input onchange_store" value="1" checked type="checkbox" name="link[${uuid}][link_visibility]" role="switch"
                               id="flexSwitchCheckChecked${uuid}" />
                             <span class="invisible-span">
                               <svg width="15" height="14" viewBox="0 0 15 14" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                 <path
                                   d="M6.15 3.425C6.57376 3.23077 7.03386 3.12853 7.5 3.125C8.39511 3.125 9.25355 3.48058 9.88649 4.11351C10.5194 4.74645 10.875 5.60489 10.875 6.5C10.8748 6.89759 10.801 7.29172 10.6575 7.6625L12.75 9.605C13.6842 8.71688 14.4469 7.66433 15 6.5C15 6.5 12.75 1.25 7.5 1.25C6.46582 1.24458 5.44261 1.46201 4.5 1.8875L6.15 3.425ZM1.5 0.5L0.75 1.25L2.6625 3.05C1.54186 3.99959 0.634541 5.17527 0 6.5C0 6.5 2.25 11.75 7.5 11.75C8.71443 11.755 9.9108 11.4559 10.98 10.88L13.5 13.25L14.25 12.5L1.5 0.5ZM7.5 9.875C6.60489 9.875 5.74645 9.51942 5.11351 8.88648C4.48058 8.25355 4.125 7.3951 4.125 6.5C4.12914 5.92025 4.28423 5.35158 4.575 4.85L5.7225 5.93C5.66072 6.11381 5.62783 6.3061 5.625 6.5C5.62424 6.80525 5.69832 7.10604 5.84075 7.37603C5.98318 7.64601 6.18963 7.87697 6.44201 8.04868C6.69439 8.22039 6.98502 8.32761 7.28844 8.36096C7.59187 8.39432 7.89885 8.35278 8.1825 8.24L9.3375 9.3275C8.79136 9.68499 8.15274 9.87527 7.5 9.875Z"
                                   fill="#565656" />
                               </svg>
                             </span>
                             <span class="visible-span">
                               <svg width="17" height="12" viewBox="0 0 17 12" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                 <path
                                   d="M11.4078 6C11.4078 6.66304 11.1444 7.29893 10.6755 7.76777C10.2067 8.23661 9.57082 8.5 8.90778 8.5C8.24473 8.5 7.60885 8.23661 7.14001 7.76777C6.67117 7.29893 6.40778 6.66304 6.40778 6C6.40778 5.33696 6.67117 4.70107 7.14001 4.23223C7.60885 3.76339 8.24473 3.5 8.90778 3.5C9.57082 3.5 10.2067 3.76339 10.6755 4.23223C11.1444 4.70107 11.4078 5.33696 11.4078 6Z"
                                   fill="white" />
                                 <path
                                   d="M0.907776 6C0.907776 6 3.90778 0.5 8.90778 0.5C13.9078 0.5 16.9078 6 16.9078 6C16.9078 6 13.9078 11.5 8.90778 11.5C3.90778 11.5 0.907776 6 0.907776 6ZM8.90778 9.5C9.83603 9.5 10.7263 9.13125 11.3826 8.47487C12.039 7.8185 12.4078 6.92826 12.4078 6C12.4078 5.07174 12.039 4.1815 11.3826 3.52513C10.7263 2.86875 9.83603 2.5 8.90778 2.5C7.97952 2.5 7.08928 2.86875 6.4329 3.52513C5.77653 4.1815 5.40778 5.07174 5.40778 6C5.40778 6.92826 5.77653 7.8185 6.4329 8.47487C7.08928 9.13125 7.97952 9.5 8.90778 9.5Z"
                                   fill="white" />
                               </svg>
                               </svg>
                             </span>
                           </div>
                           <button class="divider-btn" type="button" data-mdb-collapse-init data-mdb-ripple-init
                             data-mdb-target="#collapseExample-Link-${uuid}" aria-expanded="false" aria-controls="collapseExample">
                             <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                               <path
                                 d="M3.11847 12.1143H3.12847M7.61847 12.1143H7.62847M16.6185 12.1143H16.6285M12.1185 12.1143H12.1285M21.1185 12.1143H21.1285M21.1185 21.1143V20.3143C21.1185 19.1942 21.1185 18.6341 20.9005 18.2063C20.7087 17.83 20.4028 17.524 20.0265 17.3322C19.5986 17.1143 19.0386 17.1143 17.9185 17.1143H6.31847C5.19836 17.1143 4.63831 17.1143 4.21049 17.3322C3.83416 17.524 3.5282 17.83 3.33646 18.2063C3.11847 18.6341 3.11847 19.1942 3.11847 20.3143V21.1143M21.1185 3.11426V3.91426C21.1185 5.03436 21.1185 5.59442 20.9005 6.02224C20.7087 6.39856 20.4028 6.70452 20.0265 6.89627C19.5986 7.11426 19.0386 7.11426 17.9185 7.11426H6.31847C5.19836 7.11426 4.63831 7.11426 4.21049 6.89627C3.83416 6.70452 3.5282 6.39856 3.33646 6.02224C3.11847 5.59442 3.11847 5.03436 3.11847 3.91426V3.11426"
                                 stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
                           </button>
                           <button  type="button" class="pin-to-top" data-mdb-tooltip-init title="{{ __('Pin to top') }}">
                             <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                               <path
                                 d="M9.00032 11.25L9.00032 16.5M6.00032 5.4811V7.07906C6.00032 7.23508 6.00032 7.31308 5.98501 7.3877C5.97142 7.45389 5.94895 7.51795 5.91821 7.57813C5.88356 7.64596 5.83483 7.70687 5.73736 7.8287L4.56003 9.30037C4.06073 9.92449 3.81108 10.2366 3.81079 10.4992C3.81054 10.7276 3.91439 10.9437 4.0929 11.0862C4.29816 11.25 4.6978 11.25 5.49707 11.25H12.5036C13.3028 11.25 13.7025 11.25 13.9077 11.0862C14.0863 10.9437 14.1901 10.7276 14.1899 10.4992C14.1896 10.2366 13.9399 9.92449 13.4406 9.30037L12.2633 7.8287C12.1658 7.70687 12.1171 7.64596 12.0824 7.57813C12.0517 7.51795 12.0292 7.45389 12.0156 7.3877C12.0003 7.31308 12.0003 7.23508 12.0003 7.07906V5.4811C12.0003 5.39476 12.0003 5.35158 12.0052 5.30901C12.0095 5.27119 12.0167 5.23375 12.0268 5.19702C12.038 5.15568 12.0541 5.1156 12.0862 5.03543L12.8421 3.14567C13.0626 2.59435 13.1728 2.3187 13.1269 2.09741C13.0866 1.9039 12.9717 1.73408 12.8069 1.62488C12.6186 1.5 12.3217 1.5 11.7279 1.5H6.27276C5.67898 1.5 5.38208 1.5 5.1937 1.62488C5.02897 1.73408 4.914 1.9039 4.87378 2.09741C4.8278 2.3187 4.93806 2.59435 5.15859 3.14567L5.91449 5.03543C5.94656 5.1156 5.9626 5.15568 5.97388 5.19702C5.9839 5.23375 5.9911 5.27119 5.99544 5.30901C6.00032 5.35158 6.00032 5.39476 6.00032 5.4811Z"
                                 stroke="#252525" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
                           </button>
                           <button  type="button" class="unpin-to-top" data-mdb-tooltip-init title="{{ __('Unpin to top') }}">
                                   <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <g clip-path="url(#clip0_233_482)">
                                     <path d="M11.4092 14.6659L7.69692 18.3782M13.3671 8.46535L12.2372 9.59528C12.1269 9.70559 12.0717 9.76075 12.0081 9.80269C11.9517 9.83989 11.8905 9.86929 11.8263 9.89011C11.7538 9.91357 11.6763 9.92218 11.5212 9.93941L9.64807 10.1475C8.85369 10.2358 8.45649 10.2799 8.27058 10.4654C8.1089 10.6268 8.02955 10.853 8.05502 11.08C8.0843 11.341 8.36689 11.6235 8.93206 12.1887L13.8864 17.1431C14.4516 17.7082 14.7342 17.9908 14.9952 18.0201C15.2221 18.0456 15.4484 17.9662 15.6097 17.8045C15.7952 17.6186 15.8393 17.2214 15.9276 16.4271L16.1357 14.5539C16.1529 14.3989 16.1616 14.3213 16.185 14.2489C16.2058 14.1846 16.2352 14.1234 16.2724 14.067C16.3144 14.0034 16.3695 13.9482 16.4799 13.8379L17.6098 12.708C17.6708 12.6469 17.7014 12.6164 17.7349 12.5898C17.7647 12.5661 17.7963 12.5447 17.8294 12.5258C17.8666 12.5046 17.9062 12.4876 17.9856 12.4535L19.8564 11.6518C20.4022 11.4179 20.675 11.3009 20.799 11.1119C20.9074 10.9467 20.9462 10.7453 20.9069 10.5516C20.862 10.3301 20.6521 10.1201 20.2322 9.70028L16.3748 5.84293C15.955 5.42306 15.745 5.21312 15.5235 5.16822C15.3298 5.12895 15.1285 5.16773 14.9632 5.27613C14.7742 5.40009 14.6572 5.67298 14.4233 6.21875L13.6216 8.08952C13.5876 8.16888 13.5706 8.20856 13.5493 8.24577C13.5304 8.27883 13.5091 8.3104 13.4854 8.34021C13.4587 8.37376 13.4282 8.40429 13.3671 8.46535Z" stroke="#545454" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                     </g>
                                     <defs>
                                     <clipPath id="clip0_233_482">
                                     <rect width="18" height="18" fill="white" transform="translate(13 0.34668) rotate(45)"/>
                                     </clipPath>
                                     </defs>
                                     </svg>
                                 </button>
                         </div>
                         <button class="delete-btn" type="button">
                           <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path
                               d="M14 5V4.2C14 3.0799 14 2.51984 13.782 2.09202C13.5903 1.71569 13.2843 1.40973 12.908 1.21799C12.4802 1 11.9201 1 10.8 1H9.2C8.07989 1 7.51984 1 7.09202 1.21799C6.71569 1.40973 6.40973 1.71569 6.21799 2.09202C6 2.51984 6 3.0799 6 4.2V5M8 10.5V15.5M12 10.5V15.5M1 5H19M17 5V16.2C17 17.8802 17 18.7202 16.673 19.362C16.3854 19.9265 15.9265 20.3854 15.362 20.673C14.7202 21 13.8802 21 12.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V5"
                               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                           </svg>
                         </button>
                       </div>
                     </div>
                           </div>
                           <div class="collapse lock-password" id="collapseExample-Link-${uuid}">
                     <div class="d-flex justify-content-between align-items-center close-collapse py-3 px-4">
                       <p class="mb-0">{{__('Divider Options')}}</p>
                       <button type="button" data-mdb-collapse-init data-mdb-ripple-init data-mdb-target="#collapseExample-Link-${uuid}"
                         aria-expanded="false" aria-controls="collapseExample">
                         <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M13.4999 5.59473L4.49994 15.0947M4.49994 5.59473L13.4999 15.0947" stroke="#666666"
                             stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
                       </button>
                     </div>
                     <div class="px-2 px-md-5 py-4">
                       <div>
                         <label class="label mb-2">{{ __('Divider Height') }}</label>
                         <div class="d-flex align-items-center divider-height-con flex-wrap">
                           <div class="form-check p-0 m-1">
                             <input class="form-check-input onchange_store" hidden type="radio" name="link[${uuid}][divider_height]" id="Small${uuid}"
                               value="small">
                             <label class="form-check-label" for="Small${uuid}">
                               {{ __('Small') }}
                             </label>
                           </div>
                           <div class="form-check p-0 m-1">
                             <input class="form-check-input onchange_store" hidden type="radio" name="link[${uuid}][divider_height]" id="Medium${uuid}"
                               value="medium">
                             <label class="form-check-label" for="Medium${uuid}">
                               {{ __('Medium') }}
                             </label>
                           </div>
                           <div class="form-check p-0 m-1">
                             <input class="form-check-input onchange_store" hidden type="radio" name="link[${uuid}][divider_height]" id="Large${uuid}"
                               value="large">
                             <label class="form-check-label" for="Large${uuid}">
                               {{ __('Large') }}
                             </label>
                           </div>
                         </div>
                       </div>
                       <div class="mt-3">
                         <label class="label mb-2 d-block">{{ __('Divider Color') }}</label>
                         <div class="colorpicker-con d-flex align-items-center px-1">
                           <input type='text' class="colorpicker ps-1 onchange_store" name="link[${uuid}][divider_color]" value="#434343" readonly />
                         </div>
                       </div>
                     </div>
                </div>
            </form>
              </div>
        `
            linksArray.append(newElement);
            Toastify({
                text: 'Divider Added Successflly',
                duration: 3000,
                close: true,
                className: "add-success",
                style: {
                    background: "#FF8A2D",
                }
            }).showToast();
             sendForm('form'+uuid)
            colorPicker()
            navToNew(uuid)

})

</script>

CANCEL