first commit

cms_admin/assets/js/lib/audioplayer.js

@@ -0,0 +1,188 @@
+/*
+	AUTHOR: Osvaldas Valutis, www.osvaldas.info
+*/
+(function($, window, document, undefined) {
+    var isTouch = 'ontouchstart' in window,
+        eStart = isTouch ? 'touchstart' : 'mousedown',
+        eMove = isTouch ? 'touchmove' : 'mousemove',
+        eEnd = isTouch ? 'touchend' : 'mouseup',
+        eCancel = isTouch ? 'touchcancel' : 'mouseup',
+        secondsToTime = function(secs) {
+            var hours = Math.floor(secs / 3600),
+                minutes = Math.floor(secs % 3600 / 60),
+                seconds = Math.ceil(secs % 3600 % 60);
+            return (hours == 0 ? '' : hours > 0 && hours.toString().length < 2 ? '0' + hours + ':' : hours + ':') + (minutes.toString().length < 2 ? '0' + minutes : minutes) + ':' + (seconds.toString().length < 2 ? '0' + seconds : seconds);
+        },
+        canPlayType = function(file) {
+            var audioElement = document.createElement('audio');
+            return !!(audioElement.canPlayType && audioElement.canPlayType('audio/' + file.split('.').pop().toLowerCase() + ';').replace(/no/, ''));
+        };
+
+    $.fn.audioPlayer = function(params) {
+        var params = $.extend({
+                classPrefix: 'audioplayer',
+                strPlay: '',
+                strPause: '',
+                strVolume: ''
+            }, params),
+            cssClass = {},
+            cssClassSub = {
+                playPause: 'playpause',
+                playing: 'playing',
+                time: 'time',
+                timeCurrent: 'time-current',
+                timeDuration: 'time-duration',
+                bar: 'bar',
+                barLoaded: 'bar-loaded',
+                barPlayed: 'bar-played',
+                volume: 'volume',
+                volumeButton: 'volume-button',
+                volumeAdjust: 'volume-adjust',
+                noVolume: 'novolume',
+                mute: 'mute',
+                mini: 'mini'
+            };
+
+        for (var subName in cssClassSub)
+            cssClass[subName] = params.classPrefix + '-' + cssClassSub[subName];
+
+        this.each(function() {
+            if ($(this).prop('tagName').toLowerCase() != 'audio')
+                return false;
+
+            var $this = $(this),
+                audioFile = $this.attr('src'),
+                isAutoPlay = $this.get(0).getAttribute('autoplay'),
+                isAutoPlay = isAutoPlay === '' || isAutoPlay === 'autoplay' ? true : false,
+                isLoop = $this.get(0).getAttribute('loop'),
+                isLoop = isLoop === '' || isLoop === 'loop' ? true : false,
+                isSupport = false;
+
+            if (typeof audioFile === 'undefined') {
+                $this.find('source').each(function() {
+                    audioFile = $(this).attr('src');
+                    if (typeof audioFile !== 'undefined' && canPlayType(audioFile)) {
+                        isSupport = true;
+                        return false;
+                    }
+                });
+            } else if (canPlayType(audioFile)) isSupport = true;
+
+            var thePlayer = $('<div class="' + params.classPrefix + '">' + (isSupport ? $('<div>').append($this.eq(0).clone()).html() : '<embed src="' + audioFile + '" width="0" height="0" volume="100" autostart="' + isAutoPlay.toString() + '" loop="' + isLoop.toString() + '" />') + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>'),
+                theAudio = isSupport ? thePlayer.find('audio') : thePlayer.find('embed'),
+                theAudio = theAudio.get(0);
+
+            if (isSupport) {
+                thePlayer.find('audio').css({
+                    'width': 0,
+                    'height': 0,
+                    'visibility': 'hidden'
+                });
+                thePlayer.append('<div class="' + cssClass.time + ' ' + cssClass.timeCurrent + '"></div><div class="' + cssClass.bar + '"><div class="' + cssClass.barLoaded + '"></div><div class="' + cssClass.barPlayed + '"></div></div><div class="' + cssClass.time + ' ' + cssClass.timeDuration + '"></div><div class="' + cssClass.volume + '"><div class="' + cssClass.volumeButton + '" title="' + params.strVolume + '"><a href="#">' + params.strVolume + '</a></div><div class="' + cssClass.volumeAdjust + '"><div><div></div></div></div></div>');
+
+                var theBar = thePlayer.find('.' + cssClass.bar),
+                    barPlayed = thePlayer.find('.' + cssClass.barPlayed),
+                    barLoaded = thePlayer.find('.' + cssClass.barLoaded),
+                    timeCurrent = thePlayer.find('.' + cssClass.timeCurrent),
+                    timeDuration = thePlayer.find('.' + cssClass.timeDuration),
+                    volumeButton = thePlayer.find('.' + cssClass.volumeButton),
+                    volumeAdjuster = thePlayer.find('.' + cssClass.volumeAdjust + ' > div'),
+                    volumeDefault = 0,
+                    adjustCurrentTime = function(e) {
+                        theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
+                        theAudio.currentTime = Math.round((theAudio.duration * (theRealEvent.pageX - theBar.offset().left)) / theBar.width());
+                    },
+                    adjustVolume = function(e) {
+                        theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
+                        theAudio.volume = Math.abs((theRealEvent.pageX - volumeAdjuster.offset().left) / volumeAdjuster.width());
+                    },
+                    updateLoadBar = setInterval(function() {
+                      if (theAudio.buffered.length > 0) {
+                        barLoaded.width((theAudio.buffered.end(0) / theAudio.duration) * 100 + '%');
+                        if (theAudio.buffered.end(0) >= theAudio.duration)
+                            clearInterval(updateLoadBar);
+                      }
+                    }, 100);
+
+                var volumeTestDefault = theAudio.volume,
+                    volumeTestValue = theAudio.volume = 0.111;
+                if (Math.round(theAudio.volume * 1000) / 1000 == volumeTestValue) theAudio.volume = volumeTestDefault;
+                else thePlayer.addClass(cssClass.noVolume);
+
+                timeDuration.html('&hellip;');
+                timeCurrent.text(secondsToTime(0));
+
+                theAudio.addEventListener('loadeddata', function() {
+                    timeDuration.text(secondsToTime(theAudio.duration));
+                    volumeAdjuster.find('div').width(theAudio.volume * 100 + '%');
+                    volumeDefault = theAudio.volume;
+                });
+
+                theAudio.addEventListener('timeupdate', function() {
+                    timeCurrent.text(secondsToTime(theAudio.currentTime));
+                    barPlayed.width((theAudio.currentTime / theAudio.duration) * 100 + '%');
+                });
+
+                theAudio.addEventListener('volumechange', function() {
+                    volumeAdjuster.find('div').width(theAudio.volume * 100 + '%');
+                    if (theAudio.volume > 0 && thePlayer.hasClass(cssClass.mute)) thePlayer.removeClass(cssClass.mute);
+                    if (theAudio.volume <= 0 && !thePlayer.hasClass(cssClass.mute)) thePlayer.addClass(cssClass.mute);
+                });
+
+                theAudio.addEventListener('ended', function() {
+                    thePlayer.removeClass(cssClass.playing);
+                });
+
+                theBar.on(eStart, function(e) {
+                        adjustCurrentTime(e);
+                        theBar.on(eMove, function(e) {
+                            adjustCurrentTime(e);
+                        });
+                    })
+                    .on(eCancel, function() {
+                        theBar.unbind(eMove);
+                    });
+
+                volumeButton.on('click', function() {
+                    if (thePlayer.hasClass(cssClass.mute)) {
+                        thePlayer.removeClass(cssClass.mute);
+                        theAudio.volume = volumeDefault;
+                    } else {
+                        thePlayer.addClass(cssClass.mute);
+                        volumeDefault = theAudio.volume;
+                        theAudio.volume = 0;
+                    }
+                    return false;
+                });
+
+                volumeAdjuster.on(eStart, function(e) {
+                        adjustVolume(e);
+                        volumeAdjuster.on(eMove, function(e) {
+                            adjustVolume(e);
+                        });
+                    })
+                    .on(eCancel, function() {
+                        volumeAdjuster.unbind(eMove);
+                    });
+            } else thePlayer.addClass(cssClass.mini);
+
+            if (isAutoPlay) thePlayer.addClass(cssClass.playing);
+
+            thePlayer.find('.' + cssClass.playPause).on('click', function() {
+                if (thePlayer.hasClass(cssClass.playing)) {
+                    $(this).attr('title', params.strPlay).find('a').html(params.strPlay);
+                    thePlayer.removeClass(cssClass.playing);
+                    isSupport ? theAudio.pause() : theAudio.Stop();
+                } else {
+                    $(this).attr('title', params.strPause).find('a').html(params.strPause);
+                    thePlayer.addClass(cssClass.playing);
+                    isSupport ? theAudio.play() : theAudio.Play();
+                }
+                return false;
+            });
+
+            $this.replaceWith(thePlayer);
+        });
+        return this;
+    };
+})(jQuery, window, document);

cms_admin/assets/js/lib/file-upload.js

@@ -0,0 +1,76 @@
+// ********************************** We can use  This code is for by ID ********************************* 
+(function ($) {
+    var fileUploadCount = 0;
+
+    $.fn.fileUpload = function () {
+        return this.each(function () {
+            var fileUploadDiv = $(this);
+            var fileUploadId = `fileUpload-${++fileUploadCount}`;
+
+            // Creates HTML content for the file upload area.
+            var fileDivContent = `
+                <label for="${fileUploadId}" class="file-upload image-upload__box">
+                    <div class="image-upload__boxInner">
+                        <i class="ri-gallery-line image-upload__icon"></i>
+                        <p class="text-xs text-secondary-light mt-4 mb-0">Drag & drop image here</p>
+                    </div>
+                    <input type="file" id="${fileUploadId}" name="[]" multiple hidden />
+                </label>
+            `;
+
+            fileUploadDiv.html(fileDivContent).addClass("file-container");
+
+            // Adds the information of uploaded files to file upload area.
+            function handleFiles(files) {
+                if (files.length > 0) {
+                    var file = files[0]; // Assuming only one file is selected
+
+                    var fileName = file.name;
+                    var fileSize = (file.size / 1024).toFixed(2) + " KB";
+                    var fileType = file.type;
+                    var preview = fileType.startsWith("image")
+                        ? `<img src="${URL.createObjectURL(file)}" alt="${fileName}" class="image-upload__image" height="30">`
+                        : ` <span class="image-upload__anotherFileIcon"> <i class="fas fa-file"></i></span>`;
+
+                    // Update the content of the file upload area
+                    var fileUploadLabel = fileUploadDiv.find(`label.file-upload`);
+                    fileUploadLabel.find('.image-upload__boxInner').html(`
+                        ${preview}
+                        <button type="button" class="image-upload__deleteBtn"><i class="ri-close-line"></i></button>
+                    `);
+
+                    // Attach a click event to the "Delete" button
+                    fileUploadLabel.find('.image-upload__deleteBtn').click(function () {
+                        fileUploadDiv.html(fileDivContent);
+                        initializeFileUpload();
+                    });
+                }
+            }
+
+            function initializeFileUpload() {
+                // Events triggered after dragging files.
+                fileUploadDiv.on({
+                    dragover: function (e) {
+                        e.preventDefault();
+                        fileUploadDiv.toggleClass("dragover", e.type === "dragover");
+                    },
+                    drop: function (e) {
+                        e.preventDefault();
+                        fileUploadDiv.removeClass("dragover");
+                        handleFiles(e.originalEvent.dataTransfer.files);
+                    },
+                });
+
+                // Event triggered when file is selected.
+                fileUploadDiv.find(`label.file-upload input[type="file"]`).change(function () {
+                    handleFiles(this.files);
+                });
+            }
+
+            initializeFileUpload();
+        });
+    };
+})(jQuery);
+
+// Apply fileUpload functionality to each container with the class "fileUpload"
+$('.fileUpload').fileUpload();