微信界面

dist/bower.json

@@ -31,6 +31,6 @@
     "jquery": "^3.2.1",
     "ngDraggable": "^0.1.11",
     "bootstrap-material-design": "^4.0.2",
-    "layer": "^3.0.3"
+    "photoswipe": "^4.1.2"
   }
 }

dist/img/js/photo.js

@@ -0,0 +1,340 @@
+document.writeln("<!-- Root element of PhotoSwipe. Must have class pswp. -->");
+document.writeln("<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">");
+document.writeln("");
+document.writeln("    <!-- Background of PhotoSwipe.");
+document.writeln("         It\'s a separate element as animating opacity is faster than rgba(). -->");
+document.writeln("    <div class=\"pswp__bg\"><\/div>");
+document.writeln("");
+document.writeln("    <!-- Slides wrapper with overflow:hidden. -->");
+document.writeln("    <div class=\"pswp__scroll-wrap\">");
+document.writeln("");
+document.writeln("        <!-- Container that holds slides.");
+document.writeln("            PhotoSwipe keeps only 3 of them in the DOM to save memory.");
+document.writeln("            Don\'t modify these 3 pswp__item elements, data is added later on. -->");
+document.writeln("        <div class=\"pswp__container\">");
+document.writeln("            <div class=\"pswp__item\"><\/div>");
+document.writeln("            <div class=\"pswp__item\"><\/div>");
+document.writeln("            <div class=\"pswp__item\"><\/div>");
+document.writeln("        <\/div>");
+document.writeln("");
+document.writeln("        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->");
+document.writeln("        <div class=\"pswp__ui pswp__ui--hidden\">");
+document.writeln("");
+document.writeln("            <div class=\"pswp__top-bar\">");
+document.writeln("");
+document.writeln("                <!--  Controls are self-explanatory. Order can be changed. -->");
+document.writeln("");
+document.writeln("                <div class=\"pswp__counter\"><\/div>");
+document.writeln("");
+document.writeln("                <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"><\/button>");
+document.writeln("");
+document.writeln("                <button class=\"pswp__button pswp__button--share\" title=\"Share\"><\/button>");
+document.writeln("");
+document.writeln("                <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"><\/button>");
+document.writeln("");
+document.writeln("                <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in\/out\"><\/button>");
+document.writeln("");
+document.writeln("                <!-- Preloader demo http:\/\/codepen.io\/dimsemenov\/pen\/yyBWoR -->");
+document.writeln("                <!-- element will get class pswp__preloader--active when preloader is running -->");
+document.writeln("                <div class=\"pswp__preloader\">");
+document.writeln("                    <div class=\"pswp__preloader__icn\">");
+document.writeln("                        <div class=\"pswp__preloader__cut\">");
+document.writeln("                            <div class=\"pswp__preloader__donut\"><\/div>");
+document.writeln("                        <\/div>");
+document.writeln("                    <\/div>");
+document.writeln("                <\/div>");
+document.writeln("            <\/div>");
+document.writeln("");
+document.writeln("            <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">");
+document.writeln("                <div class=\"pswp__share-tooltip\"><\/div>");
+document.writeln("            <\/div>");
+document.writeln("");
+document.writeln("            <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">");
+document.writeln("            <\/button>");
+document.writeln("");
+document.writeln("            <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">");
+document.writeln("            <\/button>");
+document.writeln("");
+document.writeln("            <div class=\"pswp__caption\">");
+document.writeln("                <div class=\"pswp__caption__center\"><\/div>");
+document.writeln("            <\/div>");
+document.writeln("");
+document.writeln("        <\/div>");
+document.writeln("");
+document.writeln("    <\/div>");
+document.writeln("");
+document.writeln("<\/div>");
+
+
+(function() {
+
+        var initPhotoSwipeFromDOM = function(gallerySelector) {
+
+            var parseThumbnailElements = function(el) {
+                var thumbElements = el.childNodes,
+                        numNodes = thumbElements.length,
+                        items = [],
+                        el,
+                        childElements,
+                        thumbnailEl,
+                        size,
+                        item;
+
+                for(var i = 0; i < numNodes; i++) {
+                    el = thumbElements[i];
+
+                    // include only element nodes
+                    if(el.nodeType !== 1) {
+                        continue;
+                    }
+
+                    childElements = el.children;
+
+                    size = el.getAttribute('data-size').split('x');
+
+                    // create slide object
+                    item = {
+                        src: el.getAttribute('href'),
+                        w: parseInt(size[0], 10),
+                        h: parseInt(size[1], 10),
+                        author: el.getAttribute('data-author')
+                    };
+
+                    item.el = el; // save link to element for getThumbBoundsFn
+
+                    if(childElements.length > 0) {
+                        item.msrc = childElements[0].getAttribute('src'); // thumbnail url
+                        if(childElements.length > 1) {
+                            item.title = childElements[1].innerHTML; // caption (contents of figure)
+                        }
+                    }
+
+
+                    var mediumSrc = el.getAttribute('data-med');
+                    if(mediumSrc) {
+                        size = el.getAttribute('data-med-size').split('x');
+                        // "medium-sized" image
+                        item.m = {
+                            src: mediumSrc,
+                            w: parseInt(size[0], 10),
+                            h: parseInt(size[1], 10)
+                        };
+                    }
+                    // original image
+                    item.o = {
+                        src: item.src,
+                        w: item.w,
+                        h: item.h
+                    };
+
+                    items.push(item);
+                }
+
+                return items;
+            };
+
+            // find nearest parent element
+            var closest = function closest(el, fn) {
+                return el && ( fn(el) ? el : closest(el.parentNode, fn) );
+            };
+
+            var onThumbnailsClick = function(e) {
+                e = e || window.event;
+                e.preventDefault ? e.preventDefault() : e.returnValue = false;
+
+                var eTarget = e.target || e.srcElement;
+
+                var clickedListItem = closest(eTarget, function(el) {
+                    return el.tagName === 'A';
+                });
+
+                if(!clickedListItem) {
+                    return;
+                }
+
+                var clickedGallery = clickedListItem.parentNode;
+
+                var 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) {
+                    openPhotoSwipe( index, clickedGallery );
+                }
+                return false;
+            };
+
+            var photoswipeParseHash = function() {
+                var hash = window.location.hash.substring(1),
+                        params = {};
+
+                if(hash.length < 5) { // pid=1
+                    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 = {
+
+                    galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+
+                    getThumbBoundsFn: function(index) {
+                        // See Options->getThumbBoundsFn section of docs for more info
+                        var thumbnail = items[index].el.children[0],
+                                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+                                rect = thumbnail.getBoundingClientRect();
+
+                        return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+                    },
+
+                    addCaptionHTMLFn: function(item, captionEl, isFake) {
+                        if(!item.title) {
+                            captionEl.children[0].innerText = '';
+                            return false;
+                        }
+                        captionEl.children[0].innerHTML = item.title +  '<br/><small>Photo: ' + item.author + '</small>';
+                        return true;
+                    }
+
+                };
+
+                // options for control bar
+                options.shareEl = false;
+                options.fullscreenEl = false;
+
+                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 {
+                        options.index = parseInt(index, 10) - 1;
+                    }
+                } else {
+                    options.index = parseInt(index, 10);
+                }
+
+                // exit if index not found
+                if( isNaN(options.index) ) {
+                    return;
+                }
+
+
+
+                // Pass data to PhotoSwipe and initialize it
+                gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+
+                // see: http://photoswipe.com/documentation/responsive-images.html
+                var realViewportWidth,
+                        useLargeImages = false,
+                        firstResize = true,
+                        imageSrcWillChange;
+
+                gallery.listen('beforeResize', function() {
+
+                    var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
+                    dpiRatio = Math.min(dpiRatio, 2.5);
+                    realViewportWidth = gallery.viewportSize.x * dpiRatio;
+
+
+                    if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
+                        if(!useLargeImages) {
+                            useLargeImages = true;
+                            imageSrcWillChange = true;
+                        }
+
+                    } else {
+                        if(useLargeImages) {
+                            useLargeImages = false;
+                            imageSrcWillChange = true;
+                        }
+                    }
+
+                    if(imageSrcWillChange && !firstResize) {
+                        gallery.invalidateCurrItems();
+                    }
+
+                    if(firstResize) {
+                        firstResize = false;
+                    }
+
+                    imageSrcWillChange = false;
+
+                });
+
+                gallery.listen('gettingData', function(index, item) {
+                    if( useLargeImages ) {
+                        item.src = item.o.src;
+                        item.w = item.o.w;
+                        item.h = item.o.h;
+                    } else {
+                        item.src = item.m.src;
+                        item.w = item.m.w;
+                        item.h = item.m.h;
+                    }
+                });
+
+                gallery.init();
+            };
+
+            // select all gallery elements
+            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 );
+            }
+        };
+
+        initPhotoSwipeFromDOM('.demo-gallery');
+
+    })();

dist/web12345/index.html

@@ -4,29 +4,34 @@
 <head>
     <title>12345政务服务</title>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=no">
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
     <!-- 新 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
-    <link rel="stylesheet" href="app-1769fda85b.css">
+    <link rel="stylesheet prefetch" href="../bower_components/photoswipe/dist/photoswipe.css">
+    <link rel="stylesheet prefetch" href="../bower_components/photoswipe/dist/default-skin/default-skin.css">
+    <link rel="stylesheet" href="app-d15814b4be.css">
 
     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
     <!--<script src="js/jquery.min.js"></script>-->
     <script src="http://webapi.amap.com/maps?v=1.3&key=d7455920303550a45cb4e1a27bdbfc86"></script>
     <script src="../bower_components/lodash/dist/lodash.js"></script>
     <script src="../bower_components/jquery/dist/jquery.min.js"></script>
-    <script src="../bower_components/layer/src/layer.js"></script>
     <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="../bower_components/angular/angular.js"></script>
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
     <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.min.js"></script>
+    <script src="../bower_components/photoswipe/dist/photoswipe.js"></script>
+    <script src="../bower_components/photoswipe/dist/photoswipe-ui-default.min.js"></script>
+    <script src="../img/js/photo.js"></script>
 
-    <script src="app-bcf26baade.js"></script>
+    <script src="app-d290aec525.js"></script>
 </head>
 
 <body ng-app="app">
     <ui-view></ui-view>
+
 </body>
 
 </html>

web12345/src/html/index.html

@@ -4,10 +4,12 @@
 <head>
     <title>12345政务服务</title>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=no">
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
     <!-- 新 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
+    <link rel="stylesheet prefetch" href="../bower_components/photoswipe/dist/photoswipe.css">
+    <link rel="stylesheet prefetch" href="../bower_components/photoswipe/dist/default-skin/default-skin.css">
     <link rel="stylesheet" href="app.css">
 
     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
@@ -15,18 +17,21 @@
     <script src="http://webapi.amap.com/maps?v=1.3&key=d7455920303550a45cb4e1a27bdbfc86"></script>
     <script src="../bower_components/lodash/dist/lodash.js"></script>
     <script src="../bower_components/jquery/dist/jquery.min.js"></script>
-    <script src="../bower_components/layer/src/layer.js"></script>
     <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="../bower_components/angular/angular.js"></script>
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
     <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.min.js"></script>
+    <script src="../bower_components/photoswipe/dist/photoswipe.js"></script>
+    <script src="../bower_components/photoswipe/dist/photoswipe-ui-default.min.js"></script>
+    <script src="../img/js/photo.js"></script>
 
     <script src="app.js"></script>
 </head>
 
 <body ng-app="app">
     <ui-view></ui-view>
+
 </body>
 
 </html>

web12345/src/js/controller/webController.js

@@ -1,22 +1,43 @@
 'use strict';
 
 angular.module('app').controller('WebController', ['$scope', '$timeout', function($scope, $timeout) {
-
     //lxtalkClient.Invoke('{FB60F992-A0FD-47B3-AAA7-E80DF209C5A4}', '_Register', '', $scope);
     $scope.imgView = function(event) {
         var img = $(event.target);
         console.log(img);
-        $scope.imgUrl = img[0].currentSrc;
+        $scope.imgUrl = img[0].src;
         $(".image-big").remove();
-        $(".image-view").append('<img class="image-big" src="' + $scope.imgUrl + '" onClick="angular.element(this).scope().imgHide()" data-dismiss="modal">');
+        $(".image-view").append('<img class="image-big" src="' + $scope.imgUrl + '" data-dismiss="modal">');
     };
 
-    $scope.delImg = function() {
-        angular.element(".viewModal").removeClass("in");
-        $(".images").remove();
+    $scope.delSure = function($event) {
+        $scope.sure = false;
+        $scope.del = true;
+        var activeClick = $($event.target);
+        console.log(activeClick);
+        var imgUrl = activeClick[0].parentElement.previousElementSibling.firstElementChild.src;
+        var imgs = $(".images");
+        $(".image-big").remove();
+        console.log(imgs);
+        for (var i = 0, len = imgs.length; i < len; i++) {
+            if ($(".images")[i].firstElementChild.src == imgUrl) {
+                $(".images")[i].remove();
+                var imgNum = $("#imgpreview").find('img').length;
+                if (imgNum == 2) {
+                    angular.element(".images").removeClass("three");
+                    angular.element(".images").addClass("two");
+                } else if (imgNum = 1) {
+                    angular.element(".images").removeClass("two");
+                    angular.element(".images").addClass("one");
+                }
+                return;
+            }
+        };
     };
 
-    $scope.imgHide = function() {};
+    $scope.delImg = function() {
+        $scope.sure = true;
+    };
 
     $scope.actived = function($event) {
         var activeClick = $($event.target);

web12345/src/less/app.main.less

@@ -218,23 +218,22 @@ body{
             #imgpreview {
                 float: right;
                 margin-right: 10%;
-                margin-left: 2px;
                 padding: 0px;
                 max-width: 65%;
                 white-space: normal;
                 .thumbnail {
                     display: inline-block;
-                    margin: 2px;
+                    margin: 2px 0px;
                     padding: 3px;
                 }
                 .one {
-                    width: 98%;
+                    width: 100%;
                 }
                 .two {
-                    width: 47.5%;
+                    width: 50%;
                 }
                 .three {
-                    width: 31%;
+                    width: 33.3%;
                 }
             }
             >input {
@@ -274,15 +273,16 @@ body{
             }
         }
         .viewModal {
-            top: 6%;
+            top: 0%;
             margin: 0px;
             padding: 0px;
+            padding-top: 10%;
             padding-right: 0px !important;
             .thumbnail {
                 margin: 0%;
                 text-align: center;
                 width: 100%;
-                .images {
+                >img {
                     width: 100%;
                 }
             }
@@ -303,20 +303,20 @@ body{
                     color: #ddd;
                 }
             }
-        }
-        .okModal .modal-dialog {
-            top: 200px;
-            width: 70%;
-            margin: 0px 15%;
-            .modal-header {
-                height: 40px;
-                text-align: center;
-                font-weight: normal;
-                border: none;
-                font-size: 14px;
-            }
-            .modal-footer {
+            .modal-info {
+                position: absolute;
+                top: 160px;
+                width: 60%;
+                margin: 0px 20%;
+                padding: 5%;
                 text-align: center;
+                border: 1px solid #888;
+                background-color: #FFF;
+                box-shadow:1px 1px 1px #444;
+                border-radius: 3px;
+                >p {
+                    font-size: 15px;
+                }
                 >button {
                     margin: 10px 5px;
                     height: 24px;

web12345/src/templates/webChat-5.html

@@ -27,22 +27,13 @@
         <div class="button-bottom">
             <button type="button" class="btn btn-default" ng-click="pageChange()">提交</button>
         </div>
-        <div class="modal fade viewModal" id="viewModal" tabindex="-2" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
-            <button type="button" data-toggle="modal" data-target="#okModal" class="close" aria-hidden="true"><span class="glyphicon glyphicon-trash"></span></button>
+        <div class="modal fade viewModal" id="viewModal" tabindex="-2" data-backdrop="static" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
+            <button type="button" class="close" aria-hidden="true" ng-click="delImg()"><span class="glyphicon glyphicon-trash"></span></button>
             <a class="thumbnail image-view"></a>
-        </div>
-        <!--OK-->
-        <div class="modal fade okModal" id="okModal" tabindex="-2" role="dialog" aria-labelledby="okModalLabel" aria-hidden="true">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <p id="titleB">确定删除？</p>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="delImg()">确定</button>
-                        <button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
-                    </div>
-                </div>
+            <div class="modal-info" ng-show="sure">
+                <p>确定删除？</p>
+                <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="delSure($event)">确定</button>
+                <button type="button" class="btn btn-success" ng-click="sure=flase">取消</button>
             </div>
         </div>
     </div>