CodeIgniter 한국사용자포럼 - TIP게시판

javascript - snow fall

darkninja — Fri, 13 Jun 2025 14:30:14 +0900

첨부파일을 삭제한다는 것이 글을 삭제 했네요;

눈송이를 랜덤하게 뿌려주는 변수들을 조금 수정했습니다

글내용중에 background-image url 에 a태그가 붙는 현상이 있습니다.

글을 올리게 되면 코드의 최적화를 단시간내에 끝낼수 있습니다.

이젠 큰 수정은 필요 없어 보이는데 나머지는 여러분의 몫입니다.

html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>눈 내리는 애니메이션</title>
<style>
body {
background-image: url(https://images.unsplash.com/photo-1491002052546-bf38f186af56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2200&q=80);
background-size: cover;
}
</style>
</head>

<body>
<script type="text/javascript" src="snowflakes.js"></script>
<script>
</script>
</body>

</html>

js

//https://codepen.io/tmrDevelops/pen/PPgjwz
//https://stickode.tistory.com/413
//https://forum.squarespace.com/topic/174119-falling-snowflakes-on-webpage#comment-416466_wrap
//https://chatgpt.com/

// Flag to reset the position of the snowflakes
var resetPosition = false;

var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");

// Handle accessibility
var enableAnimations = false;

// Handle animation accessibility preferences
function setAccessibilityState() {
if (reduceMotionQuery.matches) {
enableAnimations = false;
} else {
enableAnimations = true;
}
}
setAccessibilityState();

reduceMotionQuery.addListener(setAccessibilityState);

//
// Trigger a reset of all the snowflakes' positions
//
function sf_setResetFlag(e) {
resetPosition = true;
}

//
// It all starts here...
//
function snowflake_setup() {
if (enableAnimations) {
window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
window.addEventListener("resize", sf_setResetFlag, false);
}
}
snowflake_setup();

//
// The function responsible for creating the snowflake
//
function generateSnowflakes() {
// create our snowflake element's parent container
var snowflakeDIV = document.getElementById("snowflakeDIV_id");
if (!snowflakeDIV) {
snowflakeDIV = document.createElement("div");
snowflakeDIV.id = "snowflakeDIV_id";
snowflakeDIV.style.position = "fixed";
snowflakeDIV.style.left = "0px";
snowflakeDIV.style.top = "0px";
snowflakeDIV.style.bottom = "0px";
snowflakeDIV.style.width = "100vw";
snowflakeDIV.style.height = "100vh";
snowflakeDIV.style.overflow = "hidden";
snowflakeDIV.style.zindex = "9999999";
snowflakeDIV.style.pointerEvents = "none";

document.body.appendChild(snowflakeDIV);

makeSnowflakes(snowflakeDIV);
}
}

//
// The function responsible for creating the snowflake
//
function makeSnowflakes(snowflakeDIV) {
// Global variables to store our browser's window size
var snowflake_cw = document.documentElement.clientWidth;
var snowflake_ch = document.documentElement.clientHeight;

var randMinMax = function(min,max) {
return min + Math.floor(Math.random() * ((max - min) + 1));
};
var snowflakeColor = function() {
var items = ["#dcf2fd", "#60b4f2", "#dbf2fd", "#d8f8ff", "#b8ddfa"];
var item = items[Math.floor(Math.random()*items.length)];
return item;
};
var snowflakeColorRand = function() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};

// Array to store our Snowflake objects
var snowflakes = [];

// Specify the number of snowflakes you want visible
var snowflakes_num = 50;

var fmid = 100;
var fend = 200;
var spn = 100;
var spd = 25; // 눈송이 떨어지는 속도 최소, 최대
var spv = 70;
var szn = 100;
var szd = 30; // 눈송이 크기 최소, 최대
var szv = 52;
var spmin = 1;
var sp = 0.25; // 눈송이 떨어지는 속도조절
var xpv = 0.17; // 눈송이 좌우이동 값 조절
var opacity = 0.65;

var viewfpscount = false;
var viewconsolelog = false;
var viewcount = 0;
var viewmax = 0;

//
// Constructor for our Snowflake object
//
function Snowflake() {
}

Snowflake.prototype.animate = function (fpsCount) {
var snow = this;

var xp = Math.random() * snow.sz * xpv; // 눈송이가 좌우로 이동하는 값
if (snow.sp > 3) {
xp = xp * randMinMax(3, 5); // 눈송이가 떨어지는 속도가 빠르면 랜덤하게 좌우 이동값을 크게한다
}
else if (snow.sp > 2) {
xp = xp * randMinMax(1, 3);
}
if (snow.sp > 2.5) { // 속도가 빠르면 규칙적인 이동에 변화를 준다
if (Math.random() > snow.direction) {
xp = xp * -1;
}
}

snow.frame += 1;
xp = snow.frame > snow.fmid ? xp * -1 : xp; // 특정 프레임마다 눈송이가 좌우로 이동하는 방향을 바꿈
snow.x += xp;
snow.y += snow.sp;
snow.frame = snow.frame >= snow.fend ? snow.frame = 0 : snow.frame;

if (snow.y > snowflake_ch) { // 눈송이가 화면 하단을 벗어나면

if (viewconsolelog) {
if (viewmax == 0 || (viewmax > 0 && viewcount < viewmax)) {
viewcount++;
console.log();
}
}

snow.y = 0;
snow.x = Math.random() * snowflake_cw;
snow.frame = randMinMax(1, fend);
snow.fmid = randMinMax(1, fmid);
snow.fend = randMinMax(snow.fmid, fend);

snow.direction = Math.random();

snow.sz = szn / (szd + (szv * Math.random()));
snow.scale = snow.sz / (szn / (szd + szv)); // 눈송이 크기
var spz = spn / (spd + (spv * Math.random()));
snow.sp = Math.max(spmin, (Math.pow(spz, 2) * sp)); // 눈송이 떨어지는 속도 (눈송이 크기와 비례하지 않음)

if (snow.sp > 3) { // 눈송이가 떨어지는 속도가 빠르면 좌우 이동값을 느리게 바꾼다
snow.fmid = snow.fmid * 2;
snow.fend = snow.fend * 2;
}
else if (snow.sp > 2) {
snow.fmid = snow.fmid * 1.5;
snow.fend = snow.fend * 1.5;
}

snow.flake.style.backgroundColor = snowflakeColorRand();
snow.flake.style.opacity = (opacity + Math.random()) / 3; //0.22 ~ 0.55
}

// 실제 눈송이 위치 이동
snow.flake.style.transform = "translate(" + snow.x + "px, " + snow.y + "px) scale(" + snow.scale + ")";
}

// create snowflake and add it to snowflakeContainer
var sf = document.createElement('div');
sf.className = "snowflake";
sf.style.position = "absolute";
sf.style.width = "7px";
sf.style.height = "7px";
sf.style.borderRadius = "50%";

var spz;
// create each individual snowflake
for (var i = 0; i < snowflakes_num; i++) {

// create our Snowflake object
var snow = new Snowflake();

// set initial snowflake properties
snow.y = Math.random() * snowflake_ch;
snow.x = Math.random() * snowflake_cw;
snow.frame = randMinMax(1, fend);
snow.fmid = randMinMax(1, fmid);
snow.fend = randMinMax(snow.fmid, fend);

snow.direction = Math.random();

snow.sz = szn / (szd + (szv * Math.random()));
snow.scale = snow.sz / (szn / (szd + szv));
spz = spn / (spd + (spv * Math.random()));
snow.sp = Math.max(spmin, (Math.pow(spz, 2) * sp));

if (snow.sp > 3) { // 눈송이가 떨어지는 속도가 빠르면 좌우 이동값을 느리게 바꾼다
snow.fmid = snow.fmid * 2;
snow.fend = snow.fend * 2;
}
else if (snow.sp > 2) {
snow.fmid = snow.fmid * 1.5;
snow.fend = snow.fend * 1.5;
}

// clone our original snowflake and add it to snowflakeContainer
snow.flake = sf.cloneNode(true);

snow.flake.id = "snowflake"+i;
snow.flake.style.backgroundColor = snowflakeColorRand();
snow.flake.style.opacity = (opacity + Math.random()) / 3; //0.22 ~ 0.55

if ((i % 3) == 0) {
snow.flake.style.filter = "drop-shadow(0 0 "+snow.scale+"px blue)";
}

snowflakes.push(snow);

snowflakeDIV.appendChild(snow.flake);
}
sf.remove();

// 초기화
var fpsCount = 0;
var lastCheck = performance.now();

var lowfpsCount = 0;
var decsnowflake = false;
//
// Responsible for moving each snowflake by calling its update function
//
function snowflakes_frame_animate() {
const now = performance.now();

fpsCount++;
if (now - lastCheck >= 1000) {
if (fpsCount < 60) {
lowfpsCount++;
if (lowfpsCount >= 3) {
lowfpsCount = 0;
decsnowflake = true;
}
}
else {
lowfpsCount = 0;
}

if (viewfpscount) console.log("fpsCount: " + fpsCount);

fpsCount = 0;
lastCheck = now;
}

for (let i = 0; i < snowflakes.length; i++) {
const snow = snowflakes[i];
if (snow) snow.animate(fpsCount); // 눈송이를 움직인다

if (decsnowflake && snow.y == 0) { // 눈송이가 화면 하단을 벗어난 거
snowflakes.splice(i, 1); // 배열 삭제
snow.flake.remove(); // 눈송이 제거

decsnowflake = false;

if (viewconsolelog) console.log(snow.flake.id+" 삭제 남은 갯수 : " + snowflakes.length);
}
}

// Reset the position of all the snowflakes to a new value
if (resetPosition) {
resetPosition = false;

snowflake_cw = document.documentElement.clientWidth;
snowflake_ch = document.documentElement.clientHeight;

var spz;
for (let i = 0; i < snowflakes.length; i++) {
let snow = snowflakes[i];

// set initial snowflake properties
snow.y = Math.random() * snowflake_ch;
snow.x = Math.random() * snowflake_cw;
snow.frame = randMinMax(1, fend);
snow.fmid = randMinMax(1, fmid);
snow.fend = randMinMax(snow.fmid, fend);

snow.direction = Math.random();

snow.sz = szn / (szd + (szv * Math.random()));
snow.scale = snow.sz / (szn / (szd + szv));
spz = spn / (spd + (spv * Math.random()));
snow.sp = Math.max(spmin, (Math.pow(spz, 2) * sp));

if (snow.sp > 3) { // 눈송이가 떨어지는 속도가 빠르면 좌우 이동값을 느리게 바꾼다
snow.fmid = snow.fmid * 2;
snow.fend = snow.fend * 2;
}
else if (snow.sp > 2) {
snow.fmid = snow.fmid * 1.5;
snow.fend = snow.fend * 1.5;
}

snow.flake.style.backgroundColor = snowflakeColorRand();
snow.flake.style.opacity = (opacity + Math.random()) / 3; //0.22 ~ 0.55
}
}

requestAnimationFrame(snowflakes_frame_animate);
}
snowflakes_frame_animate();
}

ajaxcall function (beforeSend) + loading spinner 수정됨

darkninja — Tue, 28 May 2024 23:01:38 +0900

https://stackoverflow.com/questions/66737093/wrap-dynamic-text-around-a-spinning-cylinder-with-css-javascript-splitting-js

https://github.com/nadimshah008/circulartextrotatingjavascript

https://www.loadergallery.com/

https://css-loaders.com/

param.headers 가 추가 되었고

param.beforeSend 가 위치 이동 되었습니다

수정된 spinner-2024-07-19.zip 파일을 다운 받으세요.

개인적으로 로딩gif 이미지가 기어두개 돌아가는게 마음에 드는데

저작권 문제가 불확실해서

찾아보니 이런게 있더군요.

클래스 비슷한 형태는 복잡해서 함수형태로 만들었습니다.

css 만으로도 가능하지만 여러개를 동시에 사용할때는 css 를 여러개 만들어야 합니다.

개인적으로 사용하는데는 큰 불편함이 없는데

남이 만든거는 100% 마음에 들기 힘듭니다.

각자 취향대로 수정해서 사용하시면 됩니다.

.spinner-body {
color: official;
display: inline-block;
position: relative;
height: 60px;
width: 60px;
background-color:#ddd;
}

function spinner(spinner_body_id, spinner_cnt=0, spinner_duration=1200) {
var spinner_body = document.getElementById(spinner_body_id);

var spinner_cnt = spinner_cnt ? spinner_cnt : (spinner_duration / 100) * 2;

var delay_step = spinner_duration / spinner_cnt;
var delay = 0 - (delay_step * spinner_cnt);
var deg = 360 / spinner_cnt;

for ( var i = 0; i < spinner_cnt; i++ ) {
var spinnerdiv = document.createElement('div');
spinnerdiv.style.transform = "rotate(" + i*deg + "deg)";
spinnerdiv.style.transformOrigin = "30px 30px";

var span = document.createElement('span');
span.innerHTML = " ";
span.style.display = "block";
span.style.position = "absolute";
span.style.top = "1px";
span.style.left = "29px";
span.style.width = "3px";
span.style.height = "12px";
span.style.borderRadius = "20%";
span.style.background = "#1043A0";
spinnerdiv.appendChild(span);

var keyframes = [
{opacity: 1},
{opacity: 0}
];
var options = {
delay: delay,
duration: spinner_duration,
easing: "linear",
iterations: Infinity
};
spinnerdiv.animate(keyframes, options);

spinner_body.appendChild(spinnerdiv);
delay += delay_step;
}
}

<div id="spinner-body" class="spinner-body">

javascript footer bottom

darkninja — Mon, 25 Mar 2024 17:54:19 +0900

각 판넬은 data-namespace 와 data-panelid 로 구분되는 2차원 배열 개념입니다.

중첩되는 판넬들은 data-position 을 공통으로 가집니다.

판넬 높이를 구할때 닫히거나 열린 각 판넬들의 높이를 먼저 구하고

(중접된 판넬은 부모판넬높이 하나만 구합니다. 자식판넬들은 하위요소로 포함되어 있으니 부모높이에 포함됨)

각 판넬이 열리거나 닫힐때 handy-panelcontent 의 높이가 전달되는데

이것을 더하거나 빼면 실제 판넬높이가 됩니다.

이렇게 구해진 실제높이를 화면높이와 비교하면

top 과 bottom 사이의 view 높이를 구할수 있습니다.

화면이 감춰지고 (로딩 부하는 그대로) 정보의 전달력이 떨어지니 실제 홈페이지에는 적용 안하는게 좋습니다;

이걸 왜 했을까요?

구글에서 javascript footer bottom 로 검색하시면 정보를 좀더 얻을수 있습니다.

<div class="handy-panel sidebar nestedparent collapsed" data-namespace="sidebarleft" data-position="msg" data-panelid="msg">
<button type="button" class="button is-fullwidth" data-sidebarleft-button="msg">msg</button>
<div class="handy-panelcontent is-1" data-sidebarleft-content="msg">
<div class="handy-content">
<div class="handy-panel nested">
<div id="disp_ajax" name="disp_ajax" class="disp_ajax">disp_ajax </div>
<div id="disp_lunar" name="disp_lunar" class="disp_lunar">disp_lunar </div>
<div id="disp_msg" name="disp_msg" class="disp_msg">disp_msg </div>
</div>
</div>

<div class="handy-panel sidebar nested nestedchild collapsed" data-namespace="sidebarleft" data-position="msg" data-panelid="cssjs">
<button type="button" class="button is-fullwidth" data-sidebarleft-button="cssjs">cssjs</button>
<div class="handy-panelcontent is-1" data-sidebarleft-content="cssjs">
<textarea id="disp_cssjs" name="disp_cssjs" rows="20" style="width: 96.5%" spellcheck="false" placeholder="disp_cssjs">cssjs</textarea>
</div>
</div>

<div class="handy-panel sidebar nested nestedchild collapsed" data-namespace="sidebarleft" data-position="msg" data-panelid="ztree">
<button type="button" class="button is-fullwidth" data-sidebarleft-button="ztree">ztree</button>
<div class="handy-panelcontent is-1" data-sidebarleft-content="ztree">
<ul id="ztree_category" class="tree ztree_category"></ul>
<button type="button" id="loadjsondata">load jsondata</button>

<div class="handy-panel sidebar nested nestedchild expand" data-namespace="sidebarleft" data-position="msg" data-panelid="jsonformatview">
<button type="button" class="button is-fullwidth" data-sidebarleft-button="jsonformatview">jsonformatview</button>
<div class="handy-panelcontent is-1" data-sidebarleft-content="jsonformatview">
<div id="disp_json_data" name="disp_json_data" class="disp_json_data">disp json data</div>
<div id="disp_format_cookies" name="disp_format_cookies" class="disp_format_cookies">disp format cookies</div>
</div>
</div>

</div>
</div>

</div>

var ahandypanel_h = [];
var panelsList = document.getElementsByClassName("handy-panel");
for (var i=0; i<panelsList.length; i++)
{
var panel = panelsList[i];
var panel_h = panel.offsetHeight;
var data_namespace = panel.getAttribute("data-namespace");
var data_position = panel.getAttribute("data-position");
var data_panelid = panel.getAttribute("data-panelid");
if ((data_namespace == null) || (data_namespace == "")) {
continue;
}
if (!assincludes(ahandypanel_h, data_namespace)) {
ahandypanel_h[data_namespace] = [];
}
if (panel.classList.contains("nestedparent")) {
ahandypanel_h[data_namespace][data_position] = panel_h;
}
else if (panel.classList.contains("nestedchild")) {
}
else {
ahandypanel_h[data_namespace][data_panelid] = panel_h;
}
}

PHP 8.2 CLI Xdebug 사용 방법

한대승(불의회상) — Wed, 19 Jul 2023 10:59:15 +0900

Windows Xampp 사용

set XDEBUG_MODE=debug& set XDEBUG_SESSION=1
C:\xampp\php\php.exe -dxdebug.mode=debug -dxdebug.client_host=127.0.0.1 -dxdebug.client_port=9003
-dxdebug.start_with_request=yes {PHP파일.php}

Linux

export XDEBUG_MODE=debug XDEBUG_SESSION=1
php -dxdebug.mode=debug -dxdebug.client_host=127.0.0.1 -dxdebug.client_port=9003
-dxdebug.start_with_request=yes {PHP파일.php}

즐거운 코딩되세요.

ajaxcall - How can I make an AJAX call without jQuery?

darkninja — Sat, 17 Jun 2023 23:45:03 +0900

How can I make an AJAX call without jQuery?

https://stackoverflow.com/questions/8567114/how-can-i-make-an-ajax-call-without-jquery

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

https://github.com/codeigniter4/CodeIgniter4/blob/develop/system/HTTP/Response.php

실무에 바로 적용하기에는 모자람이 있습니다

충분히 검토하고 보완해서 사용하세요!

index.php

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ajaxcall</title>
<style type="text/css" media="screen">
</style>
</head>

<body>
<div style="border: 1px solid #ddd; padding: 10px;">
ajax_formdata
<div id="ajax_formdata"></div>
</div><br/>

<div style="border: 1px solid #ddd; padding: 10px;">
ajax_info
<div id="ajax_info"></div>
</div><br/>

<div style="border: 1px solid #ddd; padding: 10px;">
ajax_result
<div id="ajax_result"></div>
</div>

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax_formdata = document.getElementById("ajax_formdata");
var ajax_info = document.getElementById("ajax_info");
var ajax_result = document.getElementById("ajax_result");

var formData = {
id : '_id',
subject : '_subject',
contents : '_contents',
time : '_time'
};

ajax_formdata.innerText = "obj_param: "+obj_param(formData);
//ajax_formdata.innerText = "obj_param: "+JSON.stringify(formData);

function loadtext() {
Ajaxcall({
url: "get.php",
type: "POST",
data: formData,
//contentType: "json",
async: true, //synchronous request. Default value is true
timeout: 10000, //default timeout 20000
beforeSend: function() {
ajax_info.innerText = "loading...";
},
dataType: 'text',
success: function(result, status) {
if (status == "success") {
if (result) {
ajax_info.innerText = "success...";
ajax_result.innerText = result;
}
else {
ajax_info.innerText = "resule none...";
ajax_result.innerText = "";
}
}
else {
ajax_info.innerText = "timeout...";
ajax_result.innerText = "";
}
},
error: function(status, statusText) {
alert("error code: " + status + "\n" + "error message: " + statusText);
}
});
}
loadtext();
</script>
</body>

</html>

get.php

<?php

$data = file_get_contents("php://input");
echo "file_get_contents('php://input')"."\n";
echo $data."\n";

if (isset($_GET) && count($_GET) > 0) {
parse_str($data, $input);

echo "\n";
echo "parse_str data to input"."\n";
print_r($input);
echo "\n";

echo "_GET"."\n";
print_r($_GET);

echo "id => ".$_GET["id"];
}
else if (isset($_POST) && count($_POST) > 0) {
parse_str($data, $input);

echo "\n";
echo "parse_str data to input"."\n";
print_r($input);
echo "\n";

echo "\n";
echo "_POST"."\n";
print_r($_POST);

echo "id => ".$_POST["id"];
}
else {
//contentType: "json"
$param = json_decode($data, false);
echo "\n";
echo "json"."\n";
echo "id => ".$param->id."\n";
echo "subject => ".$param->subject."\n";
echo "contents => ".$param->contents."\n";
}

?>

ajaxcall.js

//https://stackoverflow.com/questions/8567114/how-can-i-make-an-ajax-call-without-jquery
//https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
//https://github.com/codeigniter4/CodeIgniter4/blob/develop/system/HTTP/Response.php

var ajax_load_process = false;

var xhr_statusCodes = {
// 1xx: Informational
100 : 'Continue',
101 : 'Switching Protocols',
102 : 'Processing', // http://www.iana.org/go/rfc2518
103 : 'Early Hints', // http://www.ietf.org/rfc/rfc8297.txt
// 2xx: Success
200 : 'OK',
201 : 'Created',
202 : 'Accepted',
203 : 'Non-Authoritative Information', // 1.1
204 : 'No Content',
205 : 'Reset Content',
206 : 'Partial Content',
207 : 'Multi-Status', // http://www.iana.org/go/rfc4918
208 : 'Already Reported', // http://www.iana.org/go/rfc5842
226 : 'IM Used', // 1.1; http://www.ietf.org/rfc/rfc3229.txt
// 3xx: Redirection
300 : 'Multiple Choices',
301 : 'Moved Permanently',
302 : 'Found', // Formerly 'Moved Temporarily'
303 : 'See Other', // 1.1
304 : 'Not Modified',
305 : 'Use Proxy', // 1.1
306 : 'Switch Proxy', // No longer used
307 : 'Temporary Redirect', // 1.1
308 : 'Permanent Redirect', // 1.1; Experimental; http://www.ietf.org/rfc/rfc7238.txt
// 4xx: Client error
400 : 'Bad Request',
401 : 'Unauthorized',
402 : 'Payment Required',
403 : 'Forbidden',
404 : 'Not Found',
405 : 'Method Not Allowed',
406 : 'Not Acceptable',
407 : 'Proxy Authentication Required',
408 : 'Request Timeout',
409 : 'Conflict',
410 : 'Gone',
411 : 'Length Required',
412 : 'Precondition Failed',
413 : 'Content Too Large', // https://www.iana.org/assignments/http-status-codes/http-status-codes.xml
414 : 'URI Too Long', // https://www.iana.org/assignments/http-status-codes/http-status-codes.xml
415 : 'Unsupported Media Type',
416 : 'Requested Range Not Satisfiable',
417 : 'Expectation Failed',
418 : "I'm a teapot", // April's Fools joke; http://www.ietf.org/rfc/rfc2324.txt
// 419 (Authentication Timeout) is a non-standard status code with unknown origin
421 : 'Misdirected Request', // http://www.iana.org/go/rfc7540 Section 9.1.2
422 : 'Unprocessable Content', // https://www.iana.org/assignments/http-status-codes/http-status-codes.xml
423 : 'Locked', // http://www.iana.org/go/rfc4918
424 : 'Failed Dependency', // http://www.iana.org/go/rfc4918
425 : 'Too Early', // https://datatracker.ietf.org/doc/draft-ietf-httpbis-replay/
426 : 'Upgrade Required',
428 : 'Precondition Required', // 1.1; http://www.ietf.org/rfc/rfc6585.txt
429 : 'Too Many Requests', // 1.1; http://www.ietf.org/rfc/rfc6585.txt
431 : 'Request Header Fields Too Large', // 1.1; http://www.ietf.org/rfc/rfc6585.txt
451 : 'Unavailable For Legal Reasons', // http://tools.ietf.org/html/rfc7725
499 : 'Client Closed Request', // http://lxr.nginx.org/source/src/http/ngx_http_request.h#0133
// 5xx: Server error
500 : 'Internal Server Error',
501 : 'Not Implemented',
502 : 'Bad Gateway',
503 : 'Service Unavailable',
504 : 'Gateway Timeout',
505 : 'HTTP Version Not Supported',
506 : 'Variant Also Negotiates', // 1.1; http://www.ietf.org/rfc/rfc2295.txt
507 : 'Insufficient Storage', // http://www.iana.org/go/rfc4918
508 : 'Loop Detected', // http://www.iana.org/go/rfc5842
510 : 'Not Extended', // http://www.ietf.org/rfc/rfc2774.txt
511 : 'Network Authentication Required', // http://www.ietf.org/rfc/rfc6585.txt
599 : 'Network Connect Timeout Error' // https://httpstatuses.com/599
}

function obj_param(obj) {
var parts = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
}
}
return parts.join('&');
}

//create an XMLHttpRequest object
function GetXMLHttpRequest() {
var xhr = false;
if (typeof XMLHttpRequest !== 'undefined') {
xhr = new XMLHttpRequest();
if (xhr.overrideMimeType) {
xhr.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) {
//var versions = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp" ];
//for (var i = 0; i < versions.length; i++) {
// try { xhr = new ActiveXObject(versions[i]); break; } catch (e) {}
//}
try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {
try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
}
}
if (!xhr) { return 0; }
return xhr;
}

function Ajaxcall(param, response)
{
if (ajax_load_process == true) {
return;
}
if (param.async == undefined) {
param.async = true;
}
if (param.async == false) {
ajax_load_process = true;
}
if (param.beforeSend != undefined) {
param.beforeSend();
};

var xhr = GetXMLHttpRequest();
if (!xhr) { return 0; }

if (param.timeout != undefined) {
xhr.timeout = param.timeout;
}
else {
xhr.timeout = 20000;
}

if (param.type != "GET") {
xhr.open(param.type, param.url, param.async);

if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
}
else if (param.contentType != undefined && param.contentType == "json") {
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
}
else if (param.contentType != undefined || param.contentType == true) {
xhr.setRequestHeader('Content-type', param.contentType);
}
else {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
}
else {
if (param.data) {
xhr.open(param.type, param.url + "?" + obj_param(param.data), param.async);
}
else {
xhr.open(param.type, param.url, param.async);
}
}

xhr.onprogress = function(loadTime) {
if (param.progress != undefined) {
param.progress({ loaded: loadTime.loaded }, "success");
}
}

xhr.ontimeout = function () {
this.abort(response);
param.success("timeout", "timeout");
ajax_load_process = false;
};

xhr.onerror = function() {
if (param.error != undefined) {
param.error(xhr, xhr_statusCodes[xhr.status], xhr.statusText);
}
ajax_load_process = false;
};

xhr.onreadystatechange = function() {
if(xhr.readyState == 0) { //UNSENT Client has been created. open() not called yet.
}
else if(xhr.readyState == 1) { //OPENED open() has been called.
}
else if(xhr.readyState == 2) { //HEADERS_RECEIVED send() has been called, and headers and status are available.
}
else if(xhr.readyState == 3) { //LOADING Downloading; responseText holds partial data.
}
else if (xhr.readyState == 4) { //DONE The operation is complete.
if (xhr.status == 200) { //request succesfull
}
else { //request failled
}
}
}

xhr.onload = function() {
if (xhr.status == 200) {
var data;
if (param.dataType != undefined) {
if (param.dataType == "document") {
data = xhr.responseXML;
}
else if (param.dataType == "json") {
try { data = JSON.parse(xhr.responseText); } catch (err) { data = null; }
}
else if (param.dataType == "stringify") {
data = JSON.stringify(xhr.responseText);
}
else if (param.dataType == "text") {
data = xhr.responseText;
}
else { //"arraybuffer", "blob", "html"
data = xhr.response;
}
}
else {
data = xhr.responseText;
}
param.success(data, "success");
}
else {
if (param.error != undefined) {
param.error(xhr, xhr_statusCodes[xhr.status], xhr.statusText);
}
}
ajax_load_process = false;
};

if (param.data != null || param.data != undefined) {
if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
xhr.send(param.data);
}
else if (param.contentType != undefined && param.contentType == "json") {
xhr.send(JSON.stringify(param.data));
}
else {
xhr.send(obj_param(param.data));
}
}
else {
xhr.send();
}

this.abort = function(response) {
if (XMLHttpRequest != null) {
xhr.abort();
ajax_load_process = false;
if (response != undefined) {
response({ status: "success" });
}
}
}

}

/**********
function loadsatimg() {
var satimg = document.getElementById("satimg");
Ajaxcall({
url: "<?php echo site_url(); ?>/home/satimg",
type: "GET",
data: null,
contentType: null,
dataType: 'json',
async: true,//synchronous request. Default value is true
timeout: 10000,//default timeout 20000
beforeSend:function(){
satimg.src = "<?php echo base_url(); ?>images/ajax-loading.gif";
satimg.width = "150";
satimg.height = "150"
},
success:function(result, status){
if (result) {
//alert(result['imgsrc']);
satimg.src = result['imgsrc'];
satimg.title = result['title'];
}
else
satimg.src = "<?php echo base_url(); ?>images/no-image.gif";
},
error:function(xhr,statusCodes,statusText){
alert("status:"+xhr.status+"\n"+"statusCodes:"+statusCodes+"\n"+"statusText:"+statusText+"\n"+"responseText:"+xhr.responseText);
}
});
}

//for abort previous requests
my_ajaxCall.abort(function(result) { console.log(result); });
*/

풀다운 메뉴(pulldown menu) css, js

darkninja — Sat, 13 May 2023 22:45:28 +0900

구시대의 유물인 풀다운 메뉴(pulldown menu) 입니다.

참고.

https://github.com/codrops/Blueprint-HorizontalDropDownMenu/blob/master/js/cbpHorizontalMenu.js

https://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/

https://codyhouse.co/gem/mega-dropdown

10년쯤 묵은 코드인데 이제서야 개선할 실력이 되었네요.

참고한 소스중에 사라진 분도 계시고...

소스부분을 수정하면 정상적인 동작이 안될 가능성이 아주 많습니다

분석을 먼저 하신 후에 사용 바랍니다.

github 에 보관창고를 마련했습니다.

https://github.com/darkninjaaa

index.php

<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="stylesheet" type="text/css" href="menu.css"; />
<style type="text/css" media="screen">
html,
body {
margin: 0;
height: 100%;
font-family: "맑은 고딕", "Malgun Gothic", "나눔고딕", "NanumGothic", "굴림", "Gulim", "Tahoma", "Verdana", "sans-serif";
}

.clearfix:before {
content: " ";
display: table;
}

.clearfix:after {
content: " "; /* Older browser do not support empty content */
display: table;
clear: both;
}

.clearfix8:after { /* if you don't require IE...8 support, the following is fine too: */
content: "";
display: table;
clear: both;
}
</style>

</head>

<body>
<div class="nav clearfix">
<div id="nav-button" class="nav-button">nav button</div>
<ul id="nav-ul" class="nav-ul submenu">
<li><a href="/" hyperlink="true" target_blank="true"><span>Home</span></a></li>
</li>
<li><a><span class="hassubmenu">php</span></a>
<ul class="submenu">
<li><a href="file"><span>File</span></a></li>
<li><a href="image"><span>Image</span></a></li>
<li><a href="json"><span>Json</span></a></li>
</ul>
</li>
<li><a><span class="hassubmenu">BLOG</span></a>
<ul class="submenu">
<li><a><span>HTML</span></a></li>
<li class="dropright"><a><span class="hassub">Design</span></a>
<ul>
<li><a><span>HTML</span></a></li>
<li><a><span>CSS</span></a></li>
<li class="dropright"><a><span class="hassub">Design</span></a>
<ul>
<li><a><span>Design</span></a></li>
<li class="dropright"><a><span class="hassub">HTML</span></a>
<ul>
<li class="dropright"><a><span class="hassub">ul class="submenu"</span></a>
<ul>
<li><a><span>who am i</span></a>
<li><a><span>who are u</span></a>
<li><a><span>who is dog</span></a>
</ul>
</li>
<li><a><span>li class="dropright"</span></a></li>
<li><a><span>span class="hassub"</span></a></li>
</ul>
</li>
<li><a><span>CSS</span></a></li>
<li><a><span>JavaScript</span></a></li>
</ul>
</li>
<li><a><span>JavaScript</span></a></li>
</ul>
</li>
<li><a><span>CSS</span></a></li>
<li><a><span>JavaScript</span></a></li>
</ul>
</li>
<li><a><span class="hassubmenu">Work</span></a>
<ul class="submenu">
<li><a><span>Web Design</span></a></li>
<li><a><span>Typography</span></a></li>
<li><a><span>Front-End</span></a></li>
</ul>
</li>
<li><a><span class="hassubmenu">Etc</span></a>
<ul class="submenu">
<div class="menucolumns">
<div class="menucolumn-12 clearfix">
<div class="menucol-12 menucol highlighted">
<div class="menucol-inner">
Tomatoes
</div>
</div>
<div class="menucol-3 menucol">
<div class="menucol-inner">
<h5>abc</h5>
<ul>
<li><a target="_blank" href="https://www.youtube.com/results?search_query=grafting+tree">grafting tree</a></li>
</ul>
</div>
</div>
<div class="menucol-3 menucol">
<div class="menucol-inner">
<h5>def</h5>
<ul>
<li><a>Apple</a></li>
</ul>
</div>
</div>
<div class="menucol-3 menucol">
<div class="menucol-inner">
<h5>ghi</h5>
<ul>
<li><a>Banana</a></li>
</ul>
</div>
</div>
<div class="menucol-3 menucol">
<div class="menucol-inner">
<h5>zzz</h5>
<ul>
<li><a>Grape</a></li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</li>
<li><a><span>About</span></a></li>
<div class="menu_right">
who am i ?
</div>
</ul>
</div>

<script type="text/javascript" src="menu.js"></script>
<script>
let menu = new Menu({
nav_button : "nav-button",
nav_ul : "nav-ul"
});
</script>

</body>

</html>

menu.css

/* menu-sub */
.submenuopen .submenu {
display: block;
}

.menu_right {
float: right;
padding: 0px 3px 0px 0px;
}

.menu_right form,
.menu_right form span {
font-size: 12px;
}

.nav {
position: relative;
}

.nav-button {
display: none;
}

.nav-ul {
display: block;
position: relative;
width: 100%;
z-index:5555;
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
letter-spacing: 0px;
word-spacing: 0px;
white-space: nowrap;
border-bottom: 0px solid #777;
font-size: 16px;
background: #acacac;
}

.nav ul li {
position:relative;
display: block;
color: #fff;
list-style: none;
font-size: 16px;
}
.nav ul li span {
font-size: 16px;
}

.nav a {
text-decoration: none;
}

.nav ul li a {
padding: 0 10px 0 10px;
color:#111;
text-decoration: none;
}

.nav-ul li.submenuopen > a {
color: #333;
background: #47a3da;
}

.nav-ul li.submenuopen > a:hover {
color: #eee;
background: #47a3da;
}

/* first level */

.nav-ul > li:hover > a {
color: #888;
background: #e9e9e9;
}

.nav-ul.submenu {
position:relative;
float: left;
}

.nav-ul.submenu > li {
float: left;
margin: 0px 0px 0px 0px;
display: inline;
}

.nav-ul.submenu > li .hassubmenu:after {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom: none;
border-top-color: #fff;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -5px;
}

/* second level */

.nav-ul li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
background: #bbb;
z-index:7777;
padding: 2px;
min-width: 110px;
}

.nav-ul li.submenuopen > ul {
background: #bbb;
}

.nav-ul li:hover > ul {
display: block;
background: #ccc;
z-index:9999;
}

.nav-ul li:hover > ul li a {
display: block;
}

.nav-ul li > ul li a:hover {
color: #888;
background: #e9e9e9;
}

.nav-ul li > ul li .hassub:after {
content: '+';
/*position: absolute;*/
top: 50%;
right: 5px;
margin-top: -11px;
}

.nav-ul > li > ul.submenu {
position: absolute;
top: 100%;
left: 0;
}

.nav-ul > li > ul.submenu .menucolumns { /*do not set background-color*/
padding: 0 5px 5px 0;
}

.nav-ul > li > ul.submenu .menucolumns ul li a:hover {
color: #333;
background: #f5f5f5;
}

.nav-ul > li > ul.submenu .menucolumns .highlighted {
background: #9f9f9f;
border: 1px solid #c1c1c1;
}

/* third level */

.nav-ul .dropright ul {
display: none;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
background: #ccc;
z-index:8888;
}

/* more level */

.nav-ul .dropright ul ul {
background: #c7c7c7;
}

.menucolumn-1 {width: 55px;}
.menucolumn-2 {width: 110px;}
.menucolumn-3 {width: 165px;}
.menucolumn-4 {width: 220px;}
.menucolumn-5 {width: 275px;}
.menucolumn-6 {width: 330px;}
.menucolumn-7 {width: 385px;}
.menucolumn-8 {width: 440px;}
.menucolumn-9 {width: 495px;}
.menucolumn-10 {width: 550px;}
.menucolumn-11 {width: 605px;}
.menucolumn-12 {width: 660px;}
.menucolumn-13 {width: 715px;}
.menucolumn-14 {width: 770px;}
.menucolumn-15 {width: 825px;}
.menucolumn-16 {width: 880px;}
.menucolumn-17 {width: 935px;}
.menucolumn-18 {width: 990px;}
.menucolumn-19 {width: 1045px;}
.menucolumn-20 {width: 1100px;}

.menucol-1 { width:50px; }
.menucol-2 { width:105px; }
.menucol-3 { width:160px; }
.menucol-4 { width:215px; }
.menucol-5 { width:270px; }
.menucol-6 { width:325px; }
.menucol-7 { width:380px; }
.menucol-8 { width:435px; }
.menucol-9 { width:490px; }
.menucol-10 { width:545px; }
.menucol-11 { width:600px; }
.menucol-12 { width:655px; }
.menucol-13 { width:710px; }
.menucol-14 { width:765px; }
.menucol-15 { width:820px; }
.menucol-16 { width:875px; }
.menucol-17 { width:930px; }
.menucol-18 { width:985px; }
.menucol-19 { width:1040px; }
.menucol-20 { width:1095px; }

.menucol-1, .menucol-2, .menucol-3, .menucol-4, .menucol-5, .menucol-6, .menucol-7, .menucol-8, .menucol-9, .menucol-10, .menucol-11, .menucol-12, .menucol-13, .menucol-14, .menucol-15, .menucol-16, .menucol-17, .menucol-18, .menucol-19, .menucol-20 {
display:inline-block;
float: left;
position: relative;
margin: 5px 0 0 5px;
background: #aaa;
}

.menucol-inner {
padding: 5px;
}

.submenu {
font-size: 16px;
}

.submenu h3 {
color: #555;
background: #939393;
padding: 2px 3px 2px 3px;
margin: 0;
font-size: 120%;
}

.submenu h4 {
color: #555;
background: #939393;
padding: 2px 3px 2px 3px;
margin: 0;
font-size: 110%;
}

.submenu h5 {
color: #555;
background: #939393;
padding: 2px 3px 2px 3px;
margin: 0;
font-size: 100%;
}

/* Examples for media queries */

@media screen and (max-width: 35em) {

.nav {
position: relative;
}

.nav-button {
display: block;
cursor: pointer;
font-size: 110%;
font-weight: 700;
margin: 0;
padding: 5px;
background: #39b1cc;
}
.nav-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 3px solid #d3eced;
right: 7px;
top: 8px;
}
.nav-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 3px solid #d3eced;
border-bottom: 3px solid #d3eced;
right: 7px;
top: 14px;
}

.nav-ul {
height: auto;
display: none;
position: relative;
white-space: nowrap;
}

.nav-ul.open {
display: block;
}

.nav-ul li a {
padding: 0 10px 0 10px;
}

.submenu li {
display: block;
}

.menu_right {
float:none;
}
.menu_right form {
padding: 0 0;
}

/* first level */

.nav-ul li {
float: none;
}

.nav-ul.submenu {
position:relative;
}

.nav-ul.submenu > li {
position:relative;
display: block;
float: none;
padding: 0;
}

/* second level */

.nav-ul li > ul {
position: static;
display: none;
}

.nav-ul li > ul.submenu {
position:relative;
top: 0;
left: 0;
}

.nav-ul li > ul.submenu .menucolumns {
margin: 0px 0 0 0;
padding: 0 2px 0 0;
}

/* third level */

.nav-ul .dropright ul {
position: static;
padding: 0 0 0 3px;
}

/* more level */

.nav-ul .dropright ul ul {
}

.menucol-1, .menucol-2, .menucol-3, .menucol-4, .menucol-5, .menucol-6, .menucol-7, .menucol-8, .menucol-9, .menucol-10, .menucol-11, .menucol-12, .menucol-13, .menucol-14, .menucol-15, .menucol-16, .menucol-17, .menucol-18, .menucol-19, .menucol-20 {
float: none;
width: auto;
margin: 2px 0 2px 2px;
}
.menucolumn-1, .menucolumn-2, .menucolumn-3, .menucolumn-4, .menucolumn-5, .menucolumn-6, .menucolumn-7, .menucolumn-8, .menucolumn-9, .menucolumn-10, .menucolumn-11, .menucolumn-12, .menucolumn-13, .menucolumn-14, .menucolumn-15, .menucolumn-16, .menucolumn-17, .menucolumn-18, .menucolumn-19, .menucolumn-20 {
width: auto;
}

.nav-ul > li > ul.submenu .menucolumns .menucol {
position:relative;
display: block;
float: none;
padding: 0;
}

}

menu.js

/**
* Menu.js v1.0.0
*/

var MENU_NAV_BUTTON = "nav-button"
var MENU_NAV_UL = "nav-ul"

var _typeof =
typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ?
function(obj) { return typeof obj; } :
function(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _extends = Object.assign || function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};

var _createClass = function() {
function defineProperties(target, props)
{
for (var i = 0; i < props.length; i++)
{
var descriptor = props[i];

descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;

if ("value" in descriptor) descriptor.writable = true;

Object.defineProperty(target, descriptor.key, descriptor);
}
}

return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();

function _classCallCheck(instance, Constructor)
{
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}

var Menu = function()
{
function Menu()
{
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Menu);
_extends(this, {
nav_button: MENU_NAV_BUTTON, /* id */
nav_ul: MENU_NAV_UL /* id */
}, options);

this.LastselectedulLi = null;
this.init();
}

_createClass( Menu,
[
{
key: "init",
value: function init() {
this.setListner_Navclick();
this.setListner_NavUlLiclick();
this.setListner_bodyclick();
this.setListner_bodykeyup();
}
},
{
key: "setListner_Navclick",
value: function setListner_Navclick() {
var _thisNavclick = this;
var nav_button = document.getElementById(_thisNavclick.nav_button);
nav_button.addEventListener('click', function(event) {
event.preventDefault();
var nav_ul = document.getElementById(_thisNavclick.nav_ul);
if (nav_ul.classList.contains('open')) {
nav_ul.classList.remove('open');
}
else {
nav_ul.classList.add('open');
}
return false;
} );
}
},
{
key: "setListner_NavUlLiclick",
value: function setListner_NavUlLiclick() {
var _thisNavUlLi = this;
var menuItems = document.querySelectorAll("#"+_thisNavUlLi.nav_ul+" > li > a > span")
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function(event) {
event.preventDefault();
_thisNavUlLi.NavUlLi_open(event);
return false;
} );
}
}
},
{
key: "NavUlLi_open",
value: function NavUlLi_open(event) {
var itemulLi = event.target.parentNode.parentNode;
if( this.LastselectedulLi !== null ) {
if (this.LastselectedulLi.classList.contains('submenuopen')) {
this.LastselectedulLi.classList.remove('submenuopen');
}
}
if( this.LastselectedulLi == itemulLi ) {
if (itemulLi.classList.contains('submenuopen')) {
itemulLi.classList.remove('submenuopen');
}
this.LastselectedulLi = null;
}
else {
if (event.target.parentNode.getAttribute('hyperlink') != "true") {
itemulLi.classList.add('submenuopen');
this.LastselectedulLi = itemulLi;
}
}
if (event.target.parentNode.getAttribute('hyperlink') == "true") {
if (event.target.parentNode.getAttribute('target_blank') == "true")
window.open(event.target.parentNode.getAttribute('href'));
else
location.href = event.target.parentNode.getAttribute('href');
}
}
},
{
key: "setListner_bodyclick", //display: none; nav-ul > li > ul
value: function setListner_bodyclick() {
var _thisbodyclick = this;
var body = document.body;
body.addEventListener('click', function(event) {
var itemulLi = _thisbodyclick.LastselectedulLi;
// event.target.closest('.')
// event.target.parentNode.querySelector('.')
if (itemulLi !== null && ! itemulLi.contains(event.target.parentNode)) {
if (itemulLi.classList.contains('submenuopen')) {
itemulLi.classList.remove('submenuopen');
}
_thisbodyclick.LastselectedulLi = null;
}
} );
}
},
{
key: "setListner_bodykeyup", //display: none; nav-ul > li > ul
value: function setListner_bodykeyup() {
var _thisbodykeyup = this;
var body = document.body;
body.addEventListener('keyup', function(event) {
if (event.code == 'Escape') {
var itemulLi = _thisbodykeyup.LastselectedulLi;
if (itemulLi !== null) {
if (itemulLi.classList.contains('submenuopen')) {
itemulLi.classList.remove('submenuopen');
}
_thisbodykeyup.LastselectedulLi = null;
}
}
} );
}
}
]
);

return Menu;
}();

if ((typeof module === "undefined" ? "undefined" : _typeof(module)) === 'object') {
module.exports = Menu;
}

ci4 초 간단 csv 작성 [한글 안깨짐]

kaido — Fri, 12 May 2023 19:24:06 +0900

안녕하세요

오랜만에 짤막하게 팁

간단하게 csv 다운로드를 만들기 입니다.

한글이 깨지길래 찾아보다 해결 방법 찾다가 간단한 샘플 코드 공개합니다.

//모델 파트 getResultArray 한 데이터
$data = $Model->info_all(); // ==> $db->table("table_name")->limit(10)->get()->getResultArray();

$csv_dump = "title, title2, title3 ....";//헤드라인 넣어주기
$csv_dump .= "\r\n"; //강제개행
foreach ($data as $key =>$val) {
$csv_dump .= implode(",", $val);
$csv_dump .= "\r\n";
}

return $this->response->download('filename.csv', chr(239).chr(187).chr(191).$csv_dump);

중요포인트가 chr() 넣어줘야지 인식 합니다.

끗.

#php #csv #utf8 #한글깨짐 #codeigniter4

nested panel - sk-rt / handy-collapse

darkninja — Sat, 25 Feb 2023 23:23:23 +0900

https://github.com/sk-rt/handy-collapse

취미로 코딩을 하는 것은 정말 재미있고 흥미로운 것입니다.

초보자들이 코딩에 빠져들수 있는 재미를 가져볼수 있게 만들고 싶었는데

코드조각들이 점점 암호문처럼 되어가는.

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8" />
<title>Test page</title>

<style>
pre
{
padding: 0px;
border-left: 3px solid #ccc;
border-right: 2px solid #ccc;
margin: 0px;
overflow: auto; width: 99.7%;
background-color: #F5F5F5;
}
</style>

<style>
/* handy-collapse */
/* top, right, bottom, left */

.handy-panel
{
background: #eee;
margin: 1px;
border: 1px solid #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.handy-subpanel
{
background: #eee;
margin: 1px 10px 1px 10px;
border: 1px solid #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.handy-panel.collapsed,
.handy-subpanel.collapsed
{
border: 1px solid #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.handy-panel.expand,
.handy-subpanel.expand
{
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.handy-panel > button,
.handy-subpanel > button
{
margin: 0px;
padding: 2px 2px 2px 5px;
background: #CCC url(images/arrow-up.gif) no-repeat 99.2% center;
border: 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.handy-panel > button:hover,
.handy-subpanel > button:hover {
background-color: #A9BCEF;
cursor:pointer;
}

.handy-panel.collapsed > button,
.handy-subpanel.collapsed > button
{
margin: 0px;
padding: 2px 2px 2px 5px;
background: #CCC url(images/arrow-dn.gif) no-repeat 99.2% center;
border-color: #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.handy-panel.collapsed > button:hover,
.handy-subpanel.collapsed > button:hover
{
margin: 0px;
padding: 2px 2px 2px 5px;
background: #A9BCEF url(images/arrow-dn.gif) no-repeat 99.2% center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.handy-panelcontent
{
padding: 2px 3px 2px 4px;
margin: 0px 0px 0px 0px;
overflow: hidden;
list-style-type: none;
}

.handy-panelcontent.is-1 { background-color:#FFFFFF; }
.handy-panelcontent.is-2 { background-color:#F7F7F7; }
.handy-panelcontent.is-3 { background-color:#EEEEEE; }
.handy-panelcontent.is-4 { background-color:#E7E7E7; }
.handy-panelcontent.is-5 { background-color:#CACACA; }

.handy-panelcontent p
{
margin: 0px;
padding: 0px 0px 2px 0px;
}

/* collapsed panel content */
.handy-panel.collapsed .handy-panelcontent { display: none; }
.handy-subpanel.collapsed .handy-panelcontent { display: none; }

.button.is-fullwidth{
display:flex;
width:100%
}
</style>

</head>

<body>
<?php
//source
//https://www.media-division.com/javascript-animated-collapsible-panels-without-frameworks/
//https://github.com/sk-rt/handy-collapse
//https://www.cssscript.com/nested-accordion-content-toggle-handy-collapse/
//https://www.cssscript.com/demo/Nested-Accordion-Content-Toggle-handy-collapse/
//https://stackoverflow.com/questions/6054033/pretty-printing-json-with-php
//https://github.com/LorDOniX/json-viewer
//https://github.com/JAAulde/cookies
?>

<div class="handy-panel left expand">
<button type="button" class="button is-fullwidth" data-nested-button="handy-panel-nested">handy-panel-nested</button>
<div class="handy-panelcontent is-1" data-nested-content="handy-panel-nested">
<button type="button" id="loadjsondata">load jsondata</button>

<div class="handy-panel left">
<button type="button" class="button is-fullwidth" data-nested-button="handy-panel">handy-panel</button>
<div class="handy-panelcontent is-1" data-nested-content="handy-panel">
<div id="handycookiesArray" name="handycookiesArray"></div>
<div id="allcookiesArray" name="allcookiesArray"></div>
</div>
</div>

<div class="handy-panel left">
<button type="button" class="button is-fullwidth" data-nested-button="jsonformatview">jsonformatview</button>
<div class="handy-panelcontent is-1" data-nested-content="jsonformatview">
<div id="disp_format_json" name="disp_format_json">0</div>
<div id="disp_format_json1" name="disp_format_json1">1</div>
<div id="disp_format_json2" name="disp_format_json2">2</div>
</div>
</div>

</div>
</div>

<script type="text/javascript">
var HANDY_PANEL = "handy-panel";
var HANDY_SUBPANEL = "handy-subpanel";
var HANDY_PANELCONTENT = "handy-panelcontent";

var HANDY_NAMESPACE_HEAD = "data"
var HANDY_NAMESPACE = "basic"
var HANDY_HEADING_TAG = "button";
var HANDY_CONTENT_TAG = "content";

var HANDY_EXPAND_CLASS = "expand";
var HANDY_COLLAPSED_CLASS = "collapsed";

var HANDY_COOKIE_NAME = "handy-panels";
var HANDY_CSS_EASING = "ease-in-out";

var HANDY_ANIMATION_DELAY = 400; /*ms*/
var HANDY_ANIMATION_STEPS = 10;

var HANDY_PANEL_LEFT = "left";
var HANDY_PANEL_RIGHT = "right";

var _typeof =
typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ?
function(obj) { return typeof obj; } :
function(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _extends = Object.assign || function(target)
{
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};

var _createClass = function()
{
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];

descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;

if ("value" in descriptor) descriptor.writable = true;

Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);

return Constructor;
};
}();

function _classCallCheck(instance, Constructor)
{
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}

var HandyCollapse = function()
{
function HandyCollapse()
{
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

_classCallCheck(this, HandyCollapse);

_extends(this, {
nameSpace: HANDY_NAMESPACE,
toggleHeadingAttr: HANDY_NAMESPACE_HEAD + "-" + (options.nameSpace || HANDY_NAMESPACE) + "-" + HANDY_HEADING_TAG,
toggleContentAttr: HANDY_NAMESPACE_HEAD + "-" + (options.nameSpace || HANDY_NAMESPACE) + "-" + HANDY_CONTENT_TAG,
isAimation: true,
closeOthers: true,
animatinSpeed: HANDY_ANIMATION_DELAY,
cssEasing: HANDY_CSS_EASING,
cookie_name : HANDY_COOKIE_NAME + "-" + options.nameSpace,
onSlideStart: function onSlideStart() {
return false;
},
onSlideEnd: function onSlideEnd() {
return false;
}
}, options);

this.toggleHeadingEls = document.querySelectorAll("[" + this.toggleHeadingAttr + "]");
this.toggleContentEls = document.querySelectorAll("[" + this.toggleContentAttr + "]");
this.itemsStatus = {};

this.loadSettings();
this.init();
}

_createClass( HandyCollapse,
[
{
key: "init",
value: function init() {
if (this.toggleHeadingEls) {
this.setListner();
}
if (this.toggleContentEls) {
this.setItem();
}
this.refresh();
}
},
{
key: "loadSettings",
value: function loadSettings() {
// prepare the object that will keep the panel statuses
this.itemsStatus = {};

var cookie = this.getcookie();
if (cookie[0] == "empty") return;

var cookieData = cookie[1];
for( var key in cookieData ) {
var value = cookieData[key];
if (key == "undefined" || key == null || key == "") {
//alert(key + " " + value);
}
else {
this.itemsStatus[key] = value;
}
}
}
},
{
key: "saveSettings",
value: function saveSettings(id, expand) {
// put the new expanding in the object
this.itemsStatus[id] = expand;

// create an array that will keep the contentid:expanding pairs
var panelsData = [];
for (var cid in this.itemsStatus) {
if (cid == "undefined" || cid == null || cid == "") {
//alert(cid + " " + this.itemsStatus[cid]);
}
else {
panelsData.push(cid+":"+this.itemsStatus[cid]);
}
}

// set the cookie expiration date 1 year from now
var today = new Date();
var expirationDate = new Date(today.getTime() + 1 * 1000 * 60 * 60 * 24);

// write the cookie
document.cookie = this.cookie_name + "=" + escape(panelsData.join(",")) + ";expires=" + expirationDate.toGMTString();
}
},
{
key: "getSubcookie",
value: function getSubcookie(cookieValue) {
var itemsArray = {};
var cData = cookieValue.split(",");
// split each key:value pair and put in object
for (var i=0; i< cData.length; i++)
{
var pair = cData[i].split(":");
itemsArray[pair[0]] = pair[1];
}
return itemsArray;
}
},
{
key: "getAllcookies",
value: function getAllcookies() {
var c = [];
if (document.cookie && document.cookie != '') {
var split = document.cookie.split(';');
for (var i = 0; i < split.length; i++) {
var name_value = split[i].split("=");
name_value[0] = name_value[0].replace(/^ /, '');

var name = decodeURIComponent(name_value[0]);
var value = this.getSubcookie(decodeURIComponent(name_value[1]));

c.push([name, value]);
}
}
else {
c = { "empty": "cookie" };
}
return c;
}
},
{
key: "getcookie",
value: function getcookie() {
var c = this.getAllcookies();

var cr = { "empty": "cookie" };
for (var i = 0; i < c.length; i++) {

//alert(c[i][0]);
if (c[i][0] == this.cookie_name) {
cr = [ c[i][0], c[i][1] ];
break;
}

}
return cr;
}
},
{
key: "setListner",
value: function setListner() {
var _this2 = this;
Array.prototype.slice.call(this.toggleHeadingEls).forEach(function(buttonEl, index) {
var id = buttonEl.getAttribute(_this2.toggleHeadingAttr);
if (id) {
buttonEl.addEventListener("click", function(e) {
e.preventDefault();
_this2.toggleSlide(id, buttonEl);
}, false);
}
});
}
},
{
key: "setItem",
value: function setItem() {
var _this = this;
Array.prototype.slice.call(this.toggleContentEls).forEach(function(contentEl) {
contentEl.style.maxHeight = "none";
});
}
},
{
key: "setItemStatus",
value: function setItemStatus(id, collapsed) {
this.itemsStatus[id] = collapsed;
}
},
{
key: "expandAll",
value: function expandAll() {
for (var id in this.itemsStatus)
this.setItemStatus(id, HANDY_EXPAND_CLASS);

this.saveSettings();
this.refresh();
}
},
{
key: "collapseAll",
value: function collapseAll() {
for (var id in this.itemsStatus)
this.setItemStatus(id, HANDY_COLLAPSED_CLASS);

this.saveSettings();
this.refresh();
}
},
{
key: "refresh",
value: function refresh() {
var _this2 = this;
Array.prototype.slice.call(this.toggleHeadingEls).forEach(function(buttonEl, index) {
var id = buttonEl.getAttribute(_this2.toggleHeadingAttr);
if (id) {
// look for the id in loaded settings, apply the normal/collapsed class
if (_this2.itemsStatus.hasOwnProperty(id)) {
if (_this2.itemsStatus[id] == HANDY_EXPAND_CLASS) {
buttonEl.parentNode.classList.remove(HANDY_COLLAPSED_CLASS);
buttonEl.parentNode.classList.add(HANDY_EXPAND_CLASS);
}
else {
buttonEl.parentNode.classList.remove(HANDY_EXPAND_CLASS);
buttonEl.parentNode.classList.add(HANDY_COLLAPSED_CLASS);
}
}
else {
// if no saved setting, see the initial setting
_this2.itemsStatus[id] =
(buttonEl.parentNode.classList.contains(HANDY_EXPAND_CLASS)) ? HANDY_EXPAND_CLASS : HANDY_COLLAPSED_CLASS;
}

var expand = buttonEl.parentNode.classList.contains(HANDY_EXPAND_CLASS);

_this2.setItemStatus(id, expand ? HANDY_EXPAND_CLASS : HANDY_COLLAPSED_CLASS);

if (expand) {
_this2.open(id, false, false);
} else {
_this2.close(id, false, false);
}
}
});
}
},
{
key: "toggleSlide",
value: function toggleSlide(id, buttonEl) {
var isRunCallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

if (this.itemsStatus[id] == HANDY_EXPAND_CLASS) {
this.saveSettings(id, HANDY_COLLAPSED_CLASS);
this.close(id, isRunCallback, this.isAimation);
} else {
this.saveSettings(id, HANDY_EXPAND_CLASS);
this.open(id, isRunCallback, this.isAimation);
}
}
},
{
key: "open",
value: function open(id) {
var _this3 = this;
var isRunCallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var isAimation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (!id) return;
if (this.closeOthers) {
Array.prototype.slice.call(this.toggleHeadingEls).forEach(function(buttonEl, index) {
var closeId = buttonEl.getAttribute(_this3.toggleHeadingAttr);
if (closeId !== id) _this3.close(closeId, false, isAimation);
});
}
if (isRunCallback !== false) this.onSlideStart(true, id);
var toggleButton = document.querySelector("[" + this.toggleHeadingAttr + "='" + id + "']");
var toggleContent = document.querySelector("[" + this.toggleContentAttr + "='" + id + "']");
var clientHeight = this.getTargetHeight(toggleContent);
toggleButton.parentNode.classList.remove(HANDY_COLLAPSED_CLASS);
toggleButton.parentNode.classList.add(HANDY_EXPAND_CLASS);
if (isAimation) {
toggleContent.style.transition = this.animatinSpeed + "ms " + this.cssEasing;
toggleContent.style.maxHeight = (clientHeight || "1000") + "px";
setTimeout(function() {
if (isRunCallback !== false) _this3.onSlideEnd(true, id);
toggleContent.style.maxHeight = "none";
toggleContent.style.transition = "";
}, this.animatinSpeed);
} else {
toggleContent.style.maxHeight = "none";
}
this.itemsStatus[id] = HANDY_EXPAND_CLASS;
}
},
{
key: "close",
value: function close(id) {
var _this4 = this;
var isRunCallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var isAimation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (!id) return;
if (isRunCallback !== false) this.onSlideStart(false, id);
var toggleButton = document.querySelector("[" + this.toggleHeadingAttr + "='" + id + "']");
var toggleContent = document.querySelector("[" + this.toggleContentAttr + "='" + id + "']");
toggleButton.parentNode.classList.remove(HANDY_EXPAND_CLASS);
toggleButton.parentNode.classList.add(HANDY_COLLAPSED_CLASS);
toggleContent.style.maxHeight = toggleContent.clientHeight + "px";
setTimeout(function() {
toggleContent.style.maxHeight = "0px";
}, 5);
if (isAimation) {
toggleContent.style.transition = this.animatinSpeed + "ms " + this.cssEasing;
setTimeout(function() {
if (isRunCallback !== false) _this4.onSlideEnd(false, id);
toggleContent.style.transition = "";
}, this.animatinSpeed);
} else {
this.onSlideEnd(false, id);
}
this.itemsStatus[id] = HANDY_COLLAPSED_CLASS;
}
},
{
key: "getTargetHeight",
value: function getTargetHeight(targetEl) {
if (!targetEl) return;
var cloneEl = targetEl.cloneNode(true);
var parentEl = targetEl.parentNode;
cloneEl.style.maxHeight = "none";
cloneEl.style.opacity = "0";
parentEl.appendChild(cloneEl);
targetEl.style.display = "block";
var clientHeight = cloneEl.clientHeight;
parentEl.removeChild(cloneEl);
return clientHeight;
}
}
]
);

return HandyCollapse;
}();

if ((typeof module === "undefined" ? "undefined" : _typeof(module)) === 'object') {
module.exports = HandyCollapse;
}
</script>
<script type="text/javascript">
//Nested
let handy_nested = new HandyCollapse({
nameSpace: "nested",
closeOthers: false
});
</script>

<script type="text/javascript">
</script>

<script type="text/javascript">
function formatJSON(jsonstr, html = false) {
var tabcount = 0;
var result = "";
var inquote = false;
var ignorenext = false;
var tab = " ";
var newline = "\n";
if (html) {
tab = "  ";
newline = "<br/>";
}
for(var i = 0; i < jsonstr.length; i++)
{
c = jsonstr[i];
if (ignorenext) {
result += c;
ignorenext = false;
} else {
switch(c) {
case '[':
case '{':
tabcount++;
result += c + newline + tab.repeat( tabcount*2);
break;
case ']':
case '}':
tabcount--;
result = result.trim() + newline + tab.repeat( tabcount*2) + c;
break;
case ',':
result += c + newline + tab.repeat( tabcount*2);
break;
case '"':
if ( !inquote ) {
if ( jsonstr[i-1] == ':' || jsonstr[i-2] == ':' )
result += '<span style="color:#0000ff;">';
else
result += '<span style="color:#ff0000;">';
}
if (inquote)
result += '</span>';
inquote = !inquote;
result += c;
break;
case '\\':
if (inquote) ignorenext = true;
result += c;
break;
default:
result += c;
}
}
}
if (result == "")
result = "no data...";
else
result = "<pre>"+result+"</pre>";

return result;
}

var json_data1 = {a:1, 'b':'foo', c:[false, 'false', null, 'null', {d:{e:1.3e5, f:'1.3e5'}}]};
var json_data2 = { "data": { "x": 1, "y": 1, "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };
var json_data = {
key0: "<script>alert('no xss!')<\/script>",
key1: "alert('no xss!')",
key2: 12345,
key3: new Date(),
key4: [],
key5: [
123,
"123",
{
a: 5,
b: 6,
c: null,
d: true
}
],
key6: {
a: 1,
b: 3,
c: {
d: 4
}
}
};

function all_cookiesArray()
{
function getSubcookie(cookieValue)
{
var itemsArray = {};
var cData = cookieValue.split(",");
// split each key:value pair and put in object
for (var i=0; i< cData.length; i++)
{
var pair = cData[i].split(":");
itemsArray[pair[0]] = pair[1];
}
return itemsArray;
}
var c = [];
if (document.cookie && document.cookie != '') {
var split = document.cookie.split(';');
for (var i = 0; i < split.length; i++) {
var name_value = split[i].split("=");
name_value[0] = name_value[0].replace(/^ /, '');
c.push(decodeURIComponent(name_value[0]), getSubcookie(decodeURIComponent(name_value[1])));
}
}
else {
c = { "empty": "cookie" };
}
return c;
}

function loadjsondata() {
var json_data_str = JSON.stringify(json_data);
document.getElementById("disp_format_json").innerHTML = "json_data<br>"+formatJSON(json_data_str);
var json_data_str1 = JSON.stringify(json_data1);
document.getElementById("disp_format_json1").innerHTML = "json_data1<br>"+formatJSON(json_data_str1);
var json_data_str2 = JSON.stringify(json_data2);
document.getElementById("disp_format_json2").innerHTML = "json_data2<br>"+formatJSON(json_data_str2);

var handycookiesArray = handy_nested.getcookie();
var handycookiesArray_str = JSON.stringify(handycookiesArray);
document.getElementById("handycookiesArray").innerHTML = "handycookiesArray<br>"+formatJSON(handycookiesArray_str);

var allcookiesArray = all_cookiesArray();
var allcookiesArray_str = JSON.stringify(allcookiesArray);
document.getElementById("allcookiesArray").innerHTML = "allcookiesArray<br>"+formatJSON(allcookiesArray_str);
}

loadjsondata();
</script>

<script type="text/javascript">
document.getElementById("loadjsondata").addEventListener('click', function(event)
{
event.preventDefault();
loadjsondata();
return false;
} );
</script>

</body>
</html>

Javascript animated collapsible panels

darkninja — Sat, 04 Feb 2023 23:13:27 +0900

https://www.media-division.com/javascript-animated-collapsible-panels-without-frameworks/

뭔가 필요할거 같았는데 만들고 나니 그다지 유용할거 같지 않은

멍때릴대 유용함.

<div class="left-sidebar-wrapper">
<div class="ex-panel left">
<h3>progress</h3>
<div class="ex-panelcontent">
<div id="current_datetime" style="height:17px"></div>
<div id="progress_bar" style="height:19px">
<div id="progress_forward" style="height:19px; width:50%; float:left;"></div>
<div id="progress_backward" style="height:19px; width:50%; float:right"></div>
</div>
</div>
</div>

<div class="ex-panel collapsed left">
<h3>text</h3>
<div class="ex-panelcontent">
<textarea id="disp_text_area" name="disp_text_area" rows="5" style="width: 99.9%" spellcheck="false" placeholder="disp_text"></textarea>
</div>
</div>
</div>

<html>

<head>
<title>멍때림 금지구역</title>

<style>
.left-sidebar-wrapper {
font-size: 10pt;
margin: 1px;
padding: 2px 2px 2px 2px;
border: 1px solid #aaa;
background-color: #eee;
}

#current_datetime {
padding: 0px 5px;
}

#progress_bar {
width: 99.45%;
padding: 0;
margin: 3px 0px 0px 3px;
border: 1px solid #777;
}

#progress_forward,
#progress_backward {
color: #fff;
overflow: hidden;
white-space: nowrap;
padding: 0;
margin: 0;
text-align: center;
}

/* panel */
.ex-panel
{
background: #eee;
margin: 1px;
padding: 0px 0px 3px 0px;
border: 1px solid #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

/* panel heading */
.ex-panel h3
{
/* font-size: 15px; */
font-weight: normal;
margin: 0px;
padding: 2px 2px 2px 5px;
background: #CCC url(images/arrow-up.gif) no-repeat center right;
border-bottom: 1px solid #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
}

/* panel heading on rollover */
.ex-panel h3:hover { background-color: #A9BCEF; }

/* heading of a collapsed panel */
.ex-panel.collapsed h3
{
background: #CCC url(images/arrow-dn.gif) no-repeat center right;
border-color: #CCC;
}

/* collapsed panel content */
.ex-panel.collapsed .ex-panelcontent { display: none; }

/* panel content - do not set borders or paddings */
.ex-panelcontent
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 2px;
overflow: hidden;
background: #EEE;
list-style-type: none;
}
</style>

</head>

<body>

<?php
//도움 받은 곳
//https://stackoverflow.com/questions/13958303/curl-download-progress-in-php
//https://www.media-division.com/javascript-animated-collapsible-panels-without-frameworks/
?>

<div class="left-sidebar-wrapper">
<div class="ex-panel left">
<h3>progress</h3>
<div class="ex-panelcontent">
<div id="current_datetime" style="height:17px"></div>
<div id="progress_bar" style="height:19px">
<div id="progress_forward" style="height:19px; width:50%; float:left;"></div>
<div id="progress_backward" style="height:19px; width:50%; float:right"></div>
</div>
</div>
</div>

<div class="ex-panel collapsed left">
<h3>text</h3>
<div class="ex-panelcontent">
<textarea id="disp_text_area" name="disp_text_area" rows="5" style="width: 99.9%" spellcheck="false" placeholder="disp_text"></textarea>
</div>
</div>
</div>

<script type="text/javascript">
function numberPad(n, width) {
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
}

var current_datetimeElement = document.getElementById('current_datetime')

var progress_forwardElement = document.getElementById('progress_forward')
var progress_backwardElement = document.getElementById('progress_backward')

function updateProgress(percentage, progress, current_datetime, forward=ture) {
if (forward) {
progress_forwardElement.style.width = percentage + '%';
progress_forwardElement.style.backgroundColor = "#999";
progress_forwardElement.innerText = numberPad(progress, 2);

progress_backwardElement.style.width = (100 - percentage) + '%';
progress_backwardElement.style.backgroundColor = "#ccc";
progress_backwardElement.innerText = numberPad((60 - progress), 2);
}
else {
progress_forwardElement.style.width = percentage + '%';
progress_forwardElement.style.backgroundColor = "#ccc";
progress_forwardElement.innerText = numberPad((60 - progress), 2);

progress_backwardElement.style.width = (100 - percentage) + '%';
progress_backwardElement.style.backgroundColor = "#999";
progress_backwardElement.innerText = numberPad(progress, 2);
}

current_datetimeElement.innerText = current_datetime;
}

var clockF_set = false;
var clockF_forward = true;
function clockF() {
today = new Date();
var weekday = new Array(7);
weekday[0] = "일요일";
weekday[1] = "월요일";
weekday[2] = "화요일";
weekday[3] = "수요일";
weekday[4] = "목요일";
weekday[5] = "금요일";
weekday[6] = "토요일";
var day = weekday[today.getDay()];

var symd = today.toISOString().split('T')[0]+" "+day;
var shms = today.toTimeString().split(' ')[0];
var ssec = today.getSeconds();
var smilisec = today.getMilliseconds();
var progress = (ssec + (smilisec / 1000))/60 * 100;

if (ssec == 0 && clockF_set) {
clockF_set = false;
clockF_forward = ! clockF_forward;
}
if (ssec >= 1)
clockF_set = true;

if (! clockF_forward)
progress = 100 - progress;

updateProgress(progress, ssec, symd + " " + shms, clockF_forward);
}
setInterval('clockF()' , 100) ;
</script>


<script type="text/javascript">
var PANEL_CLASS = "ex-panel";
var PANEL_EXPAND_CLASS = "expand";
var PANEL_COLLAPSED_CLASS = "collapsed";
var PANEL_HEADING_TAG = "h3";
var PANEL_CONTENT_CLASS = "ex-panelcontent";
var PANEL_COOKIE_NAME = "ex-panels";
var PANEL_ANIMATION_DELAY = 20; /*ms*/
var PANEL_ANIMATION_STEPS = 10;

var PANEL_CLASS_LEFT = "left";
var PANEL_CLASS_RIGHT = "right";

var panelsleft = new Array();;
var panelsright = new Array();;

var panelsStatus = new Array();;

function getPanelsHeight()
{
var lh = 0;
for (var i=0; i<panelsleft.length; i++) {
lh += panelsleft[i].offsetHeight;
}

var rh = 0;
for (var i=0; i<panelsright.length; i++) {
rh += panelsright[i].offsetHeight;
}

var lsw = document.getElementById('left-sidebar-wrapper');
var lsw_h = window.getComputedStyle(lsw).height;
lsw_h = Number(lsw_h.replace('px', ''));

var rsw = document.getElementById('right-sidebar-wrapper');
var rsw_h = window.getComputedStyle(rsw).height;
rsw_h = Number(rsw_h.replace('px', ''));

var big_lr = (lh>rh) ? lh : rh;
var big_lswrsw = (lsw_h>rsw_h) ? lsw_h : rsw_h;
var big = (big_lr>big_lswrsw) ? big_lr : big_lswrsw;

var ret = [];
ret['lh'] = lh;
ret['rh'] = rh;
ret['lsw_h'] = lsw_h;
ret['rsw_h'] = rsw_h;
ret['big_lr'] = big_lr;
ret['big_lswrsw'] = big_lswrsw;
ret['big'] = big;

return ret;
}

function setUpPanels()
{
loadSettings();

// get all headings
var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG);

// go through all tags
for (var i=0; i<headingTags.length; i++)
{
var el = headingTags[i];
var panel = headingTags[i].parentNode;

// make sure it's the heading inside a panel
if (! panel.classList.contains(PANEL_CLASS))
continue;

if (panel.classList.contains(PANEL_CLASS_LEFT)) {
panelsleft.push(panel);
}
else if (panel.classList.contains(PANEL_CLASS_RIGHT)) {
panelsright.push(panel);
}

// get the text value of the tag
var name = el.firstChild.nodeValue;

// look for the name in loaded settings, apply the normal/collapsed class
if (panelsStatus[name] == "collapsed") {
panel.classList.remove(PANEL_EXPAND_CLASS);
panel.classList.add(PANEL_COLLAPSED_CLASS);
}
else if (panelsStatus[name] == "expand") {
panel.classList.remove(PANEL_COLLAPSED_CLASS);
panel.classList.add(PANEL_EXPAND_CLASS);
}
else {
// if no saved setting, see the initial setting
panelsStatus[name] = (panel.classList.contains(PANEL_EXPAND_CLASS)) ? "expand" : "collapsed";
}

// add the click behavor to headings
el.onclick = function()
{
var target = this.parentNode;
var name = this.firstChild.nodeValue;
var collapsed = target.classList.contains(PANEL_COLLAPSED_CLASS);
saveSettings(name, collapsed?"expand":"collapsed");
animateTogglePanel(target, collapsed);
};
}
}

/**
* Start the expand/collapse animation of the panel
* @param panel reference to the panel div
*/
function animateTogglePanel(panel, expanding)
{
// find the .panelcontent div
var elements = panel.getElementsByTagName("div");
var panelContent = null;
for (var i=0; i<elements.length; i++)
{
if (elements[i].classList.contains(PANEL_CONTENT_CLASS))
{
panelContent = elements[i];
break;
}
}

// make sure the content is visible before getting its height
panelContent.style.display = "block";

// get the height of the content
var contentHeight = panelContent.offsetHeight;
var stepHeight = contentHeight / PANEL_ANIMATION_STEPS;

// if panel is collapsed and expanding, we must start with 0 height
var direction = -1;
if (expanding) {
direction = 1;
panelContent.style.height = "0px";
}

setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
}

/**
* Change the height of the target
* @param panelContent reference to the panel content to change height
* @param iteration current iteration; animation will be stopped when iteration reaches PANEL_ANIMATION_STEPS
* @param stepHeight height increment to be added/substracted in one step
* @param direction 1 for expanding, -1 for collapsing
*/
function animateStep(panelContent, iteration, stepHeight, direction)
{
if (iteration<PANEL_ANIMATION_STEPS)
{
panelContent.style.height = Math.round(((direction>0) ? iteration : 10 - iteration) * stepHeight) +"px";
iteration++;
setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
}
else
{
// set class for the panel
if (direction < 0) {
panelContent.parentNode.classList.remove(PANEL_EXPAND_CLASS);
panelContent.parentNode.classList.add(PANEL_COLLAPSED_CLASS);
}
else {
panelContent.parentNode.classList.remove(PANEL_COLLAPSED_CLASS);
panelContent.parentNode.classList.add(PANEL_EXPAND_CLASS);
}

// clear inline styles
panelContent.style.display = "";
panelContent.style.height = "";
}
}

// -----------------------------------------------------------------------------------------------
// Load-Save
// -----------------------------------------------------------------------------------------------
/**
* Reads the "panels" cookie if exists, expects data formatted as key:value|key:value... puts in panelsStatus object
*/
function loadSettings()
{
// prepare the object that will keep the panel statuses
//panelsStatus = {};

// find the cookie name
var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "=");
if (start == -1) return;

// starting point of the value
start += PANEL_COOKIE_NAME.length+1;

// find end point of the value
var end = document.cookie.indexOf(";", start);
if (end == -1) end = document.cookie.length;

// get the value, split into key:value pairs
var cookieValue = unescape(document.cookie.substring(start, end));
var panelsData = cookieValue.split("|");

// split each key:value pair and put in object
for (var i=0; i< panelsData.length; i++)
{
var pair = panelsData[i].split(":");
panelsStatus[pair[0]] = pair[1];
}
}

function expandAll()
{
for (var key in panelsStatus)
saveSettings(key, "expand");

setUpPanels();
}

function collapseAll()
{
for (var key in panelsStatus)
saveSettings(key, "collapsed");

setUpPanels();
}

/**
* Takes data from the panelsStatus object, formats as key:value|key:value... and puts in cookie valid for 365 days
* @param key key name to save
* @paeam value key value
*/
function saveSettings(key, value)
{
// put the new value in the object
panelsStatus[key] = value;

// create an array that will keep the key:value pairs
var panelsData = [];
for (var key in panelsStatus)
panelsData.push(key+":"+panelsStatus[key]);

// set the cookie expiration date 1 year from now
var today = new Date();
var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24);
// write the cookie
document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString();
}

// -----------------------------------------------------------------------------------------------
// Register setUpPanels to be executed on load
// the "proper" way
//if (window.addEventListener)
// window.addEventListener("load", setUpPanels, false);
// the IE way
//else if (window.attachEvent)
// window.attachEvent("onload", setUpPanels);
</script>

<script type="text/javascript">
setUpPanels();
</script>

</body>

</html>

개발자에게 유용한 북마크 툴 소개

Pikubot — Fri, 20 Jan 2023 15:33:08 +0900

* 개발자분들께 도움이 되는 내용이라고 생각해 올려 봅니다. 커뮤니티 정책을 위반하는 글이라면 바로 조치하겠습니다(꾸벅)

안녕하세요! 저는 ‘피큐레잇'이라는 북마크 툴을 만들고 있습니다.

피큐레잇의 목표는 구글링 & 링크 저장을 많이 하시는 분들이 최소의 노력으로 최대의 지식 관리 효율을 얻으시는 건데요.

개발자분들만큼 많이 구글링하고 링크 저장하시는 분들도 없다는 생각에, 피큐레잇이 개발자분들께 도움이 될까 싶어 이렇게 글을 올리게 됐습니다.

혹시 여러분은 구글링 기록이나 개발 공부 기록, 어떻게 남기시나요? 요즘은 노션을 많이 쓰시는 것 같은데요, 노션은 괜찮은 툴이지만 제대로 보려면 손이 많이 간다는 게 좀 아쉽죠.

노션은 한번 지저분해지면 나중에 다시 정리할 때 복잡한데, 피큐레잇은 그럴 때 같이 써주면 좋습니다. 막 정리하기에는 애매한데, 그렇다고 아무데나 저장하자니 나중에 못 찾을 것 같은 그런 링크들을 저장하면 딱입니다.

대분류, 중분류만 정해서 적절한 곳에 넣어주기만 하면 알아서 정리가 끝나거든요. 메모도 쓸 수 있어서 나중에 까먹을 일이 없구요.

노션에는 잘 정리된 것만 넣으시고 이런저런 링크들은 피큐레잇에 먼저 저장해보세요. 더 효율적으로 구글링 기록을 관리하실 수 있을 거예요.

크롬 익스텐션도 있어서 웹 환경에서 빠르게 링크를 저장할 수도 있습니다. 열린 탭을 한꺼번에 저장할 수도 있어서 분명 개발자분들께서 더 나은 구글링 기록을 남기시는 데 플러스 알파가 될 거라고 생각합니다.

많은 개발자분들께 도움이 되고자 이렇게 피큐레잇을 알리는 글을 쓰게 됐는데요, 만약 링크 저장·관리에 불편함을 느끼고 계셨다면 피큐레잇을 한번 시도해보시면 좋겠습니다.

관심 있는 분들은 아래 링크에서 한번 구경해보세요!

피큐레잇 구경하러 가기 → http://bit.ly/3QRE8Wt

고영창님의 만세력

darkninja — Tue, 10 Jan 2023 11:04:17 +0900

아직 구정은 멀었지만 초보분들에게 유용했으면 하는? 설날 선물입니다

(제가 코딩한 달력소스는 오류가 있을수 있습니다, 소스를 완전히 이해하고 만든게 아니라서)

내일부터는 여태 미뤄둔 본업인 서툰 농사일을 시작해야 하기에

ci 공부는 다음에 또 ...

도움 받은 곳

https://link2me.tistory.com/1545

http://oops.org/project/manse/

http://www.responsivegridsystem.com/calculator/

http://afnmp3.homeip.net/~kohyc/calendar/index.cgi

소스 구하는 곳

https://github.com/OOPS-ORG-PHP/Lunar

Lunar.php * import myException class

http://pear.oops.org/package/myException

https://github.com/OOPS-ORG-PHP/myException/

<!DOCTYPE html>

<head>
<title>태양태음력</title>

<style>
p {
margin: 2px 0px 2px 0px;
padding:3px;
}

textarea {
border:1px solid #999999;
margin: 0px 0px 0px 0px;
padding:3px;
}

.span1_7,
.span2_7,
.span3_7,
.span4_7,
.span5_7,
.span6_7,
.span7_7 {
margin:0;clear:none;float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;*behavior:url(boxsizing.htc)
}

.span1_12,
.span2_12,
.span3_12,
.span4_12,
.span5_12,
.span6_12,
.span7_12,
.span8_12,
.span9_12,
.span10_12,
.span11_12,
.span12_12 {
margin:0;clear:none;float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;*behavior:url(boxsizing.htc)
}

.span1_7 { width: 14.28%; }
.span2_7 { width: 28.57%; }
.span3_7 { width: 42.85%; }
.span4_7 { width: 57.14%; }
.span5_7 { width: 71.42%; }
.span6_7 { width: 85.71%; }
.span7_7 { width: 100%; }

.span1_12 { width: 8.333%; }
.span2_12 { width: 16.66%; }
.span3_12 { width: 25%; }
.span4_12 { width: 33.33%; }
.span5_12 { width: 41.66%; }
.span6_12 { width: 50%; }
.span7_12 { width: 58.33%; }
.span8_12 { width: 66.66%; }
.span9_12 { width: 75%; }
.span10_12 { width: 83.33%; }
.span11_12 { width: 91.66%; }
.span12_12 { width: 100%; }

/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

/* COLUMN SETUP top, right, bottom, left */
.section .col {
display: block;
float:left;
margin: 0;
padding-top: 8px;
padding-left: 6px;
padding-right: 0px;
padding-bottom: 0px;
border: 1px solid #aaa;
line-height: 115%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 0 0 0 0; }
.span1_7, .span2_7, .span3_7, .span4_7, .span5_7, .span6_7, .span7_7 { width: 100%; }
.span1_12, .span2_12, .span3_12, .span4_12, .span5_12, .span6_12, .span7_12, .span8_12, .span9_12, .span10_12, .span11_12, .span12_12 { width: 100%; }
}

.calendar-title {
background-color : #7799AA;
}

.col.week {
background-color: #2579cf;
}

.days-info.active {
background-color : #BBEEFF;
}

.days-info.smallmoon {
background-color : #EEFFAA;
}

.days-info.largemoon {
background-color : #FFFF99;
}

.days-info.season24 {
background-color : #AA99FF;
}

.schedule_form_div.active {
background-color : #BBEEFF;
}

.schedule_check_div.active {
background-color : #99AACC;
}
.weekscheck_div.active {
background-color : #99AACC;
}

font.calendar {font-family: tahoma; font-size: 22px; color: #ffffff; }
font.week {font-family: tahoma; font-size: 12pt; color: #ffffff; }

font.holy {font-family: tahoma; font-size: 25px; color: #CC1133; } /*ff6c21*/
font.black {font-family: tahoma; font-size: 25px; color: #000000; }
font.blue {font-family: tahoma; font-size: 25px; color: #0000ff; }
font.gray {font-family: tahoma; font-size: 15px; color: #bbbbbb; }

font.su28 {font-family: tahoma; font-size: 14px; color: #424242; }
font.lunarday {font-family: tahoma; font-size: 14px; color: #0000bb; }
font.gangi {font-family: tahoma; font-size: 14px; color: #424242; }

font.holiname {font-family: tahoma; font-size: 14px; color: #ff0000; }
font.season24s {font-family: tahoma; font-size: 14px; color: #0000ff; }
font.schedule {font-family: tahoma; font-size: 14px; color: #0000ff; }
font.memorial {font-family: tahoma; font-size: 14px; color: #0000ff; }
</style>

</head>

<body>

<?php
//도움 받은 곳
//https://link2me.tistory.com/1545
//http://oops.org/project/manse/
//http://www.responsivegridsystem.com/calculator/
//http://afnmp3.homeip.net/~kohyc/calendar/index.cgi

//소스 구하는 곳
//https://github.com/OOPS-ORG-PHP/Lunar
//Lunar.php * import myException class
//http://pear.oops.org/package/myException
//https://github.com/OOPS-ORG-PHP/myException/

require_once 'Lunar.php';

$lunar = new oops\Lunar();

function ErrorMsg($msg)
{
echo " <script>window.alert('$msg');history.go(-1);</script>";
exit;
}

function tolunar($cdate, $c=false)
{
global $lunar;

$o = $lunar->tolunar($cdate);

if ($c)
return $o->year.'-'.$o->month.'-'.$o->day;
else
return $o;
}

function tosolar($cdate, $c=false)
{
global $lunar;

$o = $lunar->tosolar($cdate);

if ($c)
return $o->year.'-'.$o->month.'-'.$o->day;
else
return $o;
}

// 앙력 날짜의 요일을 리턴 일요일 0 토요일 6
function isweekend($cdate)
{
//$time = mktime(0, 0, 0, $month, $day, $year);
//$weekday = date('w', $time);
//return $weekday; //($weekday == 0 || $weekday == 6);

return date("w", strtotime($cdate));
}

//---- 오늘 날짜
date_default_timezone_set('Asia/Seoul');
$thisyear = date('Y'); // 4자리 연도
$thismonth = date('n'); // 0을 포함하지 않는 월
$today = date('j'); // 0을 포함하지 않는 일

// $year, $month 값이 없으면 현재 날짜
$year = isset($_GET['year']) ? $_GET['year'] : $thisyear;
$month = isset($_GET['month']) ? $_GET['month'] : $thismonth;
$day = isset($_GET['day']) ? $_GET['day'] : $today;

if ( $year < -2000 ) {
$year = -2000;
$ErrorMsg("-2000년 이전은 웹에서 사용하는 것을 권장하지 않음.");
}
else if ( $year > 2300 ) {
$year = 2300;
$ErrorMsg("2300년 이후는 웹에서 사용하는 것을 권장하지 않음.");
}
// 1391-02-05 ~ 2050-12-31 까지는 KASI data로 처리를 한다.

/*
* Lunar 1.0.0에서는 is_leap method가 연도만으로 율리우스력
* 판단을 하지 않으며로 아래과 같이 조건을 체크해야 한다.
* if ( $lunar->is_leap ($year, $year < 1583 ? true : false) )
* Lunar 1.0.1 부터는 2번째 인자가 없어도, 연도만으로
* 율리우스력 판단을 한다.
*/
$lastdayofmonth = array (0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if ( $lunar->is_leap($year) )
$lastdayofmonth[2] = 29;

// 해당월의 총일수 구하기
$lastday = $lastdayofmonth[(int) $month];
//$lastday = date('t', mktime(0, 0, 0, $month, 1, $year));

$scheduledays = array();

$schedule_empty = array(
'id' => '',
'subject' => '',
'contents' => '',
'time' => '',
'repeat' => 'once',
'type' => 'none',
'alarm' => 'none',
'schedule_lunar' => 'solar',
'schedule_month' => 0,
'schedule_day' => 0,
'schedule_check' => 0,
'weekday' => 'none',
'weeksdate' => 'none',
'weeksmonth' => 0,
'weekscheck' => 0,
'start_date' => '',
'end_date' => '',
);
$schedule_11 = array(
'id' => '',
'subject' => '설날',
'contents' => '설날 새로운 일정을 입력하세요',
'time' => '',
'repeat' => 'once',
'type' => 'day',
'alarm' => 'none',
'schedule_lunar' => 'solar',
'schedule_month' => 1,
'schedule_day' => 1,
'schedule_check' => 1,
'weekday' => 'none',
'weeksdate' => 'none',
'weeksmonth' => 0,
'weekscheck' => 0,
'start_date' => '2023-01-1',
'end_date' => '2023-01-1',
);
$schedule_122 = array(
'id' => '',
'subject' => '진짜 설날',
'contents' => '진짜 설날 새로운 일정을 입력하세요',
'time' => '',
'repeat' => 'once',
'type' => 'day',
'alarm' => 'none',
'schedule_lunar' => 'solar',
'schedule_month' => 1,
'schedule_day' => 22,
'schedule_check' => 1,
'weekday' => 'none',
'weeksdate' => 'none',
'weeksmonth' => 0,
'weekscheck' => 0,
'start_date' => '2023-01-21',
'end_date' => '2023-01-24',
);

$holidays = array();

$holidays[1][1] = '신정';
$holidays[3][1] = '삼일절';
$holidays[5][5] = '어린이날';
$holidays[6][6] = '현충일';
$holidays[8][15] = '광복절';
$holidays[10][3] = '개천절';
$holidays[10][9] = '한글날';
$holidays[12][25] = '성탄절';

$o = tosolar($year."-1-1");
$t1 = strtotime($o->year.'-'.$o->month.'-'.$o->day) - (3600 * 24);
$t2 = strtotime($o->year.'-'.$o->month.'-'.$o->day);
$t3 = strtotime($o->year.'-'.$o->month.'-'.$o->day) + (3600 * 24);
$holidays[date("n", $t1)][date("j", $t1)] = '';
$holidays[date("n", $t2)][date("j", $t2)] = '설날';
$holidays[date("n", $t3)][date("j", $t3)] = '';

$o = tosolar($year."-4-8");
$t = strtotime($o->year.'-'.$o->month.'-'.$o->day);
$holidays[date("n", $t)][date("j", $t)] = '석가탄신일';

$o = tosolar($year."-8-15");
$t1 = strtotime($o->year.'-'.$o->month.'-'.$o->day) - (3600 * 24);
$t2 = strtotime($o->year.'-'.$o->month.'-'.$o->day);
$t3 = strtotime($o->year.'-'.$o->month.'-'.$o->day) + (3600 * 24);
$holidays[date("n", $t1)][date("j", $t1)] = '';
$holidays[date("n", $t2)][date("j", $t2)] = '추석';
$holidays[date("n", $t3)][date("j", $t3)] = '';

// 설날 대체공휴일 검사
if ((isweekend(tosolar($year."-1-1", true)) == 0) ||
(isweekend(tosolar($year."-1-1", true)) == 6) ||
(isweekend(tosolar($year."-1-2", true)) == 0))
{
$o = tosolar($year."-1-3");
$holidays[$o->month][$o->day] = '대체공휴일';
}

// 어린이날 대체공휴일 검사 : 어린이날은 토요일, 일요일인 경우 그 다음 평일을 대체공유일로 지정
if (isweekend($year."-5-5") == 0) {
$holidays[5][6] = '대체공휴일';
}
if (isweekend($year."-5-5") == 6) {
$holidays[5][7] = '대체공휴일';
}

// 추석 대체공휴일 검사
if ((isweekend(tosolar($year."-8-14", true)) == 0) ||
(isweekend(tosolar($year."-8-15", true)) == 0) ||
(isweekend(tosolar($year."-8-16", true)) == 0))
{
$o = tosolar($year."-8-17");
$holidays[$o->month][$o->day] = '대체공휴일';
}

$memorialdays = array();
$memorialdays[1][8] = '쉬는날';
$memorialdays[1][15] = '노는날';

//echo "<xmp>";
//var_dump($season);
//echo "</xmp>";

$cyear = $year;
$cmonth = $month;
$cday = 1;
$cdate = $cyear.'-'.$cmonth.'-'.$cday;

$season = $lunar->seasondate ($cdate);
$tune_day = $lunar->dayfortune($cdate);

$fday = $lunar->tolunar($cdate);
$lyear = $fday->year;
$lmonth = $fday->month;
$lday = $fday->day;

$ly = array();
$lm = array();
$ld = array();
$l28su = array();
$y_liljin = array();
$m_liljin = array();
$d_liljin = array();
$largemonth = array();
$s28day = '';

for ( $i=0; $i<$lastday; $i++ ) {
$chk = false;

//음력날짜 lyear, lmonth, lday
if ( $fday->largemonth ) {
if ( $lday > 30 ) {
$lmonth = preg_replace ('/[^0-9]/', '', $fday->month);
$lmonth ++;
if ( $lmonth > 12 ) {
$lyear ++;
$lmonth -= 12;
}
$lday -= 30;
$chk = true;
}
} else {
if ( $lday > 29 ) {
$lmonth = preg_replace ('/[^0-9]/', '', $fday->month);
$lmonth ++;
if ( $lmonth > 12 ) {
$lyear ++;
$lmonth -= 12;
}
$lday -= 29;
$chk = true;
}
}

//양력날짜 cyear, cmonth, cday
if ( ($i + 1) > $lastdayofmonth[(int) $cmonth] ) {
$cmonth = $cmonth + 1;
if ($cmonth == 13) {
$cmonth = 1;
$cyear = $cyear + 1;
}
$cday = ($i + 1) - $lastdayofmonth[$cmonth];
} else {
$cday = $i + 1;
}

$cdate = str_pad($cyear,4,"0",STR_PAD_LEFT)."-".str_pad($cmonth,2,"0",STR_PAD_LEFT)."-".str_pad($cday,2,"0",STR_PAD_LEFT);

//read schedule data
//$scheduledays[$cmonth][$cday] = $this->schedule_model->get_datetime($cdate);

if ($cdate == "2023-01-01")
$s = (object) $schedule_11;
else if ($cdate == "2023-01-21" || $cdate == "2023-01-22" || $cdate == "2023-01-23" || $cdate == "2023-01-24")
$s = (object) $schedule_122;
else
$s = (object) $schedule_empty;
$scheduledays[$cmonth][$cday] = $s;

if ( $chk ) {
if ( $season->center->month != $cmonth ) {
$season = $lunar->seasondate ($cdate);
}
$fday = $lunar->tolunar ($cdate);

$lyear = $fday->year;
$lmonth = $fday->month;
$lday = $fday->day;

$chk == false;
}

if ( $fday->largemonth )
$largemonth[] = true;
else
$largemonth[] = false;

$ly[] = $lyear;
$lm[] = ($fday->leap ? '(閏)' : '').$lmonth;
$ld[] = $lday;

$s28day = $lunar->s28day($cdate);
$l28su[] = "(".$s28day->h.")";

$tune_ym = $lunar->dayfortune(date("Y-m-d", strtotime($cdate)));
$y_liljin[] = $tune_ym->hyear;
$m_liljin[] = $tune_ym->hmonth;

$d_gindex = $tune_day->data->d + $i;
if ( $d_gindex >= 60 )
$d_gindex -= 60;
$d_liljin[] = $lunar->ganji_ref($d_gindex, true);

$lday++;
}

$prevmonth = $month - 1;
$nextmonth = $month + 1;
$prevyear = $nextyear = $year;
if ($month == 1) {
$prevmonth = 12;
$prevyear = $year - 1;
}
elseif ($month == 12) {
$nextmonth = 1;
$nextyear = $year + 1;
}
$prev_year = $year - 1;
$next_year = $year + 1;

$view_data = array(
'year' => $year,
'month' => $month,
'today' => $today,
'thisyear' => $thisyear,
'thismonth' => $thismonth,
'prev_year' => $prev_year,
'prevyear' => $prevyear,
'prevmonth' => $prevmonth,
'nextyear' => $nextyear,
'nextmonth' => $nextmonth,
'next_year' => $next_year,
'lastday' => $lastday,
'ly' => $ly,
'lm' => $lm,
'ld' => $ld,
'y_liljin' => $y_liljin,
'm_liljin' => $m_liljin,
'd_liljin' => $d_liljin,
'l28su' => $l28su,
'holidays' => $holidays,
'memorialdays' => $memorialdays,
'scheduledays' => $scheduledays,
'season' => $season,
'lunar' => $lunar,
'largemonth' => $largemonth,
);

function SkipOffset($no, $sdate = '', $edate = '')
{
for ($i = 1; $i <= $no; $i++) {
$ck = $no - $i + 1;
if ($sdate)
$num = date('n.j', $sdate - (3600 * 24) * $ck);
if ($edate)
$num = date('n.j', $edate + (3600 * 24) * ($i - 1));
echo "<div class='col span1_7 days' valign='top'><font class='gray'>$num</font></div>";
}
}

function CalendarPrint($day, $style, $s28, $lunarday, $gangi, $holiname, $memorialname, $schedulename, $season24s)
{
echo "<a href='' class='ahref'>".
"<font class=".$style.">".$day."</font></a>".
"<font class='lunarday'> $lunarday</font>".
"<font class='su28'> $s28</font><br/>";

echo "<font class='gangi'>$gangi</font><br/>";
echo "<font class='season24s'>$season24s</font><br/>";
echo "<font class='holiname'>$holiname</font><br/>";
echo "<font class='memorial'>$memorialname</font><br/>";
echo "<font class='schedule'>$schedulename->subject</font>";
}

$path = "";
?>

<div class="group">
<div class="col span9_12">
<div class="section group">
<div align="center" class="col span1_7 calendar-title">
<font class="calendar"> </font>
</div>
<div align="center" class="col span1_7 calendar-title">
<font class="calendar"> </font>
</div>
<div align="center" class="col span3_7 calendar-title">
<font class="calendar">Lunar Calendar</font>
</div>
<div align="center" class="col span1_7 calendar-title">
<font class="calendar"> </font>
</div>
<div align="center" class="col span1_7 calendar-title">
<font class="calendar"> </font>
</div>
</div>

<div class="section group">
<div align="center" class="col span1_7 calendar-title">
<a href="<?php echo $path.'calendar.php?year='.$prev_year.'&month='.$month.'&day=1'; ?>"><font class="calendar"> ◀◀ </font></a>
</div>
<div align="center" class="col span1_7 calendar-title">
<a href="<?php echo $path.'calendar.php?year='.$prevyear.'&month='.$prevmonth.'&day=1'; ?>"><font class="calendar"> ◀ </font></a>
</div>
<div align="center" class="col span3_7 calendar-title">
<a href="<?php echo $path.'calendar.php?=yeay='.$thisyear.'&month='.$thismonth.'&day=1'; ?>">
<font class="calendar"><?php echo " ".$year . '년 '; ?></font>
<font class="calendar"><?php echo " ".$month . '월 '; ?></font>
<font class="calendar"><?php echo " ".$today . '일 '; ?></font>
</a>
</div>
<div align="center" class="col span1_7 calendar-title">
<a href="<?php echo $path.'calendar.php?year='.$nextyear.'&month='.$nextmonth.'&day=1'; ?>"><font class="calendar"> ▶ </font></a>
</div>
<div align="center" class="col span1_7 calendar-title">
<a href="<?php echo $path.'calendar.php?year='.$next_year.'&month='.$month.'&day=1'; ?>"><font class="calendar"> ▶▶ </font></a>
</div>
</div>

<div class="section group">
<div align="center" class="col span1_7 week"><font class="week">일</font></div>
<div align="center" class="col span1_7 week"><font class="week">월</font></div>
<div align="center" class="col span1_7 week"><font class="week">화</font></div>
<div align="center" class="col span1_7 week"><font class="week">수</font></div>
<div align="center" class="col span1_7 week"><font class="week">목</font></div>
<div align="center" class="col span1_7 week"><font class="week">금</font></div>
<div align="center" class="col span1_7 week"><font class="week">토</font></div>
</div>

<div class='section group'>
<?php
$day = 1;
$offset = 0;
$ck_row = 0;

$gangi_temp = $y_liljin[$day-1].' '.$m_liljin[$day-1];

// 시작 요일 구하기 : date("w", strtotime($year."-".$month."-01"));
$offset = date('w', mktime(0, 0, 0, $month, $day, $year)); // 0: 일요일, 6: 토요일
SkipOffset($offset, mktime(0, 0, 0, $month, $day, $year));

while ($day <= $lastday)
{
if ($offset == 0)
$style = "holy"; // 일요일 빨간색으로 표기
else if($offset == 6)
$style = "blue"; // 토요일 빨간색 또는 파란색
else
$style = "black";

//28수
$s28 = $l28su[$day-1];

$gangi_ym = $y_liljin[$day-1].' '.$m_liljin[$day-1];

//세차 월건 일진 표시 (1일, 음력1일,15일 월건값이 바뀔때)
if ($day == 1 || $ld[$day-1] == 1 || $ld[$day-1] == 15 || $gangi_ym != $gangi_temp) {
$gangi_temp = $gangi_ym;
$lunarday = $lm[$day-1].'.'.$ld[$day-1]; //年月日
$gangi = $y_liljin[$day-1].' '.$m_liljin[$day-1].' '.$d_liljin[$day-1];
if($gangi_ym != $gangi_temp)
$gangi .= '***';
}
else {
// 음력 일자 및 간지 데이터
$lunarday = $lm[$day-1].'.'.$ld[$day-1]; //年月日
$gangi = $y_liljin[$day-1].' '.$m_liljin[$day-1].' '.$d_liljin[$day-1];
}

// 법적 공휴일
$holiname = false;
if (isset($holidays[$month][$day])) {
$style = "holy";
$holiname = $holidays[$month][$day];
}

// 기념일
$memorialname = false;
if (isset($memorialdays[$month][$day])) {
$style = "holy";
$memorialname = $memorialdays[$month][$day];
}

// 사용자 일정 데이터
$schedulename = false;
if (isset($scheduledays[$month][$day])) {
$style = "holy";
$schedulename = $scheduledays[$month][$day];
}

//24절기
$season24s = false;
if ($season->center->month == $month && $season->center->day == $day)
$season24s = $season->center->name."(".$season->center->hname.")";
if ($season->ccenter->month == $month && $season->ccenter->day == $day)
$season24s = $season->ccenter->name."(".$season->ccenter->hname.")";
if ($season->nenter->month == $month && $season->nenter->day == $day)
$season24s = $season->nenter->name."(".$season->nenter->hname.")";

//$sqltimestamp = $year."-".$month."-".$day." 00:00:00";
//$unixtimestamp = strtotime($sqltimestamp);
//$id = date('Y-m-d\TH:i', $unixtimestamp);
//$id = $year."-".$month."-".$day;

//달력의 날짜들(1일부터 말일까지)들의 id
$id = str_pad($year, 4, "0", STR_PAD_LEFT)."-".
str_pad($month, 2, "0", STR_PAD_LEFT)."-".
str_pad($day, 2, "0", STR_PAD_LEFT);

if ($year == $thisyear && $month == $thismonth && $day == $today) {
echo "<div class='col span1_7 days-info active' valign='top' id='".$id."'>";
}
else {
if ($season24s)
echo "<div class='col span1_7 days-info season24' valign='top' id='".$id."'>";
else if (($ld[$day-1] == 1) || ($ld[$day-1] == 15)) {
if ($largemonth[$day-1])
echo "<div class='col span1_7 days-info largemoon' valign='top' id='".$id."'>";
else
echo "<div class='col span1_7 days-info smallmoon' valign='top' id='".$id."'>";
}
else
echo "<div class='col span1_7 days-info' valign='top' id='".$id."'>";
}

CalendarPrint($day, $style, $s28, $lunarday, $gangi, $holiname, $memorialname, $schedulename, $season24s);
echo "</div>"; //close col span

$offset++;
//다음줄 넘김
if ($offset == 7) {
$offset = 0;
echo "</div>"; //close section group
//말일이 아니라면 다음줄 시작
if ($day < $lastday) {
echo "<div class='section group'>";
$ck_row++;
}
}

$day++; // 날짜 증가
}

//줄의 끝(토요일)에서 끝난 것이 아니라면
if ($offset != 0) {
SkipOffset((7 - $offset), '', mktime(0, 0, 0, $month + 1, 1, $year));
echo "</div>"; //close section group
}
?>
</div>

<div class="col span3_12">
<div class="section group">
<div id="schedule_form_div" class="schedule_form_div">
<form id="schedule" name="schedule">
<p><strong><span id="schedule_form_title">일정 입력</span></strong> (type/repeat/alarm)</p>

<p><input type="text" id="subject" name="subject" size="60" style="width: 98%" placeholder="새로운 일정을 입력하세요."></p>
<p><textarea id="contents" name="contents" rows="10" style="width: 98%" placeholder="contents"></textarea><p>
<p><input type="time" id="time" name="time"> 알림시간</p>

<p><strong>repeat / type / alarm</strong></p>
<p>
<select id="repeat" name="repeat">
<option value="once">once</option>
<option value="repeat">repeat</option>
</select>
<select id="type" name="type">
<option value="none">none</option>
<option value="day">day</option>
<option value="week">week</option>
<option value="month">month</option>
<option value="year">year</option>
</select>
<select id="alarm" name="alarm">
<option value="none">none</option>
<option value="once">once</option>
<option value="repeat">repeat</option>
</select>
</p>

<div id="schedule_check_div" class="border schedule_check_div">
<p><strong>lunar / month / day / time / check</strong></p>
<p>
<select id="schedule_lunar" name="schedule_lunar">
<option value="solar">solar</option>
<option value="lunar">lunar</option>
</select>
<input type="number" name="schedule_month" id="schedule_month" min="00" max="12">
<input type="number" name="schedule_day" id="schedule_day" min="00" max="31">
<select id="schedule_check" name="schedule_check" onchange="schedule_check_onchange(this);">
<option value=0>none</option>
<option value=1>active</option>
<option value=-1>disable</option>
</select>
</p>
</div>

<div id="weekscheck_div" class="border weekscheck_div">
<p><strong>day / weeksdate / month / check</strong></p>
<p>
<select id="weekday" name="weekday">
<option value="none">none</option>
<option value="all">all</option>
<option value="일요일">일요일</option>
<option value="월요일">월요일</option>
<option value="화요일">화요일</option>
<option value="수요일">수요일</option>
<option value="목요일">목요일</option>
<option value="금요일">금요일</option>
<option value="토요일">토요일</option>
</select>
<select id="weeksdate" name="weeksdate">
<option value="none">none</option>
<option value="all">all</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
<option value="fourth">fourth</option>
<option value="fifth">fifth</option>
</select>
<input type="number" name="weeksmonth" id="weeksmonth" min="00" max="12">
<select id="weekscheck" name="weekscheck" onchange="weekscheck_onchange(this);">
<option value=0>none</option>
<option value=1>active</option>
<option value=-1>disable</option>
</select>
</p>
</div>
<p><input type="date" id="start_date" name="start_date"> 일정시작일</p>
<p><input type="date" id="end_date" name="end_date"> 일정종료일</p>
<p>
<button type="button" id="schedule_read">읽기</button>
<button type="button" id="schedule_insert">등록</button>
<button type="button" id="schedule_update">수정</button>
<button type="button" id="schedule_delete">삭제</button>
</p>
</form>
</div>
</div>
<div id="ajaxinfo" name="ajaxinfo">ajaxinfo </div>
<div id="disp_msg" name="disp_msg">disp_msg </div>
</div>
</div>



<script type="text/javascript">

function ajaxinfo(msg){
document.getElementById("ajaxinfo").textContent = msg;
document.getElementById("ajaxinfo").innerText = msg;
}

function disp_msg(msg){
document.getElementById("disp_msg").textContent = msg;
document.getElementById("disp_msg").innerText = msg;
}

function sortNumber(a,b) {
if (a > b) return -1;
else if (b > a) return 1;
else return 0;
}

function element_has_class(items, className)
{
//alert(JSON.stringify(items));
for(var i = 0; i < items.length; i++) {
var classlist = items[i].classList;
for(var j = 0; j < classlist.length; j++) {
if (classlist[j] == className) {
return items[i];
}
}
}
return false;
}

//목록에서 같은 클래스 이름을 가지고 있는 구성원을 전부 구해서 배열로 반환
function elements_has_class(items, className) {
var ret_elements = [];
for(var i = 0; i < items.length; i++) {
var classlist = items[i].classList;
for(var j = 0; j < classlist.length; j++) {
if (classlist[j] == className) {
ret_elements.push(items[i]);
}
}
}
return ret_elements;
}

function schedule_read(schedule_date, msg=""){

var js_data = false;
var schedule = false;

disp_msg(msg);

if (schedule_date == "2023-01-01") {
js_data = '<?php echo json_encode($schedule_11); ?>';
schedule = JSON.parse(js_data );
}
else if (schedule_date == "2023-01-21" || schedule_date == "2023-01-22" || schedule_date == "2023-01-23" || schedule_date == "2023-01-24") {
js_data = '<?php echo json_encode($schedule_122); ?>';
schedule = JSON.parse(js_data );
}
else {
js_data = '<?php echo json_encode($schedule_empty); ?>';
schedule = JSON.parse(js_data );
}
//alert(JSON.stringify(schedule));

//document.forms['schedule']['schedule_id'].value = schedule.id;
document.forms['schedule']['subject'].value = schedule.subject;
document.forms['schedule']['contents'].value = schedule.contents;
document.forms['schedule']['time'].value = schedule.time;

document.forms['schedule']['repeat'].value = schedule.repeat;
document.forms['schedule']['type'].value = schedule.type;
document.forms['schedule']['alarm'].value = schedule.alarm;

document.forms['schedule']['schedule_lunar'].value = schedule.schedule_lunar;
document.forms['schedule']['schedule_month'].value = schedule.schedule_month;
document.forms['schedule']['schedule_day'].value = schedule.schedule_day;
document.forms['schedule']['schedule_check'].value = schedule.schedule_check;

document.forms['schedule']['weekday'].value = schedule.weekday;
document.forms['schedule']['weeksdate'].value = schedule.weeksdate;
document.forms['schedule']['weeksmonth'].value = schedule.weeksmonth;
document.forms['schedule']['weekscheck'].value = schedule.weekscheck;

document.forms['schedule']['start_date'].value = schedule.start_date;
document.forms['schedule']['end_date'].value = schedule.end_date;
};

document.getElementById("schedule_read").addEventListener('click', function(event)
{
event.preventDefault();

//schedule_read(document.forms['schedule']['start_date'].value);
//return false;

var item = element_has_class(daysinfoList, days_active);
if (item) {
schedule_read(item.id, "읽기 버튼을 눌렀습니다.");
}
return false;
} );

var daysinfoList = document.getElementsByClassName("days-info"); //1일부터 말일까지 네모들
var daysList = document.getElementsByClassName("days"); //달력의 1일 왼쪽 말일 오른쪽 네모들
var days_smallmoon = "smallmoon"; //음력달이 작은 달이면 1일, 15일에 smallmoon classname 있다
var days_largemoon = "largemoon"; //음력달이 큰 달이면 1일, 15일에 largemoon classname 있다
var days_season24 = "season24"; //24절기이면 해당날짜에 season24 classname 있다, 해당날짜가 음력 1,15일이라도 smallmoon,largemoon 보다 우선 적용
var days_active = "active"; //선택(클릭)된 날짜를 표시할 class name
var heights = new Array();
var highest = 0;
var day = false;

var el_smallmoons = elements_has_class(daysinfoList, days_smallmoon);
var el_largemoons = elements_has_class(daysinfoList, days_largemoon);
var el_season24s = elements_has_class(daysinfoList, days_season24);

for(var i = 0; i < daysinfoList.length; i++) {

//달력의 숫자 네모박스의 실제 높이를 계산
var h_str = window.getComputedStyle(daysinfoList[i]).height;
h_str = h_str.replace('px', '');
h_num = Number(h_str);
//높이를 배열에 추가
heights.push(h_num);

//달력의 숫자 네모박스를 클릭할 때
daysinfoList[i].addEventListener('click', function()
{
event.preventDefault();

//이전에 선택된 날짜의 days_active class name을 제거한다
for(var j = 0; j < daysinfoList.length; j++) {
daysinfoList[j].classList.remove(days_active);
}

//현재 선택된 날짜가 24절기이면 days_season24 class name을 제거한다
//다른 날짜들(el_season24s[])은 days_season24 class name을 추가한다
for(var i = 0; i < el_season24s.length; i++) {
if (this == el_season24s[i])
this.classList.remove(days_season24);
else
el_season24s[i].classList.add(days_season24);
}

//현재 선택된 날짜의 음력달이 작은 달이면 days_smallmoon class name을 제거한다
//다른 날짜들(el_smallmoons[])은 days_smallmoon class name을 추가한다
for(var i = 0; i < el_smallmoons.length; i++) {
if (this == el_smallmoons[i])
this.classList.remove(days_smallmoon);
else
el_smallmoons[i].classList.add(days_smallmoon);
}

//현재 선택된 날짜의 음력달이 큰 달이면 days_largemoon class name을 제거한다
//다른 날짜들(el_largemoons[])은 days_largemoon class name을 추가한다
for(var i = 0; i < el_largemoons.length; i++) {
if (this == el_largemoons[i])
this.classList.remove(days_largemoon);
else
el_largemoons[i].classList.add(days_largemoon);
}

//현재 선택된 날짜에 days_active class name을 추가한다
this.classList.add(days_active);

//일정을 읽는다
//달력의 날짜들(1일부터 말일까지)들의 id
//$id = str_pad($year, 4, "0", STR_PAD_LEFT)."-".
// str_pad($month, 2, "0", STR_PAD_LEFT)."-".
// str_pad($day, 2, "0", STR_PAD_LEFT);
//document.forms['schedule']['start_date'].value = this.id;

disp_msg("");

schedule_read(this.id);

return false;
} );

//달력의 숫자를 클릭할 때
daysinfoList[i].querySelector('.ahref').addEventListener('click', function(event)
{
event.preventDefault();
//this.parentNode.classList.add(days_active);
//read schedule data
//schedule_read(this.parentNode.id);
return false;
} );
}

//배열을 내림차순으로 정렬
heights = heights.sort(sortNumber);

//제일 큰 숫자 : 높이
if (isNaN(highest[0])) {
highest = heights[0]+'px';
}
else {
highest = heights[0];
}

//alert(JSON.stringify(heights));
//alert(highest);

//달력의 날짜표시 네모들의 높이를 같은 크기로 만든다
for(var i = 0; i < daysinfoList.length; i++) {
daysinfoList[i].style.height = highest;
}

//달력의 날짜표시 네모들의 높이를 같은 크기로 만든다
for(var i = 0; i < daysList.length; i++) {
daysList[i].style.height = highest;
}

//days_active class name 을 가지고 있는 요소가 있으면 누른다
day = element_has_class(daysinfoList, days_active); //현재 선택된 날짜
if (day) {
day.querySelector('.ahref').click();
}

</script>

<script type="text/javascript">

function schedule_check_onchange(el){
if (el.value == 1) {
document.getElementById("schedule_check_div").classList.add('active');
document.getElementById("schedule_lunar").disabled = false;
document.getElementById("schedule_month").disabled = false;
document.getElementById("schedule_day").disabled = false;
document.getElementById("schedule_check").disabled = false;

document.getElementById("weekscheck_div").classList.remove('active');
document.getElementById("weekday").disabled = true;
document.getElementById("weeksdate").disabled = true;
document.getElementById("weeksmonth").disabled = true;
document.getElementById("weekscheck").disabled = true;
}
else if (el.value == -1) {
document.getElementById("schedule_check_div").classList.remove('active');
document.getElementById("schedule_lunar").disabled = true;
document.getElementById("schedule_month").disabled = true;
document.getElementById("schedule_day").disabled = true;
document.getElementById("schedule_check").disabled = true;
document.getElementById("schedule_check").value = -1;

document.getElementById("weekscheck_div").classList.add('active');
document.getElementById("weekday").disabled = false;
document.getElementById("weeksdate").disabled = false;
document.getElementById("weeksmonth").disabled = false;
document.getElementById("weekscheck").disabled = false;
document.getElementById("weekscheck").value = 1;
}
else {
document.getElementById("schedule_check_div").classList.remove('active');
document.getElementById("schedule_lunar").disabled = false;
document.getElementById("schedule_month").disabled = false;
document.getElementById("schedule_day").disabled = false;
document.getElementById("schedule_check").disabled = false;
document.getElementById("schedule_check").value = 0;

document.getElementById("weekscheck_div").classList.remove('active');
document.getElementById("weekday").disabled = false;
document.getElementById("weeksdate").disabled = false;
document.getElementById("weeksmonth").disabled = false;
document.getElementById("weekscheck").disabled = false;
}
}

function weekscheck_onchange(el){
if (el.value == 1) {
document.getElementById("schedule_check_div").classList.remove('active');
document.getElementById("schedule_lunar").disabled = true;
document.getElementById("schedule_month").disabled = true;
document.getElementById("schedule_day").disabled = true;
document.getElementById("schedule_check").disabled = true;

document.getElementById("weekscheck_div").classList.add('active');
document.getElementById("weekday").disabled = false;
document.getElementById("weeksdate").disabled = false;
document.getElementById("weeksmonth").disabled = false;
document.getElementById("weekscheck").disabled = false;
}
else if (el.value == -1) {
document.getElementById("schedule_check_div").classList.add('active');
document.getElementById("schedule_lunar").disabled = false;
document.getElementById("schedule_month").disabled = false;
document.getElementById("schedule_day").disabled = false;
document.getElementById("schedule_check").disabled = false;
document.getElementById("schedule_check").value = 1;

document.getElementById("weekscheck_div").classList.remove('active');
document.getElementById("weekday").disabled = true;
document.getElementById("weeksdate").disabled = true;
document.getElementById("weeksmonth").disabled = true;
document.getElementById("weekscheck").disabled = true;
document.getElementById("weekscheck").value = -1;
}
else {
document.getElementById("schedule_check_div").classList.remove('active');
document.getElementById("schedule_lunar").disabled = false;
document.getElementById("schedule_month").disabled = false;
document.getElementById("schedule_day").disabled = false;
document.getElementById("schedule_check").disabled = false;

document.getElementById("weekscheck_div").classList.remove('active');
document.getElementById("weekday").disabled = false;
document.getElementById("weeksdate").disabled = false;
document.getElementById("weeksmonth").disabled = false;
document.getElementById("weekscheck").disabled = false;
document.getElementById("weekscheck").value = 0;
}
}

</script>

</body>

</html>

simple tab

darkninja — Sun, 01 Jan 2023 23:27:46 +0900

html tag 와 js 처리부분이 연결되어 있으니 한곳만 수정하면 작동이 안됩니다.

js 부분은 간단히 몇줄로 압축이 가능하지만

이것을 풀어서 코딩하고 동작시키는데 며칠이 걸렸습니다;

css

<style>
.tabs_wrapper {
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;

-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;

background-color: #fafafa;

margin: 1px 1px 3px 1px;
padding: 1px 1px 1px 1px;
}

.tabs_contents_container {
border: 1px solid #ccc;
border-top: none;
padding: 3px;
}

.tab_contents {
display: none;
}

.tabs_container {
border-bottom: 1px solid #ccc;
}

.tabs_pull_right {
float: right !important;
right: 0;
left: auto;
margin-right: 0;
position: relative;
display: inline-block;
vertical-align: middle;
}

.tabs {
list-style: none;
padding: 5px 0 4px 0;
margin: 0 0 0 10px;
font: 0.75em arial;
}

.tabs div span {
display: inline;
background-color: #eeeeee;
}

.tabs li {
display: inline;
}

.tabs li a {
border: 1px solid #ccc;
padding: 4px 6px;
text-decoration: none;
background-color: #eeeeee;
border-bottom: none;
outline: none;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}

.tabs li a:hover {
background-color: #dddddd;
}

.tabs li.active a {
border-bottom: 1px solid #fff;
background-color: #fff;
padding: 4px 6px 5px 6px;
}

.tabs li.active a:hover {
}

.tabs li a.icon_accept {
background-image: url('accept.png');
background-position: 5px;
background-repeat: no-repeat;
padding-left: 24px;
}

.tabs li a.icon_accept:hover {
padding-left: 24px;
}

.clearfix:before {
display: table;
content: " ";
}

.clearfix:after {
display: table;
content: " "; /* Older browser do not support empty content */
clear: both;
visibility: hidden;
display: block;
height: 0;
}
</style>

php

/* 사용자 정의 */
// http://127.0.0.1/ci-426/public
define('SCRIPT_NAME', $_SERVER['SCRIPT_NAME']);
define('HTTP_HTTPS', ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS']=='on') ? 's' : ''));

define('HTTP_HOST', 'http'.HTTP_HTTPS.'://'.$_SERVER['HTTP_HOST']);
define('DOCUMENT_ROOT', $_SERVER['DOCUMENT_ROOT']);

$root_path = str_replace(basename(SCRIPT_NAME), '', SCRIPT_NAME);
$root_path = substr($root_path, 0, -1);
if (empty($root_path)) {
$root_path = '';
}
$base_path = str_replace('/public' , '', $root_path);
define('BASE_PATH', $base_path);
define('ROOT_PATH', $root_path);

define('HTTP_BASE', HTTP_HOST.BASE_PATH);
define('DOC_BASE', DOCUMENT_ROOT.BASE_PATH);

define('HTTP_ROOT', HTTP_HOST.ROOT_PATH);
define('DOC_ROOT', DOCUMENT_ROOT.ROOT_PATH);

$request = \Config\Services::request();
$uri = $request->uri;
$TotalSegments = $uri->getTotalSegments();

$seg_controller = $uri->getTotalSegments()>=1 ? $uri->getSegment(1) : '/';
$seg_func = $uri->getTotalSegments()>=2 ? $uri->getSegment(2) : '';
$seg_table = $uri->getTotalSegments()>=3 ? $uri->getSegment(3) : '';
$seg_index = $uri->getTotalSegments()>=4 ? $uri->getSegment(4) : '';

<div class="tabs_wrapper">
<div class="tabs_container">
<ul id="tabs_info" class="tabs">
<div class="tabs_pull_right">
<span id="tab_prev"><a href="#">prev</a></span>
<span id="tab_next"><a href="#">next</a></span>
</div>
<li><a href="#tab_seg" class="ahref">segments</a></li>
<li><a href="#tab_path" class="ahref">path</a></li>
<li class="active"><a href="#tab_doc" class="ahref">doc</a></li>
<div class="clearfix"></div>
</ul>
</div>
<div id="tabs_info_contents" class="tabs_contents_container">
<div id="tab_seg" class="tab_contents">
<?php
echo 'TotalSegments : '.$TotalSegments.'<br>';
echo 'seg_controller : '.$seg_controller.'<br>';
echo 'seg_func : '.$seg_func.'<br>';
echo 'seg_table : '.$seg_table.'<br>';
?>
</div>
<div id="tab_path" class="tab_contents">
<?php
echo "HTTP_HOST => ".HTTP_HOST."<br>";
echo "DOCUMENT_ROOT => ".DOCUMENT_ROOT."<br>";
echo "<br>";
echo "BASE_PATH => ".BASE_PATH."<br>";
echo "ROOT_PATH => ".ROOT_PATH."<br>";
echo "<br>";
echo "HTTP_BASE => ".HTTP_BASE."<br>";
echo "DOC_BASE => ".DOC_BASE."<br>";
echo "<br>";
echo "HTTP_ROOT => ".HTTP_ROOT."<br>";
echo "DOC_ROOT => ".DOC_ROOT."<br>";
echo "<br>";
echo "base_url() => ".base_url()."<br>";
?>
</div>
<div id="tab_doc" class="tab_contents">
<a target="_blank" href="http://www.phpschool.com/">phpschool</a>
<a target="_blank" href="http://www.tcpschool.com/">tcpschool</a>
<a target="_blank" href="https://link2me.tistory.com/category">link2me</a>
<br/><br/>
<a target="_blank" href="https://www.php.net/manual/en/index.php">php</a>
<a target="_blank" href="https://ko.javascript.info/">JavaScript</a>
<a target="_blank" href="https://www.devkuma.com/">devkuma</a>
</div>
</div>
</div>

js

<script type="text/javascript" charset="utf-8">
function has_class(items, className)
{
//alert(JSON.stringify(items));
for(var i = 0; i < items.length; i++) {
var classlist = items[i].classList;
for(var j = 0; j < classlist.length; j++) {
if (classlist[j] == className) {
return items[i];
}
}
}
return false;
}
function item_prev(items, className)
{
var item = has_class(items, className);
for(var i = 0; i < items.length; i++) {
if (items[i] == item) {
if (i > 0) {
return items[i-1];
}
}
}
return false;
}
function item_next(items, className)
{
var item = has_class(items, className);
for(var i = 0; i < items.length; i++) {
if (items[i] == item) {
if (i < items.length-1) {
return items[i+1];
}
}
}
return false;
}

var tabs_info = document.getElementById("tabs_info");
var tabList = tabs_info.getElementsByTagName("li")
var tabs_info_contents = document.getElementById("tabs_info_contents");
var contentList = tabs_info_contents.querySelectorAll('.tab_contents');
var tabs_active = "active";

document.getElementById("tab_prev").onclick = function(event)
{
event.preventDefault();
var item = item_prev(tabList, tabs_active);
if (item) {
item.querySelector('.ahref').click();
}
return false;
};

document.getElementById("tab_next").onclick = function(event)
{
event.preventDefault();
var item = item_next(tabList, tabs_active);
if (item) {
item.querySelector('.ahref').click();
}
return false;
};

for(var i = 0; i < tabList.length; i++)
{
tabList[i].querySelector('.ahref').addEventListener('click', function(event)
{
event.preventDefault();
for(var j = 0; j < tabList.length; j++) {
tabList[j].classList.remove(tabs_active);
contentList[j].style.display = 'none';
}
this.parentNode.classList.add(tabs_active);

var selected_tab = this.getAttribute('href');
document.querySelector(selected_tab).style.display = 'block';
return false;
} );
}
var item = has_class(tabList, tabs_active);
if (item) {
item.querySelector('.ahref').click();
}
</script>

captcha font size 폰트 사이즈가 바뀌지 않을 때 참고하세요.

하늘치 — Sat, 31 Dec 2022 20:59:29 +0900

제 경험이 혹 도움이 될까 하여 남깁니다.

기존에 php7.2 에서 잘 사용하던 captcha 가 php7.4 인 서버로 이전하니 회원가입 페이지의 captcha 부분에서 오류가 나왔습니다.

A PHP Error was encountered

Severity: Warning

Message: imagettftext(): Could not find/open font

Filename: helpers/captcha_helper.php

Line Number: 320

Backtrace:

File: /home/math/application/controllers/Auth.phpLine: 549Function: create_captcha

File: /home/math/application/controllers/Auth.phpLine: 213Function: _create_captcha

File: /home/math/public_html/index.phpLine: 328Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Trying to access array offset on value of type bool

Filename: controllers/Auth.php

Line Number: 554

Backtrace:

File: /home/math/application/controllers/Auth.phpLine: 554Function: _error_handler

File: /home/math/application/controllers/Auth.phpLine: 213Function: _create_captcha

File: /home/math/public_html/index.phpLine: 328Function: require_once

어떻게든 했는데, 이번에는 폰트 사이즈가 조절이 안됩니다;

결론은,, fonts_path 경로 설정이었습니다..

$config['captcha_path'] = 'assets/captcha/';

$config['captcha_fonts_path'] = FCPATH.'assets/captcha/fonts/3.ttf';

검색 사이트 바로 가기

$config['captcha_path'] = 'assets/captcha/';
$config['captcha_fonts_path'] = FCPATH.'assets/captcha/fonts/3.ttf';

FCPATH 로 폰트 경로를 지정하니 정상적으로 나왔네요.

참고로 저는 tank_auth 를 사용하고 있고요,

리눅스 CentOS 7 + php7.4 + CI 3.1.13 버전 사용중입니다.

도움이 되셨으면 좋겠습니다.

모바일 환경에서의 이미지 업로드

도라에몽 — Wed, 28 Dec 2022 20:20:08 +0900

회사 앱(하이브리드) 특성상 모바일 상에서 카메라로 찍어서 이미지를 자주 올리도록 되어있습니다.

이미지를 올릴때 용량이 크면 중간에 새로고친다던지..

앱이 죽은줄 알고 앱을 닫는다던지.. 등등의 액션으로 인해서

파일이 안올라온다거나.. 이탈하는 회원이 생깁니다.

그래서 고민하다가 좋은 참고자료를 찾았습니다.

원본은 https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload 여기에서 확인

<input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos('test/html5prc');" />
<form id="uploadImageForm" method="post" enctype="multipart/form-data" action="/test/html5prc">
<input type="text" id="name" value="text-field" />
<input type="hidden" name="upfile_blob" id="upfile_blob" value="" />
<input type="submit" name="submit" id="uploadImageForm_btn" value="업로드"/>
</form>

input=file 필드를 form 밖에 둔 이유는 해당 첨부파일이 업로드되지 않도록 하기 위함.

window.uploadPhotos = function(url){
// Read in file
var file = event.target.files[0];

// Ensure it's an image
if(file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
var canvas = document.createElement('canvas'),
max_size = 1024, /* 리사이즈될 이미지의 크기 지정 */
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size){height *= max_size/width;width = max_size;}
} else {
if (height > max_size){width *= max_size/height;height = max_size;}
}
canvas.width = width;canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
var resizedImage = dataURLToBlob(dataUrl);
$("#upfile_blob").val(dataUrl);
$.event.trigger({type: "imageResized",blob: resizedImage,url: dataUrl});
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
};

var dataURLToBlob = function(dataURL) {
var BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(',');
var contentType = parts[0].split(':')[1];
var raw = parts[1];
return new Blob([raw], {type: contentType});
}
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}
return new Blob([uInt8Array], {type: contentType});
}

$(document).on("imageResized", function (event) {
if (event.blob && event.url) {
$("#uploadImageForm_btn").click();
}
});

업로드가 파일이 아니고 text필드의 값으로 넘어왔으므로

DB에 blog 필드에 저장해도 되고 폴더에 저장해도 됩니다.

폴더에 저장하시려면 아래와 같이 변환해서 저장하면 됩니다.

$blob = $_POST["upfile_blob"];
$arr = explode(",", $blob);
unset($arr[0]);
$blob = base64_decode(implode("",$arr));
$filename = time() . ".jpeg";

file_put_contents('./img/event_temp/'.$filename, $blob);

max_width를 1024 정도로 했을때 5~6매가 씩이나 되는 이미지도 200kbyte 정도 이하로 리사이즈 되어 업로드 됩니다.

모바일 환경에서 파일 업로드 고민 하시는 분들에게는 좋은 팁이 될듯 합니다.

참고한 URL

https://uminoh.tistory.com/14
https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload

자바스크립트 이미지 에디터

한대승(불의회상) — Fri, 26 Aug 2022 12:04:38 +0900

Toast UI image editor 라는 물건인데 웹브라우져에서 간단히 이미지 편집이 가능하네요.

샘플 코드 공유합니다.

* github : https://github.com/nhn/tui.image-editor

* CDN을 이용한 샘플코드

<html>
<head>
<meta charset="UTF-8">
<title>0. Design</title>
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
<style>
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>

<div id="tui-image-editor-container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>

<script>
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage'
},
// theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
</script>
</body>
</html>