DEV Community: andysaktia

Menu Active Page

andysaktia — Wed, 03 Nov 2021 02:58:39 +0000

When I used scrollspy from bootstrap I realized it only applies to the case within a single page. The following idea came up to make the menu active with a check system from the url.

Container HTML

In my case the nav menu container is like the following.

<div class="classynav">
    <ul id="nav">
        <li class="nav-item">
            <a href="https://example.org/about.php">Tentang</a>  
        </li>
        <li class="nav-item active">
            <a href="https://example.org/project.php">Project</a> 
        </li>
    </ul>
</div>

Script

The principle of this script handle only matches the selected url with the url in the container. For sub menu handlers, I haven't been able to find a meaningful solution, maybe you can use the split attribute ?id for the php web case, or maybe you have an interesting idea, please share it in the comments.

    $(function(){
        var url = window.location.href; 
        $(".classynav a").each(function() {
            var d = $(this).attr('href');
            if(url == d) {
                $(this).closest(".nav-item").addClass("active");
            }
        });
    });

Done

Make Title Path for Detail Pages

andysaktia — Mon, 25 Oct 2021 00:33:47 +0000

I have some data arrays, and I want to process it into a special url path for name ortitle. The array data is like the following.

Example Array

array (
  0 => 
  array (
    'name' => 'Alryntop', 
    'gender' => 'Laki-Laki',
    'age' => '20',
    'city' => 'Jakarta', 
  ),
  1 => 
  array (
    'name' => 'Andre Tau Aja', 
    'gender' => 'Laki-Laki',
    'age' => '33',
    'city' => 'Jakarta', 
  ),
);

Function

So I only process it using the PHP as follows; Where my spaces change to - and words become lowercase.

Script:

function getArrWithPath(array $arr, $position = '')
{
  foreach ($arr as $key => $item) {
    if($position == ''){
      $target = $item;
    }else{
      $target = $item[$position];
    }
    $target = strtolower($target);
    $target = str_replace(' ', '-', $target);
    $target = preg_replace('/[^A-Za-z0-9\-]/', '', $target);
    $arr[$key][$position.'_path'] = $target;
  }
   return $arr;
}

Result:

array (
  0 => 
  array (
    'name' => 'Alryntop', 
    'gender' => 'Laki-Laki',
    'age' => '20',
    'city' => 'Jakarta', 
    'name_path' => 'alryntop', 
  ),
  1 => 
  array (
    'name' => 'Andre Tau Aja', 
    'gender' => 'Laki-Laki',
    'age' => '30',
    'city' => 'Jakarta', 
    'name_path' => 'andre-tau-aja', 
  ),
);

With this result I can process the more specific detail page leads to the data in choice. Or the reader has better suggestions, discussing bellow please!

Copy Url Buttom with Bootstrap and Clipboard.js

andysaktia — Thu, 14 Oct 2021 04:48:12 +0000

In making the page it is very important to include the share feature, at least copy the url with hashtags or other share urls if outside the main url. This time I want to make a button copy like the one created by the bootstrap page, and it will look like this

Prerequire

Bootstrap; tooltip
Javascripts; loops, logic etc
Clipboard.js plugin

Prepare Button



<div class="float-end bd-highlight">
    <button type="button" url-site="http://example.org#event" class="btn btn-outline-secondary fw-light link-copy" data-bs-original-title="Copy Url"><i class="bi-share-fill"></i> Share</button>
</div>

In the button there are several attributes and classes that need to be considered, such as the data-bs-original-title="Copy Url" attribute which will display a tooltip description, the site-url attribute which will store the url to be saved. and the link-copy class which will be used as a token class for tooltip activation.

Install tooltip



document.querySelectorAll('.link-copy').forEach(function(a){
  var b=new bootstrap.Tooltip(a);
  a.addEventListener('mouseleave', function(){
    b.hide()}
  )
   // console.log(a.getAttribute('url-site'));
});

The script will select all items with class link-copy then will execute the tooltip installation function which is set to activate the tooltip only on hover.

Run Clipboard.js



var d = new ClipboardJS('.link-copy',{
    text:function(a){
      return a.getAttribute('url-site') 
     }
   });

d.on('success', function(a){
  var b = bootstrap.Tooltip.getInstance(a.trigger);
  a.trigger.setAttribute('data-bs-original-title','Copied!');
  b.show();
  a.trigger.setAttribute('data-bs-original-title','Copy Url');
  a.clearSelection()
});

The installed clipboard will copy the description from the url-site, pay attention to the text description in the script. After a successful copy, the script loads the next few actions, which include a tooltip description that changes after the trigger click is result Copied! and returns to the default description when another trigger occurs.

Done

Get Automatic Meta Data Audio Duration

andysaktia — Tue, 05 Oct 2021 04:20:18 +0000

When I have a lot of audio list data displayed, the audio duration information presented is also important to display, the problem will arise when the data is large and dynamic. The data display will be as follows.

Prerequire

Javascript script functions, arrays
Jquery selection

Html durasi audio

In the html there is a class duration-time which will be used to collect duration data, while {$k} will show the unique sequence/numbering of duration.

<small class="text-muted small pb-3">
    <i class="fas fa-clock"></i> <span src-mp3="http://src.mp3" class="durtime{$k} duration-time" num="{$k}"></span>
</small>

Function Get Duration

This function will retrieve the duration audio meta data which will then be sent to the cb() . function

    function getDuration(src, cb) {
        var audio = new Audio();  
        audio.src = src; 
        $(audio).on("loadedmetadata", function(){ 
            var minutes = parseInt(audio.duration / 60, 10);
            var seconds = parseInt(audio.duration % 60);
            if (seconds < 10){ seconds = '0'+seconds; }
            if (minutes < 10){ minutes = '0'+minutes; }
            var durasi =  minutes+":"+seconds;
            cb(durasi);
           // console.log(durasi);
        });     
    }

Running the script

After that, the large amount of data will be collected into an array which will then be queryed and run the getDuration() function and the cb() function will be filled with writing data to the durtime${k} class based on the k order.

  var alldur = $('.duration-time');
  alldur.each(function(){
    var srcs = $(this).attr('src-mp3');
    var nums = $(this).attr('num');
    getDuration(srcs,  function(e){
      $(`.durtime${k}`).text(e);
    });
  });

Done

Style Plyr.js for Podcast Player

andysaktia — Tue, 05 Oct 2021 03:54:44 +0000

When I create a website with audio player support inside, I want to make the audio player display as shown in the image below. It's just because I take advantage of the player ecosystem from the plyr.js plugin so I'm trying to modify the css with some effort, either directly css or through a js script.

Prerequire

Plyr.js: install the plugin and set the button attribute
Javascript function and Jquery selection
Basic style with css script

Install Plyr

In installing the plugin there are several things that need to be considered, such as including the default css and js and then installing it with the Plyr script class, because here I include the button that will be used so I need to set the controller as well.

    const controls = [
        'play-large',
        //'restart',
        'rewind',
        'play',
        'fast-forward',
        'progress',
        'current-time',
        'duration',
        'mute',
        'volume',
       // 'captions',
        'settings',
         'download',
        'fullscreen',
    ];

    // Setup the player 
    const players = Plyr.setup('.js-player', {
      controls,
      seekTime: 15,
    });

Next, create a default html with the class intended in the js-player script which is in the div class sticky. Where will later maintain the position of the player at the bottom of the screen.

    <div id="audio-podcasts" class="sticky shadow d-none">
          <audio id="player" class="js-player" controls>
            <source src="{$res_data_cat.0.media_url}" type="audio/mp3" />
          </audio>
    </div>

Script JS

In the script I run a trigger with a click which will run the script adding various html and css components; this is one solution to change the html structure from the default plyr. And at the end of the script run the plyAudio() function.

      // // handel click audio program
      $(".play-mp3").click(function(){

        if($("#audio-podcasts").hasClass('d-none')){
            $("#audio-podcasts").removeClass('d-none');
            $(".gototop.js-top").css('bottom','90px');
            $(".corner-ribbon.bottom-left").css({'bottom':'100px', 'z-index': '887'});
            $('.plyr__controls').prepend('<div id="title-podcast" class="col-md-5 text-start d-none d-md-block"></div>');
            $('.plyr__controls').prepend(`
              <div id="modal-pod" class="mx-2 me-md-3 click" data-bs-toggle="modal" data-bs-target="">
              <i class="fas fa-chevron-up"></i>
              </div>
           `); 


            $("[data-plyr=fast-forward]").append(`<img src="img/fwd15scnd.svg" style="width: 18px" alt="">`);
            $("[data-plyr=fast-forward]").css({'padding': '0px 7px 5px', 'margin-right':'auto'});
            $("[data-plyr=fast-forward] svg").css('height', '0px');
            $("[data-plyr=fast-forward]").addClass('ff');


            $("[data-plyr=rewind]").append(`<img src="img/back15scnd.svg" style="width: 18px" alt="">`);
            $("[data-plyr=rewind]").css('padding', '0px 7px 5px');
            $("[data-plyr=rewind] svg").css('height', '0px');
        }

       let select = $(this);
       plyAudio(select);

      })

plyAudio() serves to retrieve all the necessary data, both title, description and audio url. Once fetched it will be sent to the previously created html container.

function plyAudio(selector, e=1){
        if (e == 1){
          // focus on this script only
          var src = selector.attr('src-mp3');
          var title = selector.attr('title-mp3');
          var cat = selector.attr('cat-mp3');
          var num = selector.attr('num');
        } else {
          //this part for handle next/prev plyer
          var src = selector.srcMp3;
          var title = selector.titleMp3;
          var cat = selector.catMp3;
          var num = selector.numMp3;
        }
        $("#audio-podcasts audio source").attr("src", src);
        $('#audio-podcasts a[data-plyr="download"]').attr("href", `dl.php?q=${src}`);

        $('.plyr__controls #title-podcast').html(`
          <p class="mb-0"style="font-size: 90%"><b>${title}</b><br>
          <small class="text-muted">${cat}</small></p>
          `);

        $('#modal-pod').attr('data-bs-target', `#portfolioModal${num}` );

        let audio =  $("#audio-podcasts audio");
         audio[0].load();
         audio[0].play();

      }

CSS

This css will modify the default Plyr.js style. which focuses on changing the layout of the player component.

.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

#audio-podcasts .plyr .plyr__controls__item.plyr__progress__container{
    position: absolute;
    bottom: 63px;
    width: 99.4%;
    left: 0;
}

#audio-podcasts .plyr__controls{
    height: 75px!important
}

.plyr--audio .plyr__progress__buffer {
    color: rgba(193,201,209,.66);
    background-color: #9e9e9e;
}

.plyr--full-ui .plyr__progress input[type=range]::-moz-range-thumb {
 height:20px;
 width:20px
}

#audio-podcasts.shadow {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.57) !important;
}

.plyr__controls .plyr__controls__item:first-child {
    margin-right: unset;
}
a {
    text-decoration: unset;
}
small,
small svg{
  font-size: 80%!important;
}

.plyr__controls__item.plyr__control.ff{
  margin-left: 10px;
}


[data-plyr=rewind]{
  margin-right: 10px;
}


.click {
  cursor: pointer;
}

.page-section1 {
    padding: 1rem 0;
}

Mobile friendly

In order for the player to be mobile friendly, add css with the following root tampis, where the title and description will be hidden.

@media (max-width: 350px) {
    .plyr__volume input[type="range"]{
      width: 60px;
      position: absolute;
      top: -10px;
    } 
}

@media (max-width: 992px) {
    #audio-podcasts .plyr .plyr__controls__item.plyr__progress__container{
        width: 97.6%;
    }

    .plyr__controls__item.plyr__control.ff{
      margin-left: unset;
    }


    [data-plyr=rewind]{
      margin-right: inherit;
    }

}

Done

Active Tab When Open with Url-Tab Shareable

andysaktia — Thu, 30 Sep 2021 02:25:00 +0000

In this case, in one page having bootstrap tabs, the problem arises when the user wants to share content based on the tabs has has opened (not the first tab which is usually the default).

Purpose

Open destination tab when open window with url

Prerequire

Bootstrap; js tab function
Jquery and javascript

Script

To activate the tab, first create an activeTab function with a known pattern name parameter. After that I just activate the function. Note: In this part important to understanding js tab in Bootstrap!

//<1>
    function activaTab(tab){
          let someTabTriggerEl = $('.nav-tabs button[data-bs-target="#nav-' + tab + '"]')
          let tab = new bootstrap.Tab(someTabTriggerEl)
          tab.show()
    };

Before executing activeTab function, I need to fetch all tab items with jquery selector with class attribute tag-tab. The html tab item is as follows <span id="audio" class="tab-tag">Audio</span> , then performs a query with the condition that the id attribute is the same as tagUrl, which is obtained from the split url with the split attribute #, e.g. http:/website.org/page.php#audio.

//<2>
    // get URl
    let curentUrl = window.location.href;
    var tagUrl = curentUrl.split("#")[1];

    // query tab to active function <1>
    var arrTag = $('.tab-tag');
    if (typeof tagUrl !== "undefined") {
      arrTag.each(function(){
          let tagSpesific = ($(this).attr('id'));
          if (tagSpesific == tagUrl){ 
            activaTab(tagUrl);
          }
      });
    }

Done

Url Button in Apply Filter will Change by Parameter Filter Choice

andysaktia — Thu, 30 Sep 2021 00:58:54 +0000

When I create a filter, and have multiple categories, I decide to fetch some and the rest in the bootstrap modal. The problem is that I want the modal filter to work like in archive.org where the user selects first and then applies the filter to the page.

Purpose

Change Applay Filter url for summit with various categories choice.

Prerequire

Javascripts; function, for
jQuery; selection and onclick features

Script

Pada buttom apply filter menggunakan id berpola applyName dan juga menyertakan nilai url terkait <buttom id="applyTag" url="http://www...>" yang kemudian akan di handle script berikut.

//<1>
$('#applyTag').on('click', function () {
   goUrlFilter('tag', this);
});

Dimana fungsi goUrlFilter akan mengubah parameter url yang dimiliki buttom sesuai dengan kategori yang di check, tentunya dalam fungsi akan mengambil setiap kategori yang memiliki parameter name=tag di tag inputnya.

//<2>
function goUrlFilter(paramName, address){
  var markedCheckbox = document.getElementsByName(paramName);
  var url = $(address).attr('url');

  for (var checkbox of markedCheckbox) {
    if (checkbox.checked){
      url = url + '[' +  checkbox.value + ']';
    }
  }
   window.location.href = url;
};

Untuk kasus filter yang banyak, untuk menjalankan fungsi, saya perlu sedikit trik, dengan menambahkan class btnApply pada setiap buttom applay, kemudian baru melakukan query untuk menjalankan script <1>.

//<3>
let btnApply = $('.btnApply');

btnApply.each(function(){
      let idApply = $(this).attr('id');
      let nameApply = idApply.split('apply')[1].toLowerCase();
      $(`#${idApply}`).on('click', function () {
         goUrlFilter(nameApply, this);
      });
});

Done

View Switch: Last Buttom View Choice (Grid or Line) not Change When Refresh/change page

andysaktia — Wed, 29 Sep 2021 05:55:36 +0000

When creating two views i.e. grid and view I also include a button to switch from one to the other. The problem is when you go to a new page/refresh the page, the display is returned to the initial mode, not the view that has been selected. The following script wants to solve this problem.

Purpose

Creates view parameters that are saved and checked every time a new page is opened, and immediately activates the view button according to the saved view parameters

Prerequire

Bootstrap classes; d-none
Jquery; selection, on click
Javascripts; localStore, function

Script

function createItem(typeView) {
  localStorage.myview = typeView;
}


function switchView(options){
    $('#view-option .button-view').addClass('off-view');
    if (options == 'grid'){
      $('#book-view-list').addClass('d-none');
      $('#book-view-grid').removeClass('d-none');
      $('#view-option .button-view[view="grid"]').removeClass('off-view');

    } else {
      $('#book-view-grid').addClass('d-none');
      $('#book-view-list').removeClass('d-none');
      $('#view-option .button-view[view="list"]').removeClass('off-view');
    }
}


$('#view-option .button-view').on('click', function() {
  var option = $(this).attr('view');
  createItem(option);
  switchView(option);

});

// Crosscheck parameter page begin here!
let myView = localStorage.getItem("myview");

if (myView != null){
  switchView(myView);
}

The principle of this script

The script function consists of two, namely the createItem function to store view parameters, besides that there is a switchView function which is a parameter to change the view with if logic script, which acts to change the css view to show/hide the grid/list view.

The active script requires an active click trigger, which executes the createItem and switchView functions; it should be noted that the button view html section has been given a parameter view=grid or view=list, so by taking one of these parameters to be stored and passed to the view switch.

The last script to check the parameters that have been saved and run the switch based on the parameters.

Collapse Bootstrap with History :)

andysaktia — Wed, 29 Sep 2021 01:59:43 +0000

One day I was working on a web project, with the collapse feature of bootstrap, I use this feature for product facets/category content. Since there were many collapses, five to be precise, there was a problem I encountered and this is the purpose of this script to work.

Purpose

Create a collapse hide/show based on the previous treatment.

Prerequire

Bootstrap class collapse; aria-expanded for status collapse and data-bs-target for target id collapse
Javascript; each, if statement, understanding in localStorage
Jquery; selection and on click

Script

 let collFilter = $('.accordion-button');
 collFilter.each(function(){
     let collapse = ($(this).attr('data-bs-target'));
     let viewColl = $(this).attr('data-bs-target').replace('#',''); 

     //set first time check
      let cek = localStorage.getItem(viewColl);
      if (cek == 'false'){ 
        $(`#${viewColl}`).removeClass('show');
        $(`[data-bs-target="${collapse}"]`).attr('aria-expanded', 'false')
        $(`[data-bs-target="${collapse}"]`).addClass('collapsed')
      }

     //handle store status collapse
     $(`[data-bs-target="${collapse}"]`).on('click', function(){
        let stat = $(this).attr('aria-expanded')
        localStorage.setItem (viewColl, stat);
     });
 });

The principle of this script

Retrieve attribute data contained in data-bs-target then to do each to handle all collapses at once. After that use the localStore js function to save the collapse state contained in aria-expanded. When it is saved, window will check all localStore which is false, if false script will handle css to uncollapse (in my case default collapse is open/show)

Bonus

Make my collapse automatic close in mobile view; like in archive.org.

if (window.screen.width <= 768) {
  $('.accordion-collapse').removeClass('show');
}

Script Looping mkdir

andysaktia — Sat, 09 Jan 2021 11:37:19 +0000

English

At this time I want to create a folder on a different dir, but with the same folder placement, for example; dir1/folder, dir2/folder/folder1 dst, and repeated with folder names and multilevel folder placements as well.

Initially I will do this using the sh script related to mkdir dir1/folder etc., but I want to make a script so that this activity can be repeated later by changing the parameters:

Stages:

Declaration of path name and array with folder name
Looping script with for
Save the file name_script.sh
Run the script in terminal $sh name_script.sh or $ ./name_script.sh

Indonesia

Pada kali ini saya ingin melakukan pembuatan folder pada dir yang berbeda, namun dengan peletakan folder yang sama, semisal; dir1/folder, dir2/folder/folder1dst, serta dilakukan berulang dengan nama folder dan penempatan folder yang bertingkat juga.

Awalnya akan mengerjakan ini dengan menggunakan script sh terkait mkdir dir1/folder dst, namun saya ingin membuat script agar kegiatan ini nanti dapat diguanakan berulang lagi dengan menggati parameternya saja:

Tahapan:

Deklarasi path name dan array dengan name folder
Melakukan script looping dengan for
Save file name_script.sh
Jalankan script di terminal $ sh name_script.sh atau $ ./name_script.sh

Code

ch="dir1/folder/folder2/"  
declare -a arr=("folder/" "folder/folder1"  "folder/folder1/folder2")

for i in "${arr[@]}"
do 
   mkdir $ch$i 
done

DONE

Update Default Date Display

andysaktia — Wed, 06 Jan 2021 07:51:16 +0000

This time I will process the data that appears on the page with special conditions, where when today is Saturday or Sunday, the date will display the previous date, namely Friday.

Stages:

Today's date, time form and day number (w)
Giving the day deduction parameter ($minus)
Update the date to be displayed ($t)

    $today= date('Y-m-d'); // bisa diganti dengan GETtanggal 
    $time = strtotime($today);
    $day_num = date('w', $time);

    if ($day_num == '0') {
      $minus = '-2 day';
    } elseif ($day_num == '6') {
      $minus = '-1 day';
    } else {
      $minus = '0 day';
    }

    $t = strtotime($today . $minus);
    $t = date('Y-m-d', $t);

  // case date adalah hari ini
    $day_num = date('w'); 

    if ($day_num == '0') {
      $minus = '-2 day';
    } elseif ($day_num == '6') {
      $minus = '-1 day';
    } else {
      $minus = '0 day';
    }

    $t = date('Y-m-d', strtotime($minus));

DONE

AJAX dengan Loadmore

andysaktia — Tue, 05 Jan 2021 09:01:42 +0000

Saya telah mencoba dengan beberapa cara pemanggilan data url json menggunakan javascript, namun beberapa kali mengalami error permasalahan akses. Namun setelah menemukan pluggin load-more, saya jadi terbantukan. Dalam kasus saya, saya menggunakan backend server menggunakan php, sehingga pemanggilan data akan enak menggunakan php juga, namun agar AJAX dapat bekerja dengan baik perlu bantuan pluggin ini agar dapat mempermudah proses script.

Persiapan

Pemanggilan data json di php
Penggunaan Jqueary

1. Pemanggilan Data

Pertama-tama saya perlu memanggil data json yang berupa url.

public function getApi($parameter1, $parameter2)
  {
    $parameter1= preg_replace('/\s/is', '+', $parameter1);
    $url =  API_URL_UMUM . $parameter1 .'&mode=json&version=' . $parameter2;
    $json = file_get_contents($url);
    $ret = json_decode( $json, TRUE );

    return $ret;
  }

2. Pembuatan komponen html

Pembuatannya tentu saja dengan page, misal ajax.html, yang berbeda dari page yang akan memerlukan fitur ini, misal index.html. Berikut adalah html yang akan dihandel js pada index.html.

<span class="dropdown-item load-more link"
      parameter2="tb"
      title-version="Foo Bar" >
Foo Bar
</span>
<div id='version-bible'></div>

Bagian ajax.html saya handel foreach data sesuai ajax.php saya

{foreach $api as $items} 
         <div>{$items.texts.parameter1}:{$item.texts.parameter2} 
{/foreach}

3. Komonen Javascript

Setelah disetting plugin nya pada page utama baik css dan js nya. perlu dilakukan set js sesuai komponen. Dalam kasus saya setiap komponen yang memiliki class load-more akan menghandel ajax dari halaman ajax.html

  $('.load-more').click(function(){
        // replace parameter sesuai keinginan dalam kasus saya spasi saya ganti +, dan parameter sudah didiclare sebelemuny.
    let parameter1 = parameter1.replace(' ', '+');
    let parameter2= $(this).attr('parameter2');
    let title = $(this).attr('title-version');

        // Set url api sesuai parameter
    let url = baseUrl + 'ajax/api-text.php?parameter1=' + passage1 +'&parameter2=' + parameter2 + '&mode=json';

       // handel tindakan yang perlu dalam kasus saya container mau saya bersihkan dan ganti judulnya dengan title 
       $('#version-con').html('');
       $('.title-text').html(title);

     // Jalankan load more js nya
     $(this).loadMore({
      elementId: 'version-con',
      containerSelector: '#version-con',
      requestUrl: url,
      loadingSelector: '#loading-main',
     })

      // test error
    console.log(url);

  });

DONE