ADAM / AIAHTML5

Commit 038e9bf6ad553c754faad2e4f4315f130cfb489a

Authored by Mukul Rajput
1 parent 8a21167f

this is for bug 9818 colored rectagnle behind text

Inline Side-by-side
Showing 2 changed files with 129 additions and 84 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @038e9bf
... ... @@ -154,6 +154,80 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
154 154  
155 155 $(document).ready(function () {
156 156 getUserDetails();
  157 +
  158 +
  159 + $(function () {
  160 + var colpick = $('.demo').each(function () {
  161 +
  162 + $(this).minicolors({
  163 + control: $(this).attr('data-control') || 'hue',
  164 + inline: $(this).attr('data-inline') === 'true',
  165 + letterCase: 'lowercase',
  166 + opacity: false,
  167 + change: function (hex, opacity) {
  168 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");
  169 + if (!hex) return;
  170 + if (opacity) hex += ', ' + opacity;
  171 + try {
  172 + console.log(hex);
  173 + $("#text_area").css("color", hex);
  174 + } catch (e) { }
  175 + $(this).select();
  176 + },
  177 + theme: 'bootstrap'
  178 + });
  179 + });
  180 +
  181 + var $inlinehex = $('#inlinecolorhex h3 small');
  182 + //alert($inlinehex);
  183 + $('#inlinecolors').minicolors({
  184 + inline: true,
  185 + theme: 'bootstrap',
  186 + change: function (hex) {
  187 + if (!hex) return;
  188 +
  189 + $inlinehex.html(hex);
  190 + }
  191 + });
  192 + });
  193 +
  194 +
  195 + $(function () {
  196 + var colpick = $('.drawTextBG').each(function () {
  197 + $(this).minicolors({
  198 + control: $(this).attr('data-control') || 'hue',
  199 + inline: $(this).attr('data-inline') === 'true',
  200 + letterCase: 'lowercase',
  201 + opacity: false,
  202 + change: function (hex, opacity) {
  203 + $("#drawTextBGColorpicker .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");
  204 + if (!hex) return;
  205 + if (opacity) hex += ', ' + opacity;
  206 + try {
  207 + console.log(hex);
  208 + // $("#text_area").css("background-color", hex);
  209 + } catch (e) { }
  210 + $(this).select();
  211 + },
  212 + theme: 'bootstrap'
  213 + });
  214 + });
  215 + var $inlinehex = $('#inlinecolorhex h3 small');
  216 + //alert($inlinehex);
  217 + $('#inlinecolors').minicolors({
  218 + inline: true,
  219 + theme: 'bootstrap',
  220 + change: function (hex) {
  221 +
  222 + if (!hex) return;
  223 + $inlinehex.html(hex);
  224 + }
  225 + });
  226 + });
  227 +
  228 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  229 + $("#drawTextBGColorpicker .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#ffffff" });
  230 +
157 231 });
158 232  
159 233 $rootScope.$on("$locationChangeSuccess", function () {
... ... @@ -1592,6 +1666,8 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1592 1666 $rootScope.saveText = function () {
1593 1667  
1594 1668 document.getElementById('modelbackground').style.display = "none";
  1669 + $rootScope.selectedBGColorForTextArea = $("#drawTextBGColorpicker span.minicolors-swatch-color").css('background-color');
  1670 +
1595 1671 // this part will work first time when save button will be clicked
1596 1672 if ($rootScope.IsTextAlreadySave == false) {
1597 1673 // getting textarea style properties
... ... @@ -1609,31 +1685,8 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1609 1685 $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers();
1610 1686 // Text After Saving in Rectangle
1611 1687 $rootScope.resetTextRect = $rootScope.ObjectIndex++;
1612   - $('#canvas').drawText({
1613   - layer: true,
1614   - draggable: true,
1615   - name: 'TextAreaNew_' + $rootScope.resetTextRect,
1616   - groups: ['TextAreaNew_' + $rootScope.resetTextRect],
1617   - dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect],
1618   - fillStyle: $rootScope.fontColor,
1619   - fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
1620   - fontSize: $rootScope.fontSizes,
1621   - fromCenter: false,
1622   - fontFamily: $rootScope.fontFamily,
1623   - align: $rootScope.textAlignmt,
1624   - strokeWidth: 0,
1625   - text: $rootScope.textArea,
1626   - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1627   - maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
1628   - maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
1629   - add: function (layer) {
1630   -
1631   - //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
1632   - $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });
1633   - }
1634   - })
1635   - // Draw rectangle
1636   - .drawRect({
  1688 +
  1689 + $('#canvas').drawRect({
1637 1690 name: 'TextArea1_' + $rootScope.resetTextRect,
1638 1691 layer: true,
1639 1692 draggable: true,
... ... @@ -1642,6 +1695,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1642 1695 opacity: $rootScope.shapestyleOpacity,
1643 1696 strokeStyle: $rootScope.shapestyleborderColor,
1644 1697 strokeWidth: $rootScope.shapestyleborderWidth,
  1698 + fillStyle: $rootScope.selectedBGColorForTextArea,
1645 1699 fromCenter: false,
1646 1700 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1647 1701 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
... ... @@ -1858,7 +1912,29 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1858 1912 layer.draggable = false;
1859 1913 }
1860 1914 }
1861   - });
  1915 + }).drawText({
  1916 + layer: true,
  1917 + draggable: true,
  1918 + name: 'TextAreaNew_' + $rootScope.resetTextRect,
  1919 + groups: ['TextAreaNew_' + $rootScope.resetTextRect],
  1920 + dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect],
  1921 + fillStyle: $rootScope.fontColor,
  1922 + fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
  1923 + fontSize: $rootScope.fontSizes,
  1924 + fromCenter: false,
  1925 + fontFamily: $rootScope.fontFamily,
  1926 + align: $rootScope.textAlignmt,
  1927 + strokeWidth: 0,
  1928 + text: $rootScope.textArea,
  1929 + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
  1930 + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
  1931 + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
  1932 + add: function (layer) {
  1933 +
  1934 + //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
  1935 + $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });
  1936 + }
  1937 + });
1862 1938 $("#text_area").val('');
1863 1939 $("#text_area").css({ " font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
1864 1940  
... ... @@ -1910,27 +1986,9 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1910 1986 $rootScope.resetTextSave = $rootScope.ObjectIndexSave++;
1911 1987  
1912 1988 // generating new text area
1913   - $('#canvas').drawText({
1914   - layer: true,
1915   - draggable: true,
1916   - name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave,
1917   - groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
1918   - dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
1919   - fillStyle: _modifiedFontColor,
1920   - fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,
1921   - fontSize: _modifiedFontSize,
1922   - fontFamily: _modifiedFontFamily,
1923   - align: _modifiedTextAlign,
1924   - strokeWidth: 0,
1925   - fromCenter: false,
1926   - text: _modifiedText,
1927   - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1928   - maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
1929   - maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height
1930   -
1931   - })
  1989 + $('#canvas')
1932 1990 // Draw rect as wide as the text
1933   - .drawRect({
  1991 + $('#canvas').drawRect({
1934 1992 name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSave,
1935 1993 layer: true,
1936 1994 draggable: true,
... ... @@ -1940,6 +1998,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1940 1998 fromCenter: false,
1941 1999 strokeStyle: $rootScope.shapestyleborderColor,
1942 2000 strokeWidth: $rootScope.shapestyleborderWidth,
  2001 + fillStyle: $rootScope.selectedBGColorForTextArea,
1943 2002 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1944 2003 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
1945 2004 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
... ... @@ -2113,7 +2172,25 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
2113 2172 }
2114 2173 }
2115 2174  
2116   - });
  2175 + }).drawText({
  2176 + layer: true,
  2177 + draggable: true,
  2178 + name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave,
  2179 + groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
  2180 + dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
  2181 + fillStyle: _modifiedFontColor,
  2182 + fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,
  2183 + fontSize: _modifiedFontSize,
  2184 + fontFamily: _modifiedFontFamily,
  2185 + align: _modifiedTextAlign,
  2186 + strokeWidth: 0,
  2187 + fromCenter: false,
  2188 + text: _modifiedText,
  2189 + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
  2190 + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
  2191 + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height
  2192 +
  2193 + });
2117 2194  
2118 2195 }
2119 2196 }
... ...
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @038e9bf
... ... @@ -689,6 +689,9 @@
689 689  
690 690 <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc">
691 691 </div>
  692 + <div class="form-group" id="drawTextBGColorpicker" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
  693 + <input type="text" id="saturation-demo-background" class="form-control drawTextBG" data-control="saturation" style="display:none;" value="#0088cc">
  694 + </div>
692 695  
693 696 <span style="vertical-align:middle;">
694 697 <span id="text-left" class="Edittext-btn-css">
... ... @@ -1404,42 +1407,7 @@
1404 1407 });
1405 1408 </script>
1406 1409  
1407   - <script type="text/javascript">
1408   - $(function () {
1409   - var colpick = $('.demo').each(function () {
1410   -
1411   - $(this).minicolors({
1412   - control: $(this).attr('data-control') || 'hue',
1413   - inline: $(this).attr('data-inline') === 'true',
1414   - letterCase: 'lowercase',
1415   - opacity: false,
1416   - change: function (hex, opacity) {
1417   - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");
1418   - if (!hex) return;
1419   - if (opacity) hex += ', ' + opacity;
1420   - try {
1421   - console.log(hex);
1422   - $("#text_area").css("color", hex);
1423   - } catch (e) { }
1424   - $(this).select();
1425   - },
1426   - theme: 'bootstrap'
1427   - });
1428   - });
1429   -
1430   - var $inlinehex = $('#inlinecolorhex h3 small');
1431   - //alert($inlinehex);
1432   - $('#inlinecolors').minicolors({
1433   - inline: true,
1434   - theme: 'bootstrap',
1435   - change: function (hex) {
1436   - if (!hex) return;
1437   -
1438   - $inlinehex.html(hex);
1439   - }
1440   - });
1441   - });
1442   - </script>
  1410 +
1443 1411  
1444 1412  
1445 1413 <script type="text/javascript">
... ... @@ -1549,7 +1517,7 @@
1549 1517 <script>
1550 1518 $(document).ready(function () {
1551 1519 // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
1552   - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  1520 +
1553 1521 var borderWidth = 1;
1554 1522 var borderColor = "#000";
1555 1523 $("#borderWidthCanvasElement").change(function () {
... ...