| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <div {{ $attributes->merge(['class' => $makeProgressClass()]) }}>
- {{-- Progress bar --}}
- <div class="{{ $makeProgressBarClass() }}" role="progressbar"
- aria-valuenow="{{ $value }}" aria-valuemin="0" aria-valuemax="100"
- style="{{ $makeProgressBarStyle() }}">
- {{-- Progress bar label --}}
- @isset($withLabel)
- {{ $value }}%
- @else
- <span class="sr-only">{{ $value }}% Progress</span>
- @endisset
- </div>
- </div>
- {{-- Register Javascript utility class for this component --}}
- @once
- @push('js')
- <script>
- class _AdminLTE_Progress {
- /**
- * Constructor.
- *
- * target: The id of the target progress bar.
- */
- constructor(target)
- {
- this.target = target;
- }
- /**
- * Get the current progress bar value.
- */
- getValue()
- {
- // Check if target exists.
- let t = $(`#${this.target}`);
- if (t.length <= 0) {
- return;
- }
- // Return the progress bar current value (casted to number).
- return +(t.find('.progress-bar').attr('aria-valuenow'));
- }
- /**
- * Set the new progress bar value.
- */
- setValue(value)
- {
- // Check if target exists.
- let t = $(`#${this.target}`);
- if (t.length <= 0) {
- return;
- }
- // Update progress bar.
- value = +value;
- t.find('.progress-bar').css('width', value + '%')
- .attr('aria-valuenow', value);
- if (t.find('span.sr-only').length > 0) {
- t.find('span.sr-only').text(value + '% Progress');
- } else {
- t.find('.progress-bar').text(value + '%');
- }
- }
- }
- </script>
- @endpush
- @endonce
|