Download all files FTP
This commit is contained in:
@@ -0,0 +1,190 @@
|
||||
<?php
|
||||
|
||||
/*! ============================================================================
|
||||
* UI CTRL NAMESPACE: Used to store custom Javascript Controls
|
||||
* =========================================================================== */
|
||||
?><script>
|
||||
|
||||
(function ($) {
|
||||
|
||||
/**
|
||||
* Creates a flat tab re-usable tab system
|
||||
*
|
||||
* @param string id The DOM element of the id to generate the tabs
|
||||
* @returns void
|
||||
*
|
||||
* @example:
|
||||
*
|
||||
* <script> Duplicator.UI.Ctrl.tabsFlat('tabs-flat-id'); <script>
|
||||
*
|
||||
* <div id="tabs-flat-id" class="dup-tabs-flat">
|
||||
* <div class="data-tabs">
|
||||
* <a href="javascript:void(0)" class="tab active">tab-1</a>
|
||||
* <a href="javascript:void(0)" class="tab">tab-2</a>
|
||||
* </div>
|
||||
* <div class="data-panels">
|
||||
* <div class="panel">p-1</div>
|
||||
* <div class="panel">p-2</div>
|
||||
* </div>
|
||||
* </div>
|
||||
*
|
||||
*/
|
||||
Duplicator.UI.Ctrl.tabsFlat = function(id) {
|
||||
var keyTabs = `#${id}.dup-tabs-flat > div.data-tabs`;
|
||||
var keyPnls = `#${id}.dup-tabs-flat > div.data-panels`;
|
||||
var $panels = $(`${keyPnls} > div.panel`);
|
||||
var startIndex = $(`${keyTabs} > a.tab.active`).index('a.tab');
|
||||
|
||||
//Register Click Event
|
||||
$(`${keyTabs} > a.tab`).on('click', function() {
|
||||
|
||||
var index = $(this).index('a.tab');
|
||||
|
||||
//Hide all
|
||||
$(`${keyTabs} > a.tab`).removeClass('active');
|
||||
$(`${keyPnls} > div.panel`).hide();
|
||||
|
||||
//Show active
|
||||
$(this).addClass('active');
|
||||
$($panels.get(index)).show();
|
||||
});
|
||||
|
||||
//init
|
||||
$($panels.get(startIndex)).show();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Creates a vertical tab re-usable tabbing system
|
||||
*
|
||||
* @param string id The DOM element of the id to generate the tabs
|
||||
* @returns void
|
||||
*
|
||||
* @example:
|
||||
*
|
||||
* <script> Duplicator.UI.Ctrl.tabsVert('tab-id'); < /script>
|
||||
*
|
||||
* <div id="tab-id" class="dup-tabs-vert">
|
||||
* <div class="data-tabs">
|
||||
* <div class="void">text</div>
|
||||
* <div class="tab active">tab-1</div>
|
||||
* <div class="tab">tab-2</div>
|
||||
* </div>
|
||||
* <div class="data-panels">
|
||||
* <div class="panel">panel-1</div>
|
||||
* <div class="panel">panel-2</div>
|
||||
* </div>
|
||||
* </div>
|
||||
*
|
||||
*/
|
||||
Duplicator.UI.Ctrl.tabsVert = function(id) {
|
||||
|
||||
var keyTabs = `#${id}.dup-tabs-vert > div.data-tabs`;
|
||||
var keyPnls = `#${id}.dup-tabs-vert > div.data-panels`;
|
||||
var $panels = $(`${keyPnls} > div.panel`);
|
||||
var startIndex = $(`${keyTabs} > div.tab.active`).index('div.tab');
|
||||
|
||||
/*Click Event: */
|
||||
$(`${keyTabs} div.tab`).on('click', function() {
|
||||
|
||||
var index = $(this).index('div.tab');
|
||||
var $panels = $(`${keyPnls} > div.panel`);
|
||||
|
||||
//Hide all
|
||||
$(`${keyTabs} > div.tab`).removeClass('active');
|
||||
$(`${keyPnls} > div.panel`).hide();
|
||||
|
||||
//Show active
|
||||
$(this).addClass('active');
|
||||
$($panels.get(index)).show();
|
||||
});
|
||||
|
||||
//init
|
||||
$($panels.get(startIndex)).show();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Toggles the spinner for the help item
|
||||
*
|
||||
* @param string id The DOM element of the id to generate the spinner
|
||||
* @param string height The CSS height of the spinner control (default 250px)
|
||||
* @param string width The CSS width of the spinner control (default 100%)
|
||||
* @returns void
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* <script> Duplicator.UI.Ctrl.Spinner('spinner-id'); < /script>
|
||||
*
|
||||
* <div id="spinner-id" class="dup-spinner">
|
||||
* <div class="area-left">
|
||||
* <i class="fas fa-chevron-circle-left area-arrow"></i>
|
||||
* </div>
|
||||
* <div class="area-data">
|
||||
* <div class="item active">panel-1</div>
|
||||
* <div class="item">panel-2</div>
|
||||
* </div>
|
||||
* <div class="area-right">
|
||||
* <i class="fas fa-chevron-circle-right"></i>
|
||||
* </div>
|
||||
* <div class="area-nav">
|
||||
* <span class="num"></span>
|
||||
* <progress class="progress"></progress>
|
||||
* </div>
|
||||
* </div>
|
||||
*
|
||||
*/
|
||||
Duplicator.UI.Ctrl.Spinner = class {
|
||||
|
||||
//Setup the Object
|
||||
constructor(id, height='350px', width='100%') {
|
||||
this.id = id;
|
||||
this.height = height;
|
||||
this.width = width;
|
||||
this.items = $(`#${id} > .area-data > .item`);
|
||||
this.maxItems = this.items.length - 1;
|
||||
this.init();
|
||||
}
|
||||
|
||||
//Initilize the object for use
|
||||
init() {
|
||||
var id = this.id;
|
||||
var $items = this.items;
|
||||
var max = this.maxItems
|
||||
var start = $(`#${id} .item.active`).index() + 1;
|
||||
|
||||
/*Click Event: Left/Right */
|
||||
$(`#${id} > .area-right, #${id} > .area-left`).on('click', function() {
|
||||
|
||||
var index = $(`#${id} .item.active`).index();
|
||||
|
||||
//Left or Right
|
||||
index = ($(this).hasClass('area-right'))
|
||||
? (index >= max) ? 0 : index + 1
|
||||
: (index === 0) ? max : index - 1;
|
||||
|
||||
$items.removeClass('active').hide();
|
||||
$($items[index]).addClass('active').show();
|
||||
|
||||
//Progress bar
|
||||
$(`#${id} .num`).html(`${index + 1} of ${max + 1}`);
|
||||
$(`#${id} progress`).val(index + 1);
|
||||
});
|
||||
|
||||
//init
|
||||
$(`#${id} div.area-nav progress`).attr('max', `${max + 1}`);
|
||||
$(`#${id} div.area-nav progress`).attr('value', '1');
|
||||
$(`#${id} div.area-nav .num`).html(`${start} of ${max + 1}`);
|
||||
$(`#${id}.dup-spinner`).css({'height' : this.height, 'width' : this.width});
|
||||
}
|
||||
|
||||
//Set the active panel to the index provided
|
||||
setPanel(index) {
|
||||
this.items.removeClass('active').hide();
|
||||
$(this.items.get(index)).addClass('active').show();
|
||||
$(`#${this.id} .num`).html(`${index + 1} of ${this.maxItems + 1}`);
|
||||
$(`#${this.id} progress`).val(index + 1);
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
</script>
|
||||
Reference in New Issue
Block a user