progress.blade.php 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <div {{ $attributes->merge(['class' => $makeProgressClass()]) }}>
  2. {{-- Progress bar --}}
  3. <div class="{{ $makeProgressBarClass() }}" role="progressbar"
  4. aria-valuenow="{{ $value }}" aria-valuemin="0" aria-valuemax="100"
  5. style="{{ $makeProgressBarStyle() }}">
  6. {{-- Progress bar label --}}
  7. @isset($withLabel)
  8. {{ $value }}%
  9. @else
  10. <span class="sr-only">{{ $value }}% Progress</span>
  11. @endisset
  12. </div>
  13. </div>
  14. {{-- Register Javascript utility class for this component --}}
  15. @once
  16. @push('js')
  17. <script>
  18. class _AdminLTE_Progress {
  19. /**
  20. * Constructor.
  21. *
  22. * target: The id of the target progress bar.
  23. */
  24. constructor(target)
  25. {
  26. this.target = target;
  27. }
  28. /**
  29. * Get the current progress bar value.
  30. */
  31. getValue()
  32. {
  33. // Check if target exists.
  34. let t = $(`#${this.target}`);
  35. if (t.length <= 0) {
  36. return;
  37. }
  38. // Return the progress bar current value (casted to number).
  39. return +(t.find('.progress-bar').attr('aria-valuenow'));
  40. }
  41. /**
  42. * Set the new progress bar value.
  43. */
  44. setValue(value)
  45. {
  46. // Check if target exists.
  47. let t = $(`#${this.target}`);
  48. if (t.length <= 0) {
  49. return;
  50. }
  51. // Update progress bar.
  52. value = +value;
  53. t.find('.progress-bar').css('width', value + '%')
  54. .attr('aria-valuenow', value);
  55. if (t.find('span.sr-only').length > 0) {
  56. t.find('span.sr-only').text(value + '% Progress');
  57. } else {
  58. t.find('.progress-bar').text(value + '%');
  59. }
  60. }
  61. }
  62. </script>
  63. @endpush
  64. @endonce