[오토핫키] 토글 버튼 사용하기
CSS 스타일의 간단한 토글 버튼을 사용하는 예제입니다.
blog.naver.com
PC : https://blog.naver.com/hacke15944/223555619345
M : https://m.blog.naver.com/hacke15944/223555619345
- 소개
- 오토핫키에서 CSS 스타일을 사용하는 방법 소개
- ActiveX 인터페이스를 이용한 접근법 설명
- 구현 방법
- CSS, HTML, JavaScript 코드를 로컬에 저장
- ActiveX 객체의 .navigate 메소드를 사용하여 파일 로드 (동적 디자인 담당)
- 이벤트 처리
- hook용 자식 생성 후 append
- 중요 포인트
- 전체적인 코드는 IE에서 동작되는 코드로 작성되어야함
#Persistent
Clipboard:=A_Temp
SetWorkingDir, %A_ScriptDir%
SetBatchLines,-1
GC:=new WebGui("w300 h200") ; 정의
Gui, Show,, % GC.creator
return
F1:: ; 재정의
GC:=GC.ReNew("w200 h100")
Gui, Show,, % GC.creator " 재 정의"
return
GuiClose: ; 초기화
GC.Delete:=1
ExitApp
return
Class WebGUI
{
__New(size){
global wb_toggle:=""
for k,v in strsplit(size," "){
keys:=SubStr(v,1,1)
value:=RegExReplace(v,keys)
this.Insert(keys,value)
}
Gui, Add, ActiveX,hwndhwd %size% vwb_toggle, Shell.Explorer
wb_toggle.visible:=1
wb_toggle.navigate("about:blank")
while(wb_toggle.ReadyState<4)
sleep,10
this.hwnd:=hwd
this.document:=wb_toggle
this.document.silent := true
this.UISAVE()
while(wb_toggle.ReadyState<4)
sleep,10
this.Hook()
return this
}
__Get(k){
Switch k
{
case "creator": return "Notepad"
}
}
__Set(k,v){
Switch k
{
case "Delete":
if(v)
this.document:=wb_toggle:=""
}
}
ReNew(size){
gui,destroy
return {base : this}.__new(size)
}
Hook(){
document:=this.document.document
document._ev:=objbindmethod(this,"onclick")
Hook:= document.createElement("script")
Hook.text:="document.getElementById('toggleButton').onclick="
. "function(){document._ev(); }"
document.body.appendChild(hook)
}
Onclick(){
global toggle:=!toggle
if(toggle)
msgbox,0,On, ON
else if(!toggle)
msgbox,16,OFF, OFF
else
msgbox,16,NULL, 변수 오류
}
UISAVE(fn := "Button")
{
w:=this.w,h:=this.h,x:=this.x,y:=this.y
js =
(Ltrim
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
html, body {
margin: 0;
padding: 0;
width: 100`%;
height: 100`%;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 100`%;
height: 100`%;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50`%;
}
</style>
</head>
<body>
<label class="toggle-switch">
<input type="checkbox" id="toggleButton">
<span class="slider round"></span>
</label>
<script>
function updateToggleSize() {
var containerWidth = %W%;
var containerHeight = %H%;
var toggle = document.querySelector('.toggle-switch');
var slider = toggle.querySelector('.slider');
var sliderBefore = slider.querySelector('::before');
var toggleWidth = Math.min(containerWidth, containerHeight) * 0.8;
var toggleHeight = toggleWidth * 0.5;
toggle.style.width = toggleWidth + 'px';
toggle.style.height = toggleHeight + 'px';
var circleSize = toggleHeight * 0.8;
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var css = '\
.slider:before {\
height: ' + circleSize + 'px;\
width: ' + circleSize + 'px;\
left: ' + (toggleHeight * 0.1) + 'px;\
bottom: ' + (toggleHeight * 0.1) + 'px;\
}\
input:checked + .slider:before {\
-webkit-transform: translateX(' + (toggleWidth - toggleHeight) + 'px);\
-ms-transform: translateX(' + (toggleWidth - toggleHeight) + 'px);\
transform: translateX(' + (toggleWidth - toggleHeight) + 'px);\
}\
';
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
styleElement.appendChild(document.createTextNode(css));
}
document.head.appendChild(styleElement);
toggle.style.position = 'absolute';
toggle.style.left = ((containerWidth - toggleWidth) / 2) + 'px';
toggle.style.top = ((containerHeight - toggleHeight) / 2) + 'px';
}
if (window.addEventListener) {
window.addEventListener('load', updateToggleSize);
} else if (window.attachEvent) {
window.attachEvent('onload', updateToggleSize);
}
</script>
</body>
</html>
)
if (FileExist(A_Temp "\" fn ".HTML")) {
FileDelete, % A_Temp "\" fn ".HTML"
Sleep, 500
}
FileAppend, % js, % A_Temp "\" fn ".HTML"
url := "file://" A_Temp "\" fn ".html"
Sleep, 500
this.document.navigate(url)
while(this.document.ReadyState<4)
sleep,100
}
}