How to use an icon which is not provided by WinJS? For example, use one from here.
The html looks like:
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
The png image should be 20x20 pixels with a transparent background (https://msdn.microsoft.com/en-us/library/windows/apps/hh700483.aspx). The png is set as in javascript:
document.getElementById("thatFancyButton").style.backgroundImage = url('pathOfPNGImage');
so in your case it is (notice \' \' in url()):
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'url(\'pathOfPng.png\')'}"></div>
You can also set one letter glyphs like icon: '©' and it will show it as icon.
Below is the snippet of the SplitViewCommand icon setting logic:
/// <field type="String" locid="WinJS.UI.SplitViewCommand.icon" helpKeyword="WinJS.UI.SplitViewCommand.icon">
/// Gets or sets the icon of the SplitViewCommand. This value is either one of the values of the AppBarIcon enumeration or the path of a custom PNG file.
/// </field>
icon: {
get: function () {
return this._icon;
},
set: function (value) {
this._icon = (_Icon[value] || value);
// If the icon's a single character, presume a glyph
if (this._icon && this._icon.length === 1) {
// Set the glyph
this._imageSpan.textContent = this._icon;
this._imageSpan.style.backgroundImage = "";
this._imageSpan.style.msHighContrastAdjust = "";
this._imageSpan.style.display = "";
} else if (this._icon && this._icon.length > 1) {
// Must be an image, set that
this._imageSpan.textContent = "";
this._imageSpan.style.backgroundImage = this._icon;
this._imageSpan.style.msHighContrastAdjust = "none";
this._imageSpan.style.display = "";
} else {
this._imageSpan.textContent = "";
this._imageSpan.style.backgroundImage = "";
this._imageSpan.style.msHighContrastAdjust = "";
this._imageSpan.style.display = "none";
}
}
},
If you happen to have errors with the background image size, modify win-commandimage class. I did this fix in styles to fit the image into button correctly:
.win-commandimage {
background-size:contain;
}
Related
Using Xamarin.Forms, how do I get the same effect as the application pictured below, specifically to show a centred image on the Action Bar / page tool bar (the section in a blue box)?
I would like to have a long width image in that section, and the solution must work for Android, iOS, Windows Phone, and Universal Windows (even if it means writing custom renderers or platform specific xamarin code).
I suggest you create your own Xamarin.Forms view and handle the navigation by yourself something similar to this:
public class CustomBackNavigationBar : StackLayout
{
public Image BackIcon;
public Image Icon;
public Label IconTitle;
public StackLayout IconContainer;
public CustomBackNavigationBar(string title, string icon)
{
Padding = new Thickness(15,5);
HeightRequest = 40;
Orientation = StackOrientation.Horizontal;
VerticalOptions = LayoutOptions.Start;
BackgroundColor = StaticData.BlueColor;
Spacing = 15;
BackIcon = new Image
{
Source = StaticData.BackIcon,
HorizontalOptions = LayoutOptions.Start
};
Label Title = new Label
{
Text = title,
TextColor = Color.White,
FontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label)),
FontAttributes = FontAttributes.Bold,
VerticalTextAlignment = TextAlignment.Center
};
Icon = new Image
{
Source = icon
};
IconTitle = new Label
{
Text = StaticData.CallAgent,
TextColor = Color.White,
FontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label)),
};
IconContainer = new StackLayout
{
HorizontalOptions = LayoutOptions.EndAndExpand,
Spacing = 2,
Children = { Icon, IconTitle }
};
Children.Add(BackIcon);
Children.Add(Title);
Children.Add(IconContainer);
#region Events
BackIcon.GestureRecognizers.Clear();
BackIcon.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(PopAsync)
});
#endregion
}
async void PopAsync()
{
await App.AppNavigation.PopAsync();
}
}
I would like to know how to retrieve text (IText / Text) value from text object?
var textObj = new fabric.IText('hello friends', { left: 100, top: 100 });
canvas.add(textObj);
So how I can retrieve the text value of 'textObj'?
textObj.text or textObj.get('text') works on Fabricjs 2.x
To get the text from the selected object
const obj = canvas.getActiveObject()
if (obj && obj.isType('textbox')) {
const { text } = obj
// ...
}
I want to replace the Griffon icon for a custom icon for my App. I have replaced the icons in my view as shown here:
application(id: "mainFrame", title: 'selekron',
preferredSize: [884, 800],
pack: true,
//location: [50,50],
locationByPlatform:true,
iconImage: imageIcon('/progresomusica-icon-48x48.png').image,
iconImages: [imageIcon('/progresomusica-icon-48x48.png').image,
imageIcon('/progresomusica-icon-32x32.png').image,
imageIcon('/progresomusica-icon-16x16.png').image]) {
I have the next settings in griffon-app/conf/BuildConfig.groovy:
deploy {
application {
title = "${appName} ${appVersion}"
vendor = System.properties['user.name']
homepage = "http://localhost/${appName}"
description {
complete = "${appName} ${appVersion}"
oneline = "${appName} ${appVersion}"
minimal = "${appName} ${appVersion}"
tooltip = "${appName} ${appVersion}"
}
icon {
'default' {
name = 'progresomusica-icon-64x64.png'
width = '64'
height = '64'
}
splash {
name = 'griffon.png'
width = '391'
height = '123'
}
selected {
name = 'progresomusica-icon-64x64.png'
width = '64'
height = '64'
}
disabled {
name = 'progresomusica-icon-64x64.png'
width = '64'
height = '64'
}
rollover {
name = 'progresomusica-icon-64x64.png'
width = '64'
height = '64'
}
shortcut {
name = 'progresomusica-icon-64x64.png'
width = '64'
height = '64'
}
}
I have deleted my $HOME/.griffon folder and run the app again but I keep getting the griffon red icon.
Any ideas about what am I missing?
Are you running the application on OSX? If so then have a look at $GRIFFON_HOME/scripts/_GriffonPackage.groovy. This file defines the following closure
resolveApplicationIcnsFile = {
File icnsFile = null
if (buildConfig.application.icon) {
icnsFile = new File(basedir, buildConfig.application.icon)
if (!icnsFile.exists()) icnsFile = null
}
if (icnsFile == null) {
icnsFile = new File(basedir, "griffon-app/conf/dist/shared/${griffonAppName}.icns")
if (!icnsFile.exists()) icnsFile = null
}
if (icnsFile == null) {
icnsFile = new File("${griffonHome}/media/griffon.icns")
}
icnsFile
}
Basically you have 2 choices for defining the icon to be used in OSX's dock otherwise the default icon gets chosen. If running the app on Windows or Linux then updating the main View (as you did) should be enough
iconImage: imageIcon('/progresomusica-icon-48x48.png').image,
iconImages: [imageIcon('/progresomusica-icon-48x48.png').image,
imageIcon('/progresomusica-icon-32x32.png').image,
imageIcon('/progresomusica-icon-16x16.png').image]) {
I'm starting to work only with YUI3. I include component scrollView, but it did not work mousewheel event, in the options I have not found how to turn on it. I would appreciate any help.
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode: '.scrollview-item',
height: 375,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "y"
}
});
scrollView.render();
I stumbled upon this as well, after some trial and error, I managed to get that working(note, that it is just plain scrolling, without an easing).
var DOM_MOUSE_SCROLL = 'DOMMouseScroll',
fixArgs = function(args) {
var a = Y.Array(args, 0, true), target;
if (Y.UA.gecko) {
a[0] = DOM_MOUSE_SCROLL;
// target = Y.config.win;
} else {
// target = Y.config.doc;
}
if (a.length < 3) {
// a[2] = target;
} else {
// a.splice(2, 0, target);
}
return a;
};
Y.Env.evt.plugins.mousewheel = {
on: function() {
return Y.Event._attach(fixArgs(arguments));
},
detach: function() {
return Y.Event.detach.apply(Y.Event, fixArgs(arguments));
}
};
This is the YUI mousewheel event, but it's changed a bit. The biggest issue was, that originally, either the window or document elements, which makes no sense(for example when you mousewheel over the #myelement you want that to be the returned target..)
Bellow is the code used to initialize the ScrollView and the function that handles the mousewheel event:
// ScrollView
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode: '#mycontainer',
height: 490,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "y"
}
});
scrollView.render();
var content = scrollView.get("contentBox");
var scroll_modifier = 10; // 10px per Delta
var current_scroll_y, scroll_to;
content.on("mousewheel", function(e) {
// check whether this is the scrollview container
if ( e.currentTarget.hasClass('container') ) {
current_scroll_y = scrollView.get('scrollY');
scroll_to = current_scroll_y - ( scroll_modifier * e.wheelDelta );
// trying to scroll above top of the container - scroll to start
if ( scroll_to <= scrollView._minScrollY ) {
// in my case, this made the scrollbars plugin to move, but I'm quite sure it's important for other stuff as well :)
scrollView._uiDimensionsChange();
scrollView.scrollTo(0, scrollView._minScrollY);
} else if ( scroll_to >= scrollView._maxScrollY ) { // trying to scroll beneath the end of the container - scroll to end
scrollView._uiDimensionsChange();
scrollView.scrollTo(0, scrollView._maxScrollY);
} else { // otherwise just scroll to the calculated Y
scrollView._uiDimensionsChange();
scrollView.scrollTo(0, scroll_to);
};
// if we have scrollbars plugin, flash the scrollbar
if ( scrollView.scrollbars ) {
scrollView.scrollbars.flash();
};
// prevent browser default behavior on mouse scroll
e.preventDefault();
};
});
So basically that's how I managed to that, but my next challenge is to get the scrollbar work like regular scrollbar(when you drag it, the container should move correspondingly...)
Hope this helps anyone :)
I have two panels in update panel. In panel1, there is button. If I click, Panel1 will be visible =false and Panel2 will be visible=true. In Panel2, I placed SharePoint:InPutFormTextBox. It not rendering HTML toolbar and showing like below image.
<SharePoint:InputFormTextBox runat="server" ID="txtSummary" ValidationGroup="CreateCase" Rows="8" Columns="80" RichText="true" RichTextMode="Compatible" AllowHyperlink="true" TextMode="MultiLine" />
http://i700.photobucket.com/albums/ww5/vsrikanth/careersummary-1.jpg
SharePoint rich text fields start out as text areas, and some javascript in the page load event replaces them with a different control if you are using a supported browser.
With an update panel, the page isn't being loaded, so that script never gets called.
Try hiding the section using css/javascript rather than the server side visible property. That generally lets you make whatever changes you need to the form without sharepoint seeing any changes.
<SharePoint:InputFormTextBox ID="tbComment" CssClass="sp-comment-textarea" runat="server" TextMode="MultiLine" RichText="True"></SharePoint:InputFormTextBox>
<%--textbox for temporay focus - trick the IE behavior on partial submit--%>
<input type="text" id="<%= tbComment.ClientID %>_hiddenFocusInput_" style="width: 0px; height: 0px; position: absolute; top: -3000px;" />
<%--tricking code that makes the 'SharePoint:InputFormTextBox' to work correctly in udate panel on partial podtback--%>
<script id="<%= tbComment.ClientID %>_InputFormTextBoxAfterScript" type="text/javascript">
(function () {
// where possible rich textbox only
if (browseris.ie5up && (browseris.win32 || browseris.win64bit) && !IsAccessibilityFeatureEnabled()) {
// find this script element
var me = document.getElementById("<%= tbComment.ClientID %>_InputFormTextBoxAfterScript");
if (me) {
// search for script block of the rich textbox initialization
var scriptElement = me.previousSibling;
while (scriptElement && (scriptElement.nodeType != 1 || scriptElement.tagName.toLowerCase() != "script")) {
scriptElement = scriptElement.previousSibling;
}
// get the content of the found script block
var innerContent = scriptElement.text;
if (typeof innerContent == 'undefined') {
innerContent = scriptElement.innerHTML
}
// get text with function call that initializes the rich textbox
var callInitString = "";
innerContent.toString().replace(/(RTE_ConvertTextAreaToRichEdit\([^\)]+\))/ig, function (p0, p1) { callInitString = p1; });
// register on page load (partial updates also)
Sys.Application.add_load(function (sender, args) {
setTimeout(function () {
// get the toolbar of the rich textbox
var toolbar = $get("<%= tbComment.ClientID %>_toolbar");
// if not found then we should run initialization
if (!toolbar) {
// move focus to the hidden input
$get("<%= tbComment.ClientID %>_hiddenFocusInput_").focus();
// reset some global variables of the SharePoint rich textbox
window.g_aToolBarButtons = null;
window.g_fRTEFirstTimeGenerateCalled = true;
window.g_oExtendedRichTextSupport = null;
parent.g_oExtendedRichTextSupport = null;
// call the initialization code
eval(callInitString);
setTimeout(function () {
// call 'onload' code of the rich textbox
eval("RTE_TextAreaWindow_OnLoad('<%= tbComment.ClientID %>');");
}, 0);
}
}, 0);
});
}
}
})();
</script>