I am using sidebar utility from w2ui library. My sidebar has a menu of sub-menu items and allow for flat menu.
When the sidebar goes flat and mouse over menu item, I don't want tooltip to appeared on menu item that has sub menu item this case is menu "Level 2.1" because I have a script for showing sub menu item to appear right next to their parent menu when mouse over their parent.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: sidebar/9</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="sidebar" style="height: 300px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
<button class="w2ui-btn" onclick="w2ui.sidebar.goFlat()">Go Flat</button>
</div>
<div style="clear: both" />
<script type="text/javascript">
$(function() {
$('#sidebar').w2sidebar({
name: 'sidebar',
flatButton: true,
nodes: [{
id: 'level-1',
text: 'Level 1',
img: 'icon-folder',
expanded: true,
group: true,
nodes: [{
id: 'level-1-1',
text: 'Level 1.1',
icon: 'fa fa-home'
},
{
id: 'level-1-2',
text: 'Level 1.2',
icon: 'fa fa-star'
},
{
id: 'level-1-3',
text: 'Level 1.3',
icon: 'fa fa-star-o'
}
]
},
{
id: 'level-2',
text: 'Level 2',
img: 'icon-folder',
expanded: true,
group: true,
nodes: [{
id: 'level-2-1',
text: 'Level 2.1',
icon: 'fa fa-user',
count: 3,
nodes: [{
id: 'level-2-1-1',
text: 'Level 2.1.1',
icon: 'fa fa-star-o'
},
{
id: 'level-2-1-2',
text: 'Level 2.1.2',
icon: 'fa fa-star-o',
count: 67
},
{
id: 'level-2-1-3',
text: 'Level 2.1.3',
icon: 'fa fa-star-o'
}
]
}, ]
}
],
onFlat: function(event) {
$('#sidebar').css('width', (event.goFlat ? '35px' : '200px'));
}
});
});
</script>
</body>
</html>
I tried to go through the document on the w2ui official website, but I could not find anything stated about tooltip related menu sidebar.
Is there any way or option of w2sidbar to hide the tooltip on menu that sub-menu ? With Thanks.
Related
The following is my code, an example on echarts, referring to echarts.min.js, but changing to echarts.js will not display the chart, and the dom will also display。
<head>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="main" style="height:600px; width:600px;background-color: aqua;"></div>
<script type="text/javascript" >
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
I need to open the data from a .phtml file (gallery.phtml) in a modal popup in Magento2. This is the code used to include modal scripts:
<div>
Click Me
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
content: 'gallery.phtml',
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
The gallery.phtml file is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="popup-mpdal">
<h1> Hi I'm here.... </h1>
</div>
</body>
</html>
But the popup is not coming.
I got the answer:
<div>
Click Me
</div>
<div id="popup-mpdal" >
<?php include ($block->getTemplateFile('Vendor_Module::gallery.phtml')) ?>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
I have used this in html
<button type="button" class="action" data-trigger="trigger">
<span data-bind="i18n: 'Click Here'"></span>
</button>
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'title': 'Popup title',
'trigger': '[data-trigger=trigger]',
'responsive': true,
'buttons': [{
text: 'Submit',
class: 'action'
}]
}}">
<div class="content">
Popup Content
</div>
</div>
<template is="dom-repeat" items="[[routes]]">
<div>{{item.color}} | {{item.Index}}</div>
<google-map-directions id="{{item.name}}"
renderer-options='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="DRIVING"
waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'>
</google-map-directions>
<div id="dirt"></div>
</template>
I am creating some routes using dom-repeat. I would like these routes to have different colors. They don't. It seems as if each route is using the same renderer. How can I change the renderer for each route?
It turns out the only missing piece in your code is one character for the attribute-binding.
In order for the compound binding to be deserialized into a JSON object, the following is required:
attribute-binding syntax (i.e., $=) even though binding to a property
Single-quotes around the value instead of double-quotes
the target property must be of type Object (which is true for <google-map-directions>.rendererOptions)
// template
<google-map-directions map="[[map]]"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
... >
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
}
});
});
</script>
</dom-module>
</body>
codepen
Alternatively, you could use a computed binding that returns the appropriate renderer options based on a given color and route index:
// template
<google-map-directions map="[[map]]"
renderer-options="{{_getRendererOptions(item.color, index)}}"
... >
// script
Polymer({
...
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options="{{_getRendererOptions(item.color, index)}}"
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
},
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
});
</script>
</dom-module>
</body>
codepen
Is there anybody who knows how can I replace TinyMCE with the default editor on Episerver Commerce SP2?
Copy tiny_mce folder to eCommerceFramework\5.2\EPiServerCommerceManager\Shared\Apps\Core\Controls\Editors\
Copy TinyMCEEditor.dll to the \bin folder in your Commerce Manager site.
In the Commerce Manager site folder open appSettings.config. Change the 2 keys “HtmlEditorControl” and “AdminHtmlEditorControl” to the new editor path.
Create folder name “UserFiles” in the root folder of Commerce Manager site.
Done, enter Commerce Manager and test the editor.
Use the following Control :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="EditorControl.ascx.cs" Inherits="TinyMCEEditor.EditorControl" %>
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
file_browser_callback : "filebrowser",
setup: function(ed) {
ed.onKeyPress.add(
function(ed, evt) {
}
);
},
// Theme options
theme_advanced_buttons1: "bold,italic,underline,|,charmap,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,code,|,preview",
theme_advanced_buttons3: "tablecontrols",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
content_css: "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Style formats
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
],
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
function filebrowser(field_name, url, type, win) {
fileBrowserURL = "../FileManager/Default.aspx?sessionid=<%= Session.SessionID.ToString() %>";
tinyMCE.activeEditor.windowManager.open({
title: "Ajax File Manager",
url: fileBrowserURL,
width: 950,
height: 650,
inline: 0,
maximizable: 1,
close_previous: 0
}, {
window: win,
input: field_name,
sessionid: '<%= Session.SessionID.ToString() %>'
}
);
}
</script>
<script type="text/javascript" language="javascript">
$(".ajax__htmleditor_editor_toptoolbar").each(function (index) {
$(this).html($(this).html() + "<img onclick=showImgManager('" + index + "') src='../FileManager/icons/img-add-32.png' class='ajax__htmleditor_toolbar_button' /><img onclick=showFileManager('" + index + "') src='../FileManager/icons/Files-add-32.png' class='ajax__htmleditor_toolbar_button' /><div style='display:none;float:left;width:100%;padding-top:5px;' id='divImgManager" + index + "'></div>");
});
function openFileManager(index) {
window.open("../FileManager/Default.aspx?sessionid=<%= Session.SessionID %>&input=" + index, "myWindow", "status = 1, height = 650, width = 950, resizable = 0")
}
</script>
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 40%"
runat="server"></textarea>
We have to create a fluid layout meeting following conditions:
There is a Form inside a Window.
If Window Width is increased, then Form Width and its Fields Width should also increase.
If Window Width is decreased, then Form Width and its Fields Width should get reduced but only upto a limit.
If the Window Width is reduced beyond a limit, then there should appear a scrollbar at the Form.
We tried at this by giving flex to fields and minWidth to the Form, assuming that flex will take care of increase of width and minWidth to form would lead to a scroll if the window width is reduced further.
But this unfortunately is not working as per the following test case:
<html>
<head>
<title>TEST</title>
<link rel='stylesheet' href='resources/extjs/resources/css/ext-all.css' />
<script type='text/javascript' src='resources/extjs/ext-all-dev.js'></script>
<script type='text/javascript'>
function getForm(){
var form = {
xtype:'form',
region:'north',
height:100,
autoScroll:true,
minWidth:300,
title: 'Simple Form',
items: [
{
xtype:'container',
layout:'hbox',
items:[
{
xtype:'textfield',
fieldLabel: 'First',
name: 'first',
allowBlank: false,
width:100,
labelWidth:50,
flex:1
},{
xtype:'textfield',
fieldLabel: 'Last',
name: 'last',
allowBlank: false,
width:100,
labelWidth:50,
flex:1
}
]
}]
};
return form;
}
function getWin(){
var win = Ext.create('Ext.window.Window',{
title:'Test Window',
height:400,
width:600,
layout:'border',
items:[
getForm(),
{
region:'center',
title:'Center Region',
html:'Center Region Content'
}
]
});
return win;
}
Ext.onReady(function(){
var win = getWin();
win.show();
});
</script>
</head>
<body>
</body>
</html>
Any suggestions on how to achieve this one? Or what is being done wrong here?
There is a good example similar to this:
http://docs.sencha.com/ext-js/4-1/#!/example/form/anchoring.html
Here is a mix of that with your code. The min and max are set right at the window container. There is an autoScroll and autoWidth config on the form with a minWidth to scroll if the window is smaller than the width needed for that section.
See it here:
http://jsfiddle.net/Du9Nb/
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function() {
var form = Ext.create('Ext.form.Panel', {
border: false,
fieldDefaults: {
labelWidth: 50
},
url: 'save-form.php',
autoScroll: true,
autoHeight: true,
bodyPadding: 5,
items: [
{xtype:'panel',
title:'Simple Form',
minWidth: 400,
layout: 'hbox',
defaultType: 'textfield',
items:[
{
fieldLabel: 'First',
name: 'first',
allowBlank: false,
flex: 1,
anchor:'100%' // anchor width by percentage
},{
fieldLabel: 'Last',
name: 'last',
allowBlank: false,
flex: 1,
anchor: '100%' // anchor width by percentage
}
]
}, {
xtype: 'panel',
title: 'Center Region',
html: 'Center Region Content'
}]
});
var win = Ext.create('Ext.window.Window', {
title: 'Test Window - Resize Me',
width: 600,
height:400,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
items: form,
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});
win.show();
});