add popover

route/edit.py

@@ -235,8 +235,8 @@ def edit(name = 'Test', section = 0, do_type = ''):
                 add_get_file = '''
                     <link   rel="stylesheet"
                             data-name="vs/editor/editor.main" 
-                            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.css">
-                    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script>
+                            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.min.css">
+                    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/loader.min.js"></script>
                 '''
 
                 editor_top_text += ' <a href="javascript:opennamu_edit_turn_off_monaco();">(' + load_lang('turn_off_monaco') + ')</a>'
@@ -247,7 +247,7 @@ def edit(name = 'Test', section = 0, do_type = ''):
                     monaco_thema = ''
                 
                 add_script = '''
-                    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs' }});
+                    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs' }});
                     require.config({ 'vs/nls': { availableLanguages: { '*': 'ko' } }});
                     require(["vs/editor/editor.main"], function () {
                         window.editor = monaco.editor.create(document.getElementById('opennamu_monaco_editor'), {

route/tool/func_render_namumark.py

@@ -16,7 +16,7 @@ class class_do_render_namumark:
             self.ip = '0.0.0.0'
 
         try:
-            if 'main_css_bold' in self.flask_session:
+            if 'main_css_bold' in flask.session:
                 pass    
                 
             self.flask_session = flask.session
@@ -163,7 +163,7 @@ class class_do_render_namumark:
             else:
                 data += '<a id="' + self.doc_include + 'fn_' + self.data_footnote[for_a]['list'][0] + '" href="#' + self.doc_include + 'rfn_' + self.data_footnote[for_a]['list'][0] + '">(' + for_a + ') </a> '
 
-            data += '<footnote_title target="' + self.doc_include + 'fn_' + self.data_footnote[for_a]['list'][0] + '">' + self.data_footnote[for_a]['data'] + '</footnote_title>'
+            data += '<footnote_title id="' + self.doc_include + 'fn_' + self.data_footnote[for_a]['list'][0] + '_title">' + self.data_footnote[for_a]['data'] + '</footnote_title>'
 
         if data != '':
             data += '</div>'
@@ -1044,6 +1044,7 @@ class class_do_render_namumark:
                     return slash_add + match[2]
 
         include_num = 0
+        include_set_data = get_main_skin_set(self.curs, self.flask_session, 'main_css_include_link', self.ip)
         include_regex = re.compile('\[include\(((?:(?!\[include\(|\)\]|<\/div>).)+)\)\]', re.I)
         include_count_max = len(re.findall(include_regex, self.render_data)) * 2
         include_change_list = {}
@@ -1097,8 +1098,6 @@ class class_do_render_namumark:
                         include_data = db_data[0][0].replace('\r', '')
 
                         # include link func
-                        include_set_data = get_main_skin_set(self.curs, self.flask_session, 'main_css_include_link', self.ip)
-
                         include_link = ''
                         if include_set_data == 'use':
                             include_link = '<div><a href="/w/' + url_pas(include_name) + '">(' + include_name_org + ')</a></div>'
@@ -1129,6 +1128,7 @@ class class_do_render_namumark:
 
     def do_redner_footnote(self):
         footnote_num = 0
+        footnote_set = get_main_skin_set(self.curs, self.flask_session, 'main_css_footnote_set', self.ip)
         footnote_regex = re.compile('(?:\[\*((?:(?!\[\*|\]| ).)+)?(?: ((?:(?!\[\*|\]).)+))?\]|\[(각주|footnote)\])', re.I)
         footnote_count_all = len(re.findall(footnote_regex, self.render_data)) * 4
         while 1:
@@ -1159,21 +1159,63 @@ class class_do_render_namumark:
                     else:
                         footnote_text_data = footnote_data[1]
 
+                    fn = ''
+                    rfn = ''
+                    foot_v_name = ''
+
                     if footnote_name in self.data_footnote:
                         self.data_footnote[footnote_name]['list'] += [footnote_num_str]
                         footnote_first = self.data_footnote[footnote_name]['list'][0]
 
-                        data_name = self.get_tool_data_storage('<sup><a fn_target="' + self.doc_include + 'fn_' + footnote_first + '" id="' + self.doc_include + 'rfn_' + footnote_num_str + '" href="#' + self.doc_include + 'fn_' + footnote_first + '">(' + footnote_name + ' (' + footnote_num_str + ')' + ')</a></sup>', '', footnote_data_org)
-
-                        self.render_data = re.sub(footnote_regex, '<' + data_name + '></' + data_name + '>', self.render_data, 1)
+                        fn = self.doc_include + 'fn_' + footnote_first
+                        rfn = self.doc_include + 'rfn_' + footnote_num_str
+                        foot_v_name = footnote_name + ' (' + footnote_num_str + ')'
                     else:
                         self.data_footnote[footnote_name] = {}
                         self.data_footnote[footnote_name]['list'] = [footnote_num_str]
                         self.data_footnote[footnote_name]['data'] = footnote_text_data
 
-                        data_name = self.get_tool_data_storage('<sup><a fn_target="' + self.doc_include + 'fn_' + footnote_num_str + '" id="' + self.doc_include + 'rfn_' + footnote_num_str + '" href="#' + self.doc_include + 'fn_' + footnote_num_str + '">(' + footnote_name + footnote_name_add + ')</a></sup>', '', footnote_data_org)
+                        fn = self.doc_include + 'fn_' + footnote_num_str
+                        rfn = self.doc_include + 'rfn_' + footnote_num_str
+                        foot_v_name = footnote_name + footnote_name_add
+
+                    if footnote_set == 'spread':
+                        data_name = self.get_tool_data_storage(
+                            '<sup>' + \
+                                '<a fn_target="' + fn + '" id="' + rfn + '" href="javascript:void(0);">(' + foot_v_name + ')</a>' + \
+                            '</sup>' + \
+                            '<span class="opennamu_spead_footnote" id="' + rfn + '_load" style="display: none;"></span>',
+                            '',
+                            footnote_data_org
+                        )
+                        self.render_data_js += 'document.getElementById("' + rfn + '").addEventListener("click", function() { opennamu_do_footnote_spread("' + rfn + '", "' + fn + '"); });\n'
+                    elif footnote_set == 'popup':
+                        data_name = self.get_tool_data_storage(
+                            '<sup>' + \
+                                '<a fn_target="' + fn + '" id="' + rfn + '" href="javascript:void(0);">(' + foot_v_name + ')</a>' + \
+                            '</sup>' + \
+                            '<span class="opennamu_spead_footnote" id="' + rfn + '_load" style="display: none;"></span>',
+                            '',
+                            footnote_data_org
+                        )
+                        self.render_data_js += 'document.getElementById("' + rfn + '").addEventListener("click", function() { opennamu_do_footnote_spread("' + rfn + '", "' + fn + '"); });\n'
+                    elif footnote_set == 'popover':
+                        data_name = self.get_tool_data_storage(
+                            '<span id="' + rfn + '_over">' + \
+                                '<sup>' + \
+                                    '<a fn_target="' + fn + '" id="' + rfn + '" href="javascript:void(0);">(' + foot_v_name + ')</a>' + \
+                                '</sup>' + \
+                                '<span class="opennamu_popup_footnote" id="' + rfn + '_load" style="display: none;"></span>' + \
+                            '</span>',
+                            '',
+                            footnote_data_org
+                        )
+                        self.render_data_js += 'document.getElementById("' + rfn + '_over").addEventListener("mouseenter", function() { opennamu_do_footnote_popover("' + rfn + '", "' + fn + '"); });\n'
+                        self.render_data_js += 'document.getElementById("' + rfn + '_over").addEventListener("mouseleave", function() { opennamu_do_footnote_popover("' + rfn + '", "' + fn + '"); });\n'
+                    else:
+                        data_name = self.get_tool_data_storage('<sup><a fn_target="' + fn + '" id="' + rfn + '" href="#' + fn + '">(' + foot_v_name + ')</a></sup>', '', footnote_data_org)
 
-                        self.render_data = re.sub(footnote_regex, '<' + data_name + '></' + data_name + '>', self.render_data, 1)
+                    self.render_data = re.sub(footnote_regex, '<' + data_name + '></' + data_name + '>', self.render_data, 1)
 
             footnote_count_all -= 1
 
@@ -1484,7 +1526,7 @@ class class_do_render_namumark:
                         data_revert = re.sub(r'\n$', '', data_revert)
                         data_revert = re.sub(r'&amp;nbsp;', '&nbsp;', data_revert)
 
-                        self.render_data_js += 'opennamu_render_html("' + self.doc_include + 'opennamu_wiki_' + str(html_count) + '");\n'
+                        self.render_data_js += 'opennamu_do_render_html("' + self.doc_include + 'opennamu_wiki_' + str(html_count) + '");\n'
 
                         data_name = self.get_tool_data_storage('<span id="' + self.doc_include + 'opennamu_wiki_' + str(html_count) + '">' + data_revert, '</span>', middle_data_org)
                         html_count += 1
@@ -1750,7 +1792,6 @@ class class_do_render_namumark:
                 data_name = self.get_tool_data_storage(self.data_category, '</div>', '')
 
                 category_set_data = get_main_skin_set(self.curs, self.flask_session, 'main_css_category_set', self.ip)
-
                 if category_set_data == 'bottom':
                     if re.search(r'<footnote_category>', self.render_data):
                         self.render_data = re.sub(r'<footnote_category>', '<hr><' + data_name + '></' + data_name + '>', self.render_data, 1)
@@ -1853,7 +1894,7 @@ class class_do_render_namumark:
         def do_render_last_footnote(match):
             match = match.group(1)
 
-            find_regex = re.compile('<footnote_title target="' + match + '">((?:(?!<footnote_title|<\/footnote_title>).)*)<\/footnote_title>')
+            find_regex = re.compile('<footnote_title id="' + match + '_title">((?:(?!<footnote_title|<\/footnote_title>).)*)<\/footnote_title>')
             find_data = re.search(find_regex, self.render_data)
             if find_data:
                 find_data = find_data.group(1)

route/user_setting_skin_set_main.py

@@ -28,7 +28,8 @@ def user_setting_skin_set_main_set_list():
             ['default', load_lang('default')],
             ['normal', load_lang('normal')],
             ['spread', load_lang('spread')],
-            ['popup', load_lang('popup')]
+            ['popup', load_lang('popup') + ' (' + load_lang('not_working') + ')'],
+            ['popover', load_lang('popover')]
         ], 'main_css_image_set' : [
             ['default', load_lang('default')],
             ['normal', load_lang('normal')],

version.json

@@ -1,6 +1,6 @@
 {
     "beta" : {
-        "r_ver" : "v3.4.6-RC3-dev155",
+        "r_ver" : "v3.4.6-RC3-dev156",
         "c_ver" : "3500361",
         "s_ver" : "3500111"
     }

views/main_css/css/main.css

@@ -213,6 +213,24 @@ pre {
     border: 1px solid #cecece;
 }
 
+.opennamu_popup_footnote {
+    position: absolute;
+    
+    max-width: 50%;
+
+    padding: 10px;
+
+    background-color: #efefef;
+    
+    border: 1px solid #cecece;
+}
+
+@media ( max-width: 768px ) {
+    .opennamu_popup_footnote {
+        max-width: 100%;
+    }
+}
+
 hr {
     border: 0;
     border-top: 1px solid gainsboro;

views/main_css/js/route/render.js

@@ -18,8 +18,7 @@ function opennamu_heading_folding(data, element = '') {
     }
 }
 
-function opennamu_render_html(name = '') {
-    console.log(name);
+function opennamu_do_render_html(name = '') {
     if(document.getElementById(name)) {
         let data = document.getElementById(name).innerHTML;
 
@@ -118,4 +117,43 @@ function opennamu_render_html(name = '') {
 
         document.getElementById(name).innerHTML = data;
     }
+}
+
+function opennamu_do_footnote_spread(set_name, load_name) {
+    if(document.getElementById(set_name + '_load').style.display === 'none') {
+        console.log(set_name, load_name);
+        document.getElementById(set_name).title = '';
+        document.getElementById(set_name + '_load').innerHTML = '<a href="#' + load_name + '">(Go)</a> ' + document.getElementById(load_name + '_title').innerHTML;
+        document.getElementById(set_name + '_load').style.display = "inline-block";
+    } else {
+        document.getElementById(set_name + '_load').style.display = "none";
+    }
+}
+
+function opennamu_do_footnote_popover(set_name, load_name) {
+    if(document.getElementById(set_name + '_load').style.display === 'none') {
+        console.log(set_name, load_name);
+        document.getElementById(set_name).title = '';
+        document.getElementById(set_name + '_load').innerHTML = '<a href="#' + load_name + '">(Go)</a> ' + document.getElementById(load_name + '_title').innerHTML;
+        document.getElementById(set_name + '_load').style.display = "inline-block";
+
+        let width = document.getElementById(set_name + '_load').clientWidth;
+        let screen_width = screen.availWidth;
+        let left = document.getElementById(set_name).getBoundingClientRect().left;
+        let top = document.getElementById(set_name).getBoundingClientRect().top;
+        console.log(width, screen_width, left);
+        console.log(screen_width - (left + width));
+        if(screen_width - (left + width) < 30) {
+            console.log("test");
+            if(left > 350) {
+                document.getElementById(set_name + '_load').style.left = String(left - 300) + "px";
+            } else {
+                document.getElementById(set_name + '_load').style.left = "0px";
+            }
+
+            document.getElementById(set_name + '_load').style.top = String(top + 20) + "px";
+        }
+    } else {
+        document.getElementById(set_name + '_load').style.display = "none";
+    }
 }