Skip to content

Commit 6cba5c3

Browse files
dongx0915dongx0915
committed
ADD : 디렉토리 선택 Modal 추가 + 선택한 경로 추출 기능
1 parent 0cbb1b0 commit 6cba5c3

15 files changed

+330
-145
lines changed

‎background.js

+33-33
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,16 @@
1919
// chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab)=>{
2020
// if(changeInfo.status == 'complete') {
2121
// /* 탭 정보 변경 후, 수행할 로직 작성 */
22-
// const regex = /^https:\/\/www\.acmicpc\.net\/status.{0,}/i;
22+
// // const regex = /^https:\/\/www\.acmicpc\.net\/status.{0,}/i;
2323
// console.log('탭 변경 됨' + tab.url + ' ' + regex.test(tab.url));
24+
// chrome.browserAction.openPopup();
2425

25-
// if(regex.test(tab.url)){
26-
// chrome.scripting.executeScript({
27-
// target: { tabId: tabId },
28-
// func: addUploadBtnToResult
29-
// });
30-
// }
26+
// // if(regex.test(tab.url)){
27+
// // chrome.scripting.executeScript({
28+
// // target: { tabId: tabId },
29+
// // func: addUploadBtnToResult
30+
// // });
31+
// // }
3132
// }
3233
// });
3334

@@ -56,32 +57,31 @@ chrome.runtime.onInstalled.addListener((reason) => {
5657
*/
5758
function handleMessage(request) {
5859
if (request && request.closeWebPage === true && request.isSuccess === true) {
59-
/* 인증된 유저 이름을 로컬 스토리지에 저장 */
60-
chrome.storage.local.set(
61-
{ BaekjoonHub_username: request.username }
62-
);
63-
64-
/* 인증에 사용된 토큰을 로컬 스토리지에 저장 */
65-
chrome.storage.local.set(
66-
{ BaekjoonHub_token: request.token }
67-
);
68-
69-
/* 파이프 닫기 */
70-
chrome.storage.local.set({ pipe_BaekjoonHub: false }, () => {
71-
console.log('Closed pipe.');
72-
});
73-
74-
/* 다시 welcome.html로 돌아감 */
75-
const urlOnboarding = `chrome-extension://${chrome.runtime.id}/welcome.html`;
76-
chrome.tabs.create({ url: urlOnboarding, selected: true }); // creates new tab
60+
/* 인증된 유저 이름을 로컬 스토리지에 저장 */
61+
chrome.storage.local.set(
62+
{ BaekjoonHub_username: request.username }
63+
);
64+
65+
/* 인증에 사용된 토큰을 로컬 스토리지에 저장 */
66+
chrome.storage.local.set(
67+
{ BaekjoonHub_token: request.token }
68+
);
69+
70+
/* 파이프 닫기 */
71+
chrome.storage.local.set({ pipe_BaekjoonHub: false }, () => {
72+
console.log('Closed pipe.');
73+
});
74+
75+
/* 다시 welcome.html로 돌아감 */
76+
const urlOnboarding = `chrome-extension://${chrome.runtime.id}/welcome.html`;
77+
chrome.tabs.create({ url: urlOnboarding, selected: true }); // creates new tab
7778

7879
} else if (request && request.closeWebPage === true && request.isSuccess === true) {
79-
alert('Something went wrong while trying to authenticate your profile!');
80-
chrome.tabs.getSelected(null, function (tab) {
81-
chrome.tabs.remove(tab.id);
82-
});
80+
alert('Something went wrong while trying to authenticate your profile!');
81+
chrome.tabs.getSelected(null, function (tab) {
82+
chrome.tabs.remove(tab.id);
83+
});
8384
}
84-
}
85-
86-
chrome.runtime.onMessage.addListener(handleMessage);
87-
85+
}
86+
87+
chrome.runtime.onMessage.addListener(handleMessage);

‎contentscript.js

-4
This file was deleted.

‎css/bstreeview.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/modal.css

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.bstreeview {
2+
position: relative;
3+
display: -ms-flexbox;
4+
display: flex;
5+
-ms-flex-direction: column;
6+
flex-direction: column;
7+
min-width: 0;
8+
word-wrap: break-word;
9+
background-color: #fff;
10+
background-clip: border-box;
11+
border: 1px solid rgba(0, 0, 0, .125);
12+
border-radius: .25rem;
13+
padding: 0;
14+
overflow: hidden
15+
}
16+
17+
.bstreeview .list-group {
18+
margin-bottom: 0
19+
}
20+
21+
.bstreeview .list-group-item {
22+
border-radius: 0;
23+
border-width: 1px 0 0 0;
24+
padding-top: .5rem;
25+
padding-bottom: .5rem;
26+
cursor: pointer
27+
}
28+
29+
.bstreeview .list-group-item:hover {
30+
background-color: #dee2e6
31+
}
32+
33+
.bstreeview>.list-group-item:first-child {
34+
border-top-width: 0
35+
}
36+
37+
.bstreeview .state-icon {
38+
margin-right: 8px
39+
}
40+
41+
.bstreeview .item-icon {
42+
margin-right: 5px
43+
}
44+
45+
/* 팝업 스타일 */
46+
.modal-bg {
47+
display: none;
48+
width: 100%;
49+
height: 100%;
50+
position: fixed;
51+
top: 0;
52+
left: 0;
53+
right: 0;
54+
background: rgba(0, 0, 0, 0.3);
55+
z-index: 999;
56+
}
57+
58+
.modal-wrap {
59+
display: none;
60+
position: absolute;
61+
top: 50%;
62+
left: 50%;
63+
z-index: 1000;
64+
width: 350px;
65+
height: auto;
66+
padding: 10px;
67+
background-color: white !important;
68+
transform: translate(-50%, -50%);
69+
transition: background-color 0.75s ease;
70+
text-align: center;
71+
font-size: 13px;
72+
font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif;
73+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.24);
74+
}
75+
76+
#tree {
77+
text-align: left;
78+
overflow-y: auto;
79+
max-height: 600px;
80+
}

‎library/bootstrap-4.4.1.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎library/bstreeview.min.js

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/*
2+
@preserve
3+
bstreeview.js
4+
Version: 1.0.0
5+
Authors: Sami CHNITER <sami.chniter@gmail.com>
6+
Copyright 2020
7+
License: Apache License 2.0
8+
9+
Project: https://github.com/chniter/bstreeview
10+
*/
11+
let selectDir = '';
12+
13+
function getSelectDir(node){
14+
let dir = '';
15+
let parent = document.querySelector(`[href="#${node.parentNode.id}"]`);
16+
17+
if(parent == null) {
18+
// 최상위 폴더인 것
19+
return node.textContent;
20+
}
21+
else {
22+
return getSelectDir(parent) + '/' + node.textContent;
23+
}
24+
}
25+
26+
(function(a, m, n, p) {
27+
function g(b, f) {
28+
this.element = b;
29+
this.itemIdPrefix = b.id + "-item-";
30+
this.settings = a.extend({}, l, f);
31+
this.init()
32+
}
33+
var l = {
34+
expandIcon: "fa fa-angle-down",
35+
collapseIcon: "fa fa-angle-right",
36+
indent: 1.25
37+
};
38+
a.extend(g.prototype, {
39+
init: function() {
40+
this.tree = [];
41+
this.nodes = [];
42+
this.settings.data && (this.settings.data = a.parseJSON(this.settings.data), this.tree = a.extend(!0, [], this.settings.data), delete this.settings.data);
43+
a(this.element).addClass("bstreeview");
44+
this.initData({
45+
nodes: this.tree
46+
});
47+
var b = this;
48+
this.build(a(this.element),
49+
this.tree, 0);
50+
a(".bstreeview").on("click", ".list-group-item", function() {
51+
a(".state-icon", this).toggleClass(b.settings.expandIcon).toggleClass(b.settings.collapseIcon)
52+
// <!-- 클릭한 노드의 부모의 id를 herf 속성으로 갖고 있는 노드가 상위 폴더 -->
53+
let dirdiv = document.querySelector('#select-dir');
54+
dirdiv.textContent = getSelectDir(this);
55+
})
56+
},
57+
initData: function(b) {
58+
if (b.nodes) {
59+
var f = this;
60+
a.each(b.nodes, function(a, c) {
61+
c.nodeId = f.nodes.length;
62+
c.parentId = b.nodeId;
63+
f.nodes.push(c);
64+
c.nodes && f.initData(c)
65+
})
66+
}
67+
},
68+
build: function(b, f, h) {
69+
var c = this,
70+
g = "1.25rem;";
71+
0 < h && (g = (c.settings.indent + h * c.settings.indent).toString() + "rem;");
72+
h += 1;
73+
a.each(f, function(f, d) {
74+
var e = a('<div href="#itemid" class="list-group-item" data-toggle="collapse"></div>').attr("href",
75+
"#" + c.itemIdPrefix + d.nodeId).attr("style", "padding-left:" + g);
76+
if (d.nodes) {
77+
var k = a('<i class="state-icon"></i>').addClass(c.settings.collapseIcon);
78+
e.append(k)
79+
}
80+
d.icon && (k = a('<i class="item-icon"></i>').addClass(d.icon), e.append(k));
81+
e.append(d.text);
82+
d.href && e.attr("href", d.href);
83+
d["class"] && e.addClass(d["class"]);
84+
b.append(e);
85+
d.nodes && (e = a('<div class="list-group collapse" id="itemid"></div>').attr("id", c.itemIdPrefix + d.nodeId), b.append(e), c.build(e, d.nodes, h))
86+
})
87+
}
88+
});
89+
a.fn.bstreeview = function(b) {
90+
return this.each(function() {
91+
a.data(this,
92+
"plugin_bstreeview") || a.data(this, "plugin_bstreeview", new g(this, b))
93+
})
94+
}
95+
96+
})(jQuery, window, document);

‎library/semantic.min.js

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manifest.json

+8-3
Original file line numberDiff line numberDiff line change
@@ -48,19 +48,24 @@
4848
"matches": [
4949
"https://www.acmicpc.net/*"
5050
],
51+
"css":[
52+
"css/modal.css"
53+
],
5154
"js": [
52-
"contentscript.js",
55+
"library/jquery-3.6.3.min.js",
56+
"library/bootstrap-4.4.1.js",
57+
"library/bstreeview.min.js",
5358
"scripts/utils.js",
5459
"scripts/Github.js",
5560
"scripts/authorize.js",
5661
"scripts/storage.js",
5762
"scripts/baekjoon/variable.js",
5863
"scripts/baekjoon/directory.js",
64+
"scripts/baekjoon/modal.js",
5965
"scripts/baekjoon/baekjoon.js",
6066
"scripts/baekjoon/parse.js",
6167
"scripts/baekjoon/api.js",
62-
"scripts/baekjoon/uploadfunctions.js",
63-
"library/jquery-3.6.3.min.js"
68+
"scripts/baekjoon/uploadfunctions.js"
6469
],
6570
"run_at": "document_idle"
6671
}

‎popup.html

+8-36
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33

44
<head>
55
<link rel="stylesheet" href="css/popup.css" />
6-
<script src="/library/jquery-3.6.3.min.js"></script>
7-
86
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
9-
<!--===== Boxicons CSS =====-->
10-
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
11-
<script src="/library/semantic.min.js"></script>
127
</head>
138

149
<body>
@@ -71,41 +66,18 @@ <h1 id="title">Baekjoon<span style="color: #0078c3">Hub</span></h1>
7166
<a title="BaekjoonHub Home" id="welcome_URL" href="" target="_blank"><i class="ui grey home icon"></i></a>
7267
</div>
7368

74-
<!-- 리포지토리 선택 드롭다운 -->
75-
<div class="select-menu">
76-
<div class="select-btn">
77-
<span class="sBtn-text">Select your option</span>
78-
<i class="bx bx-chevron-down"></i>
69+
<!-- 리포지토리 선택 TreeView -->
70+
<!-- <div class="col-md-4 pt-5">
71+
<div id="tree">
7972
</div>
80-
81-
<ul class="options">
82-
<li class="option">
83-
<i class="bx bxl-github" style="color: #171515;"></i>
84-
<span class="option-text">Github</span>
85-
</li>
86-
<li class="option">
87-
<i class="bx bxl-instagram-alt" style="color: #E1306C;"></i>
88-
<span class="option-text">Instagram</span>
89-
</li>
90-
<li class="option">
91-
<i class="bx bxl-linkedin-square" style="color: #0E76A8;"></i>
92-
<span class="option-text">Linkedin</span>
93-
</li>
94-
<li class="option">
95-
<i class="bx bxl-facebook-circle" style="color: #4267B2;"></i>
96-
<span class="option-text">Facebook</span>
97-
</li>
98-
<li class="option">
99-
<i class="bx bxl-twitter" style="color: #1DA1F2;"></i>
100-
<span class="option-text">Twitter</span>
101-
</li>
102-
</ul>
103-
</div>
104-
<!-- 리포지토리 선택 드롭다운 -->
73+
</div>| -->
74+
<!-- 리포지토리 선택 TreeView -->
10575
</div>
10676

107-
<script src="scripts/oauth2.js"></script>
77+
<script src="/library/jquery-3.6.3.min.js"></script>
78+
<script src="/library/semantic.min.js"></script>
10879
<script type="text/javascript" src="popup.js"></script>
80+
<script src="scripts/oauth2.js"></script>
10981
</body>
11082

11183
</html>

0 commit comments

Comments
 (0)