first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.13/front/js/utils/utils.js

@@ -0,0 +1,340 @@
+class Utils {
+    constructor() {
+    }
+
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return decodeURI(r[2]);
+        return null;
+    }
+
+    footer() {
+        var footerList = [
+            {title: '首页', img: 'icon-home', isActve: true, url: './index.html'},
+            {title: '机构', img: 'icon-jigou', isActve: false, url: './mechanism.html'},
+            {title: '模特', img: 'icon-me', isActve: false, url: './model.html'},
+            {title: '我的', img: 'icon-wo', isActve: true, url: './mes.html'},
+        ];
+
+        // 当前访问的页面地址
+        var currentUrl = location.href.match(/page\/([\s\S]*?).html/)[1]
+
+        $("body").append(`
+      <ul class="footer">
+        ${
+            footerList.map((v, i) => {
+                return `<li class="${v.url.includes(currentUrl) ? 'footer_active' : ''}">
+                <a href="${v.url}">
+                  <i class="iconfont ${v.img}"></i>
+                  <p>${v.title}</p>
+                </a>
+            </li>`
+            }).toString().replaceAll(",", "")
+        }
+      </ul>
+    `)
+    }
+
+
+    item(father, data) {
+        var li = ""
+        data.forEach((v, i) => {
+            li += `
+         <li>
+          <div class="newest_img">
+            <a href="./info.html?id=${v.id}&img=${v.preview}">
+              <img src="${v.preview}" alt="">
+              <span>${v.total}</span>
+            </a>
+          </div>
+          <div class="newest_text">
+            <div class="t">${v.title}</div>
+            ${
+                v.user.length != 0
+                    ? `<div class="source">${v.user}</div>`
+                    : ''
+            }
+            
+            ${
+                v.source.length != 0
+                    ? `<div class="source">${v.source}</div>`
+                    : ''
+            }
+          </div>
+         
+          <div class="tags">
+           ${
+                v.tags.map((item) => {
+                    return ` <a class="tags_item" href="mechanism_info.html?id=${item.id}&type=tags&t=${item.title}">${item.title}</a>`
+                }).toString().replaceAll(",", "")
+            }
+          </div>
+        </li>
+      `
+        })
+        $(father).append(li)
+
+    }
+
+    pHeader(title, right_action = "") {
+        $("body").prepend(`
+        <div class="pub_header themeColor padding_16">
+           <div class="back">
+             <i class="iconfont icon-back1"></i>
+             <span>${title}</span>
+           </div>
+      
+           <div class="right_action">
+              ${right_action}
+           </div>
+      
+         </div>
+    `);
+
+        $(".pub_header .icon-back1").click(() => history.back())
+
+        if ($(".icon-home").length != 0) {
+            $(".icon-home").click(() => location.href = "./index.html")
+        }
+    }
+
+    initPhotoSwipeFromDOM(gallerySelector) {
+        // parse slide data (url, title, size ...) from DOM elements
+        // (children of gallerySelector)
+        var parseThumbnailElements = function (el) {
+            var thumbElements = el.childNodes,
+                numNodes = thumbElements.length,
+                items = [],
+                figureEl,
+                linkEl,
+                size,
+                item;
+
+            for (var i = 0; i < numNodes; i++) {
+
+                figureEl = thumbElements[i]; // <figure> element
+
+                // include only element nodes
+                if (figureEl.nodeType !== 1) {
+                    continue;
+                }
+
+                linkEl = figureEl.children[0]; // <a> element
+
+                size = linkEl.getAttribute('data-size').split('x');
+
+                // create slide object
+                item = {
+                    src: linkEl.getAttribute('href'),
+                    w: parseInt(size[0], 10),
+                    h: parseInt(size[1], 10)
+                };
+
+
+                if (figureEl.children.length > 1) {
+                    // <figcaption> content
+                    item.title = figureEl.children[1].innerHTML;
+                }
+
+                if (linkEl.children.length > 0) {
+                    // <img> thumbnail element, retrieving thumbnail url
+                    item.msrc = linkEl.children[0].getAttribute('src');
+                }
+
+                item.el = figureEl; // save link to element for getThumbBoundsFn
+                items.push(item);
+            }
+
+            return items;
+        };
+
+        // find nearest parent element
+        var closest = function closest(el, fn) {
+            return el && (fn(el) ? el : closest(el.parentNode, fn));
+        };
+
+        // triggers when user clicks on thumbnail
+        var onThumbnailsClick = function (e) {
+            e = e || window.event;
+            e.preventDefault ? e.preventDefault() : e.returnValue = false;
+
+            var eTarget = e.target || e.srcElement;
+
+            // find root element of slide
+            var clickedListItem = closest(eTarget, function (el) {
+                return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
+            });
+
+            if (!clickedListItem) {
+                return;
+            }
+
+            // find index of clicked item by looping through all child nodes
+            // alternatively, you may define index via data- attribute
+            var clickedGallery = clickedListItem.parentNode,
+                childNodes = clickedListItem.parentNode.childNodes,
+                numChildNodes = childNodes.length,
+                nodeIndex = 0,
+                index;
+
+            for (var i = 0; i < numChildNodes; i++) {
+                if (childNodes[i].nodeType !== 1) {
+                    continue;
+                }
+
+                if (childNodes[i] === clickedListItem) {
+                    index = nodeIndex;
+                    break;
+                }
+                nodeIndex++;
+            }
+
+
+            if (index >= 0) {
+                // open PhotoSwipe if valid index found
+                openPhotoSwipe(index, clickedGallery);
+            }
+            return false;
+        };
+
+        // parse picture index and gallery index from URL (#&pid=1&gid=2)
+        var photoswipeParseHash = function () {
+            var hash = window.location.hash.substring(1),
+                params = {};
+
+            if (hash.length < 5) {
+                return params;
+            }
+
+            var vars = hash.split('&');
+            for (var i = 0; i < vars.length; i++) {
+                if (!vars[i]) {
+                    continue;
+                }
+                var pair = vars[i].split('=');
+                if (pair.length < 2) {
+                    continue;
+                }
+                params[pair[0]] = pair[1];
+            }
+
+            if (params.gid) {
+                params.gid = parseInt(params.gid, 10);
+            }
+
+            return params;
+        };
+
+        var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
+            var pswpElement = document.querySelectorAll('.pswp')[0],
+                gallery,
+                options,
+                items;
+
+            items = parseThumbnailElements(galleryElement);
+            // define options (if needed)
+            options = {
+
+                // define gallery index (for URL)
+                galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+
+                getThumbBoundsFn: function (index) {
+                    console.log(items[index])
+                    // See Options -> getThumbBoundsFn section of documentation for more info
+                    var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+                        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+                        rect = thumbnail.getBoundingClientRect();
+
+                    return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
+                }
+
+            };
+
+            // PhotoSwipe opened from URL
+            if (fromURL) {
+                if (options.galleryPIDs) {
+                    // parse real index when custom PIDs are used
+                    // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
+                    for (var j = 0; j < items.length; j++) {
+                        if (items[j].pid == index) {
+                            options.index = j;
+                            break;
+                        }
+                    }
+                } else {
+                    // in URL indexes start from 1
+                    options.index = parseInt(index, 10) - 1;
+                }
+            } else {
+                options.index = parseInt(index, 10);
+            }
+
+            // exit if index not found
+            if (isNaN(options.index)) {
+                return;
+            }
+
+            if (disableAnimation) {
+                options.showAnimationDuration = 0;
+            }
+
+            // Pass data to PhotoSwipe and initialize it
+            gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+            gallery.init();
+        };
+
+        // loop through all gallery elements and bind events
+        var galleryElements = document.querySelectorAll(gallerySelector);
+
+        for (var i = 0, l = galleryElements.length; i < l; i++) {
+            galleryElements[i].setAttribute('data-pswp-uid', i + 1);
+            galleryElements[i].onclick = onThumbnailsClick;
+        }
+
+        // Parse URL and open gallery if it contains #&pid=3&gid=1
+        var hashData = photoswipeParseHash();
+        if (hashData.pid && hashData.gid) {
+            openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
+        }
+    }
+
+    get_storage(name) {
+        return JSON.parse(localStorage.getItem(name))
+    }
+
+    set_storage(name, value) {
+        localStorage.setItem(name, JSON.stringify(value))
+    }
+
+
+    modellist(father, data) {
+        console.log(data)
+        var li = ""
+        data.forEach((v, i) => {
+            li += `
+      <li class="mo_item">
+          <a href="./model_info.html?id=${v.id}&t=${v.title}">
+           <div class="mo_top">
+               <img src="${v.preview}" alt="">
+              ${v.total.length != 0 ? `<span>${v.total}</span>` : ``}
+           </div>
+            <p>${v.title}</p>
+           </a>
+        </li>
+      `
+
+        })
+        $(father).append(li)
+    }
+
+
+}
+
+var {
+    footer, query,
+    item, pHeader,
+    initPhotoSwipeFromDOM, get_storage,
+    set_storage,
+    modellist
+} = new Utils();