Merge pull request #28 from MIYankov/master

Added an example of a text editing RadRadialMenu

RadialMenu/RadialMenu.sln

@@ -5,6 +5,8 @@ Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "GettingStarted", "GettingSt
 EndProject
 Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "AddingColorPickerInsideRadialMenu", "AddingColorPickerInsideRadialMenu\AddingColorPickerInsideRadialMenu.jsproj", "{B68FF94B-8846-4095-82EC-6BE123B12D6A}"
 EndProject
+Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "TextEditingWithRadialMenu", "TextEditingWithRadialMenu\TextEditingWithRadialMenu.jsproj", "{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -65,6 +67,30 @@ Global
 		{B68FF94B-8846-4095-82EC-6BE123B12D6A}.Release|x86.ActiveCfg = Release|x86
 		{B68FF94B-8846-4095-82EC-6BE123B12D6A}.Release|x86.Build.0 = Release|x86
 		{B68FF94B-8846-4095-82EC-6BE123B12D6A}.Release|x86.Deploy.0 = Release|x86
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|ARM.ActiveCfg = Debug|ARM
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|ARM.Build.0 = Debug|ARM
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|ARM.Deploy.0 = Debug|ARM
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|x64.ActiveCfg = Debug|x64
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|x64.Build.0 = Debug|x64
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|x64.Deploy.0 = Debug|x64
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|x86.ActiveCfg = Debug|x86
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|x86.Build.0 = Debug|x86
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Debug|x86.Deploy.0 = Debug|x86
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|Any CPU.Build.0 = Release|Any CPU
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|ARM.ActiveCfg = Release|ARM
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|ARM.Build.0 = Release|ARM
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|ARM.Deploy.0 = Release|ARM
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|x64.ActiveCfg = Release|x64
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|x64.Build.0 = Release|x64
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|x64.Deploy.0 = Release|x64
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|x86.ActiveCfg = Release|x86
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|x86.Build.0 = Release|x86
+		{A4D560E4-937F-40CE-AFAB-80EF2EB27DD6}.Release|x86.Deploy.0 = Release|x86
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

RadialMenu/TextEditingWithRadialMenu/ReadMe.html

@@ -0,0 +1,4 @@
+<p>
+	In this example you can see a functional RadRadialMenu configured to work as a text editing context menu. You can change the font style, font name, font color and font size. 
+    You can also align the text, group it in lists and copy/paste it. To do these things, you have to select a portion of the text and choose the action from the radial menu.
+</p>

RadialMenu/TextEditingWithRadialMenu/TextEditingWithRadialMenu.jsproj

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup Label="ProjectConfigurations">
+    <ProjectConfiguration Include="Debug|AnyCPU">
+      <Configuration>Debug</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|ARM">
+      <Configuration>Debug</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x64">
+      <Configuration>Debug</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x86">
+      <Configuration>Debug</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|AnyCPU">
+      <Configuration>Release</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|ARM">
+      <Configuration>Release</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x64">
+      <Configuration>Release</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x86">
+      <Configuration>Release</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+  </ItemGroup>
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>a4d560e4-937f-40ce-afab-80ef2eb27dd6</ProjectGuid>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '11.0'">
+    <VisualStudioVersion>11.0</VisualStudioVersion>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />
+  <PropertyGroup>
+    <TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>
+    <TargetPlatformVersion>8.0</TargetPlatformVersion>
+    <DefaultLanguage>en-US</DefaultLanguage>
+    <PackageCertificateKeyFile>TextEditingWithRadialMenu_TemporaryKey.pfx</PackageCertificateKeyFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <AppxManifest Include="package.appxmanifest">
+      <SubType>Designer</SubType>
+    </AppxManifest>
+    <Content Include="default.html" />
+    <Content Include="images\logo.png" />
+    <Content Include="images\orderedList.png" />
+    <Content Include="images\smalllogo.png" />
+    <Content Include="images\splashscreen.png" />
+    <Content Include="images\storelogo.png" />
+    <Content Include="images\unorderedList.png" />
+    <Content Include="js\default.js" />
+    <Content Include="css\default.css" />
+    <Content Include="ReadMe.html" />
+    <None Include="TextEditingWithRadialMenu_TemporaryKey.pfx" />
+  </ItemGroup>
+  <ItemGroup>
+    <SDKReference Include="Microsoft.WinJS.1.0, Version=1.0" />
+    <SDKReference Include="Telerik.UI, Version=2013.3.1015" />
+  </ItemGroup>
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />
+  <!-- To modify your build process, add your task inside one of the targets below then uncomment
+       that target and the DisableFastUpToDateCheck PropertyGroup. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <Target Name="AfterBuild">
+  </Target>
+  <PropertyGroup>
+    <DisableFastUpToDateCheck>true</DisableFastUpToDateCheck>
+  </PropertyGroup>
+  -->
+</Project>

RadialMenu/TextEditingWithRadialMenu/css/default.css

@@ -0,0 +1,8 @@
+.mainContent {
+	margin: 120px 0 250px 120px;
+}
+
+.info {
+	color: #feef7a;
+	margin-left: 120px;
+}

RadialMenu/TextEditingWithRadialMenu/default.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>GettingStarted</title>
+
+    <!-- WinJS references -->
+    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
+    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
+    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
+
+    <!-- Telerik references -->
+	<link href="///Telerik.UI/css/common.css" rel="stylesheet" />
+	<link href="///Telerik.UI/css/dark.css" rel="stylesheet" />
+	<script src="///Telerik.UI/js/jquery.js"></script>
+	<script src="///Telerik.UI/js/ui.js"></script>
+
+    <!-- GettingStarted references -->
+    <link href="/css/default.css" rel="stylesheet" />
+    <script src="/js/default.js"></script>
+</head>
+<body>
+    <section class="mainContent">
+        <div id="target" contenteditable="true" style="width: 600px;">
+            Telerik is a market-leading provider of end-to-end solutions for application development, software testing, agile project management, 
+            reporting, and content management across all major development platforms. Telerik's award-winning software development products enable 
+            enterprises and organizations of every size to generate tangible productivity gains, reduce time-to-market, and stay on time and under 
+            budget. With tens of thousands of users in more than 90 countries around the world, Telerik’s customers include numerous Fortune 2000 
+            companies, academic institutions, governments, and non-profit organizations.
+        </div>
+		<div data-win-control="Telerik.UI.RadRadialMenu" data-win-options="{
+                target: '#target',
+                items: [{
+							id: 'FontName',
+							text: 'Font Name',
+							icon: '\uE185',
+							items: [
+								{id: 'Arial', text: 'Arial', style: {font: '10pt Arial'}},
+								{id: 'Calibri', text: 'Calibri', style: {font: '12pt Calibri'}},
+								{id: 'Cambria', text: 'Cambria', style: {font: '12pt Cambria'}},
+								{id: 'Comic Sans', text: 'Comic Sans', style: {font: '12pt Comic sans'}},
+								{id: 'Consolas', text: 'Consolas', style: {font: '11pt Consolas'}},
+								{id: 'Segoe UI', text: 'Segoe UI', style: {font: '10pt Segoe UI'}},
+								{id: 'Times', text: 'Times', style: {font: '12pt Times'}},
+								{id: 'Verdana', text: 'Verdana', style: {font: '10pt Verdana'}}
+							]
+                        },
+						{
+							id: 'FontSize',
+							text: 'Font Size',
+							icon: '\uE1C8',
+							items: [
+								{id: '1', text: 'xx-small', style: {font: '12pt Segoe UI'}},
+								{id: '2', text: 'x-small', style: {font: '12pt Segoe UI'}},
+								{id: '3', text: 'small', style: {font: '12pt Segoe UI'}},
+								{id: '4', text: 'medium', style: {font: '12pt Segoe UI'}},
+								{id: '5', text: 'large', style: {font: '12pt Segoe UI'}}
+							]
+						},
+						{
+							id: 'FontColor',
+							text: 'Font Color',
+							icon: '\uE186',
+							items: [
+								{id: 'Orange', style: {background: 'Orange'}},
+								{id: 'Purple',style: {background: 'Purple'}},
+								{id: 'Lightgreen', style: {background: 'Lightgreen'}},
+								{id: 'Teal', style: {background: 'Teal'}},
+								{id: 'Red', style: {background: 'Red'}}
+							]
+						},
+						{
+							id: 'BackColor',
+							text: 'Back Color',
+							icon: '\uE193',
+							items: [
+								{id: 'Orange', style: {background: 'Orange'}},
+								{id: 'Purple',style: {background: 'Purple'}},
+								{id: 'Lightgreen', style: {background: 'Lightgreen'}},
+								{id: 'Teal', style: {background: 'Teal'}},
+								{id: 'Red', style: {background: 'Red'}}
+							]
+						},
+                        {
+							id: 'Lists',
+							text: 'Lists',
+							icon: '\uE179',
+							items: [
+                                {
+                                    id: 'InsertOrderedList', 
+                                    text: 'Numbered list', 
+                                    icon: {
+                                        url: 'images/orderedlist.png',
+                                        width: 36,
+                                        height: 46
+                                    },
+                                    selectable: true,
+                                    group: 'lists'
+                                },
+								{
+                                    id: 'InsertUnorderedList',
+                                    text: 'Bullet list', 
+                                    icon: {
+                                        url: 'images/unorderedlist.png',
+                                        width: 36,
+                                        height: 46
+                                    },
+                                    selectable: true,
+                                    group: 'lists'
+                                }
+							]
+                        },
+                        {
+							id: 'Justify',
+							text: 'Justify',
+							icon: '\uE1A1',
+							items: [
+								{
+                                    id: 'JustifyLeft', 
+                                    text: 'Left', 
+                                    icon: '\uE1A0', 
+                                    selectable: true, 
+                                    group: 'justify'},
+								{
+                                    id: 'JustifyCenter',
+                                    text: 'Center', 
+                                    icon: '\uE1A1', 
+                                    selectable: true, 
+                                    group: 'justify'
+                                },
+								{
+                                    id: 'JustifyRight', 
+                                    text: 'Right', 
+                                    icon: '\uE1A2', 
+                                    selectable: true, 
+                                    group: 'justify'
+                                }
+							]
+                        },
+                        {
+							id: 'CopyTools',
+							text: 'Copy',
+							icon: '\uE16F',
+							items: [
+                                { id: 'Cut', text: 'Cut', icon: '\uE16B' },
+								{ id: 'Copy', text: 'Copy', icon: '\uE16F' },
+								{ id: 'Paste', text: 'Paste', icon: '\uE16D' }
+							]
+                        },
+                        {
+							id: 'FontStyle',
+							text: 'Font Style',
+							icon: '\uE19B',
+                            items: [
+                                { id: 'Bold', text: 'Bold', icon: '\uE19B', selectable: true },
+                                { id: 'Italic', text: 'Italic', icon: '\uE199', selectable: true },
+						        { id: 'Underline', text: 'Underline', icon: '\uE19A', selectable: true }
+                            ]
+                        }
+                    ],
+					onaction: Events.action,
+					onexpand: Events.expand
+            }"></div>
+	</section>
+	<div class="info" data-win-control="WinJS.UI.HtmlControl" data-win-options="{
+		uri: 'readme.html'
+	}">
+	</div>
+</body>
+</html>

RadialMenu/TextEditingWithRadialMenu/js/default.js

@@ -0,0 +1,95 @@
+// For an introduction to the Blank template, see the following documentation:
+// http://go.microsoft.com/fwlink/?LinkId=232509
+(function () {
+    "use strict";
+
+    WinJS.Binding.optimizeBindingReferences = true;
+
+    var app = WinJS.Application;
+    var activation = Windows.ApplicationModel.Activation;
+
+    WinJS.Namespace.define("Events", {
+        action: WinJS.Utilities.markSupportedForProcessing(function (e) {
+            var item = e.item;
+            var action = e.item.id;
+            if (item.parent) {
+                // handle nested commands based on the parent item id. The value for the commands 
+                // is represented by the item id.
+                switch (item.parent.id) {
+                    case "FontName":
+                        document.execCommand("fontName", false, action);
+                        break;
+                    case "FontSize":
+                        var size = parseInt(action);
+                        document.execCommand("fontSize", false, size);
+                        break;
+                    case "FontColor":
+                        document.execCommand("foreColor", false, action);
+                        break;
+                    case "BackColor":
+                        document.execCommand("backColor", false, action);
+                        break;
+                    case "Justify":
+                        document.execCommand(action, false);
+                        break;
+                    case "FontStyle":
+                        document.execCommand(action, false);
+                        break;
+                    case "CopyTools":
+                        document.execCommand(action, false);
+                        break;
+                    case "Lists":
+                        document.execCommand(action, false);
+                        break;
+                }
+            }
+            else {
+                switch (action) {
+                    // handle root level commands. In this case if the user clicks on the 'Copy' button 
+                    // without expanding it, the text will be copied.
+                    case "CopyTools":
+                        document.execCommand("copy", false);
+                        break;
+                }
+            }
+
+        })
+		,
+        expand: WinJS.Utilities.markSupportedForProcessing(function (e) {
+            var menu = e.menu;
+            // persist the selected state of items based on the current text selection when the menu expands
+            menu.getItem("Bold").selected = document.queryCommandState("bold");
+            menu.getItem("Italic").selected = document.queryCommandState("italic");
+            menu.getItem("Underline").selected = document.queryCommandState("underline");
+            menu.getItem("JustifyLeft").selected = document.queryCommandState("JustifyLeft");
+            menu.getItem("JustifyRight").selected = document.queryCommandState("JustifyRight");
+            menu.getItem("JustifyCenter").selected = document.queryCommandState("JustifyCenter");
+            menu.getItem("InsertOrderedList").selected = document.queryCommandState("InsertOrderedList");
+            menu.getItem("InsertUnorderedList").selected = document.queryCommandState("InsertUnorderedList");
+        })
+    });
+
+    app.onactivated = function (args) {
+        if (args.detail.kind === activation.ActivationKind.launch) {
+            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
+                // TODO: This application has been newly launched. Initialize
+                // your application here.
+            } else {
+                // TODO: This application has been reactivated from suspension.
+                // Restore application state here.
+            }
+            args.setPromise(WinJS.UI.processAll());
+        }
+    };
+
+    app.oncheckpoint = function (args) {
+        // TODO: This application is about to be suspended. Save any state
+        // that needs to persist across suspensions here. You might use the
+        // WinJS.Application.sessionState object, which is automatically
+        // saved and restored across suspension. If you need to complete an
+        // asynchronous operation before your application is suspended, call
+        // args.setPromise().
+    };
+
+    app.start();
+})();

RadialMenu/TextEditingWithRadialMenu/package.appxmanifest

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
+
+  <Identity
+    Name="a4d560e4-937f-40ce-afab-80ef2eb27dd6"
+    Version="1.0.0.0"
+    Publisher="CN=myankov" />
+
+  <Properties>
+    <DisplayName>TextEditingWithRadialMenu</DisplayName>
+    <PublisherDisplayName>myankov</PublisherDisplayName>
+    <Logo>images\storelogo.png</Logo>
+  </Properties>
+
+  <Prerequisites>
+    <OSMinVersion>6.2.1</OSMinVersion>
+    <OSMaxVersionTested>6.2.1</OSMaxVersionTested>
+  </Prerequisites>
+
+  <Resources>
+    <Resource Language="x-generate" />
+  </Resources>
+
+  <Applications>
+    <Application 
+      Id="App"
+      StartPage="default.html">
+
+      <VisualElements
+        DisplayName="TextEditingWithRadialMenu"
+        Logo="images\logo.png"
+        SmallLogo="images\smalllogo.png"
+        Description="TextEditingWithRadialMenu"
+        ForegroundText="light"
+        BackgroundColor="#464646">
+
+        <DefaultTile ShowName="allLogos" />
+        <SplashScreen Image="images\splashscreen.png" />
+
+      </VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+  </Capabilities>
+
+</Package>