Call an image on button click Toast UI Image

Call an image on button click Toast UI Image - javascript

I am trying to add an image on button click like we call an icon or shape in TUI image editor Mobile. So for this, I added the following code in service-mobile.js
var $btnAddImageShade = $('#btn-add-image-shade');
$btnAddImageShade.on('click', function() {
imageEditor.addImageObject('img/shade1.png').then(objectProps => {
imageEditor.setObjectPosition(objectProps.id, {
x: 530,
y: 0,
originX: 'left',
originY: 'top'
});
});
});
and on the main page
<button class="submenu-button" id="btn-add-image-shade">Image 1</button>
is it a correct code to call an image on button click?
/**
* mobile.js
* #author NHN Ent. FE Development Team <dl_javascript#nhn.com>
* #fileoverview
*/
/* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity */
'use strict';
var MAX_RESOLUTION = 3264 * 2448; // 8MP (Mega Pixel)
var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
var rImageType = /data:(image\/.+);base64,/;
var shapeOpt = {
fill: '#fff',
stroke: '#000',
strokeWidth: 10
};
var activeObjectId;
// Selector of image editor controls
var submenuClass = '.submenu';
var hiddenmenuClass = '.hiddenmenu';
var $controls = $('.tui-image-editor-controls');
var $menuButtons = $controls.find('.menu-button');
var $submenuButtons = $controls.find('.submenu-button');
var $btnShowMenu = $controls.find('.btn-prev');
var $msg = $controls.find('.msg');
var $subMenus = $controls.find(submenuClass);
var $hiddenMenus = $controls.find(hiddenmenuClass);
// Image editor controls - top menu buttons
var $inputImage = $('#input-image-file');
var $btnDownload = $('#btn-download');
var $btnUndo = $('#btn-undo');
var $btnRedo = $('#btn-redo');
var $btnRemoveActiveObject = $('#btn-remove-active-object');
// Image editor controls - bottom menu buttons
var $btnCrop = $('#btn-crop');
var $btnAddText = $('#btn-add-text');
// Image editor controls - bottom submenu buttons
var $btnApplyCrop = $('#btn-apply-crop');
var $btnFlipX = $('#btn-flip-x');
var $btnFlipY = $('#btn-flip-y');
var $btnRotateClockwise = $('#btn-rotate-clockwise');
var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
var $btnAddArrowIcon = $('#btn-add-arrow-icon');
var $btnAddCancelIcon = $('#btn-add-cancel-icon');
var $btnAddCustomIcon = $('#btn-add-custom-icon');
var $btnAddImageShade = $('#btn-add-image-shade');
var $btnFreeDrawing = $('#btn-free-drawing');
var $btnLineDrawing = $('#btn-line-drawing');
var $btnAddRect = $('#btn-add-rect');
var $btnAddSquare = $('#btn-add-square');
var $btnAddEllipse = $('#btn-add-ellipse');
var $btnAddCircle = $('#btn-add-circle');
var $btnAddTriangle = $('#btn-add-triangle');
var $btnChangeTextStyle = $('.btn-change-text-style');
// Image editor controls - etc.
var $inputTextSizeRange = $('#input-text-size-range');
var $inputBrushWidthRange = $('#input-brush-range');
var $inputStrokeWidthRange = $('#input-stroke-range');
var $inputCheckTransparent = $('#input-check-transparent');
// Colorpicker
var iconColorpicker = tui.colorPicker.create({
container: $('#tui-icon-color-picker')[0],
color: '#000000'
});
var textColorpicker = tui.colorPicker.create({
container: $('#tui-text-color-picker')[0],
color: '#000000'
});
var brushColorpicker = tui.colorPicker.create({
container: $('#tui-brush-color-picker')[0],
color: '#000000'
});
var shapeColorpicker = tui.colorPicker.create({
container: $('#tui-shape-color-picker')[0],
color: '#000000'
});
// Create image editor
var imageEditor = new tui.ImageEditor('.tui-image-editor', {
cssMaxWidth: document.documentElement.clientWidth,
cssMaxHeight: document.documentElement.clientHeight,
selectionStyle: {
cornerSize: 50,
rotatingPointOffset: 100
}
});
var $displayingSubMenu, $displayingHiddenMenu;
function hexToRGBa(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
var a = alpha || 1;
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
}
function base64ToBlob(data) {
var mimeString = '';
var raw, uInt8Array, i, rawLength;
raw = data.replace(rImageType, function(header, imageType) {
mimeString = imageType;
return '';
});
raw = atob(raw);
rawLength = raw.length;
uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
for (i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: mimeString});
}
function getBrushSettings() {
var brushWidth = $inputBrushWidthRange.val();
var brushColor = brushColorpicker.getColor();
return {
width: brushWidth,
color: hexToRGBa(brushColor, 0.5)
};
}
function activateShapeMode() {
imageEditor.stopDrawingMode();
}
function activateIconMode() {
imageEditor.stopDrawingMode();
}
function activateTextMode() {
if (imageEditor.getDrawingMode() !== 'TEXT') {
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('TEXT');
}
}
function setTextToolbar(obj) {
var fontSize = obj.fontSize;
var fontColor = obj.fill;
$inputTextSizeRange.val(fontSize);
textColorpicker.setColor(fontColor);
}
function setIconToolbar(obj) {
var iconColor = obj.fill;
iconColorpicker.setColor(iconColor);
}
function setImageToolbar(obj) {
//var iconColor = obj.fill;
return obj;
//iconColorpicker.setColor(iconColor);
}
function setShapeToolbar(obj) {
var strokeColor, fillColor, isTransparent;
var colorType = $('[name="select-color-type"]:checked').val();
if (colorType === 'stroke') {
strokeColor = obj.stroke;
isTransparent = (strokeColor === 'transparent');
if (!isTransparent) {
shapeColorpicker.setColor(strokeColor);
}
} else if (colorType === 'fill') {
fillColor = obj.fill;
isTransparent = (fillColor === 'transparent');
if (!isTransparent) {
shapeColorpicker.setColor(fillColor);
}
}
$inputCheckTransparent.prop('checked', isTransparent);
$inputStrokeWidthRange.val(obj.strokeWith);
}
function showSubMenu(type) {
var index;
switch (type) {
case 'shape':
index = 3;
break;
case 'icon':
index = 4;
break;
case 'text':
index = 5;
break;
default:
index = 0;
}
$displayingSubMenu.hide();
$displayingHiddenMenu.hide();
$displayingSubMenu = $menuButtons.eq(index).parent().find(submenuClass).show();
}
// Bind custom event of image editor
imageEditor.on({
undoStackChanged: function(length) {
if (length) {
$btnUndo.removeClass('disabled');
} else {
$btnUndo.addClass('disabled');
}
},
redoStackChanged: function(length) {
if (length) {
$btnRedo.removeClass('disabled');
} else {
$btnRedo.addClass('disabled');
}
},
objectScaled: function(obj) {
if (obj.type === 'text') {
$inputTextSizeRange.val(obj.fontSize);
}
},
objectActivated: function(obj) {
activeObjectId = obj.id;
if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
showSubMenu('shape');
setShapeToolbar(obj);
activateShapeMode();
} else if (obj.type === 'icon') {
showSubMenu('icon');
setIconToolbar(obj);
activateIconMode();
} else if (obj.type === 'text') {
showSubMenu('text');
setTextToolbar(obj);
activateTextMode();
}
}
});
// Image editor controls action
$menuButtons.on('click', function() {
$displayingSubMenu = $(this).parent().find(submenuClass).show();
$displayingHiddenMenu = $(this).parent().find(hiddenmenuClass);
});
$submenuButtons.on('click', function() {
$displayingHiddenMenu.hide();
$displayingHiddenMenu = $(this).parent().find(hiddenmenuClass).show();
});
$btnShowMenu.on('click', function() {
$displayingSubMenu.hide();
$displayingHiddenMenu.hide();
$msg.show();
imageEditor.stopDrawingMode();
});
// Image load action
$inputImage.on('change', function(event) {
var file;
var img;
var resolution;
if (!supportingFileAPI) {
alert('This browser does not support file-api');
}
file = event.target.files[0];
if (file) {
img = new Image();
img.onload = function() {
resolution = this.width * this.height;
if (resolution <= MAX_RESOLUTION) {
imageEditor.loadImageFromFile(file).then(() => {
imageEditor.clearUndoStack();
});
} else {
alert('Loaded image\'s resolution is too large!\nRecommended resolution is 3264 * 2448!');
}
URL.revokeObjectURL(file);
};
img.src = URL.createObjectURL(file);
}
});
// Undo action
$btnUndo.on('click', function() {
if (!$(this).hasClass('disabled')) {
imageEditor.undo();
}
});
// Redo action
$btnRedo.on('click', function() {
if (!$(this).hasClass('disabled')) {
imageEditor.redo();
}
});
// Remove active object action
$btnRemoveActiveObject.on('click', function() {
imageEditor.removeObject(activeObjectId);
});
// Download action
$btnDownload.on('click', function() {
var imageName = imageEditor.getImageName();
var dataURL = imageEditor.toDataURL();
var blob, type, w;
if (supportingFileAPI) {
blob = base64ToBlob(dataURL);
type = blob.type.split('/')[1];
if (imageName.split('.').pop() !== type) {
imageName += '.' + type;
}
// Library: FileSaver - saveAs
saveAs(blob, imageName); // eslint-disable-line
} else {
alert('This browser needs a file-server');
w = window.open();
w.document.body.innerHTML = '<img src=' + dataURL + '>';
}
});
// Crop menu action
$btnCrop.on('click', function() {
imageEditor.startDrawingMode('CROPPER');
});
$btnApplyCrop.on('click', function() {
imageEditor.crop(imageEditor.getCropzoneRect()).then(() => {
imageEditor.stopDrawingMode();
$subMenus.removeClass('show');
$hiddenMenus.removeClass('show');
});
});
// Orientation menu action
$btnRotateClockwise.on('click', function() {
imageEditor.rotate(90);
});
$btnRotateCounterClockWise.on('click', function() {
imageEditor.rotate(-90);
});
$btnFlipX.on('click', function() {
imageEditor.flipX();
});
$btnFlipY.on('click', function() {
imageEditor.flipY();
});
// Icon menu action
$btnAddArrowIcon.on('click', function() {
imageEditor.addIcon('arrow');
});
$btnAddCancelIcon.on('click', function() {
imageEditor.addIcon('cancel');
});
$btnAddCustomIcon.on('click', function() {
imageEditor.addIcon('customArrow');
});
$btnAddImageShade.on('click', function() {
imageEditor.addImageObject('img/shade1.png');
});
iconColorpicker.on('selectColor', function(event) {
imageEditor.changeIconColor(activeObjectId, event.color);
});
// Text menu action
$btnAddText.on('click', function() {
var initText = 'DoubleClick';
imageEditor.startDrawingMode('TEXT');
imageEditor.addText(initText, {
styles: {
fontSize: parseInt($inputTextSizeRange.val(), 10)
}
});
});
$btnChangeTextStyle.on('click', function() {
var styleType = $(this).attr('data-style-type');
var styleObj = {};
var styleObjKey;
switch (styleType) {
case 'bold':
styleObjKey = 'fontWeight';
break;
case 'italic':
styleObjKey = 'fontStyle';
break;
case 'underline':
styleObjKey = 'underline';
break;
case 'left':
styleObjKey = 'textAlign';
break;
case 'center':
styleObjKey = 'textAlign';
break;
case 'right':
styleObjKey = 'textAlign';
break;
default:
styleObjKey = '';
}
styleObj[styleObjKey] = styleType;
imageEditor.changeTextStyle(activeObjectId, styleObj);
});
$inputTextSizeRange.on('change', function() {
imageEditor.changeTextStyle(activeObjectId, {
fontSize: parseInt($(this).val(), 10)
});
});
textColorpicker.on('selectColor', function(event) {
imageEditor.changeTextStyle(activeObjectId, {
fill: event.color
});
});
// Draw line menu action
$btnFreeDrawing.on('click', function() {
var settings = getBrushSettings();
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('FREE_DRAWING', settings);
});
$btnLineDrawing.on('click', function() {
var settings = getBrushSettings();
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('LINE_DRAWING', settings);
});
$inputBrushWidthRange.on('change', function() {
imageEditor.setBrush({
width: parseInt($(this).val(), 10)
});
});
brushColorpicker.on('selectColor', function(event) {
imageEditor.setBrush({
color: hexToRGBa(event.color, 0.5)
});
});
// Add shape menu action
$btnAddRect.on('click', function() {
imageEditor.addShape('rect', tui.util.extend({
width: 500,
height: 300
}, shapeOpt));
});
$btnAddSquare.on('click', function() {
imageEditor.addShape('rect', tui.util.extend({
width: 400,
height: 400,
isRegular: true
}, shapeOpt));
});
$btnAddEllipse.on('click', function() {
imageEditor.addShape('circle', tui.util.extend({
rx: 300,
ry: 200
}, shapeOpt));
});
$btnAddCircle.on('click', function() {
imageEditor.addShape('circle', tui.util.extend({
rx: 200,
ry: 200,
isRegular: true
}, shapeOpt));
});
$btnAddTriangle.on('click', function() {
imageEditor.addShape('triangle', tui.util.extend({
width: 500,
height: 400,
isRegular: true
}, shapeOpt));
});
$inputStrokeWidthRange.on('change', function() {
imageEditor.changeShape(activeObjectId, {
strokeWidth: parseInt($(this).val(), 10)
});
});
$inputCheckTransparent.on('change', function() {
var colorType = $('[name="select-color-type"]:checked').val();
var isTransparent = $(this).prop('checked');
var color;
if (!isTransparent) {
color = shapeColorpicker.getColor();
} else {
color = 'transparent';
}
if (colorType === 'stroke') {
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
});
shapeColorpicker.on('selectColor', function(event) {
var colorType = $('[name="select-color-type"]:checked').val();
var isTransparent = $inputCheckTransparent.prop('checked');
var color = event.color;
if (isTransparent) {
return;
}
if (colorType === 'stroke') {
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
});
// Load sample image
imageEditor.loadImageFromURL('https://editor.studysciences.com/img/sampleImage.jpg', 'SampleImage').then(() => {
imageEditor.clearUndoStack();
});
<meta name="viewport" content="width=device-width, user-scalable=no">
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link type="text/css" href="https://editor.studysciences.com/css/service-mobile.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript" src="https://editor.studysciences.com/js/tui-image-editor.js"></script>
<!-- Image editor controls - top area -->
<div class="header">
<div>
<span class="name">ImageEditor</span>
</div>
<div class="menu">
<span class="button">
<img src="https://editor.studysciences.com/img/openImage.png" style="margin-top: 5px;" />
<input type="file" accept="image/*" id="input-image-file">
</span>
<button class="button disabled" id="btn-undo"><img src="https://editor.studysciences.com/img/undo.png" /></button>
<button class="button disabled" id="btn-redo"><img src="https://editor.studysciences.com/img/redo.png" /></button>
<button class="button" id="btn-remove-active-object"><img src="https://editor.studysciences.com/img/remove.png" /></button>
<button class="button" id="btn-download"><img src="https://editor.studysciences.com/img/download.png" /></button>
</div>
</div>
<!-- Image editor area -->
<div class="tui-image-editor"></div>
<!-- Image editor controls - bottom area -->
<div class="tui-image-editor-controls">
<ul class="scrollable">
<li class="menu-item">
<button class="menu-button" id="btn-crop">Crop</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-apply-crop">Apply</button></li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button">Orientation</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-rotate-clockwise">Rotate +90</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-rotate-counter-clockwise">Rotate -90</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-flip-x">FilpX</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-flip-y">FilpY</button></li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-draw-line">Drawing</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-free-drawing">Free<br>Drawing</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-line-drawing">Line<br>Drawing</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-size">Brush<br>Size</button>
<div class="hiddenmenu">
<input id="input-brush-range" type="range" min="10" max="100" value="50" />
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-text-color">Brush<br>Color</button>
<div class="hiddenmenu">
<div id="tui-brush-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-draw-shape">Shape</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-add-rect">Rectagle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-square">Square</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-ellipse">Ellipse</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-circle">Circle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-triangle">Triangle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-stroke-size">Stroke<br>Size</button>
<div class="hiddenmenu">
<input id="input-stroke-range" type="range" min="1" max="100" value="10" />
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-shape-color">Color</button>
<div class="hiddenmenu">
<div class="top">
<label for="fill-color"><input type="radio" id="fill-color" name="select-color-type" value="fill" checked="checked" /> Fill</label>
<label for="stroke-color"><input type="radio" id="stroke-color" name="select-color-type" value="stroke" /> Stroke</label>
<label for="input-check-transparent"><input type="checkbox" id="input-check-transparent">Transparent</label>
</div>
<div id="tui-shape-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button">Icon</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-add-arrow-icon">Arrow<br>Icon</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-add-cancel-icon">Cancel<br>Icon</button></li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-icon-color">Color</button>
<div class="hiddenmenu">
<div id="tui-icon-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-add-text">Text</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-change-size">Size</button>
<div class="hiddenmenu">
<input id="input-text-size-range" type="range" min="10" max="240" value="120">
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-style">Style</button>
<div class="hiddenmenu">
<button class="hiddenmenu-button btn-change-text-style" data-style-type="bold"><b>Bold</b></button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="italic"><i>Italic</i></button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="underline"><u>Underline</u></button>
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-align">Align</button>
<div class="hiddenmenu">
<button class="hiddenmenu-button btn-change-text-style" data-style-type="left">Left</button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="center">Center</button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="right">Right</button>
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-text-color">Color</button>
<div class="hiddenmenu">
<div id="tui-text-color-picker"></div>
</div>
</li>
</ul>
</div>
<button class="submenu-button" id="btn-add-image-shade">Image 1</button>
</li>
</ul>
<p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
</div>

Related

Console errors when executing shortcode code

I am writing the following code in the wordpress shortcode:
$(function () {
function setFlatTheme() {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
$(".rad-chk-pin input[type=checkbox]").prop("checked", true);
}
setFlatTheme();
$(window).on("scroll", function (e) {
if ($(window).scrollTop() > 50) {
$("body").addClass("sticky");
} else {
$("body").removeClass("sticky");
}
});
$(document).on("click", function (e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$(".rad-sidebar a").on("click", function (e) {
e.stopPropagation();
});
$(".rad-chat-body").slimScroll({
height: "450px",
color: "#c6c6c6"
});
$(".rad-timeline-body").slimScroll({
height: "450px",
color: "#c6c6c6"
});
$(".rad-activity-body").slimScroll({
height: "250px",
color: "#c6c6c6"
});
$(".rad-toggle-btn").on("click", function () {
$(".rad-logo-container").toggleClass("rad-nav-min");
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
});
$("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
$(".fa-chevron-down").on("click", function () {
var $ele = $(this).parents(".panel-heading");
$ele.siblings(".panel-footer").toggleClass("rad-collapse");
});
$(".fa-close").on("click", function () {
var $ele = $(this).parents(".panel");
$ele.addClass("panel-close");
});
$(".fa-rotate-right").on("click", function () {
var $ele = $(this).parents(".panel-heading").siblings(".panel-body");
$ele.append(
'<div class="overlay"><div class="overlay-content"><i class="fa fa-refresh fa-2x fa-spin"></i></div></div>'
);
});
$("#rad-chat-send").on("click", function () {
var value = $("#rad-chat-txt").val();
var $ele = $(".rad-chat-body");
var img =
"https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg";
if (value) {
$("#rad-chat-txt").val("");
$ele.append(getTempl(img, value, "left"));
$ele.slimScroll({
scrollTo: $ele[0].scrollHeight
});
}
});
$(".rad-chk-pin input[type=checkbox]").change(function (e) {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
var selectedTheme = $(".rad-color-swatch input[type=radio]:checked");
var fillColor = '#C6C6C6';
var scale = ["#C8EEFF", "#0071A4"];
if (this.checked) {
scale = ["#A8ECFF", "#FA71D4"];
fillColor = colorMap[selectedTheme.val()];
}
changeMapColors(fillColor, scale);
});
var colorMap = {
crimson: "crimson",
teal: "#1fb5ad",
orange: "#ff503f",
purple: "rebeccapurple",
twitter: "#55acee"
};
$(".rad-color-swatch input[type=radio]").change(function (e) {
if ($(".rad-chk-pin input[type=checkbox]").is(":checked")) {
$("body").removeClass().addClass("flat-theme").addClass(this.value);
$(".rad-color-swatch label").removeClass("rad-option-selected");
$(this).parent().addClass("rad-option-selected");
$(window).scrollTop(0);
}
});
$(".rad-notification-item").on("click", function (e) {
e.stopPropagation();
});
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js"></script>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<img src="https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" class="tamimg"><span class="letra">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxxxxxxxxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
</ul>
<ul class="pull-right links">
<li>
<span style="font-size: 24px; color: #31547c; font-weight: 600;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxx" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxx.pt/teste.php">
<i class="fa fa-bar-chart-o">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
</main>
But when I consult the console it returns these errors:
jQuery.Deferred exception: $(...).slimScroll is not a function TypeError: $(...).slimScroll is not a function
at HTMLDocument. (:33:22)
at e (https://xxxxxxxxxxxxxxxxxxx.pt/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30005)
at t (https://xxxxxxxxxxxxxx.pt/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30307) undefined
Uncaught TypeError: $(...).slimScroll is not a function
at HTMLDocument.
Uncaught TypeError: Cannot read property 'options' of undefined
Can anyone help?

My guess is that the code is probably running before the page fully loads, try doing
window.onload = function() {
}
or
jQuery.ready(function() {
}

Rails 6 - Uncaught ReferenceError: MStepper is not defined

Please help me with this.
What's wrong? Thanks!

I had the same problem and it fixed adding this js part which I extracted from here
$(document).ready(function() {
$('.stepper').activateStepper();
})
function validateStepOne() {
// Extract the checked checkboxes from the first step
if($('.step').first().find('input[type="checkbox"]:checked').length)
return true;
return false;
}
function validateStepThree() {
var validation = true;
if($('.step:nth-child(3) input[type="text"]').val().indexOf('materialize') === -1)
validation = false;
if($('.step:nth-child(3) input[type="checkbox"]:checked').length === 0)
validation = false;
return validation;
}
function nextStepThreeHandler() {
if(validateStepThree())
$('.stepper').nextStep();
else {
$('.stepper ').destroyFeedback(); $('.stepper').getStep($('.stepper').getActiveStep()).addClass('wrong');
}
}
/* Materializecss Stepper - By Kinark 2016
// https://github.com/Kinark/Materialize-stepper
// JS v2.1.3
*/
var validation = $.isFunction($.fn.valid) ? 1 : 0;
$.fn.isValid = function() {
if(validation){
return this.valid();
} else {
return true;
}
};
if (validation) {
$.validator.setDefaults({
errorClass: 'invalid',
validClass: "valid",
errorPlacement: function (error, element) {
if(element.is(':radio') || element.is(':checkbox')) {
error.insertBefore($(element).parent());
} else {
error.insertAfter(element); // default error placement.
// element.closest('label').data('error', error);
// element.next().attr('data-error', error);
}
},
success: function (element) {
if(!$(element).closest('li').find('label.invalid:not(:empty)').length){
$(element).closest('li').removeClass('wrong');
}
}
});
// When parallel stepper is defined we need to consider invisible and
// hidden fields
if($('.stepper.parallel').length) $.validator.setDefaults({ignore:''});
}
$.fn.getActiveStep = function() {
var active = this.find('.step.active');
return $(this.children('.step:visible')).index($(active))+1;
};
$.fn.activateStep = function(callback) {
if($(this).hasClass('step')) return;
var stepper = $(this).closest('ul.stepper');
stepper.find('>li').removeAttr("data-last");
if(window.innerWidth < 993 || !stepper.hasClass('horizontal')) {
$(this).addClass("step").stop().slideDown(400, function(){
$(this).css({'height':'auto', 'margin-bottom': '','display': 'inherit'});if(callback)callback();
stepper.find('>li.step').last().attr('data-last', 'true');
});
} else {
$(this).addClass("step").stop().css({'width':'0%','display': 'inherit'}).animate({width:'100%'}, 400, function(){
$(this).css({'height':'auto', 'margin-bottom': '','display': 'inherit'});if(callback)callback();
stepper.find('>li.step').last().attr('data-last', 'true');
});
}
};
$.fn.deactivateStep = function(callback) {
if(!$(this).hasClass('step')) return;
var stepper = $(this).closest('ul.stepper');
stepper.find('>li').removeAttr("data-last");
if(window.innerWidth < 993 || !stepper.hasClass('horizontal')) {
$(this).stop().css({'transition':'none', '-webkit-transition':'margin-bottom none'}).slideUp(400, function(){
$(this).removeClass("step").css({'height':'auto','margin-bottom':'','transition':'margin-bottom .4s','-webkit-transition':'margin-bottom .4s'});
if(callback)callback();
stepper.find('>li').removeAttr("data-last");
stepper.find('>li.step').last().attr('data-last', 'true');
});
} else {
$(this).stop().animate({width:'0%'}, 400, function(){
$(this).removeClass("step").hide().css({'height':'auto', 'margin-bottom': '','display': 'none', 'width': ''});
if(callback)callback();
stepper.find('>li.step').last().attr('data-last', 'true');
});
}
};
$.fn.showError = function(error) {
if(validation) {
var name = this.attr('name');
var form = this.closest('form');
var obj = {};
obj[name] = error;
form.validate().showErrors(obj);
this.closest('li').addClass('wrong');
} else {
this.removeClass('valid').addClass('invalid');
this.next().attr('data-error', error);
}
};
$.fn.activateFeedback = function() {
var active = this.find('.step.active:not(.feedbacking)').addClass('feedbacking').find('.step-content');
active.prepend('<div class="wait-feedback"> <div class="preloader-wrapper active"> <div class="spinner-layer spinner-blue"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div><div class="spinner-layer spinner-red"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div><div class="spinner-layer spinner-yellow"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div><div class="spinner-layer spinner-green"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div></div></div>');
};
$.fn.destroyFeedback = function() {
var active = this.find('.step.active.feedbacking');
if(active) {
active.removeClass('feedbacking');
active.find('.wait-feedback').remove();
}
return true;
};
$.fn.resetStepper = function(step) {
if(!step) step = 1;
var form = $(this).closest('form');
$(form)[0].reset();
Materialize.updateTextFields();
return $(this).openStep(step);
};
$.fn.submitStepper = function(step) {
var form = this.closest('form');
if(form.isValid()) {
form.submit();
}
};
$.fn.nextStep = function(callback, activefb, e) {
var stepper = this;
var settings = $(stepper).data('settings');
var form = this.closest('form');
var active = this.find('.step.active');
var next = $(this.children('.step:visible')).index($(active))+2;
var feedback = active.find('.next-step').length > 1 ? (e ? $(e.target).data("feedback") : undefined) : active.find('.next-step').data("feedback");
// If the stepper is parallel, we want to validate the input of the current active step. Not all elements.
if((settings.parallel && $(active).validateStep()) || (!settings.parallel && form.isValid())) {
if(feedback && activefb) {
if(settings.showFeedbackLoader) stepper.activateFeedback();
return window[feedback].call();
}
active.removeClass('wrong').addClass('done');
this.openStep(next, callback);
return this.trigger('nextstep');
} else {
return active.removeClass('done').addClass('wrong');
}
};
$.fn.prevStep = function(callback) {
var active = this.find('.step.active');
if(active.hasClass('feedbacking')) return;
var prev = $(this.children('.step:visible')).index($(active));
active.removeClass('wrong');
this.openStep(prev, callback);
return this.trigger('prevstep');
};
$.fn.openStep = function(step, callback) {
var settings = $(this).closest('ul.stepper').data('settings');
var $this = this;
var step_num = step - 1;
step = this.find('.step:visible:eq('+step_num+')');
if(step.hasClass('active')) return;
var active = this.find('.step.active');
var next;
var prev_active = next = $(this.children('.step:visible')).index($(active));
var order = step_num > prev_active ? 1 : 0;
if(active.hasClass('feedbacking')) $this.destroyFeedback();
active.closeAction(order);
step.openAction(order, function(){
if(settings.autoFocusInput) step.find('input:enabled:visible:first').focus();
$this.trigger('stepchange').trigger('step'+(step_num+1));
if(step.data('event')) $this.trigger(step.data('event'));
if(callback)callback();
});
};
$.fn.closeAction = function(order, callback) {
var closable = this.removeClass('active').find('.step-content');
if(window.innerWidth < 993 || !this.closest('ul').hasClass('horizontal')) {
closable.stop().slideUp(300,"easeOutQuad", callback);
} else {
if(order==1) {
closable.animate({left: '-100%'},function(){closable.css({display: 'none', left: '0%'}, callback);});
} else {
closable.animate({left: '100%'},function(){closable.css({display: 'none', left: '0%'}, callback);});
}
}
};
$.fn.openAction = function(order, callback) {
var openable = this.removeClass('done').addClass('active').find('.step-content');
if(window.innerWidth < 993 || !this.closest('ul').hasClass('horizontal')) {
openable.slideDown(300,"easeOutQuad", callback);
} else {
if(order==1) {
openable.css({left: '100%', display: 'block'}).animate({left: '0%'}, callback);
} else {
openable.css({left: '-100%', display: 'block'}).animate({left: '0%'}, callback);
}
}
};
$.fn.activateStepper = function(options) {
var settings = $.extend({
linearStepsNavigation: true,
autoFocusInput: true,
showFeedbackLoader: true,
autoFormCreation: true,
parallel: false // By default we don't assume the stepper is parallel
}, options);
$(document).on('click', function(e){
if(!$(e.target).parents(".stepper").length){
$('.stepper.focused').removeClass('focused');
}
});
$(this).each(function(){
var $stepper = $(this);
if(!$stepper.parents("form").length && settings.autoFormCreation) {
var method = $stepper.data('method');
var action = $stepper.data('action');
var method = (method ? method : "GET");
action = (action ? action : "?");
$stepper.wrap( '<form action="'+action+'" method="'+method+'"></form>' );
}
$stepper.data('settings', {linearStepsNavigation: settings.linearStepsNavigation,autoFocusInput: settings.autoFocusInput,showFeedbackLoader:settings.showFeedbackLoader, parallel:$stepper.hasClass('parallel')});
$stepper.find('li.step.active').openAction(1);
$stepper.find('>li').removeAttr("data-last");
$stepper.find('>li.step').last().attr('data-last', 'true');
$stepper.on("click", '.step:not(.active)', function () {
var object = $($stepper.children('.step:visible')).index($(this));
if($stepper.data('settings').parallel && validation) { // Invoke parallel stepper behaviour
$(this).addClass('temp-active');
$stepper.validatePreviousSteps()
$stepper.openStep(object + 1);
$(this).removeClass('temp-active');
} else if(!$stepper.hasClass('linear')) {
$stepper.openStep(object+1);
} else if(settings.linearStepsNavigation) {
var active = $stepper.find('.step.active');
if($($stepper.children('.step:visible')).index($(active))+1 == object) {
$stepper.nextStep(undefined, true, undefined);
} else if ($($stepper.children('.step:visible')).index($(active))-1 == object) {
$stepper.prevStep(undefined);
}
}
}).on("click", '.next-step', function(e) {
e.preventDefault();
$stepper.nextStep(undefined, true, e);
}).on("click", '.previous-step', function(e) {
e.preventDefault();
$stepper.prevStep(undefined);
}).on("click", "button:submit:not(.next-step, .previous-step)", function (e) {
e.preventDefault();
feedback = e ? $(e.target).data("feedback") : undefined;
var form = $stepper.closest('form');
if(form.isValid()) {
if(feedback) {
stepper.activateFeedback();
return window[feedback].call();
}
form.submit();
}
}).on("click", function () {
$('.stepper.focused').removeClass('focused');
$(this).addClass('focused');
});
});
};
/**
* Return the step element on given index.
*
* #param step, index of the step to be returned
* #returns {*}, the step requested
*/
$.fn.getStep = function(step) {
var settings = $(this).closest('ul.stepper').data('settings');
var $this = this;
var step_num = step - 1;
step = this.find('.step:visible:eq('+step_num+')');
return step;
};
/**
* Run validation over all previous steps from the steps this
* function is called on.
*/
$.fn.validatePreviousSteps = function() {
var active = $(this).find('.step.temp-active');
var index = $(this.children('.step')).index($(active));
// We assume that the validator is set to ignore nothing.
$(this.children('.step')).each(function(i) {
if (i >= index) {
$(this).removeClass('wrong done');
} else {
$(this).validateStep();
}
});
};
/**
* Validate the step that this function is called on.
*/
$.fn.validateStep = function() {
var stepper = this.closest('ul.stepper');
var form = this.closest('form');
var step = $(this);
// Retrieve the custom validator for that step if exists.
var validator = step.find('.next-step').data("validator");
if(this.validateStepInput()) { // If initial base validation succeeded go on
if(validator) { // If a custom validator is given also call that validator
if (window[validator].call()) {
step.removeClass('wrong').addClass('done');
return true;
}
else {
step.removeClass('done').addClass('wrong');
return false;
}
}
step.removeClass('wrong').addClass('done');
return true;
} else {
step.removeClass('done').addClass('wrong');
return false;
}
};
/**
* Uses the validation variable set by the stepper constructor
* to run standard validation on the current step.
* #returns {boolean}
*/
$.fn.validateStepInput = function() {
var valid = true;
if (validation) {
// Find all input fields dat need validation in current step.
$(this).find('input.validate').each(function() {
if (!$(this).valid()) {
valid = false;
return false;
}
});
}
return valid;
};
<head>
<!-- Materializecss compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/materialize-stepper#2.1.4/materialize-stepper.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Materializecss compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!-- jQueryValidation Plugin -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
</head>
<body class="container">
<form>
<ul class="stepper parallel horizontal">
<li class="step active">
<div class="step-title waves-effect waves-dark">Step 1</div>
<div class="step-content">
<div class="row">
<div class='form-field col s12'>
<p>Step with custom validation</p>
<span>For this step we want to have a custom validator that checks if if at least one checkbox is checked</span>
<p>
<input name='checkbox1' type="checkbox" class="filled-in"
id="checkbox1" value='checkbox1'/>
<label for="checkbox1">Checkbox 1</label>
</p>
<p>
<input name='checkbox2' type="checkbox" class="filled-in"
id="checkbox2" value='checkbox2'/>
<label for="checkbox2">Checkbox 2</label>
</p>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn next-step" data-validator="validateStepOne">CONTINUE</button>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 2</div>
<div class="step-content">
<div class="row">
<div class='form-field col s12'>
<p>Step with no custom validation</p>
<div class="input-field col s12">
<input type="text" name="textfield" class="required validate"/>
<label for="textfield">Random textfield</label>
</div>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn next-step">CONTINUE</button>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 3</div>
<div class="step-content">
<div class="row">
<div class='form-field'>
<p>Step with feedback and custom validation</p>
<p>
<input name='checkbox3' type="checkbox" class="filled-in"
id="checkbox3" value='checkbox3'/>
<label for="checkbox3">Checkbox 3</label>
</p>
<p>
<input name='checkbox4' type="checkbox" class="filled-in"
id="checkbox4" value='checkbox4'/>
<label for="checkbox4">Checkbox 4</label>
</p>
</div>
<div class="input-field col s12">
<input type="text" id="textfield2" name="textfield2" class="required validate"/>
<label for="textfield2">This field should contain the word materialize</label>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn next-step" data-feedback="nextStepThreeHandler" data-validator="validateStepThree">SUBMIT</button>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 4</div>
<div class="step-content">
<div class="row">
<div class='form-field'>
<p>Submit phase</p>
</div>
</div>
<div class="step-actions">
<input type="submit" class="waves-effect waves-dark btn next-step" value="SUBMIT"/>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
</ul>
</form>
</body>

How to add Material Design Tabs on a web app using unpkg as a storage for MDC CSS file and s file

I tried below html code for making a tab set:
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
class="mdc-tab" href="#panel-2">Item Two</a>
<a role="tab" aria-controls="panel-3"
class="mdc-tab" href="#panel-3">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</section>
<section>
<div class="panels">
<p class="panel active" id="panel-1" role="tabpanel" aria-hidden="false">Item One</p>
<p class="panel" id="panel-2" role="tabpanel" aria-hidden="true">Item Two</p>
<p class="panel" id="panel-3" role="tabpanel" aria-hidden="true">Item Three</p>
</div>
<div class="dots">
<a class="dot active" data-trigger="panel-1" href="#panel-1"></a>
<a class="dot" data-trigger="panel-2" href="#panel-2"></a>
<a class="dot" data-trigger="panel-3" href="#panel-3"></a>
</div>
</section>
And JavaScript is:
<script>
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
var panels = document.querySelector('.panels');
dynamicTabBar.tabs.forEach(function(tab) {?
tab.preventDefaultOnClick = true;
});
function updateDot(index) {
var activeDot = dots.querySelector('.dot.active');
if (activeDot) {
activeDot.classList.remove('active');
}
var newActiveDot = dots.querySelector('.dot:nth-child(' + (index + 1) + ')');
if (newActiveDot) {
newActiveDot.classList.add('active');
}
}
function updatePanel(index) {
var activePanel = panels.querySelector('.panel.active');
if (activePanel) {
activePanel.classList.remove('active');
}
var newActivePanel = panels.querySelector('.panel:nth-child(' + (index + 1) + ')');
if (newActivePanel) {
newActivePanel.classList.add('active');
}
}
dynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
updateDot(nthChildIndex);
});
dots.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('dot')) {
return;
}
evt.preventDefault();
var dotIndex = [].slice.call(dots.querySelectorAll('.dot')).indexOf(evt.target);
if (dotIndex >= 0) {
dynamicTabBar.activeTabIndex = dotIndex;
}
updatePanel(dotIndex);
updateDot(dotIndex);
});
const MDCTab = mdc.tabs.MDCTab;
const MDCTabFoundation = mdc.tabs.MDCTabFoundation;
const MDCTabBar = mdc.tabs.MDCTabBar;
const MDCTabBarFoundation = mdc.tabs.MDCTabBarFoundation;
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
</script>
please help me...
Where is the problem located and how do I solve it?
Actually Material.io doesn't provides sample full code for any components. That is why I got totally confused.
I'm making a chat app and tabs are required in there. So, I think you guys could help me. If possible, give any codepend or jsfiddle demo code...

Remove ? sign in this line:
dynamicTabBar.tabs.forEach(function(tab) {?
And add some CSS for hiding non-active panel blocks by default:
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
var panels = document.querySelector('.panels');
dynamicTabBar.tabs.forEach(function(tab) {
tab.preventDefaultOnClick = true;
});
function updateDot(index) {
var activeDot = dots.querySelector('.dot.active');
if (activeDot) {
activeDot.classList.remove('active');
}
var newActiveDot = dots.querySelector('.dot:nth-child(' + (index + 1) + ')');
if (newActiveDot) {
newActiveDot.classList.add('active');
}
}
function updatePanel(index) {
var activePanel = panels.querySelector('.panel.active');
if (activePanel) {
activePanel.classList.remove('active');
}
var newActivePanel = panels.querySelector('.panel:nth-child(' + (index + 1) + ')');
if (newActivePanel) {
newActivePanel.classList.add('active');
}
}
dynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
updateDot(nthChildIndex);
});
dots.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('dot')) {
return;
}
evt.preventDefault();
var dotIndex = [].slice.call(dots.querySelectorAll('.dot')).indexOf(evt.target);
if (dotIndex >= 0) {
dynamicTabBar.activeTabIndex = dotIndex;
}
updatePanel(dotIndex);
updateDot(dotIndex);
});
const MDCTab = mdc.tabs.MDCTab;
const MDCTabFoundation = mdc.tabs.MDCTabFoundation;
const MDCTabBar = mdc.tabs.MDCTabBar;
const MDCTabBarFoundation = mdc.tabs.MDCTabBarFoundation;
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
.panel {
display: none;
}
.panel.active {
display: block
}
.dot {
width: 10px;
height: 10px;
display: inline-block;
background: black;
padding: 5px;
}
.dots {
text-align: center;
}
.dot.active {
background: red;
}
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet"/>
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
class="mdc-tab" href="#panel-2">Item Two</a>
<a role="tab" aria-controls="panel-3"
class="mdc-tab" href="#panel-3">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</section>
<section>
<div class="panels">
<p class="panel active" id="panel-1" role="tabpanel" aria-hidden="false">Item One</p>
<p class="panel" id="panel-2" role="tabpanel" aria-hidden="true">Item Two</p>
<p class="panel" id="panel-3" role="tabpanel" aria-hidden="true">Item Three</p>
</div>
<div class="dots">
<a class="dot active" data-trigger="panel-1" href="#panel-1"></a>
<a class="dot" data-trigger="panel-2" href="#panel-2"></a>
<a class="dot" data-trigger="panel-3" href="#panel-3"></a>
</div>
</section>

Bulma dropdown not working

Bulma dropdown doesn't seem to toggle on click. Below is the code snippet from the documentation:https://bulma.io/documentation/components/dropdown/
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet"/>
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>

You need to toggle the class is-active using JavaScript. When .dropdown has .is-active it changes the display of .dropdown-menu from none to block.
Here is a basic way to implement it.
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>

Here's a full solution that has worked well for me using vanilla JS and making sure dropdowns close when you click out of them or press the Esc key.
// Get all dropdowns on the page that aren't hoverable.
const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
if (dropdowns.length > 0) {
// For each dropdown, add event handler to open on click.
dropdowns.forEach(function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
el.classList.toggle('is-active');
});
});
// If user clicks outside dropdown, close it.
document.addEventListener('click', function(e) {
closeDropdowns();
});
}
/*
* Close dropdowns by removing `is-active` class.
*/
function closeDropdowns() {
dropdowns.forEach(function(el) {
el.classList.remove('is-active');
});
}
// Close dropdowns if ESC pressed
document.addEventListener('keydown', function (event) {
let e = event || window.event;
if (e.key === 'Esc' || e.key === 'Escape') {
closeDropdowns();
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<body style="margin: 2rem">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions">
<span>Actions</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-ui-actions" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
<a href="#" class="dropdown-item">
Option 3
</a>
</div>
</div>
</div>
</body>

correction of te answer above:
I added the closeDropdowns() function, because when we click in a second menu, both menus stay opened.
// Get all dropdowns on the page that aren't hoverable.
const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
if (dropdowns.length > 0) {
// For each dropdown, add event handler to open on click.
dropdowns.forEach(function(el) {
el.addEventListener('click', function(e) {
closeDropdowns();
e.stopPropagation();
el.classList.toggle('is-active');
});
});
// If user clicks outside dropdown, close it.
document.addEventListener('click', function(e) {
closeDropdowns();
});
}
/*
* Close dropdowns by removing `is-active` class.
*/
function closeDropdowns() {
dropdowns.forEach(function(el) {
el.classList.remove('is-active');
});
}
// Close dropdowns if ESC pressed
document.addEventListener('keydown', function (event) {
let e = event || window.event;
if (e.key === 'Esc' || e.key === 'Escape') {
closeDropdowns();
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<body style="margin: 2rem">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions">
<span>Actions</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-ui-actions" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
<a href="#" class="dropdown-item">
Option 3
</a>
</div>
</div>
</div>
</body>

I sniffed the javascript source listener on the docs page (I don't know why they don't make this more obvious tbh) and here it is for anyone else who may benefit.
Please note below I commented out a cookies aspect which I did not have defined and was throwing an error and seemed unimportant for my purposes.
"use strict";
document.addEventListener("DOMContentLoaded", function () {
// Search
var setSearchToggle = function setSearchToggle() {
var icon = document.getElementById("searchIcon");
var search = document.getElementById("search");
var input = document.getElementById("algoliaSearch");
if (!icon) {
return;
}
icon.addEventListener("click", function (event) {
search.classList.toggle("bd-is-visible");
if (search.classList.contains("bd-is-visible")) {
algoliaSearch.focus();
}
});
window.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
return search.classList.remove("bd-is-visible");
}
});
};
setSearchToggle();
// Navbar
var setNavbarVisibility = function setNavbarVisibility() {
var navbar = document.getElementById("navbar");
if (!navbar) {
return;
}
var cs = getComputedStyle(navbar);
var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var brand = navbar.querySelector(".navbar-brand");
var end = navbar.querySelector(".navbar-end");
var search = navbar.querySelector(".bd-search");
var original = document.getElementById("navbarStartOriginal");
var clone = document.getElementById("navbarStartClone");
var rest = navbar.clientWidth - paddingX - brand.clientWidth - end.clientWidth - search.clientWidth;
var space = original.clientWidth;
var all = document.querySelectorAll("#navbarStartClone > .bd-navbar-item");
var base = document.querySelectorAll("#navbarStartClone > .bd-navbar-item-base");
var more = document.querySelectorAll("#navbarStartOriginal > .bd-navbar-item-more");
var dropdown = document.querySelectorAll("#navbarStartOriginal .bd-navbar-dropdown > .navbar-item");
var count = 0;
var totalWidth = 0;
var showMore = function showMore() {};
var hideMore = function hideMore() {};
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = all[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
totalWidth += item.offsetWidth;
if (totalWidth > rest) {
break;
}
count++;
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
var howManyMore = Math.max(0, count - base.length);
if (howManyMore > 0) {
for (var i = 0; i < howManyMore; i++) {
more[i].classList.add("bd-is-visible");
dropdown[i].classList.add("bd-is-hidden");
}
}
for (var j = howManyMore; j < more.length; j++) {
more[j].classList.remove("bd-is-visible");
}
for (var k = howManyMore; k < dropdown.length; k++) {
dropdown[k].classList.remove("bd-is-hidden");
}
};
setNavbarVisibility();
// Cookies
// var cookieBookModalName = "bulma_closed_book_modal";
// var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
// Dropdowns
var $dropdowns = getAll(".dropdown:not(.is-hoverable)");
if ($dropdowns.length > 0) {
$dropdowns.forEach(function ($el) {
$el.addEventListener("click", function (event) {
event.stopPropagation();
$el.classList.toggle("is-active");
});
});
document.addEventListener("click", function (event) {
closeDropdowns();
});
}
function closeDropdowns() {
$dropdowns.forEach(function ($el) {
$el.classList.remove("is-active");
});
}
// Toggles
var $burgers = getAll(".navbar-burger");
if ($burgers.length > 0) {
$burgers.forEach(function ($el) {
if (!$el.dataset.target) {
return;
}
$el.addEventListener("click", function () {
var target = $el.dataset.target;
var $target = document.getElementById(target);
$el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
// Modals
var rootEl = document.documentElement;
var $modals = getAll(".modal");
var $modalButtons = getAll(".modal-button");
var $modalCloses = getAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button");
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
$el.addEventListener("click", function () {
var target = $el.dataset.target;
openModal(target);
});
});
}
if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) {
$el.addEventListener("click", function () {
closeModals();
});
});
}
function openModal(target) {
var $target = document.getElementById(target);
rootEl.classList.add("is-clipped");
$target.classList.add("is-active");
}
function closeModals() {
rootEl.classList.remove("is-clipped");
$modals.forEach(function ($el) {
$el.classList.remove("is-active");
});
}
document.addEventListener("keydown", function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
closeModals();
closeDropdowns();
}
});
// Clipboard
var $highlights = getAll(".highlight");
var itemsProcessed = 0;
if ($highlights.length > 0) {
$highlights.forEach(function ($el) {
var copyEl = '<button class="button bd-copy">Copy</button>';
var expandEl = '<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML("beforeend", copyEl);
var $parent = $el.parentNode;
if ($parent && $parent.classList.contains("bd-is-more")) {
var showEl = '<button class="button is-small bd-show"><span class="icon"><i class="fas fa-code"></i></span><strong>Show code</strong></button>';
$parent.insertAdjacentHTML("afterbegin", showEl);
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML("beforeend", expandEl);
}
itemsProcessed++;
if (itemsProcessed === $highlights.length) {
addHighlightControls();
}
});
}
function addHighlightControls() {
var $highlightButtons = getAll(".highlight .bd-copy, .highlight .bd-expand");
$highlightButtons.forEach(function ($el) {
$el.addEventListener("mouseenter", function () {
$el.parentNode.classList.add("bd-is-hovering");
$el.parentNode.parentNode.classList.add("bd-is-hovering");
});
$el.addEventListener("mouseleave", function () {
$el.parentNode.classList.remove("bd-is-hovering");
$el.parentNode.parentNode.classList.remove("bd-is-hovering");
});
});
var $highlightExpands = getAll(".bd-snippet .bd-expand");
$highlightExpands.forEach(function ($el) {
$el.addEventListener("click", function () {
$el.parentNode.firstElementChild.style.maxHeight = "none";
});
});
var $highlightShows = getAll(".bd-snippet .bd-show");
$highlightShows.forEach(function ($el) {
$el.addEventListener("click", function () {
var text = $el.querySelector("strong").textContent;
var newText = text === "Show code" ? "Hide code" : "Show code";
$el.querySelector("strong").textContent = newText;
$el.parentNode.classList.toggle("bd-is-more-clipped");
});
});
}
setTimeout(function () {
new Clipboard(".bd-copy", {
target: function target(trigger) {
return trigger.previousElementSibling.firstElementChild;
}
});
new Clipboard(".bd-clipboard");
}, 100);
// Events
var resizeTimer = void 0;
function handleResize() {
window.clearTimeout(resizeTimer);
resizeTimer = window.setTimeout(function () {
setNavbarVisibility();
}, 10);
}
window.addEventListener("resize", handleResize);
// Utils
function getAll(selector) {
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
}
});

How to change the called element color and text using if else condition?

Problem: While clicking continue button i want to change the color of first link black and remaining two links ash. While clicking continue button second time I want to change the color of second link black and remaining two links ash. Same need to take place for third time and additionally on third time the continue button change to save.
HTML:
<div class="nav2">
<div class="navtxt container">
<ol>
<li id="navlnk">Assess your risk tolerance</li>
<div id="b" class="fif"><span class="glyphicon glyphicon-menu-right" style="padding-left: 20px;"></span></div>
<li id="navlnk1">View your plan</li>
<div id="b" class="fif"><span class="glyphicon glyphicon-menu-right" style="padding-left: 20px;"></span></div>
<li id="navlnk2">Open account</li>
</ol>
</div>
</div>
<input type='button' name='add' onclick="myFunction()"/>
JAVASCRIPT
function myFunction() {
document.getElementById("continue").value++; value='+'
if (value==1){
document.getElementById('navlnk').style.color = "#000";
}
else if(value==2){
document.getElementById('navlnk1').style.color = "#000";
}
else if(value==3)
{
document.getElementById('navlnk2').style.color = "#000";
document.getElementById('navlnk2').inner.html = "Save";
}
}

Here is code using jquery :
<style>
.black{
color: black;
}
.hash{
color:darkkhaki;
}
</style>
<div class="nav2 container">
<div class="navtxt container">
<ol>
<li id="navlnk"><span style="padding-left: 20px;" class="glyphicon glyphicon-ok-circle"></span>Assess your risk tolerance</li>
<li id="navlnk1"><span class="glyphicon glyphicon-chevron-right" style="padding-left: 20px;" ></span>View your plan</li>
<li id="navlnk2"></span>Open account</li>
</ol>
</div>
<input type='button' name='add' class="btn" value="Continue" id="continue"/>
</div>
<script>
$(document).ready(function () {
var cnt = 0;
$('#continue').on("click", function () {
var nav = $('#navlnk a');
var nav1 = $('#navlnk1 a');
var nav2 = $('#navlnk2 a');
if (cnt == 0) {
$(nav).addClass('black');
$(nav2).addClass('hash');
$(nav1).addClass('hash');
}
else if (cnt == 1)
{
alert('dsd');
$(nav).removeClass('black').addClass('hash');
$(nav1).removeClass('hash').addClass('black');
cnt++;
}
else if(cnt == 3) {
$(nav1).removeClass('black').addClass('hash');
$(nav2).removeClass('hash').addClass('black');
$(this).val('Save');
}
cnt++;
});
});
</script>

You need to create a function like this :
function changeColor(type) {
if (type == 'navlnk1') {
//add color on first div
document.getElementById('navlnk1').style.color = "#000";
} else {
//add color on second div
document.getElementById('navlnk2').style.color = "#000";
}
}
I hope this will help

I have modified your code as per your need. try it.
var num = 1;
function myFunction() {
var listArry = document.getElementsByClassName('list');
for(var i = 0; i < listArry.length; i++){
listArry[i].style.color = "grey";
}
if (num==1){
document.getElementById('navlnk').style.color = "black";
num=2;
}
else if(num==2){
document.getElementById('navlnk1').style.color = "black";
num=3;
}
else if(num==3)
{
document.getElementById('navlnk2').style.color = "black";
document.getElementById('btn').value = "Save";
num=1;
}
}
<div class="nav2">
<div class="navtxt container">
<ol>
<li class="list" id="navlnk">Assess your risk tolerance</li>
<div id="b" class="fif"><span class="glyphicon glyphicon-menu-right" style="padding-left: 20px;"></span></div>
<li class="list" id="navlnk1">View your plan</li>
<div id="b" class="fif"><span class="glyphicon glyphicon-menu-right" style="padding-left: 20px;"></span></div>
<li class="list" id="navlnk2">Open account</li>
</ol>
</div>
</div>
<input id="btn" type='button' name='add' onclick="myFunction()"/>

We Keep Coding

JavaScript is the programming language of the Web.

Call an image on button click Toast UI Image - javascript

Related

Console errors when executing shortcode code

Rails 6 - Uncaught ReferenceError: MStepper is not defined

How to add Material Design Tabs on a web app using unpkg as a storage for MDC CSS file and s file

Bulma dropdown not working

How to change the called element color and text using if else condition?

Categories

Resources