diff --git a/static/js/lg-utils.js b/static/js/lg-utils.js deleted file mode 100644 index d19d1b9..0000000 --- a/static/js/lg-utils.js +++ /dev/null @@ -1,136 +0,0 @@ - -var utils = { - getAttribute: function(el, label) { - return el[label]; - }, - - setAttribute: function(el, label, value) { - el[label] = value; - }, - wrap: function(el, className) { - if (!el) { - return; - } - - var wrapper = document.createElement('div'); - wrapper.className = className; - el.parentNode.insertBefore(wrapper, el); - el.parentNode.removeChild(el); - wrapper.appendChild(el); - }, - - addClass: function(el, className) { - if (!el) { - return; - } - - if (el.classList) { - el.classList.add(className); - } else { - el.className += ' ' + className; - } - }, - - removeClass: function(el, className) { - if (!el) { - return; - } - - if (el.classList) { - el.classList.remove(className); - } else { - el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); - } - }, - - hasClass: function(el, className) { - if (el.classList) { - return el.classList.contains(className); - } else { - return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); - } - }, - - // ex Transform - // ex TransitionTimingFunction - setVendor: function(el, property, value) { - if (!el) { - return; - } - - el.style[property.charAt(0).toLowerCase() + property.slice(1)] = value; - el.style['webkit' + property] = value; - el.style['moz' + property] = value; - el.style['ms' + property] = value; - el.style['o' + property] = value; - }, - - trigger: function(el, event, detail = null) { - if (!el) { - return; - } - - let customEvent = new CustomEvent(event, { - detail: detail - }); - el.dispatchEvent(customEvent); - }, - - Listener: { - uid: 0 - }, - on: function(el, events, fn) { - if (!el) { - return; - } - - events.split(' ').forEach(event => { - var _id = this.getAttribute(el, 'lg-event-uid') || ''; - utils.Listener.uid++; - _id += '&' + utils.Listener.uid; - this.setAttribute(el, 'lg-event-uid', _id); - utils.Listener[event + utils.Listener.uid] = fn; - el.addEventListener(event.split('.')[0], fn, false); - }); - }, - - off: function(el, event) { - if (!el) { - return; - } - - var _id = this.getAttribute(el, 'lg-event-uid'); - if (_id) { - _id = _id.split('&'); - for (var i = 0; i < _id.length; i++) { - if (_id[i]) { - var _event = event + _id[i]; - if (_event.substring(0, 1) === '.') { - for (var key in utils.Listener) { - if (utils.Listener.hasOwnProperty(key)) { - if (key.split('.').indexOf(_event.split('.')[1]) > -1) { - el.removeEventListener(key.split('.')[0], utils.Listener[key]); - this.setAttribute(el, 'lg-event-uid', this.getAttribute(el, 'lg-event-uid').replace('&' + _id[i], '')); - delete utils.Listener[key]; - } - } - } - } else { - el.removeEventListener(_event.split('.')[0], utils.Listener[_event]); - this.setAttribute(el, 'lg-event-uid', this.getAttribute(el, 'lg-event-uid').replace('&' + _id[i], '')); - delete utils.Listener[_event]; - } - } - } - } - }, - - param: function(obj) { - return Object.keys(obj).map(function(k) { - return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]); - }).join('&'); - } -}; - -export -default utils; diff --git a/static/js/my.js b/static/js/my.js index 1c89f65..bf15052 100644 --- a/static/js/my.js +++ b/static/js/my.js @@ -5,6 +5,8 @@ function httpGet(theUrl) xmlHttp.send( null ); return JSON.parse(xmlHttp.responseText); } + + function onchange(e){ var val = e.target.value; console.log(val); @@ -20,6 +22,8 @@ function onchange(e){ tagsac.appendChild(add_elem); }); } + + function search(e){ if (e.keyCode === 13) { var tagsac = document.getElementById("myInput"); @@ -39,11 +43,7 @@ function search(e){ imgc.innerHTML = ''; resp_res.forEach(function(item, i, resp_res) { var add_elem_a = document.createElement("button"); - if (item["type"] == "i") { - add_elem_a.setAttribute("onclick", "see_full_img('"+item["url_full"]+"', '"+item["id"]+"', '"+item["type"]+"')"); - } else { - add_elem_a.setAttribute("onclick", "see_full_vid('"+item["url_full"]+"', '"+item["id"]+"', '"+item["type"]+"')"); - } + add_elem_a.setAttribute("onclick", "see_full('"+item["url_full"]+"', '"+item["id"]+"', '"+item["type"]+"')"); add_elem_a.setAttribute("id", item["id"]); add_elem_a.setAttribute("class", "buttimg"); var add_elem_img = document.createElement("img"); @@ -57,11 +57,9 @@ function search(e){ } } -function see_full_vid(url, id_button, type){ - var fulldata = document.getElementById("fulldata"); - if (fulldata != null){ - fulldata.remove(); - } + +function see_full(url, id_button, type){ + close_full(); var add_elem_br = document.createElement("br"); var add_elem_p = document.createElement("p"); add_elem_p.setAttribute("class", "fullimagep"); @@ -75,53 +73,34 @@ function see_full_vid(url, id_button, type){ var add_elem_ai = document.createElement("a"); add_elem_ai.setAttribute("href", url); add_elem_ai.setAttribute("target", "_blank"); - var add_elem_img = document.createElement("video"); - add_elem_img.setAttribute("src", url); - add_elem_img.setAttribute("class", "fullimage"); - add_elem_img.controls = true; - add_elem_ai.append(add_elem_img) + if (type == "v"){ + var add_elem_data = document.createElement("video"); + add_elem_data.setAttribute("src", url); + add_elem_data.setAttribute("class", "fullimage"); + add_elem_data.controls = true; + } else { + var add_elem_data = document.createElement("img"); + add_elem_data.setAttribute("src", url); + add_elem_data.setAttribute("class", "fullimage"); + } + add_elem_ai.append(add_elem_data) add_elem_p.appendChild(add_elem_button); add_elem_p.appendChild(add_elem_br); add_elem_p.appendChild(add_elem_ai); - var targetimg = document.getElementById(id_button); - targetimg.after(add_elem_p) + var targetdata = document.getElementById(id_button); + targetdata.after(add_elem_p) add_elem_a.click(); } -function see_full_img(url, id_button, type){ + +function close_full(){ var fulldata = document.getElementById("fulldata"); if (fulldata != null){ fulldata.remove(); } - var add_elem_br = document.createElement("br"); - var add_elem_p = document.createElement("p"); - add_elem_p.setAttribute("class", "fullimagep"); - add_elem_p.setAttribute("id", "fulldata"); - var add_elem_a = document.createElement("a"); - add_elem_a.setAttribute("href", "#"+id_button); - var add_elem_button = document.createElement("button"); - add_elem_button.textContent = 'CLOSE'; - add_elem_button.setAttribute("class", "buttonclose"); - add_elem_button.setAttribute("onclick", "close_full()"); - var add_elem_ai = document.createElement("a"); - add_elem_ai.setAttribute("href", url); - add_elem_ai.setAttribute("target", "_blank"); - var add_elem_img = document.createElement("img"); - add_elem_img.setAttribute("src", url); - add_elem_img.setAttribute("class", "fullimage"); - add_elem_ai.append(add_elem_img) - add_elem_p.appendChild(add_elem_button); - add_elem_p.appendChild(add_elem_br); - add_elem_p.appendChild(add_elem_ai); - var targetimg = document.getElementById(id_button); - targetimg.after(add_elem_p) - add_elem_a.click(); -} -function close_full(){ - var fulldata = document.getElementById("fulldata"); - fulldata.remove(); } + function main_my(){ var tagBox = document.getElementById("myInput"); tagBox.addEventListener("input", onchange);