Color Picker
ဒါလေးက တော့မိမိ website မှာအ ရောင်ကာလာ လေး တွေကိုမိမိစိတ်ကြိုက် ရွေးချယ်အသုံးပြုလို့ရအောင်ပြုလုပ်ထားတဲ့ color picker ဖြစ်ပါတယ်။မိမိ website ကိုအရောင်ကာလာချိန်းချင်သူများအတွက်တကူးတကအရောင်ကာလာတွေရှာနေစရာမလိုပဲဒီ color picker ထည့်သွင်းထားရုံဖြင့်မိမိလိုအပ်သလိုအရောင်ကာလာများကိုရွေးချယ်အသုံးပြုလို့ရပါတယ်။လိုအပ်တယ်ဆိုရင်အောက်ကပြုလုပ်ပုံအနည်းငယ်ဖြင့်ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။
No(1) မိမိ site ကို account အရင်ဝင်ပါ
No(2) dashboard ထဲက Pages ကိုနှိပ်
No(3) ➕ New Page (or) ➕ အိုင်ကွန်ကိုနှိပ်
No(4) 🖍️ အိုင်ကွန်ကိုနှိပ်ပါ </> HTML view ကိုရွေးချယ်၍နှိပ်ပါ
No(5) အောက်က code တွေကို copy ယူ၍ကူးထည့်
<div ng-app="app">
<color-picker color="foo"></color-picker>
<p style="margin-top: 10px; width: 100%;">color: {{ foo }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
'use strict';
angular.module('app', ['colorPicker']);
}());
</script>
<style>
.adspacebytechnicalarp {
padding:2em;
box-shadow:0 5px 15px rgba(0,0,0,.16);
border-radius:5px;
margin-top:1em;
background:#fff;
text-align:left;
color:red;
}
.ng-scope {text-align: center;}
* {
box-sizing: border-box;
}
.color-picker {
display: inline-block;
position: relative;
}
.color-picker input { display: none; }
.canvas-wrapper {
border-radius: 1000px;
overflow: hidden;
}
.indicator {
top: calc(50% - 2rem);
left: 50%;
display: block;
position: absolute;
background-color: transparent;
transform: translate3d(-50%,-2rem,0);
pointer-events: none;
}
.indicator .selected-color {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 30%;
border-radius: 1000px;
z-index: -1;
background-color: #fff;
-webkit-filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}
</style>
<script>
(function(){
'use strict';
angular.module('app', ['colorPicker']);
angular.module('colorPicker', [])
.directive('colorPicker', [function () {
var updateEventListenerTargets = ['touchstart','touchmove','mouseup','mousemove'],
clientX, clientY,
mousedown = 0;
function ColorPicker() {
// Initialize at center position with white
this.ngModel = '#ffffff';
}
ColorPicker.$inject = [];
return {
restrict: 'E',
controller: ColorPicker,
bindToController: true,
controllerAs: 'colorPicker',
scope: {
ngModel: '=color'
},
replace: true,
template: [
'<div class="color-picker">',
'<canvas width="230px" height="230px"></canvas>',
'<span class="indicator">',
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="64" viewBox="0 0 25 32">',
'<path fill="#ffffff" d="M12.528 0c-6.943 0-12.528 5.585-12.528 12.528 0 10.868 12.528 19.472 12.528 19.472s12.528-9.585 12.528-18.792c0-6.868-5.66-13.208-12.528-13.208zM12.528 21.434c-4.981 0-9.057-4.075-9.057-9.057s4.075-9.057 9.057-9.057 9.057 4.075 9.057 9.057-4.075 9.057-9.057 9.057z"></path>',
'</svg>',
'<span class="selected-color"></span>',
'</span>',
'</div>'
].join(''),
link: function (scope, el, attrs, colorPicker) {
var canvas = el.find('canvas')[0];
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = x;
var counterClockwise = false;
for(var angle=0; angle<=360; angle+=1){
var startAngle = (angle-2)*Math.PI/180;
var endAngle = angle * Math.PI/180;
context.beginPath();
context.moveTo(x, y);
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.closePath();
var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)');
gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)');
context.fillStyle = gradient;
context.fill();
}
var updateColorPicker = function(e){
e.preventDefault();
if (e.type === 'mousemove' && !mousedown) { return; }
clientX = (e.clientX) ? e.clientX : e.changedTouches[0].clientX;
clientY = (e.clientY) ? e.clientY : e.changedTouches[0].clientY;
var canvasOffset = canvas.getBoundingClientRect();
var canvasX = Math.floor(clientX - canvasOffset.left);
var canvasY = Math.floor(clientY - canvasOffset.top);
// get current pixel
var imageData = context.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var indicator = el.find('span')[0];
var selectedColor = indicator.getElementsByClassName('selected-color')[0];
if(!pixel[pixel.length - 1]) {
return;
}
var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
colorPicker.ngModel = '#' + ('0000' + dColor.toString(16)).substr(-6);
indicator.style.left = canvasX + 'px';
indicator.style.top = canvasY - 32 + 'px';
selectedColor.style.backgroundColor = colorPicker.ngModel;
scope.$apply(function(){
colorPicker.ngModel = colorPicker.ngModel;
});
};
for (var i=0, len = updateEventListenerTargets.length; i<len; i++) {
canvas.addEventListener(updateEventListenerTargets[i], updateColorPicker, false);
}
canvas.addEventListener('mousedown', function(){
mousedown = 1;
}, false);
document.addEventListener('mouseup', function(){
mousedown = 0;
}, false);
}
};
}]);
}());
</script>
<div class="adspacebytechnicalarp arpContainer">
Place you Ad Code 1
</div>
<br />
<h3 style="text-align: center;"><span style="color: red;">List of Best Color Palettes Collection</span></h3>
<iframe frameborder="0" height="1080" layout="fixed-height" noloading="" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" src="https://raw.githack.com/IamArpain/free-blogger-scripts/IamArpain-start-1/scripts/color-palettes2.html" title="Color Palette" width="100%">
<br />
<amp-img noloading src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIADIhNJcZUNROsXentIPAJkj0opcDBUxzTsG0nMud9Yh6IYng74G1UTtfhsRjs7eBBXH-TBgI2c8I_9nSE4liE3YVn3Bxevks1avosai9cLZBr1HlTzQwdBN-XefCLI6eV_U2eRUNRDk/s1600/placeholder.png"
layout="fixed-height"
height="575"
width="auto"
placeholder><br />
</amp-img><br />
</iframe>
No(6) ▶️ Publish ကိုနှိပ်ပါ။ CONFIRM ကိုနှိပ်ပြီးပါပြီ။