ADAM / AIAHTML5

Commit bd3b8d2bc8b34522a548155d0f3f22e88a4dca41

Authored by unknown
1 parent 98e905fc

Commit changes for TextArea and Free style drawing.

Inline Side-by-side
Showing 9 changed files with 1324 additions and 437 deletions
400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj
  View file @bd3b8d2
@@ -43074,6 +43074,7 @@ @@ -43074,6 +43074,7 @@
43074 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\images\bubble\topRightArrow.png" /> 43074 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\images\bubble\topRightArrow.png" />
43075 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\images\other\dot.gif" /> 43075 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\images\other\dot.gif" />
43076 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\index.html" /> 43076 <Content Include="libs\jquery\jquery_plugin\SpeechBubble\index.html" />
  43077 + <Content Include="libs\sketch.js" />
43077 <Content Include="libs\videogular\vg-controls.min.js" /> 43078 <Content Include="libs\videogular\vg-controls.min.js" />
43078 <Content Include="libs\videogular\videogular.js" /> 43079 <Content Include="libs\videogular\videogular.js" />
43079 <Content Include="libs\videogular\videogular.min.js" /> 43080 <Content Include="libs\videogular\videogular.min.js" />
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @bd3b8d2
@@ -5341,6 +5341,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5341,6 +5341,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5341 5341
5342 $scope.$on('annotationToolEvent', function (event, data) { 5342 $scope.$on('annotationToolEvent', function (event, data) {
5343 $("#canvas").css("display", "block"); 5343 $("#canvas").css("display", "block");
  5344 + $("#canvasPaint").css("display", "block");
  5345 +
5344 $scope.doClick(); 5346 $scope.doClick();
5345 }); 5347 });
5346 $scope.mousePs; 5348 $scope.mousePs;
@@ -5396,7 +5398,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5396,7 +5398,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5396 $rootScope.resetPin = 0; 5398 $rootScope.resetPin = 0;
5397 $rootScope.resetPinArc = 0; 5399 $rootScope.resetPinArc = 0;
5398 $rootScope.ObjectIndex = 0; 5400 $rootScope.ObjectIndex = 0;
  5401 + $rootScope.Object1Index = 0;
  5402 + $rootScope.resetText = 0;
  5403 +
5399 var arrayRect = {}; 5404 var arrayRect = {};
  5405 +
5400 5406
5401 $scope.OnPaintCanvasMouseUp = function (event) { 5407 $scope.OnPaintCanvasMouseUp = function (event) {
5402 5408
@@ -5411,467 +5417,678 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5411,467 +5417,678 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5411 5417
5412 var canvasElement = document.getElementById("canvas"); 5418 var canvasElement = document.getElementById("canvas");
5413 var ctx = canvasElement.getContext("2d"); 5419 var ctx = canvasElement.getContext("2d");
5414 -  
5415 - switch ($rootScope.shapeType) { 5420 + if ($rootScope.shapeType == "FreeStylePaint") {
  5421 + var canvasPaint_zIndex = $('#canvasPaint').css("z-index");
  5422 + var canvas_zIndex = $('#canvas').css("z-index");
  5423 + if (canvas_zIndex > canvasPaint_zIndex) {
  5424 + canvasPaint_zIndex = parseInt(canvas_zIndex) + 1;
5416 5425
5417 - case "cursor":  
5418 - ctx.clearRect(0, 0, 2277, 3248);  
5419 - ctx.beginPath(); 5426 + }
  5427 + else {
  5428 + canvasPaint_zIndex = parseInt(canvasPaint_zIndex) + 1;
  5429 + }
  5430 + $('#canvasPaint').css("z-index", canvasPaint_zIndex);
  5431 + $('#canvasPaint').sketch({ defaultColor: "#000", defaultSize: 1 });
  5432 + }
  5433 + else {
  5434 + switch ($rootScope.shapeType) {
5420 5435
5421 - break; 5436 + case "cursor":
  5437 + ctx.clearRect(0, 0, 2277, 3248);
  5438 + ctx.beginPath();
5422 5439
5423 - case "Line":  
5424 -  
5425 - $rootScope.resetLine = $rootScope.ObjectIndex++;  
5426 - $('#canvas').addLayer({  
5427 - name: 'Line_' + $rootScope.resetLine,  
5428 - layer: true,  
5429 - type: 'line',  
5430 - draggable: true,  
5431 - strokeStyle: 'black',  
5432 - strokeWidth: 2,  
5433 - rounded: true,  
5434 - x1: $scope.offsetX1, y1: $scope.offsetY1,  
5435 - x2: $scope.x, y2: $scope.y,  
5436 -  
5437 - click: function (layer) {  
5438 - $rootScope.canvasLayerNameCollection = [];  
5439 - $rootScope.canvasLayerNameCollection.push(layer.name);  
5440 - $('#canvas').setLayer(layer.name, {  
5441 - handle: {  
5442 - type: 'arc',  
5443 - fillStyle: '#fff',  
5444 - strokeStyle: '#c33',  
5445 - strokeWidth: 2,  
5446 - radius: 3  
5447 - }  
5448 - }).drawLayers();  
5449 - 5440 + break;
5450 5441
5451 - },  
5452 - mouseout: function (layer) {  
5453 - $rootScope.canvasLayerNameCollection = [];  
5454 - $('#canvas').setLayer(layer.name, {  
5455 - handle: {  
5456 - type: 'arc',  
5457 - fillStyle: '#fff',  
5458 - strokeStyle: '#c33',  
5459 - strokeWidth: 0,  
5460 - radius: 0  
5461 - } 5442 + case "Line":
  5443 +
  5444 + $rootScope.resetLine = $rootScope.ObjectIndex++;
  5445 + $('#canvas').addLayer({
  5446 + name: 'Line_' + $rootScope.resetLine,
  5447 + layer: true,
  5448 + type: 'line',
  5449 + draggable: true,
  5450 + strokeStyle: 'black',
  5451 + strokeWidth: 2,
  5452 + rounded: true,
  5453 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  5454 + x2: $scope.x, y2: $scope.y,
  5455 +
  5456 + click: function (layer) {
  5457 + $rootScope.canvasLayerNameCollection = [];
  5458 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5459 + $('#canvas').setLayer(layer.name, {
  5460 + handle: {
  5461 + type: 'arc',
  5462 + fillStyle: '#fff',
  5463 + strokeStyle: '#c33',
  5464 + strokeWidth: 2,
  5465 + radius: 3
  5466 + }
  5467 + }).drawLayers();
  5468 +
  5469 +
  5470 + },
  5471 + mouseout: function (layer) {
  5472 + $rootScope.canvasLayerNameCollection = [];
  5473 + $('#canvas').setLayer(layer.name, {
  5474 + handle: {
  5475 + type: 'arc',
  5476 + fillStyle: '#fff',
  5477 + strokeStyle: '#c33',
  5478 + strokeWidth: 0,
  5479 + radius: 0
  5480 + }
5462 5481
5463 - }).drawLayers(); 5482 + }).drawLayers();
5464 5483
5465 - },  
5466 - mouseover: function (layer) { 5484 + },
  5485 + mouseover: function (layer) {
5467 5486
5468 5487
5469 - $('#canvas').setLayer(layer.name, {  
5470 - handle: {  
5471 - type: 'arc',  
5472 - fillStyle: '#fff',  
5473 - strokeStyle: '#c33',  
5474 - strokeWidth: 2,  
5475 - radius: 3  
5476 - }  
5477 - }).drawLayers(); 5488 + $('#canvas').setLayer(layer.name, {
  5489 + handle: {
  5490 + type: 'arc',
  5491 + fillStyle: '#fff',
  5492 + strokeStyle: '#c33',
  5493 + strokeWidth: 2,
  5494 + radius: 3
  5495 + }
  5496 + }).drawLayers();
5478 5497
5479 - } 5498 + }
5480 5499
5481 - }).drawLayers();  
5482 - $('.btnCursor').trigger('click');  
5483 - $(".btn-annotation").removeClass("activebtncolor");  
5484 - $('.btnCursor').addClass('activebtncolor');  
5485 - break;  
5486 -  
5487 - case "Rectangle":  
5488 - $rootScope.resetRect = $rootScope.ObjectIndex++;  
5489 -  
5490 - $('#canvas').addLayer({  
5491 - layer: true,  
5492 - name: 'Rect_' + $rootScope.resetRect,  
5493 - fillStyle: '#fff',  
5494 - type: 'rectangle',  
5495 - draggable: true,  
5496 - strokeStyle: 'black',  
5497 - strokeWidth: 2,  
5498 - x: $scope.offsetX1, y: $scope.offsetY1,  
5499 - width: $scope.x - $scope.offsetX1,  
5500 - height: $scope.y - $scope.offsetY1,  
5501 -  
5502 - resizeFromCenter: false,  
5503 -  
5504 -  
5505 - click: function (layer) {  
5506 - $rootScope.canvasLayerNameCollection = [];  
5507 - $rootScope.canvasLayerNameCollection.push(layer.name);  
5508 - $('#canvas').setLayer(layer.name, {  
5509 - handle: {  
5510 - type: 'rectangle',  
5511 - fillStyle: '#fff',  
5512 - strokeStyle: '#c33',  
5513 - strokeWidth: 2,  
5514 - width: 5, height: 5,  
5515 - cornerRadius: 3  
5516 - }  
5517 - }).drawLayers(); 5500 + }).drawLayers();
  5501 + $('.btnCursor').trigger('click');
  5502 + $(".btn-annotation").removeClass("activebtncolor");
  5503 + $('.btnCursor').addClass('activebtncolor');
  5504 + break;
5518 5505
5519 - },  
5520 - mouseout: function (layer) {  
5521 - $rootScope.canvasLayerNameCollection = [];  
5522 - $('#canvas').setLayer(layer.name, {  
5523 - handle: {  
5524 - type: 'rectangle',  
5525 - fillStyle: 'pink',  
5526 - strokeStyle: 'yellow',  
5527 - strokeWidth: 0,  
5528 - width: 0, height: 0,  
5529 - cornerRadius: 0  
5530 - } 5506 + case "Rectangle":
  5507 + $rootScope.resetRect = $rootScope.ObjectIndex++;
  5508 +
  5509 + $('#canvas').addLayer({
  5510 + layer: true,
  5511 + name: 'Rect_' + $rootScope.resetRect,
  5512 + fillStyle: '#fff',
  5513 + type: 'rectangle',
  5514 + draggable: true,
  5515 + strokeStyle: 'black',
  5516 + strokeWidth: 2,
  5517 + x: $scope.offsetX1, y: $scope.offsetY1,
  5518 + width: $scope.x - $scope.offsetX1,
  5519 + height: $scope.y - $scope.offsetY1,
  5520 +
  5521 + resizeFromCenter: false,
  5522 +
  5523 +
  5524 + click: function (layer) {
  5525 + $rootScope.canvasLayerNameCollection = [];
  5526 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5527 + $('#canvas').setLayer(layer.name, {
  5528 + handle: {
  5529 + type: 'rectangle',
  5530 + fillStyle: '#fff',
  5531 + strokeStyle: '#c33',
  5532 + strokeWidth: 2,
  5533 + width: 5, height: 5,
  5534 + cornerRadius: 3
  5535 + }
  5536 + }).drawLayers();
  5537 +
  5538 + },
  5539 + mouseout: function (layer) {
  5540 + $rootScope.canvasLayerNameCollection = [];
  5541 + $('#canvas').setLayer(layer.name, {
  5542 + handle: {
  5543 + type: 'rectangle',
  5544 + fillStyle: 'pink',
  5545 + strokeStyle: 'yellow',
  5546 + strokeWidth: 0,
  5547 + width: 0, height: 0,
  5548 + cornerRadius: 0
  5549 + }
5531 5550
5532 - }).drawLayers(); 5551 + }).drawLayers();
5533 5552
5534 - },  
5535 - mouseover: function (layer) { 5553 + },
  5554 + mouseover: function (layer) {
5536 5555
5537 5556
5538 - $('#canvas').setLayer(layer.name, {  
5539 - handle: {  
5540 - type: 'rectangle',  
5541 - fillStyle: '#fff',  
5542 - strokeStyle: '#c33',  
5543 - strokeWidth: 2,  
5544 - width: 5, height: 5,  
5545 - cornerRadius: 3  
5546 - }  
5547 - }).drawLayers(); 5557 + $('#canvas').setLayer(layer.name, {
  5558 + handle: {
  5559 + type: 'rectangle',
  5560 + fillStyle: '#fff',
  5561 + strokeStyle: '#c33',
  5562 + strokeWidth: 2,
  5563 + width: 5, height: 5,
  5564 + cornerRadius: 3
  5565 + }
  5566 + }).drawLayers();
5548 5567
5549 - }  
5550 - }).drawLayers(); 5568 + }
  5569 + }).drawLayers();
5551 5570
5552 5571
5553 5572
5554 - $('.btnCursor').trigger('click');  
5555 - $(".btn-annotation").removeClass("activebtncolor");  
5556 - $('.btnCursor').addClass('activebtncolor'); 5573 + $('.btnCursor').trigger('click');
  5574 + $(".btn-annotation").removeClass("activebtncolor");
  5575 + $('.btnCursor').addClass('activebtncolor');
5557 5576
5558 - break; 5577 + break;
5559 5578
5560 - case "Circle": 5579 + case "Circle":
  5580 +
  5581 + $rootScope.resetCircle = $rootScope.ObjectIndex++;
  5582 + $('#canvas').addLayer({
  5583 + layer: true,
  5584 + name: 'Circle_' + $rootScope.resetCircle,
  5585 + type: 'ellipse',
  5586 + draggable: true,
  5587 + strokeStyle: '#000',
  5588 + strokeWidth: 2,
  5589 + fillStyle: '#FFF',
  5590 + x: $scope.offsetX1, y: $scope.offsetY1,
  5591 + width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
  5592 + // Place a handle at each side and each corner
  5593 + handlePlacement: 'both',
  5594 +
  5595 +
  5596 +
  5597 + click: function (layer) {
  5598 + $rootScope.canvasLayerNameCollection = [];
  5599 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5600 + $('#canvas').setLayer(layer.name, {
  5601 + handle: {
  5602 + type: 'arc',
  5603 + fillStyle: '#fff',
  5604 + strokeStyle: '#c33',
  5605 + strokeWidth: 2,
  5606 + radius: 3
  5607 + }
  5608 + }).drawLayers();
  5609 +
  5610 + },
  5611 + mouseout: function (layer) {
  5612 + $rootScope.canvasLayerNameCollection = [];
  5613 + $('#canvas').setLayer(layer.name, {
  5614 + handle: {
  5615 + type: 'arc',
  5616 + fillStyle: '#fff',
  5617 + strokeStyle: '#c33',
  5618 + strokeWidth: 0,
  5619 + // width: 0, height: 0,
  5620 + radius: 0
  5621 + }
5561 5622
5562 - $rootScope.resetCircle = $rootScope.ObjectIndex++;  
5563 - $('#canvas').addLayer({  
5564 - layer: true,  
5565 - name: 'Circle_' + $rootScope.resetCircle,  
5566 - type: 'ellipse',  
5567 - draggable: true,  
5568 - strokeStyle: '#000',  
5569 - strokeWidth: 2,  
5570 - fillStyle: '#FFF',  
5571 - x: $scope.offsetX1, y: $scope.offsetY1,  
5572 - width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,  
5573 - // Place a handle at each side and each corner  
5574 - handlePlacement: 'both', 5623 + }).drawLayers();
5575 5624
  5625 + },
  5626 + mouseover: function (layer) {
5576 5627
5577 5628
5578 - click: function (layer) {  
5579 - $rootScope.canvasLayerNameCollection = [];  
5580 - $rootScope.canvasLayerNameCollection.push(layer.name);  
5581 - $('#canvas').setLayer(layer.name, {  
5582 - handle: {  
5583 - type: 'arc',  
5584 - fillStyle: '#fff',  
5585 - strokeStyle: '#c33',  
5586 - strokeWidth: 2,  
5587 - radius: 3  
5588 - }  
5589 - }).drawLayers();  
5590 -  
5591 - },  
5592 - mouseout: function (layer) {  
5593 - $rootScope.canvasLayerNameCollection = [];  
5594 - $('#canvas').setLayer(layer.name, {  
5595 - handle: {  
5596 - type: 'arc',  
5597 - fillStyle: '#fff',  
5598 - strokeStyle: '#c33',  
5599 - strokeWidth: 0,  
5600 - // width: 0, height: 0,  
5601 - radius: 0  
5602 - } 5629 + $('#canvas').setLayer(layer.name, {
  5630 + handle: {
  5631 + type: 'arc',
  5632 + fillStyle: '#fff',
  5633 + strokeStyle: '#c33',
  5634 + strokeWidth: 2,
  5635 + // width: 5, height: 5,
  5636 + radius: 3
  5637 + }
  5638 + }).drawLayers();
5603 5639
5604 - }).drawLayers(); 5640 + }
  5641 + }).drawLayers();
  5642 + $('.btnCursor').trigger('click');
  5643 + $(".btn-annotation").removeClass("activebtncolor");
  5644 + $('.btnCursor').addClass('activebtncolor');
  5645 + break;
  5646 + case "Arrow":
  5647 + $rootScope.resetArrow = $rootScope.ObjectIndex++;
  5648 +
  5649 + $('#canvas').drawLine({
  5650 + layer: true,
  5651 + name: 'Arrow_' + $rootScope.resetArrow,
  5652 + draggable: true,
  5653 + strokeStyle: '#000',
  5654 + strokeWidth: 2,
  5655 + rounded: true,
  5656 + startArrow: true,
  5657 + arrowRadius: 7,
  5658 + arrowAngle: 90,
  5659 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  5660 + x2: $scope.x, y2: $scope.y,
  5661 +
  5662 + click: function (layer) {
  5663 + $rootScope.canvasLayerNameCollection = [];
  5664 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5665 + $('#canvas').setLayer(layer.name, {
  5666 + handle: {
  5667 + type: 'arc',
  5668 + fillStyle: '#fff',
  5669 + strokeStyle: '#c33',
  5670 + strokeWidth: 2,
  5671 + // width: 5, height: 5,
  5672 + radius: 3
  5673 + }
  5674 + }).drawLayers();
  5675 + // $("#canvas").removeLayer(layer.name).drawLayers();
  5676 +
  5677 + },
  5678 + mouseout: function (layer) {
  5679 + $rootScope.canvasLayerNameCollection = [];
  5680 + $('#canvas').setLayer(layer.name, {
  5681 + handle: {
  5682 + type: 'arc',
  5683 + fillStyle: '#fff',
  5684 + strokeStyle: '#c33',
  5685 + strokeWidth: 0,
  5686 + // width: 0, height: 0,
  5687 + radius: 0
  5688 + }
5605 5689
5606 - },  
5607 - mouseover: function (layer) { 5690 + }).drawLayers();
5608 5691
  5692 + },
  5693 + mouseover: function (layer) {
5609 5694
5610 - $('#canvas').setLayer(layer.name, {  
5611 - handle: {  
5612 - type: 'arc',  
5613 - fillStyle: '#fff',  
5614 - strokeStyle: '#c33',  
5615 - strokeWidth: 2,  
5616 - // width: 5, height: 5,  
5617 - radius: 3  
5618 - }  
5619 - }).drawLayers();  
5620 5695
5621 - }  
5622 - }).drawLayers();  
5623 - $('.btnCursor').trigger('click');  
5624 - $(".btn-annotation").removeClass("activebtncolor");  
5625 - $('.btnCursor').addClass('activebtncolor');  
5626 - break;  
5627 - case "Arrow":  
5628 - $rootScope.resetArrow = $rootScope.ObjectIndex++;  
5629 -  
5630 - $('#canvas').drawLine({  
5631 - layer: true,  
5632 - name: 'Arrow_' + $rootScope.resetArrow,  
5633 - draggable: true,  
5634 - strokeStyle: '#000',  
5635 - strokeWidth: 2,  
5636 - rounded: true,  
5637 - startArrow: true,  
5638 - arrowRadius: 7,  
5639 - arrowAngle: 90,  
5640 - x1: $scope.offsetX1, y1: $scope.offsetY1,  
5641 - x2: $scope.x, y2: $scope.y,  
5642 -  
5643 - click: function (layer) {  
5644 - $rootScope.canvasLayerNameCollection = [];  
5645 - $rootScope.canvasLayerNameCollection.push(layer.name);  
5646 - $('#canvas').setLayer(layer.name, {  
5647 - handle: {  
5648 - type: 'arc',  
5649 - fillStyle: '#fff',  
5650 - strokeStyle: '#c33',  
5651 - strokeWidth: 2,  
5652 - // width: 5, height: 5,  
5653 - radius: 3  
5654 - }  
5655 - }).drawLayers();  
5656 - // $("#canvas").removeLayer(layer.name).drawLayers(); 5696 + $('#canvas').setLayer(layer.name, {
  5697 + handle: {
  5698 + type: 'arc',
  5699 + fillStyle: '#fff',
  5700 + strokeStyle: '#c33',
  5701 + strokeWidth: 2,
  5702 + // width: 5, height: 5,
  5703 + radius: 3
  5704 + }
  5705 + }).drawLayers();
5657 5706
5658 - },  
5659 - mouseout: function (layer) {  
5660 - $rootScope.canvasLayerNameCollection = [];  
5661 - $('#canvas').setLayer(layer.name, {  
5662 - handle: {  
5663 - type: 'arc',  
5664 - fillStyle: '#fff',  
5665 - strokeStyle: '#c33',  
5666 - strokeWidth: 0,  
5667 - // width: 0, height: 0,  
5668 - radius: 0  
5669 - } 5707 + }
5670 5708
5671 - }).drawLayers(); 5709 + });
  5710 + $('.btnCursor').trigger('click');
  5711 + $(".btn-annotation").removeClass("activebtncolor");
  5712 + $('.btnCursor').addClass('activebtncolor');
5672 5713
5673 - },  
5674 - mouseover: function (layer) { 5714 + // $scope.resetRect += 1;
  5715 + break;
  5716 + case "Pin":
  5717 +
  5718 + $rootScope.resetPin = $rootScope.ObjectIndex++;
  5719 + $rootScope.resetPinArc = $rootScope.Object1Index++;
  5720 + var radial = $('canvas').createGradient({
  5721 + x1: 50, y1: 50,
  5722 + x2: 50, y2: 50,
  5723 + r1: 10, r2: 30,
  5724 + c1: 'rgba(100, 50, 0,0)',
  5725 + c2: 'grey'
  5726 + });
  5727 + $('#canvas').drawLine({
  5728 + draggable: true,
  5729 + layer: true,
  5730 + name: "Pin_" + $rootScope.resetPin,
  5731 + groups: ["Pin_" + $rootScope.resetPin],
  5732 + dragGroups: ["Pin_" + $rootScope.resetPin],
  5733 + strokeStyle: 'black',
  5734 + strokeWidth: 2,
  5735 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  5736 + x2: $scope.x, y2: $scope.y,
  5737 +
  5738 + click: function (layer) {
  5739 + // debugger;
  5740 + $rootScope.shapeTypePin = "Pin";
  5741 + $rootScope.canvasLayerNameCollection = [];
  5742 + var pinLine_layer = layer.name;
  5743 + var pinLine_layer_split = pinLine_layer.split("_");
  5744 + var pinArcName = "ArcPin_";
  5745 + var pinResult = pinArcName.concat(pinLine_layer_split[1]);
  5746 + alert(pinResult);
  5747 + // d = "ArcPin_" + pinLine_layer_split[1];
  5748 +
  5749 + $rootScope.canvasLayerNameCollection.push({pinName: layer.name ,ArcName: pinResult});
  5750 +
  5751 + $('#canvas').setLayer(layer.name, {
  5752 + handle: {
  5753 + type: 'arc',
  5754 + fillStyle: '#fff',
  5755 + strokeStyle: '#c33',
  5756 + strokeWidth: 2,
  5757 + // width: 5, height: 5,
  5758 + radius: 3
  5759 + }
  5760 + }).drawLayers();
5675 5761
5676 5762
5677 - $('#canvas').setLayer(layer.name, {  
5678 - handle: {  
5679 - type: 'arc',  
5680 - fillStyle: '#fff',  
5681 - strokeStyle: '#c33',  
5682 - strokeWidth: 2,  
5683 - // width: 5, height: 5,  
5684 - radius: 3  
5685 - }  
5686 - }).drawLayers(); 5763 + },
  5764 + mouseout: function (layer) {
  5765 + // $rootScope.resetPinArc = "";
  5766 + // ax = "";
  5767 +
  5768 + $rootScope.canvasLayerNameCollection = [];
  5769 + $('#canvas').setLayer(layer.name, {
  5770 + handle: {
  5771 + type: 'arc',
  5772 + fillStyle: '#fff',
  5773 + strokeStyle: '#c33',
  5774 + strokeWidth: 0,
  5775 + // width: 0, height: 0,
  5776 + radius: 0
  5777 + }
5687 5778
5688 - } 5779 + }).drawLayers();
5689 5780
5690 - });  
5691 - $('.btnCursor').trigger('click');  
5692 - $(".btn-annotation").removeClass("activebtncolor");  
5693 - $('.btnCursor').addClass('activebtncolor');  
5694 -  
5695 - // $scope.resetRect += 1;  
5696 - break;  
5697 - case "Pin":  
5698 -  
5699 - $rootScope.resetPin = $rootScope.ObjectIndex++;  
5700 - $rootScope.resetPinArc = $rootScope.ObjectIndex++;  
5701 - var radial = $('canvas').createGradient({  
5702 - x1: 50, y1: 50,  
5703 - x2: 50, y2: 50,  
5704 - r1: 10, r2: 30,  
5705 - c1: 'rgba(100, 50, 0,0)',  
5706 - c2: 'grey'  
5707 - });  
5708 - $('#canvas').drawLine({  
5709 - draggable: true,  
5710 - layer: true,  
5711 - name: "Pin_" + $rootScope.resetPin,  
5712 - groups: ['shapes'],  
5713 - dragGroups: ['shapes'],  
5714 - strokeStyle: 'black',  
5715 - strokeWidth: 2,  
5716 - x1: $scope.offsetX1, y1: $scope.offsetY1,  
5717 - x2: $scope.x, y2: $scope.y,  
5718 - //handle: {  
5719 - // type: 'arc',  
5720 - // fillStyle: '#fff',  
5721 - // strokeStyle: '#c33',  
5722 - // strokeWidth: 2,  
5723 - // radius: 3  
5724 - //},  
5725 - click: function (layer) {  
5726 - $rootScope.shapeType == "Pin";  
5727 - alert($rootScope.shapeType);  
5728 - //alert(layer.groups);  
5729 - // $rootScope.canvasLayerNameCollection_pin = [];  
5730 - $rootScope.canvasLayerNameCollection = [];  
5731 - // $rootScope.canvasLayerNameCollection_pin.push({ a: layer.name, b: $rootScope.pinVAl });  
5732 - // alert($rootScope.resetPinArc);  
5733 - // alert(layer.name);  
5734 - $rootScope.canvasLayerNameCollection.push({ a: layer.name }, { b: $rootScope.resetPinArc });  
5735 - // alert($rootScope.canvasLayerNameCollection[0].a);  
5736 - // alert($rootScope.canvasLayerNameCollection[0].b);  
5737 - // alert($rootScope.canvasLayerNameCollection.b);  
5738 - $('#canvas').setLayer(layer.name, {  
5739 - handle: {  
5740 - type: 'arc',  
5741 - fillStyle: '#fff',  
5742 - strokeStyle: '#c33',  
5743 - strokeWidth: 2,  
5744 - // width: 5, height: 5,  
5745 - radius: 3  
5746 - }  
5747 - }).drawLayers();  
5748 - // $("#canvas").removeLayer(layer.name).drawLayers(); 5781 + },
  5782 + mouseover: function (layer) {
5749 5783
5750 - },  
5751 - mouseout: function (layer) {  
5752 - $rootScope.canvasLayerNameCollection = [];  
5753 - $('#canvas').setLayer(layer.name, {  
5754 - handle: {  
5755 - type: 'arc',  
5756 - fillStyle: '#fff',  
5757 - strokeStyle: '#c33',  
5758 - strokeWidth: 0,  
5759 - // width: 0, height: 0,  
5760 - radius: 0  
5761 - }  
5762 5784
5763 - }).drawLayers(); 5785 + $('#canvas').setLayer(layer.name, {
  5786 + handle: {
  5787 + type: 'arc',
  5788 + fillStyle: '#fff',
  5789 + strokeStyle: '#c33',
  5790 + strokeWidth: 2,
  5791 + // width: 5, height: 5,
  5792 + radius: 3
  5793 + }
  5794 + }).drawLayers();
5764 5795
5765 - },  
5766 - mouseover: function (layer) { 5796 + }
  5797 + }).drawArc({
  5798 + draggable: true,
  5799 + name: "ArcPin_" + $rootScope.resetPinArc,
  5800 + // name: "Pin_" + $rootScope.resetPin,
  5801 + layer: true,
  5802 + groups: ["Pin_" + $rootScope.resetPin],
  5803 + dragGroups: ["Pin_" + $rootScope.resetPin],
  5804 + strokeStyle: 'grey',
  5805 + strokeWidth: 2,
  5806 + fillStyle: radial,
  5807 + x: $scope.offsetX1, y: $scope.offsetY1,
  5808 + radius: 5,
  5809 + //handle: {
  5810 + // type: 'arc',
  5811 + // fillStyle: '#fff',
  5812 + // strokeStyle: '#c33',
  5813 + // strokeWidth: 2,
  5814 + // radius: 3
  5815 + //},
  5816 + add: function (layer) {
  5817 +
  5818 + $rootScope.resetPinArc = layer.name;
  5819 + // $scope.arr = [];
  5820 +
  5821 +
  5822 + },
  5823 +
  5824 + }).drawLayers();
  5825 + $('.btnCursor').trigger('click');
  5826 + $(".btn-annotation").removeClass("activebtncolor");
  5827 + $('.btnCursor').addClass('activebtncolor');
  5828 + break;
  5829 + case "TextArea":
  5830 +
  5831 + // Draw text
  5832 + $rootScope.resetTextRect = $rootScope.ObjectIndex++;
  5833 + $rootScope.resetText = $rootScope.ObjectIndex++;
  5834 + $('#canvas').drawText({
  5835 + layer: true,
  5836 + draggable: true,
  5837 + name: 'TextArea_' + $rootScope.resetText,
  5838 + groups: ['TextArea_' + $rootScope.resetText],
  5839 + dragGroups: ['TextArea_' + $rootScope.resetText],
  5840 + fillStyle: '#36c',
  5841 + strokeWidth: 0,
  5842 + x: $scope.offsetX1, y: $scope.offsetY1,
  5843 + fontSize: '14pt',
  5844 + align: "left",
  5845 + fontFamily: 'Verdana, sans-serif',
  5846 + text: ''
5767 5847
5768 5848
5769 - $('#canvas').setLayer(layer.name, {  
5770 - handle: {  
5771 - type: 'arc',  
5772 - fillStyle: '#fff',  
5773 - strokeStyle: '#c33',  
5774 - strokeWidth: 2,  
5775 - // width: 5, height: 5,  
5776 - radius: 3  
5777 - }  
5778 - }).drawLayers();  
5779 5849
5780 - }  
5781 - }).drawArc({  
5782 - draggable: true,  
5783 - name: "ArcPin_" + $rootScope.resetPin,  
5784 - layer: true,  
5785 - groups: ['shapes'],  
5786 - dragGroups: ['shapes'],  
5787 - strokeStyle: 'grey',  
5788 - strokeWidth: 2,  
5789 - fillStyle: radial,  
5790 - x: $scope.offsetX1, y: $scope.offsetY1,  
5791 - radius: 5,  
5792 - //handle: {  
5793 - // type: 'arc',  
5794 - // fillStyle: '#fff',  
5795 - // strokeStyle: '#c33',  
5796 - // strokeWidth: 2,  
5797 - // radius: 3  
5798 - //},  
5799 - add: function (layer) {  
5800 - $rootScope.resetPinArc = layer.name;  
5801 - // alert($rootScope.resetPinArc);  
5802 - },  
5803 - //click: function (layer) {  
5804 -  
5805 - // alert(layer.name);  
5806 - // // $rootScope.canvasLayerNameCollection_pin = [];  
5807 - // // $rootScope.canvasLayerNameCollection.push(layer.name);  
5808 - // // $rootScope.pinVAl = layer.name;  
5809 - // $rootScope.canvasLayerNameCollection = [];  
5810 -  
5811 - // $rootScope.canvasLayerNameCollection.push(layer.name);  
5812 - // $('#canvas').setLayer(layer.name, {  
5813 - // handle: {  
5814 - // type: 'arc',  
5815 - // fillStyle: '#fff',  
5816 - // strokeStyle: '#c33',  
5817 - // strokeWidth: 2,  
5818 - // // width: 5, height: 5,  
5819 - // radius: 3  
5820 - // }  
5821 - // }).drawLayers();  
5822 - // // $("#canvas").removeLayer(layer.name).drawLayers();  
5823 -  
5824 - //},  
5825 - }).drawLayers();  
5826 - $('.btnCursor').trigger('click');  
5827 - $(".btn-annotation").removeClass("activebtncolor");  
5828 - $('.btnCursor').addClass('activebtncolor');  
5829 - break;  
5830 - case "TextArea":  
5831 -  
5832 - break;  
5833 - //case "brush":  
5834 - // // if ($rootScope.shapeType == "brush") {  
5835 - // // alert("xxx");  
5836 - // ctx.lineTo(event.pageX - ($("#canvas").offset().left), event.pageY - ($("#canvas").offset().top));  
5837 - // ctx.stroke();  
5838 -  
5839 - // // }  
5840 - // break;  
5841 - case "DrawPolygon":  
5842 - //alert("test");  
5843 -  
5844 - //ctx.beginPath();  
5845 - ctx.lineTo(event.pageX - ($("#canvas").offset().left), event.pageY - ($("#canvas").offset().top));  
5846 - ctx.stroke();  
5847 - $('.btnCursor').trigger('click');  
5848 - //$('.btnCursor').attr("background-color", "#1B92D0");  
5849 - $('.btnCursor').addClass('activebtncolor');  
5850 - //ctx.closePath();  
5851 - // alert("test");  
5852 - break;  
5853 - //case "Clear":  
5854 - // ctx.clearCanvas();  
5855 - // alert("sdfs");  
5856 - // break; 5850 + })
  5851 + // Draw rect as wide as the text
  5852 + .drawRect({
  5853 + layer: true,
  5854 + name: "TextRect_" + $rootScope.resetTextRect,
  5855 + dragGroups: ['shapes'],
  5856 + strokeStyle: 'black',
  5857 + strokeWidth: 2,
  5858 + x: $scope.offsetX1, y: $scope.offsetY1,
  5859 + width: $scope.x - $scope.offsetX1,
  5860 + height: $scope.y - $scope.offsetY1,
  5861 + click: function (layer) {
  5862 +
  5863 + $rootScope.canvasLayerNameCollection = [];
  5864 + $rootScope.canvasLayerNameCollection.push(layer.name);
  5865 + $('#canvas').setLayer(layer.name, {
  5866 + handle: {
  5867 + type: 'rectangle',
  5868 + fillStyle: '#fff',
  5869 + strokeStyle: '#c33',
  5870 + strokeWidth: 2,
  5871 + width: 5, height: 5,
  5872 + cornerRadius: 3
  5873 + }
  5874 + }).drawLayers();
  5875 +
  5876 + },
  5877 + mouseout: function (layer) {
  5878 + $rootScope.canvasLayerNameCollection = [];
  5879 + $('#canvas').setLayer(layer.name, {
  5880 + handle: {
  5881 + type: 'rectangle',
  5882 + fillStyle: 'pink',
  5883 + strokeStyle: 'yellow',
  5884 + strokeWidth: 0,
  5885 + width: 0, height: 0,
  5886 + cornerRadius: 0
  5887 + }
  5888 +
  5889 + }).drawLayers();
  5890 +
  5891 + },
  5892 + mouseover: function (layer) {
5857 5893
  5894 + $('#canvas').setLayer(layer.name, {
  5895 + handle: {
  5896 + type: 'rectangle',
  5897 + fillStyle: '#fff',
  5898 + strokeStyle: '#c33',
  5899 + strokeWidth: 2,
  5900 + width: 5, height: 5,
  5901 + cornerRadius: 3
  5902 + }
  5903 + }).drawLayers();
  5904 +
  5905 + }
  5906 + });
  5907 +
  5908 +
  5909 + $("#annotationTextModal").modal("toggle");
  5910 + $('.btnCursor').trigger('click');
  5911 + $(".btn-annotation").removeClass("activebtncolor");
  5912 + $('.btnCursor').addClass('activebtncolor');
  5913 + break;
  5914 +
  5915 + case "DrawPolygon":
  5916 +
  5917 + break;
  5918 +
  5919 + }
5858 } 5920 }
5859 5921
  5922 + }
  5923 +
  5924 + //-- TextArea functionality of Annotation toolbar
  5925 +
  5926 + $rootScope.fontSizes;
  5927 + $rootScope.fontWeight;
  5928 + $rootScope.fontStyle;
  5929 + $rootScope.textAlignmt;
  5930 + $rootScope.fontColor;
  5931 + $rootScope.underlineText;
  5932 + $rootScope.textArea;
  5933 + $rootScope.fontFamily;
  5934 + $rootScope.saveText = function () {
  5935 +
  5936 + $rootScope.fontSizes = $("#text_area").css("font-size");
  5937 + $rootScope.fontWeight = $("#text_area").css("font-weight");
  5938 + $rootScope.fontStyle = $("#text_area").css("font-style");
  5939 + $rootScope.textAlignmt = $("#text_area").css("text-align");
  5940 + $rootScope.fontColor = $("#text_area").css("color");
  5941 + $rootScope.fontFamily = $("#text_area").css("font-family");
  5942 + $rootScope.underlineText = $("#text_area").css("text-decoration");
  5943 + $rootScope.textArea = $("#text_area").val();
  5944 + $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
  5945 + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
  5946 +
  5947 + $('#canvas').drawText({
  5948 + layer: true,
  5949 + draggable: true,
  5950 + name:'TextArea_'+ $rootScope.resetText,
  5951 + groups: ['TextArea_' + $rootScope.resetText],
  5952 + dragGroups: ['TextArea_' + $rootScope.resetText],
  5953 + fillStyle: $rootScope.fontColor,
  5954 + fontStyle: $rootScope.fontStyle,
  5955 + fontSize: $rootScope.fontSizes,
  5956 + fontFamily: $rootScope.fontFamily,
  5957 + align: $rootScope.textAlignmt,
  5958 + strokeWidth: 0,
  5959 + text: $rootScope.textArea,
  5960 + x: $scope.offsetX1, y: $scope.offsetY1,
  5961 + maxWidth: $scope.x - $scope.offsetX1,
  5962 + maxHeight: $scope.y - $scope.offsetY1,
  5963 +
  5964 + click: function (layer) {
  5965 +
  5966 +
  5967 +
  5968 + },
  5969 + change: function (layer, props) {
  5970 +
  5971 + }
  5972 +
  5973 + })
  5974 + // Draw rect as wide as the text
  5975 + .drawRect({
  5976 + name: 'TextArea1_' + $rootScope.resetText,
  5977 + layer: true,
  5978 + draggable: true,
  5979 + groups: ['TextArea_' + $rootScope.resetText],
  5980 + dragGroups: ['TextArea_' + $rootScope.resetText],
  5981 + strokeStyle: 'black',
  5982 + strokeWidth: 2,
  5983 + x: $scope.offsetX1, y: $scope.offsetY1,
  5984 + width: $scope.x - $scope.offsetX1,
  5985 + height: $scope.y - $scope.offsetY1,
  5986 +
  5987 + click: function (layer) {
  5988 + $rootScope.shapeTypeText = "textAreaRect";
  5989 +
  5990 + var layerNameSplit = layer.name;
  5991 +
  5992 + var splitedName = layerNameSplit.split("_");
  5993 +
  5994 + var textValName = "TextArea_";
  5995 +
  5996 + var concatinateResult = textValName.concat(splitedName[1]);
  5997 +
  5998 + $rootScope.canvasLayerNameCollection = [];
  5999 + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
  6000 +
  6001 +
  6002 +
  6003 + $('#canvas').setLayer(layer.name, {
  6004 + handle: {
  6005 + type: 'rectangle',
  6006 + fillStyle: '#fff',
  6007 + strokeStyle: '#c33',
  6008 + strokeWidth: 2,
  6009 + width: 5, height: 5,
  6010 + cornerRadius: 3
  6011 + }
  6012 + }).drawLayers();
  6013 +
  6014 + },
  6015 + mouseout: function (layer) {
  6016 +
  6017 + $rootScope.canvasLayerNameCollection = [];
  6018 + $('#canvas').setLayer(layer.name, {
  6019 + handle: {
  6020 + type: 'rectangle',
  6021 + fillStyle: 'pink',
  6022 + strokeStyle: 'yellow',
  6023 + strokeWidth: 0,
  6024 + width: 0, height: 0,
  6025 + cornerRadius: 0
  6026 + }
  6027 +
  6028 + }).drawLayers();
  6029 +
  6030 + },
  6031 + mouseover: function (layer) {
  6032 +
  6033 + $('#canvas').setLayer(layer.name, {
  6034 + handle: {
  6035 + type: 'rectangle',
  6036 + fillStyle: '#fff',
  6037 + strokeStyle: '#c33',
  6038 + strokeWidth: 2,
  6039 + width: 5, height: 5,
  6040 + cornerRadius: 3
  6041 + }
  6042 + }).drawLayers();
5860 6043
  6044 + }
  6045 + });
  6046 + $("#text_area").val('');
  6047 +
  6048 + $("#text_area").css({" font-family":"'Verdana, sans-serif'","font-size":"14px","font-weight":"normal","font-style":"normal","color":"#000","text-align":"left","text-decoration":"none"});
  6049 +
5861 } 6050 }
5862 6051
5863 - $(document).keydown(function (event) {  
5864 6052
5865 6053
  6054 + function OnPaintCanvasMouseMove(event) {
  6055 +
  6056 +
  6057 + }
  6058 +
  6059 + $rootScope.FreeStylePaint = function (e) {
  6060 + // debugger;
  6061 +
  6062 + $rootScope.shapeType = "FreeStylePaint";
  6063 + canvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false);
  6064 +
  6065 + }
  6066 +
  6067 + $(document).keydown(function (event) {
  6068 +
  6069 +
5866 if (event.which == 46) { 6070 if (event.which == 46) {
  6071 + debugger;
  6072 + if ($rootScope.shapeTypePin == "Pin") {
  6073 +
5867 6074
5868 - if ($rootScope.shapeType == "Pin") {  
5869 - alert($rootScope.canvasLayerNameCollection[0].a);  
5870 - alert($rootScope.canvasLayerNameCollection[1].b);  
5871 - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].a).drawLayers();  
5872 - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[1].b).drawLayers(); 6075 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].pinName).drawLayers();
  6076 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].ArcName).drawLayers();
  6077 + $rootScope.shapeTypePin = "";
  6078 +
  6079 + }
  6080 + else if ($rootScope.shapeTypeText == "textAreaRect") {
  6081 +
  6082 +
  6083 +
  6084 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers();
  6085 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers();
  6086 + $rootScope.shapeTypeText = "";
  6087 +
5873 } 6088 }
5874 else { 6089 else {
  6090 +
  6091 + // alert($rootScope.canvasLayerNameCollection);
5875 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers(); 6092 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers();
5876 } 6093 }
5877 6094
@@ -5880,10 +6097,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5880,10 +6097,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5880 6097
5881 }); 6098 });
5882 6099
5883 - function OnPaintCanvasMouseMove(event) {  
5884 6100
5885 -  
5886 - }  
5887 6101
5888 //----End----- 6102 //----End-----
5889 6103
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @bd3b8d2
@@ -129,24 +129,29 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -129,24 +129,29 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
129 129
130 //----Annotation Toolbar: Jcanvas----- 130 //----Annotation Toolbar: Jcanvas-----
131 $rootScope.DrawLine = function (e) { 131 $rootScope.DrawLine = function (e) {
  132 + $rootScope.switchCanvas();
132 $rootScope.shapeType = "Line"; 133 $rootScope.shapeType = "Line";
133 - $("#" + e.currentTarget.id).addClass("activebtncolor"); 134 +
134 135
135 $('.btnCursor').removeClass('activebtncolor'); 136 $('.btnCursor').removeClass('activebtncolor');
136 - // $(".btn-annotation").removeClass("activebtncolor"); 137 + $(".btn-annotation").removeClass("activebtncolor");
  138 + $(".btn-annotation-line").addClass("activebtncolor");
137 139
138 140
139 } 141 }
140 142
141 143
142 $rootScope.DrawPin = function (e) { 144 $rootScope.DrawPin = function (e) {
  145 + $rootScope.switchCanvas();
143 $rootScope.shapeType = "Pin"; 146 $rootScope.shapeType = "Pin";
  147 +
144 $('.btnCursor').removeClass('activebtncolor'); 148 $('.btnCursor').removeClass('activebtncolor');
145 $(".btn-annotation").removeClass("activebtncolor"); 149 $(".btn-annotation").removeClass("activebtncolor");
146 - $("#" + e.currentTarget.id).addClass("activebtncolor"); 150 + $(".btn-annotation-pin").addClass("activebtncolor");
147 } 151 }
148 152
149 $rootScope.Cursor = function () { 153 $rootScope.Cursor = function () {
  154 + $rootScope.switchCanvas();
150 $rootScope.shapeType = "cursor"; 155 $rootScope.shapeType = "cursor";
151 156
152 $(".btn-annotation").removeClass("activebtncolor"); 157 $(".btn-annotation").removeClass("activebtncolor");
@@ -155,35 +160,40 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -155,35 +160,40 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
155 } 160 }
156 161
157 $rootScope.DrawRectangle = function (e) { 162 $rootScope.DrawRectangle = function (e) {
  163 + $rootScope.switchCanvas();
158 $rootScope.shapeType = "Rectangle"; 164 $rootScope.shapeType = "Rectangle";
159 $('.btnCursor').removeClass('activebtncolor'); 165 $('.btnCursor').removeClass('activebtncolor');
160 $(".btn-annotation").removeClass("activebtncolor"); 166 $(".btn-annotation").removeClass("activebtncolor");
161 - $("#" + e.currentTarget.id).addClass("activebtncolor"); 167 + $(".btn-annotation-rectangle").addClass("activebtncolor");
162 } 168 }
163 $rootScope.paintBrush = function () { 169 $rootScope.paintBrush = function () {
  170 + $rootScope.switchCanvas();
164 $rootScope.shapeType = "brush"; 171 $rootScope.shapeType = "brush";
165 - //$('.btnCursor').removeClass('activebtncolor');  
166 - //$(".btn-annotation").removeClass("activebtncolor");  
167 - //$("#" + e.currentTarget.id).addClass("activebtncolor"); 172 +
168 } 173 }
169 174
170 $rootScope.DrawCircle = function (e) { 175 $rootScope.DrawCircle = function (e) {
  176 + $rootScope.switchCanvas();
171 $rootScope.shapeType = "Circle"; 177 $rootScope.shapeType = "Circle";
172 $('.btnCursor').removeClass('activebtncolor'); 178 $('.btnCursor').removeClass('activebtncolor');
173 $(".btn-annotation").removeClass("activebtncolor"); 179 $(".btn-annotation").removeClass("activebtncolor");
174 - $("#" + e.currentTarget.id).addClass("activebtncolor"); 180 + $(".btn-annotation-circle").addClass("activebtncolor");
175 } 181 }
176 182
177 $rootScope.DrawArrow = function (e) { 183 $rootScope.DrawArrow = function (e) {
  184 + $rootScope.switchCanvas();
178 $rootScope.shapeType = "Arrow"; 185 $rootScope.shapeType = "Arrow";
179 $('.btnCursor').removeClass('activebtncolor'); 186 $('.btnCursor').removeClass('activebtncolor');
180 $(".btn-annotation").removeClass("activebtncolor"); 187 $(".btn-annotation").removeClass("activebtncolor");
181 - $("#" + e.currentTarget.id).addClass("activebtncolor"); 188 + $(".btn-annotation-arrow").addClass("activebtncolor");
182 } 189 }
183 $rootScope.DrawText = function () { 190 $rootScope.DrawText = function () {
184 -  
185 - // $("#myModal").modal("toggle");  
186 - $rootScope.shapeType = "TextArea"; 191 + $rootScope.switchCanvas();
  192 +
  193 + $rootScope.shapeType = "TextArea";
  194 + $('.btnCursor').removeClass('activebtncolor');
  195 + $(".btn-annotation").removeClass("activebtncolor");
  196 + $(".btn-annotation-Text").addClass("activebtncolor");
187 //$('.btnCursor').removeClass('activebtncolor'); 197 //$('.btnCursor').removeClass('activebtncolor');
188 //$(".btn-annotation").removeClass("activebtncolor"); 198 //$(".btn-annotation").removeClass("activebtncolor");
189 //$("#" + e.currentTarget.id).addClass("activebtncolor"); 199 //$("#" + e.currentTarget.id).addClass("activebtncolor");
@@ -191,9 +201,24 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -191,9 +201,24 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
191 201
192 $rootScope.DrawPolygon = function () { 202 $rootScope.DrawPolygon = function () {
193 $rootScope.shapeType = "DrawPolygon"; 203 $rootScope.shapeType = "DrawPolygon";
194 - //$('.btnCursor').removeClass('activebtncolor');  
195 - //$(".btn-annotation").removeClass("activebtncolor");  
196 - //$("#" + e.currentTarget.id).addClass("activebtncolor"); 204 +
  205 + }
  206 +
  207 +
  208 + $rootScope.OpacityModal = function () {
  209 +
  210 +
  211 + }
  212 + $rootScope.switchCanvas = function () {
  213 + var x = $('#canvasPaint').css("z-index");
  214 +
  215 + var y = $('#canvas').css("z-index");
  216 + if (x > y) {
  217 + y = parseInt(x) + 1;
  218 + } else {
  219 + y = parseInt(y) + 1;
  220 + }
  221 + $('#canvas').css("z-index", y);
197 } 222 }
198 223
199 //----End------------- 224 //----End-------------
400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
  View file @bd3b8d2
@@ -107,6 +107,15 @@ @@ -107,6 +107,15 @@
107 left: 0; 107 left: 0;
108 right: 0; 108 right: 0;
109 } 109 }
  110 +
  111 + .canvas-annotationStyle1 {
  112 + display: none;
  113 + background-color: transparent;
  114 + z-index: 12000;
  115 + position: absolute;
  116 + left: 0;
  117 + right: 0;
  118 + }
110 </style> 119 </style>
111 <div class=" " id="daView" ng-controller="DAController"> 120 <div class=" " id="daView" ng-controller="DAController">
112 <div class="pos-relative leftToolBar tools pull-left"> 121 <div class="pos-relative leftToolBar tools pull-left">
@@ -234,6 +243,7 @@ @@ -234,6 +243,7 @@
234 <div class="container-fluid"> 243 <div class="container-fluid">
235 <div class="row"> 244 <div class="row">
236 <div id="canvasDiv" class="col-sm-12 img-thumbnail" align="center"> 245 <div id="canvasDiv" class="col-sm-12 img-thumbnail" align="center">
  246 + <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas>
237 <canvas id="canvas" ng-click="doClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas> 247 <canvas id="canvas" ng-click="doClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>
238 </div> 248 </div>
239 <!--<div id="canvasDiv" style=" width: 95% !important;top:0px;overflow:scroll;background-color:white;">--> 249 <!--<div id="canvasDiv" style=" width: 95% !important;top:0px;overflow:scroll;background-color:white;">-->
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @bd3b8d2
@@ -34,6 +34,7 @@ @@ -34,6 +34,7 @@
34 <link href="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.css" rel="stylesheet" /> 34 <link href="libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.css" rel="stylesheet" />
35 <link href="libs/jquery/jquery_plugin/SpeechBubble/css/bubble.css" rel="stylesheet" /> 35 <link href="libs/jquery/jquery_plugin/SpeechBubble/css/bubble.css" rel="stylesheet" />
36 <link href="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css" rel="stylesheet" /> 36 <link href="libs/jquery/jquery_plugin/slider-pips/jquery-ui-slider-pips.css" rel="stylesheet" />
  37 + <link href="themes/default/css/bootstrap/3.3.6/jquery.minicolors.css" rel="stylesheet" />
37 38
38 <!--Annotation Toolbar: Jcanvas--> 39 <!--Annotation Toolbar: Jcanvas-->
39 <style> 40 <style>
@@ -407,25 +408,25 @@ @@ -407,25 +408,25 @@
407 <div class="" role="" aria-label="..."> 408 <div class="" role="" aria-label="...">
408 <div class="" role="group" align="center"> 409 <div class="" role="group" align="center">
409 <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btnCursor" data-toggle="tooltip" data-placement="top" title="Select Shapes(S)" ng-click="Cursor()"><img src="content/images/icon-identity.png" alt="" title=""></button> 410 <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btnCursor" data-toggle="tooltip" data-placement="top" title="Select Shapes(S)" ng-click="Cursor()"><img src="content/images/icon-identity.png" alt="" title=""></button>
410 - <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Pin" ng-click="DrawPin($event)"><img src="content/images/draw-pin.png" alt="" title=""></button>  
411 - <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Arrow" ng-click="DrawArrow($event)"><img src="content/images/draw-arrow.png" alt="" title=""></button>  
412 - <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Text" ng-click="DrawText($event)"><img src="content/images/draw-text.png" alt="" title=""></button> 411 + <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-pin" data-toggle="tooltip" data-placement="top" title="Draw Pin" ng-click="DrawPin($event)"><img src="content/images/draw-pin.png" alt="" title=""></button>
  412 + <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-arrow" data-toggle="tooltip" data-placement="top" title="Draw Arrow" ng-click="DrawArrow($event)"><img src="content/images/draw-arrow.png" alt="" title=""></button>
  413 + <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-Text" data-toggle="tooltip" data-placement="top" title="Draw Text" ng-click="DrawText($event)"><img src="content/images/draw-text.png" alt="" title=""></button>
413 </div> 414 </div>
414 <div class="" role="group" align="center"> 415 <div class="" role="group" align="center">
415 - <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Line" ng-click="DrawLine($event)"><img src="content/images/draw-line.png" alt="" title=""></button>  
416 - <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Rectangle" ng-click="DrawRectangle($event)"><img src="content/images/draw-rec.png" alt="" title=""></button>  
417 - <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Circle" ng-click="DrawCircle($event)"><img src="content/images/draw-cir.png" alt="" title=""></button> 416 + <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-line" data-toggle="tooltip" data-placement="top" title="Draw Line" ng-click="DrawLine($event)"><img src="content/images/draw-line.png" alt="" title=""></button>
  417 + <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-rectangle" data-toggle="tooltip" data-placement="top" title="Draw Rectangle" ng-click="DrawRectangle($event)"><img src="content/images/draw-rec.png" alt="" title=""></button>
  418 + <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-circle" data-toggle="tooltip" data-placement="top" title="Draw Circle" ng-click="DrawCircle($event)"><img src="content/images/draw-cir.png" alt="" title=""></button>
418 <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Polygon" ng-click="DrawPolygon($event)"><img src="content/images/draw-poly.png" alt="" title=""></button> 419 <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" data-toggle="tooltip" data-placement="top" title="Draw Polygon" ng-click="DrawPolygon($event)"><img src="content/images/draw-poly.png" alt="" title=""></button>
419 </div> 420 </div>
420 </div> 421 </div>
421 </div> 422 </div>
422 <div class="well-popup well"> 423 <div class="well-popup well">
423 - <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive"> 424 + <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive"/>
424 </div> 425 </div>
425 <div class="well well-popup"> 426 <div class="well well-popup">
426 <div class="" role="group" aria-label="..."> 427 <div class="" role="group" aria-label="...">
427 <div> 428 <div>
428 - <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;"><i class="fa fa-paint-brush"></i></button> 429 + <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;" ng-click="FreeStylePaint()"><i class="fa fa-paint-brush"></i></button>
429 <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Erase" ng-click="EraseDrawing()"><i class="fa fa-eraser"></i></button>&nbsp; 430 <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Erase" ng-click="EraseDrawing()"><i class="fa fa-eraser"></i></button>&nbsp;
430 <div class="marginL2 pull-left"><input type="number" id="amount-2" value="25" step="1" style="width:60px;"></div>&nbsp; 431 <div class="marginL2 pull-left"><input type="number" id="amount-2" value="25" step="1" style="width:60px;"></div>&nbsp;
431 <div class="pull-left" style="width:45%; margin-left:2%;"> 432 <div class="pull-left" style="width:45%; margin-left:2%;">
@@ -448,6 +449,102 @@ @@ -448,6 +449,102 @@
448 </div> 449 </div>
449 </div> 450 </div>
450 451
  452 + <!--Modal For Annotation Text Box-->
  453 + <div class="modal fade" id="annotationTextModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index: 1200000!important;">
  454 + <div class="modal-dialog" role="document">
  455 + <div class="modal-content">
  456 + <div class="modal-header" style="background-color: #808D43;padding:10px;border-bottom:0;">
  457 + <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
  458 + <h4 class="modal-title" id="myModalLabel" style="font-weight:bold;">Enter Text to be put in a box</h4>
  459 + </div>
  460 + <div class="modal-body">
  461 + <div class="col-xs-12" style="padding:20px 0;">
  462 + <div class="form-inline">
  463 + <select class="form-control" id="selected-font-family">
  464 + <option>Arial</option>
  465 + <option>Agency FB</option>
  466 + <option>Algerian</option>
  467 + <option>Arabic Trans</option>
  468 + <option>Arial Baltic</option>
  469 + <option>Arial Black</option>
  470 + <option>Arial CE</option>
  471 + <option>Arial CYR</option>
  472 + <option>Arial Greek</option>
  473 + <option>Arial Narrow</option>
  474 + <option>Arial Rounded</option>
  475 + <option>Arial TUR</option>
  476 +
  477 + </select>
  478 + <select class="form-control" id="selected-font-size">
  479 + <option>14</option>
  480 + <option>16</option>
  481 + <option>18</option>
  482 + <option>20</option>
  483 + <option>22</option>
  484 + <option>24</option>
  485 + <option>26</option>
  486 + <option>28</option>
  487 + <option>36</option>
  488 + <option>48</option>
  489 + <option>72</option>
  490 + </select>
  491 + <span style="vertical-align:middle;">
  492 + <span id="text-bold" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
  493 + <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i>
  494 + </span>
  495 + <span id="text-italic" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
  496 + <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i>
  497 +
  498 + </span>
  499 + <span id="text-underline" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
  500 + <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i>
  501 + </span>
  502 + </span>
  503 +
  504 + <div class="form-group" id="font-color" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
  505 +
  506 + <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc">
  507 + </div>
  508 +
  509 + <span style="vertical-align:middle;">
  510 + <span id="text-left" style="background: #4B4B4B;padding:4px;cursor:pointer;margin-right:2px;">
  511 + <i aria-hidden="true" class="fa fa-align-left" style="color: #fff"></i>
  512 + </span>
  513 + <span id="text-center" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 2px;">
  514 + <i class="fa fa-align-center" aria-hidden="true" style="color: #fff"></i>
  515 +
  516 +
  517 + </span>
  518 + <span id="text-right" style="background: #4B4B4B; padding: 4px; cursor: pointer; margin-right: 5px;">
  519 + <i class="fa fa-align-right" aria-hidden="true" style="color: #fff"></i>
  520 +
  521 +
  522 + </span>
  523 + </span>
  524 +
  525 +
  526 +</div>
  527 + </div>
  528 + <textarea class="form-control" id="text_area" rows="3" style="font-family: 'Verdana, sans-serif';font-size:14px; font-weight: normal; font-style: normal; color: #000; text-align: left; text-decoration: none;"></textarea>
  529 + </div>
  530 + <div class="modal-footer">
  531 + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  532 + <button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal" ng-click="saveText()">Save</button>
  533 + </div>
  534 + </div>
  535 + </div>
  536 + </div>
  537 +
  538 +
  539 +
  540 +
  541 +
  542 +
  543 +
  544 + <!--List manager-->
  545 +
  546 +
  547 +
451 <!--List manager--> 548 <!--List manager-->
452 <style> 549 <style>
453 #listManager { 550 #listManager {
@@ -557,6 +654,11 @@ @@ -557,6 +654,11 @@
557 <button data-dismiss="modal" class="btn btn-primary" type="button"><i class="fa fa-arrow-circle-right"></i></button> 654 <button data-dismiss="modal" class="btn btn-primary" type="button"><i class="fa fa-arrow-circle-right"></i></button>
558 </div> 655 </div>
559 </div> 656 </div>
  657 +
  658 +
  659 +
  660 +
  661 +
560 <script> 662 <script>
561 function mytoggle() { 663 function mytoggle() {
562 var div = document.getElementById("divSection"); 664 var div = document.getElementById("divSection");
@@ -570,8 +672,8 @@ @@ -570,8 +672,8 @@
570 672
571 673
572 674
573 -  
574 - 675 +
  676 +
575 677
576 678
577 <script> 679 <script>
@@ -628,8 +730,13 @@ @@ -628,8 +730,13 @@
628 <script src="app/controllers/LinkController.js"></script> 730 <script src="app/controllers/LinkController.js"></script>
629 <script src="app/services/DataService.js"></script> 731 <script src="app/services/DataService.js"></script>
630 <script src="libs/jquery/jquery_plugin/jqueryui.js"></script> 732 <script src="libs/jquery/jquery_plugin/jqueryui.js"></script>
631 -  
632 - 733 + <script src="libs/colorpicker/jquery.minicolors.min.js"></script>
  734 + <script src="libs/sketch.js"></script>
  735 + <!--<script type="text/javascript">
  736 + $(function () {
  737 + $('#canvas').sketch();
  738 + });
  739 + </script>-->
633 <script> 740 <script>
634 $(function () { 741 $(function () {
635 $("#slider-range-min-2").slider({ 742 $("#slider-range-min-2").slider({
@@ -665,5 +772,103 @@ @@ -665,5 +772,103 @@
665 $(".annotationTollbar").draggable(); 772 $(".annotationTollbar").draggable();
666 }); 773 });
667 </script> 774 </script>
668 -</body> 775 +
  776 + <script type="text/javascript">
  777 + $(function () {
  778 + var colpick = $('.demo').each(function () {
  779 + $(this).minicolors({
  780 + control: $(this).attr('data-control') || 'hue',
  781 + inline: $(this).attr('data-inline') === 'true',
  782 + letterCase: 'lowercase',
  783 + opacity: false,
  784 + change: function (hex, opacity) {
  785 + if (!hex) return;
  786 + if (opacity) hex += ', ' + opacity;
  787 + try {
  788 + console.log(hex);
  789 + $("#text_area").css("color", hex);
  790 + } catch (e) { }
  791 + $(this).select();
  792 + },
  793 + theme: 'bootstrap'
  794 + });
  795 + });
  796 +
  797 + var $inlinehex = $('#inlinecolorhex h3 small');
  798 + //alert($inlinehex);
  799 + $('#inlinecolors').minicolors({
  800 + inline: true,
  801 + theme: 'bootstrap',
  802 + change: function (hex) {
  803 + if (!hex) return;
  804 +
  805 + $inlinehex.html(hex);
  806 + }
  807 + });
  808 + });
  809 + </script>
  810 +
  811 +
  812 + <script type="text/javascript">
  813 + $(function () {
  814 +
  815 + $("#text-left").on('click', function () {
  816 +
  817 + $("#text_area").css("text-align", "left");
  818 +
  819 + });
  820 +
  821 +
  822 + $("#text-center").on('click', function () {
  823 +
  824 + $("#text_area").css("text-align", "center");
  825 +
  826 + });
  827 +
  828 +
  829 + $("#text-right").on('click', function () {
  830 +
  831 + $("#text_area").css("text-align", "right");
  832 +
  833 + });
  834 +
  835 +
  836 + $("#text-bold").on('click', function () {
  837 +
  838 + $("#text_area").css("font-weight", "bold");
  839 +
  840 + });
  841 +
  842 + $("#text-italic").on('click', function () {
  843 +
  844 + $("#text_area").css("font-style", "italic");
  845 +
  846 + });
  847 +
  848 + $("#text-underline").on('click', function () {
  849 +
  850 + $("#text_area").css("text-decoration", "underline");
  851 +
  852 + });
  853 +
  854 +
  855 + $("#selected-font-size").change(function () {
  856 +
  857 + $("#text_area").css("font-size", $(this).val()+"px");
  858 + });
  859 +
  860 + $("#selected-font-family").change(function () {
  861 +
  862 + $("#text_area").css("font-family", $(this).val());
  863 +
  864 + });
  865 +
  866 +
  867 + });
  868 +
  869 +
  870 +
  871 + </script>
  872 +
  873 + </body>
669 </html> 874 </html>
670 \ No newline at end of file 875 \ No newline at end of file
400-SOURCECODE/AIAHTML5.Web/libs/colorpicker/jquery.minicolors.min.js 0 → 100644
  View file @bd3b8d2
  1 +/*
  2 + * jQuery MiniColors: A tiny color picker built on jQuery
  3 + *
  4 + * Copyright Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/)
  5 + *
  6 + * Licensed under the MIT license: http://opensource.org/licenses/MIT
  7 + *
  8 + */jQuery&&function(e){function t(t,n){var r=e('<div class="minicolors" />'),i=e.minicolors.defaults;if(t.data("minicolors-initialized"))return;n=e.extend(!0,{},i,n);r.addClass("minicolors-theme-"+n.theme).toggleClass("minicolors-with-opacity",n.opacity);n.position!==undefined&&e.each(n.position.split(" "),function(){r.addClass("minicolors-position-"+this)});t.addClass("minicolors-input").data("minicolors-initialized",!1).data("minicolors-settings",n).prop("size",7).wrap(r).after('<div class="minicolors-panel minicolors-slider-'+n.control+'">'+'<div class="minicolors-slider">'+'<div class="minicolors-picker"></div>'+"</div>"+'<div class="minicolors-opacity-slider">'+'<div class="minicolors-picker"></div>'+"</div>"+'<div class="minicolors-grid">'+'<div class="minicolors-grid-inner"></div>'+'<div class="minicolors-picker"><div></div></div>'+"</div>"+"</div>");if(!n.inline){t.after('<span class="minicolors-swatch"><span class="minicolors-swatch-color"></span></span>');t.next(".minicolors-swatch").on("click",function(e){e.preventDefault();t.focus()})}t.parent().find(".minicolors-panel").on("selectstart",function(){return!1}).end();n.inline&&t.parent().addClass("minicolors-inline");u(t,!1);t.data("minicolors-initialized",!0)}function n(e){var t=e.parent();e.removeData("minicolors-initialized").removeData("minicolors-settings").removeProp("size").removeClass("minicolors-input");t.before(e).remove()}function r(e){var t=e.parent(),n=t.find(".minicolors-panel"),r=e.data("minicolors-settings");if(!e.data("minicolors-initialized")||e.prop("disabled")||t.hasClass("minicolors-inline")||t.hasClass("minicolors-focus"))return;i();t.addClass("minicolors-focus");n.stop(!0,!0).fadeIn(r.showSpeed,function(){r.show&&r.show.call(e.get(0))})}function i(){e(".minicolors-input").each(function(){var t=e(this),n=t.data("minicolors-settings"),r=t.parent();if(n.inline)return;r.find(".minicolors-panel").fadeOut(n.hideSpeed,function(){r.hasClass("minicolors-focus")&&n.hide&&n.hide.call(t.get(0));r.removeClass("minicolors-focus")})})}function s(e,t,n){var r=e.parents(".minicolors").find(".minicolors-input"),i=r.data("minicolors-settings"),s=e.find("[class$=-picker]"),u=e.offset().left,a=e.offset().top,f=Math.round(t.pageX-u),l=Math.round(t.pageY-a),c=n?i.animationSpeed:0,h,p,d,v;if(t.originalEvent.changedTouches){f=t.originalEvent.changedTouches[0].pageX-u;l=t.originalEvent.changedTouches[0].pageY-a}f<0&&(f=0);l<0&&(l=0);f>e.width()&&(f=e.width());l>e.height()&&(l=e.height());if(e.parent().is(".minicolors-slider-wheel")&&s.parent().is(".minicolors-grid")){h=75-f;p=75-l;d=Math.sqrt(h*h+p*p);v=Math.atan2(p,h);v<0&&(v+=Math.PI*2);if(d>75){d=75;f=75-75*Math.cos(v);l=75-75*Math.sin(v)}f=Math.round(f);l=Math.round(l)}e.is(".minicolors-grid")?s.stop(!0).animate({top:l+"px",left:f+"px"},c,i.animationEasing,function(){o(r,e)}):s.stop(!0).animate({top:l+"px"},c,i.animationEasing,function(){o(r,e)})}function o(e,t){function n(e,t){var n,r;if(!e.length||!t)return null;n=e.offset().left;r=e.offset().top;return{x:n-t.offset().left+e.outerWidth()/2,y:r-t.offset().top+e.outerHeight()/2}}var r,i,s,o,u,f,l,h=e.val(),d=e.attr("data-opacity"),v=e.parent(),g=e.data("minicolors-settings"),y=v.find(".minicolors-swatch"),b=v.find(".minicolors-grid"),w=v.find(".minicolors-slider"),E=v.find(".minicolors-opacity-slider"),S=b.find("[class$=-picker]"),x=w.find("[class$=-picker]"),T=E.find("[class$=-picker]"),N=n(S,b),C=n(x,w),k=n(T,E);if(t.is(".minicolors-grid, .minicolors-slider")){switch(g.control){case"wheel":o=b.width()/2-N.x;u=b.height()/2-N.y;f=Math.sqrt(o*o+u*u);l=Math.atan2(u,o);l<0&&(l+=Math.PI*2);if(f>75){f=75;N.x=69-75*Math.cos(l);N.y=69-75*Math.sin(l)}i=p(f/.75,0,100);r=p(l*180/Math.PI,0,360);s=p(100-Math.floor(C.y*(100/w.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:i,b:100}));break;case"saturation":r=p(parseInt(N.x*(360/b.width()),10),0,360);i=p(100-Math.floor(C.y*(100/w.height())),0,100);s=p(100-Math.floor(N.y*(100/b.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:100,b:s}));v.find(".minicolors-grid-inner").css("opacity",i/100);break;case"brightness":r=p(parseInt(N.x*(360/b.width()),10),0,360);i=p(100-Math.floor(N.y*(100/b.height())),0,100);s=p(100-Math.floor(C.y*(100/w.height())),0,100);h=m({h:r,s:i,b:s});w.css("backgroundColor",m({h:r,s:i,b:100}));v.find(".minicolors-grid-inner").css("opacity",1-s/100);break;default:r=p(360-parseInt(C.y*(360/w.height()),10),0,360);i=p(Math.floor(N.x*(100/b.width())),0,100);s=p(100-Math.floor(N.y*(100/b.height())),0,100);h=m({h:r,s:i,b:s});b.css("backgroundColor",m({h:r,s:100,b:100}))}e.val(c(h,g.letterCase))}if(t.is(".minicolors-opacity-slider")){g.opacity?d=parseFloat(1-k.y/E.height()).toFixed(2):d=1;g.opacity&&e.attr("data-opacity",d)}y.find("SPAN").css({backgroundColor:h,opacity:d});a(e,h,d)}function u(e,t){var n,r,i,s,o,u,f,l=e.parent(),d=e.data("minicolors-settings"),v=l.find(".minicolors-swatch"),y=l.find(".minicolors-grid"),b=l.find(".minicolors-slider"),w=l.find(".minicolors-opacity-slider"),E=y.find("[class$=-picker]"),S=b.find("[class$=-picker]"),x=w.find("[class$=-picker]");n=c(h(e.val(),!0),d.letterCase);n||(n=c(h(d.defaultValue,!0),d.letterCase));r=g(n);t||e.val(n);if(d.opacity){i=e.attr("data-opacity")===""?1:p(parseFloat(e.attr("data-opacity")).toFixed(2),0,1);isNaN(i)&&(i=1);e.attr("data-opacity",i);v.find("SPAN").css("opacity",i);o=p(w.height()-w.height()*i,0,w.height());x.css("top",o+"px")}v.find("SPAN").css("backgroundColor",n);switch(d.control){case"wheel":u=p(Math.ceil(r.s*.75),0,y.height()/2);f=r.h*Math.PI/180;s=p(75-Math.cos(f)*u,0,y.width());o=p(75-Math.sin(f)*u,0,y.height());E.css({top:o+"px",left:s+"px"});o=150-r.b/(100/y.height());n===""&&(o=0);S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:r.s,b:100}));break;case"saturation":s=p(5*r.h/12,0,150);o=p(y.height()-Math.ceil(r.b/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.s*(b.height()/100),0,b.height());S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:100,b:r.b}));l.find(".minicolors-grid-inner").css("opacity",r.s/100);break;case"brightness":s=p(5*r.h/12,0,150);o=p(y.height()-Math.ceil(r.s/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.b*(b.height()/100),0,b.height());S.css("top",o+"px");b.css("backgroundColor",m({h:r.h,s:r.s,b:100}));l.find(".minicolors-grid-inner").css("opacity",1-r.b/100);break;default:s=p(Math.ceil(r.s/(100/y.width())),0,y.width());o=p(y.height()-Math.ceil(r.b/(100/y.height())),0,y.height());E.css({top:o+"px",left:s+"px"});o=p(b.height()-r.h/(360/b.height()),0,b.height());S.css("top",o+"px");y.css("backgroundColor",m({h:r.h,s:100,b:100}))}e.data("minicolors-initialized")&&a(e,n,i)}function a(e,t,n){var r=e.data("minicolors-settings"),i=e.data("minicolors-lastChange");if(!i||i.hex!==t||i.opacity!==n){e.data("minicolors-lastChange",{hex:t,opacity:n});if(r.change)if(r.changeDelay){clearTimeout(e.data("minicolors-changeTimeout"));e.data("minicolors-changeTimeout",setTimeout(function(){r.change.call(e.get(0),t,n)},r.changeDelay))}else r.change.call(e.get(0),t,n);e.trigger("change").trigger("input")}}function f(t){var n=h(e(t).val(),!0),r=b(n),i=e(t).attr("data-opacity");if(!r)return null;i!==undefined&&e.extend(r,{a:parseFloat(i)});return r}function l(t,n){var r=h(e(t).val(),!0),i=b(r),s=e(t).attr("data-opacity");if(!i)return null;s===undefined&&(s=1);return n?"rgba("+i.r+", "+i.g+", "+i.b+", "+parseFloat(s)+")":"rgb("+i.r+", "+i.g+", "+i.b+")"}function c(e,t){return t==="uppercase"?e.toUpperCase():e.toLowerCase()}function h(e,t){e=e.replace(/[^A-F0-9]/ig,"");if(e.length!==3&&e.length!==6)return"";e.length===3&&t&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);return"#"+e}function p(e,t,n){e<t&&(e=t);e>n&&(e=n);return e}function d(e){var t={},n=Math.round(e.h),r=Math.round(e.s*255/100),i=Math.round(e.b*255/100);if(r===0)t.r=t.g=t.b=i;else{var s=i,o=(255-r)*i/255,u=(s-o)*(n%60)/60;n===360&&(n=0);if(n<60){t.r=s;t.b=o;t.g=o+u}else if(n<120){t.g=s;t.b=o;t.r=s-u}else if(n<180){t.g=s;t.r=o;t.b=o+u}else if(n<240){t.b=s;t.r=o;t.g=s-u}else if(n<300){t.b=s;t.g=o;t.r=o+u}else if(n<360){t.r=s;t.g=o;t.b=s-u}else{t.r=0;t.g=0;t.b=0}}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}}function v(t){var n=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];e.each(n,function(e,t){t.length===1&&(n[e]="0"+t)});return"#"+n.join("")}function m(e){return v(d(e))}function g(e){var t=y(b(e));t.s===0&&(t.h=360);return t}function y(e){var t={h:0,s:0,b:0},n=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b),i=r-n;t.b=r;t.s=r!==0?255*i/r:0;t.s!==0?e.r===r?t.h=(e.g-e.b)/i:e.g===r?t.h=2+(e.b-e.r)/i:t.h=4+(e.r-e.g)/i:t.h=-1;t.h*=60;t.h<0&&(t.h+=360);t.s*=100/255;t.b*=100/255;return t}function b(e){e=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:e>>16,g:(e&65280)>>8,b:e&255}}e.minicolors={defaults:{animationSpeed:50,animationEasing:"swing",change:null,changeDelay:0,control:"hue",defaultValue:"",hide:null,hideSpeed:100,inline:!1,letterCase:"lowercase",opacity:!1,position:"bottom left",show:null,showSpeed:100,theme:"default"}};e.extend(e.fn,{minicolors:function(s,o){switch(s){case"destroy":e(this).each(function(){n(e(this))});return e(this);case"hide":i();return e(this);case"opacity":if(o===undefined)return e(this).attr("data-opacity");e(this).each(function(){u(e(this).attr("data-opacity",o))});return e(this);case"rgbObject":return f(e(this),s==="rgbaObject");case"rgbString":case"rgbaString":return l(e(this),s==="rgbaString");case"settings":if(o===undefined)return e(this).data("minicolors-settings");e(this).each(function(){var t=e(this).data("minicolors-settings")||{};n(e(this));e(this).minicolors(e.extend(!0,t,o))});return e(this);case"show":r(e(this).eq(0));return e(this);case"value":if(o===undefined)return e(this).val();e(this).each(function(){u(e(this).val(o))});return e(this);default:s!=="create"&&(o=s);e(this).each(function(){t(e(this),o)});return e(this)}}});e(document).on("mousedown.minicolors touchstart.minicolors",function(t){e(t.target).parents().add(t.target).hasClass("minicolors")||i()}).on("mousedown.minicolors touchstart.minicolors",".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider",function(t){var n=e(this);t.preventDefault();e(document).data("minicolors-target",n);s(n,t,!0)}).on("mousemove.minicolors touchmove.minicolors",function(t){var n=e(document).data("minicolors-target");n&&s(n,t)}).on("mouseup.minicolors touchend.minicolors",function(){e(this).removeData("minicolors-target")}).on("mousedown.minicolors touchstart.minicolors",".minicolors-swatch",function(t){var n=e(this).parent().find(".minicolors-input");t.preventDefault();r(n)}).on("focus.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;r(t)}).on("blur.minicolors",".minicolors-input",function(){var t=e(this),n=t.data("minicolors-settings");if(!t.data("minicolors-initialized"))return;t.val(h(t.val(),!0));t.val()===""&&t.val(h(n.defaultValue,!0));t.val(c(t.val(),n.letterCase))}).on("keydown.minicolors",".minicolors-input",function(t){var n=e(this);if(!n.data("minicolors-initialized"))return;switch(t.keyCode){case 9:i();break;case 13:case 27:i();n.blur()}}).on("keyup.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;u(t,!0)}).on("paste.minicolors",".minicolors-input",function(){var t=e(this);if(!t.data("minicolors-initialized"))return;setTimeout(function(){u(t,!0)},1)})}(jQuery);
0 \ No newline at end of file 9 \ No newline at end of file
400-SOURCECODE/AIAHTML5.Web/libs/sketch.js 0 → 100644
  View file @bd3b8d2
  1 +var __slice = Array.prototype.slice;
  2 +(function($) {
  3 + var Sketch;
  4 + $.fn.sketch = function() {
  5 + var args, key, sketch;
  6 + key = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  7 + if (this.length > 1) {
  8 + $.error('Sketch.js can only be called on one element at a time.');
  9 + }
  10 + sketch = this.data('sketch');
  11 + if (typeof key === 'string' && sketch) {
  12 + if (sketch[key]) {
  13 + if (typeof sketch[key] === 'function') {
  14 + return sketch[key].apply(sketch, args);
  15 + } else if (args.length === 0) {
  16 + return sketch[key];
  17 + } else if (args.length === 1) {
  18 + return sketch[key] = args[0];
  19 + }
  20 + } else {
  21 + return $.error('Sketch.js did not recognize the given command.');
  22 + }
  23 + } else if (sketch) {
  24 + return sketch;
  25 + } else {
  26 + this.data('sketch', new Sketch(this.get(0), key));
  27 + return this;
  28 + }
  29 + };
  30 + Sketch = (function() {
  31 + function Sketch(el, opts) {
  32 + this.el = el;
  33 + this.canvas = $(el);
  34 + this.context = el.getContext('2d');
  35 + this.options = $.extend({
  36 + toolLinks: true,
  37 + defaultTool: 'marker',
  38 + defaultColor: '#000000',
  39 + defaultSize: 5
  40 + }, opts);
  41 + this.painting = false;
  42 + this.color = this.options.defaultColor;
  43 + this.size = this.options.defaultSize;
  44 + this.tool = this.options.defaultTool;
  45 + this.actions = [];
  46 + this.action = [];
  47 + this.canvas.bind('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);
  48 + if (this.options.toolLinks) {
  49 + $('body').delegate("a[href=\"#" + (this.canvas.attr('id')) + "\"]", 'click', function(e) {
  50 + var $canvas, $this, key, sketch, _i, _len, _ref;
  51 + $this = $(this);
  52 + $canvas = $($this.attr('href'));
  53 + sketch = $canvas.data('sketch');
  54 + _ref = ['color', 'size', 'tool'];
  55 + for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  56 + key = _ref[_i];
  57 + if ($this.attr("data-" + key)) {
  58 + sketch.set(key, $(this).attr("data-" + key));
  59 + }
  60 + }
  61 + if ($(this).attr('data-download')) {
  62 + sketch.download($(this).attr('data-download'));
  63 + }
  64 + return false;
  65 + });
  66 + }
  67 + }
  68 + Sketch.prototype.download = function(format) {
  69 + var mime;
  70 + format || (format = "png");
  71 + if (format === "jpg") {
  72 + format = "jpeg";
  73 + }
  74 + mime = "image/" + format;
  75 + return window.open(this.el.toDataURL(mime));
  76 + };
  77 + Sketch.prototype.set = function(key, value) {
  78 + this[key] = value;
  79 + return this.canvas.trigger("sketch.change" + key, value);
  80 + };
  81 + Sketch.prototype.startPainting = function() {
  82 + this.painting = true;
  83 + return this.action = {
  84 + tool: this.tool,
  85 + color: this.color,
  86 + size: parseFloat(this.size),
  87 + events: []
  88 + };
  89 + };
  90 + Sketch.prototype.stopPainting = function() {
  91 + if (this.action) {
  92 + this.actions.push(this.action);
  93 + }
  94 + this.painting = false;
  95 + this.action = null;
  96 + return this.redraw();
  97 + };
  98 + Sketch.prototype.onEvent = function(e) {
  99 + if (e.originalEvent && e.originalEvent.targetTouches) {
  100 + e.pageX = e.originalEvent.targetTouches[0].pageX;
  101 + e.pageY = e.originalEvent.targetTouches[0].pageY;
  102 + }
  103 + $.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
  104 + e.preventDefault();
  105 + return false;
  106 + };
  107 + Sketch.prototype.redraw = function() {
  108 + var sketch;
  109 + this.el.width = this.canvas.width();
  110 + this.context = this.el.getContext('2d');
  111 + sketch = this;
  112 + $.each(this.actions, function() {
  113 + if (this.tool) {
  114 + return $.sketch.tools[this.tool].draw.call(sketch, this);
  115 + }
  116 + });
  117 + if (this.painting && this.action) {
  118 + return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
  119 + }
  120 + };
  121 + return Sketch;
  122 + })();
  123 + $.sketch = {
  124 + tools: {}
  125 + };
  126 + $.sketch.tools.marker = {
  127 + onEvent: function(e) {
  128 + switch (e.type) {
  129 + case 'mousedown':
  130 + case 'touchstart':
  131 + this.startPainting();
  132 + break;
  133 + case 'mouseup':
  134 + case 'mouseout':
  135 + case 'mouseleave':
  136 + case 'touchend':
  137 + case 'touchcancel':
  138 + this.stopPainting();
  139 + }
  140 + if (this.painting) {
  141 + this.action.events.push({
  142 + x: e.pageX - this.canvas.offset().left,
  143 + y: e.pageY - this.canvas.offset().top,
  144 + event: e.type
  145 + });
  146 + return this.redraw();
  147 + }
  148 + },
  149 + draw: function(action) {
  150 + var event, previous, _i, _len, _ref;
  151 + this.context.lineJoin = "round";
  152 + this.context.lineCap = "round";
  153 + this.context.beginPath();
  154 + this.context.moveTo(action.events[0].x, action.events[0].y);
  155 + _ref = action.events;
  156 + for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  157 + event = _ref[_i];
  158 + this.context.lineTo(event.x, event.y);
  159 + previous = event;
  160 + }
  161 + this.context.strokeStyle = action.color;
  162 + this.context.lineWidth = action.size;
  163 + return this.context.stroke();
  164 + }
  165 + };
  166 + return $.sketch.tools.eraser = {
  167 + onEvent: function(e) {
  168 + return $.sketch.tools.marker.onEvent.call(this, e);
  169 + },
  170 + draw: function(action) {
  171 + var oldcomposite;
  172 + oldcomposite = this.context.globalCompositeOperation;
  173 + this.context.globalCompositeOperation = "copy";
  174 + action.color = "rgba(0,0,0,0)";
  175 + $.sketch.tools.marker.draw.call(this, action);
  176 + return this.context.globalCompositeOperation = oldcomposite;
  177 + }
  178 + };
  179 +})(jQuery);
0 \ No newline at end of file 180 \ No newline at end of file
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/jquery.minicolors.css 0 → 100644
  View file @bd3b8d2
  1 +.minicolors {
  2 + position: relative;
  3 +}
  4 +
  5 +.minicolors-swatch {
  6 + position: absolute;
  7 + vertical-align: middle;
  8 + background: url(jquery.minicolors.png) -80px 0;
  9 + border: solid 1px #ccc;
  10 + cursor: text;
  11 + padding: 0;
  12 + margin: 0;
  13 + display: inline-block;
  14 +}
  15 +
  16 +.minicolors-swatch-color {
  17 + position: absolute;
  18 + top: 0;
  19 + left: 0;
  20 + right: 0;
  21 + bottom: 0;
  22 +}
  23 +
  24 +.minicolors input[type=hidden] + .minicolors-swatch {
  25 + width: 28px;
  26 + position: static;
  27 + cursor: pointer;
  28 +}
  29 +
  30 +/* Panel */
  31 +.minicolors-panel {
  32 + position: absolute;
  33 + width: 173px;
  34 + height: 152px;
  35 + background: white;
  36 + border: solid 1px #CCC;
  37 + box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  38 + z-index: 99999;
  39 + -moz-box-sizing: content-box;
  40 + -webkit-box-sizing: content-box;
  41 + box-sizing: content-box;
  42 + display: none;
  43 +}
  44 +
  45 +.minicolors-panel.minicolors-visible {
  46 + display: block;
  47 +}
  48 +
  49 +/* Panel positioning */
  50 +.minicolors-position-top .minicolors-panel {
  51 + top: -154px;
  52 +}
  53 +
  54 +.minicolors-position-right .minicolors-panel {
  55 + right: 0;
  56 +}
  57 +
  58 +.minicolors-position-bottom .minicolors-panel {
  59 + top: auto;
  60 +}
  61 +
  62 +.minicolors-position-left .minicolors-panel {
  63 + left: 0;
  64 +}
  65 +
  66 +.minicolors-with-opacity .minicolors-panel {
  67 + width: 194px;
  68 +}
  69 +
  70 +.minicolors .minicolors-grid {
  71 + position: absolute;
  72 + top: 1px;
  73 + left: 1px;
  74 + width: 150px;
  75 + height: 150px;
  76 + background: url(jquery.minicolors.png) -120px 0;
  77 + cursor: crosshair;
  78 +}
  79 +
  80 +.minicolors .minicolors-grid-inner {
  81 + position: absolute;
  82 + top: 0;
  83 + left: 0;
  84 + width: 150px;
  85 + height: 150px;
  86 + background: none;
  87 +}
  88 +
  89 +.minicolors-slider-saturation .minicolors-grid {
  90 + background-position: -420px 0;
  91 +}
  92 +
  93 +.minicolors-slider-saturation .minicolors-grid-inner {
  94 + background: url(jquery.minicolors.png) -270px 0;
  95 +}
  96 +
  97 +.minicolors-slider-brightness .minicolors-grid {
  98 + background-position: -570px 0;
  99 +}
  100 +
  101 +.minicolors-slider-brightness .minicolors-grid-inner {
  102 + background: black;
  103 +}
  104 +
  105 +.minicolors-slider-wheel .minicolors-grid {
  106 + background-position: -720px 0;
  107 +}
  108 +
  109 +.minicolors-slider,
  110 +.minicolors-opacity-slider {
  111 + position: absolute;
  112 + top: 1px;
  113 + left: 152px;
  114 + width: 20px;
  115 + height: 150px;
  116 + background: white url(jquery.minicolors.png) 0 0;
  117 + cursor: row-resize;
  118 +}
  119 +
  120 +.minicolors-slider-saturation .minicolors-slider {
  121 + background-position: -60px 0;
  122 +}
  123 +
  124 +.minicolors-slider-brightness .minicolors-slider {
  125 + background-position: -20px 0;
  126 +}
  127 +
  128 +.minicolors-slider-wheel .minicolors-slider {
  129 + background-position: -20px 0;
  130 +}
  131 +
  132 +.minicolors-opacity-slider {
  133 + left: 173px;
  134 + background-position: -40px 0;
  135 + display: none;
  136 +}
  137 +
  138 +.minicolors-with-opacity .minicolors-opacity-slider {
  139 + display: block;
  140 +}
  141 +
  142 +/* Pickers */
  143 +.minicolors-grid .minicolors-picker {
  144 + position: absolute;
  145 + top: 70px;
  146 + left: 70px;
  147 + width: 12px;
  148 + height: 12px;
  149 + border: solid 1px black;
  150 + border-radius: 10px;
  151 + margin-top: -6px;
  152 + margin-left: -6px;
  153 + background: none;
  154 +}
  155 +
  156 +.minicolors-grid .minicolors-picker > div {
  157 + position: absolute;
  158 + top: 0;
  159 + left: 0;
  160 + width: 8px;
  161 + height: 8px;
  162 + border-radius: 8px;
  163 + border: solid 2px white;
  164 + -moz-box-sizing: content-box;
  165 + -webkit-box-sizing: content-box;
  166 + box-sizing: content-box;
  167 +}
  168 +
  169 +.minicolors-picker {
  170 + position: absolute;
  171 + top: 0;
  172 + left: 0;
  173 + width: 18px;
  174 + height: 2px;
  175 + background: white;
  176 + border: solid 1px black;
  177 + margin-top: -2px;
  178 + -moz-box-sizing: content-box;
  179 + -webkit-box-sizing: content-box;
  180 + box-sizing: content-box;
  181 +}
  182 +
  183 +/* Inline controls */
  184 +.minicolors-inline {
  185 + display: inline-block;
  186 +}
  187 +
  188 +.minicolors-inline .minicolors-input {
  189 + display: none !important;
  190 +}
  191 +
  192 +.minicolors-inline .minicolors-panel {
  193 + position: relative;
  194 + top: auto;
  195 + left: auto;
  196 + box-shadow: none;
  197 + z-index: auto;
  198 + display: inline-block;
  199 +}
  200 +
  201 +/* Default theme */
  202 +.minicolors-theme-default .minicolors-swatch {
  203 + top: 5px;
  204 + left: 5px;
  205 + width: 18px;
  206 + height: 18px;
  207 +}
  208 +.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
  209 + left: auto;
  210 + right: 5px;
  211 +}
  212 +.minicolors-theme-default.minicolors {
  213 + width: auto;
  214 + display: inline-block;
  215 +}
  216 +.minicolors-theme-default .minicolors-input {
  217 + height: 20px;
  218 + width: auto;
  219 + display: inline-block;
  220 + padding-left: 26px;
  221 +}
  222 +.minicolors-theme-default.minicolors-position-right .minicolors-input {
  223 + padding-right: 26px;
  224 + padding-left: inherit;
  225 +}
  226 +
  227 +/* Bootstrap theme */
  228 +.minicolors-theme-bootstrap .minicolors-swatch {
  229 + top: 3px;
  230 + left: 3px;
  231 + width: 28px;
  232 + height: 28px;
  233 + border-radius: 3px;
  234 +}
  235 +.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
  236 + left: auto;
  237 + right: 3px;
  238 +}
  239 +.minicolors-theme-bootstrap .minicolors-input {
  240 + padding-left: 44px;
  241 +}
  242 +.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
  243 + padding-right: 44px;
  244 + padding-left: 12px;
  245 +}
0 \ No newline at end of file 246 \ No newline at end of file
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/jquery.minicolors.png 0 → 100644
View file @bd3b8d2

75.6 KB