Share the Experience 2024

<html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, user-scalable=yes" /> <title>Share the Experience 2024 </title> <meta name="description" content="Share the Experience">  <meta http-equiv="x-ua-compatible" content="ie=edge"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="//www.sharetheexperience.org/a/css/contest/3p/vue-multiselect.min.css"> <link href="//www.sharetheexperience.org/a/css/contest/3p/video-js.css" rel="stylesheet" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link rel="stylesheet" type="text/css" href="//www.sharetheexperience.org/a/css/contest/3p/slick.css" /> <link rel="stylesheet" type="text/css" href="//www.sharetheexperience.org/a/css/contest/3p/slick-theme.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="//www.sharetheexperience.org/a/css/contest/3p/esri-leaflet-geocoder.css"> <link rel="stylesheet" href="//assets.newspark.ca/2/v5/css/leaflet.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://assets.newspark.ca/2/v5/js/vue.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/axios.min.js"></script> <script src="//assets.newspark.ca/2/v5/js/sweetalert.min.js"></script> <script src="//assets.newspark.ca/2/v5/js/moment.min.js"></script> <script src="//assets.newspark.ca/2/v5/js/moment-timezone-with-data.js"></script> <script src="//assets.newspark.ca/2/v5/js/vue-cookies.js"></script> <script src="//assets.newspark.ca/2/v5/js/es6-promise.auto.min.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue-multiselect.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue-router.js"></script> <script src="https://assets.newspark.ca/2/v5/js/video.js"></script> <script src="https://assets.newspark.ca/2/v5/js/vue-videojs.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue-social-sharing.min.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue-easy-lightbox.umd.min.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue-infinite-scroll.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue-flex-waterfall.min.js"></script> <script src="https://assets.newspark.ca/2/v5/js/popper.min.js"></script> <script src="https://assets.newspark.ca/2/v5/js/jquery.min.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/draggable.bundle.js"></script> <script type="text/javascript" src="//assets.newspark.ca/2/v5/js/vue-drag-drop.browser.js"></script> <script type="text/javascript" src="//www.sharetheexperience.org/a/js/contest/3p/slick.min.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue-fullscreen.min.js"></script> <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script> <script src="//www.sharetheexperience.org/a/js/contest/leaflet.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/esri-leaflet.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/esri-leaflet-geocoder.js"></script> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue2-leaflet.min.js"></script> <script> var vhost = 911; var currentUserId = 1; var basePage = 'home'; var defaultType = 'default'; var defaultSort = 'upload desc'; var defaultID = ''; var defaultType = ''; var defaultSort = ''; var defaultID = 0; var mapCenter= L.latLng(36.8356682472,-97.20703125); var moderation='approved'; </script> <style> .text-black { color:#000 !important; } .primaryColor { color:#64873b; } .pageHeaderColor { color:#27256b; } .textColor { color:#000000; } .footerColors { background-color:#000000; color:#feffff } .navBarColors { background-color:#000000; color:#feffff } .sponsorBarColors { background-color:#000000; color:#feffff } .navbarLink { color:#feffff } .headerColors { background-color:#383838; color:#feffff } .copyRight { background-color:#000000; color:#ffffff } .selectedMenu { border-bottom:2px solid #64873b; color:#ff8e00 } .noUnderline { text-decoration:none; } .tagBox:hover { color:#fff !important; background-color:#64873b; } #wrapper { font-size: 1.5rem; text-align: center; box-sizing: border-box; color: #333; #dialog { border: solid 1px #ccc; margin: 10px auto; padding: 20px 30px; display: inline-block; box-shadow: 0 0 4px #ccc; background-color: #FAF8F8; overflow: hidden; position: relative; #form { max-width: 240px; margin: 25px auto 0; input { margin: 0 5px; text-align: center; line-height: 80px; font-size: 50px; border: solid 1px #ccc; box-shadow: 0 0 5px #ccc inset; outline: none; width: 20%; transition: all .2s ease-in-out; border-radius: 3px; &:focus { border-color: purple; box-shadow: 0 0 5px purple inset; } &::selection { background: transparent; } } button { margin: 30px 0 50px; width: 100%; padding: 6px; background-color: #B85FC6; border: none; text-transform: uppercase; } } button { &.close { border: solid 2px; border-radius: 30px; line-height: 19px; font-size: 120%; width: 22px; position: absolute; right: 5px; top: 5px; } } div { position: relative; z-index: 1; } img { position: absolute; bottom: -70px; right: -63px; } } } .stackApp { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .img-container { display: flex; align-items: center; justify-content: center; flex-direction: center; overflow: hidden; margin: 0; object-fit: fill; cursor: pointer; } .img-container img { display: block; margin: 0; width: 100%; height: auto; } .img-container figcaption { margin: 3px 0; text-align: center; } li .nav-item .nav-link .active a::after { border-bottom: 5px solid #5bc0eb; bottom: -10px; content: " "; left: 0; position: absolute; right: 0; } .video_container img.poster { width: 100%; height: auto; padding:2px; position: relative; z-index: 10; } .video-js { width:100%; height:auto; } </style> <script type="text/javascript"> window.fbAsyncInit = function () { FB.init({ appId: '', cookie: true, xfbml: true, oauth: true, version: 'v9.0' }); }; (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); function statusChangeCallback(response) { if (response.status === 'connected') { $.post('/services/json', { method: 'users.getLoggedInUser' }, function (fmResponse) { if (fmResponse.result.id == 1) { FB.api('/me', { fields: 'email' }, function (graphResponse) { if (graphResponse.email) { window.location = '/action/facebooklogin/?redirectUrl=/'; } }); } }); } else if (response.status === 'not_authorized' || response.status === 'unknown') { window.location = '/action/facebooklogin/?redirectUrl=/'; } } // If non fb login but still checking to make sure function logoutUser() { FB.getLoginStatus(function (response) { if (response.status === 'connected') { FB.logout(function (response) { deleteCookie("fblo_" + fbAppId); location.href = '/action/v2/logout?redirectUrl=/home'; }); } else { location.href = '/action/v2/logout?redirectUrl=/home'; } }, true); } function checkLoginState() { FB.getLoginStatus(function (response) { statusChangeCallback(response); }); } </script> </head> <body style="background-position: top center;background-repeat: no-repeat; background-color:#383838; height: auto;background-attachment: fixed;background-size: cover;"> <div id="contestv5" class="m-0 p-0 "> <div class="container m-auto p-0" > <div class="container-fluid headerColors sticky-top"> <div class="row"> <div class="col-12 p-3"> <div class="container"> <div class="row"> <div class="col-12 col-md-4"> <span class="fw-light px-3"><a href="mailto:" class="noUnderline text-white fw-light"></a></span> </div> <div class="col-12 col-md-8 text-end "> <div class="row"> <div class="col"> <span class="fw-light px-3">| <i class="far fa-user "></i> <a href="/login" class="noUnderline text-white fw-light">Login/Register</a></span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container-fluid border-bottom navBarColors p-0 "> <div class="row p-0"> <div class="col-12 p-1 ps-0"> <div class="container ps-0 p-0"> <nav class="navbar navbar-expand-lg "> <div class="container-fluid navbarLink"> <a class="navbar-brand navbar-brand-sm" href="#"><img src="https://assets.newspark.ca/919/2018/employee-logo.png" style="height:50px"></a> <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#contestNavBar" aria-controls="contestNavBar" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars navbarLink"></i> </button> <div class="collapse navbar-collapse navBarColors" id="contestNavBar"> <ul class="navbar-nav me-auto ps-2 mb-2 mb-lg-0 text-uppercase text-muted fw-light"> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/">Home</a> </li> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/prizes">Prizes</a> </li> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/rules">Rules</a> </li> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/categories">Categories</a> </li> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/guidelines">Guidelines</a> </li> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/faq">FAQ</a> </li> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/gallery">Gallery</a> </li> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/spotlights">Spotlights</a> </li> <li class="nav-item"> <a class="nav-link px-3 navbarLink " href="/partners">Partners</a> </li> </ul> <span class="navbar-text text-end"> <form class="d-flex text-end" action="/search" > <input class="form-control form-control-sm me-1" type="search" name="q" placeholder="Search" aria-label="Search"> <button class="btn btn-sm btn-outline-primary" type="submit">Search</button> </form> </span> </div> </div> </nav> </div> </div> </div> </div> <div class="container-fluid border-bottom sponsorBarColors "> <div class="row m-auto"> </div> </div> <div class="container-fluid bannerBackground"> <div class="row p-0"> <div class="col-12 p-0"> <img src="https://assets.newspark.ca/911/Contests/SharetheExperience2024/2024_amateur photo contest_CLOSED.png" class="w-100 img-fluid"/> </div> </div> </div> </div> <div class="container p-2 m-auto bg-white" > <div class="container-fluid"> <div class="row"> <div class="col-12 col-md-9 text-center"> <div class="row m-auto w-75"> <div class="col-12 col-md h5 p-0 text-center" @click.prevent="selectedOption=0"> <a href="#" @click.prevent="setHomeTab('default','upload desc','')" class="noUnderline"> <span class="pageHeaderColor noUnalign-bottom fw-stronger p-0 text-uppercase" v-bind:class="{selectedMenu: selectedOption==0}"> Recent <span class="textColor fw-lighter text-uppercase">Entries </span></span> </a></div> <div class="col-12 col-md h5 p-0 text-center" @click.prevent="selectedOption=1"> <a href="#" @click.prevent="setHomeTab('collection','','71562')" class="noUnderline"> <span class="pageHeaderColor noUnalign-bottom fw-stronger p-0 text-uppercase" v-bind:class="{selectedMenu: selectedOption==1}"> Winners <span class="textColor fw-lighter text-uppercase">2023 </span></span> </a></div> </div> <div class="loading==0"> <vue-easy-lightbox :visible="visible" :imgs="imgs" :index="index" @hide="handleHide" @click="handleHide" ></vue-easy-lightbox> <div class="row p-3"> <div v-if="files.length>0" v-for="(mediaItem,index) of files" class="col-12 col-lg-4 col-sm-6 col-md-4 p-1 d-flex align-items-stretch" :key="mediaItem.id" :id="mediaItem.id"> <div class="card w-100"> <a :href="'/entry/'+mediaItem.id+'-'+mediaItem.title" v-if="mediaItem.filetype!=4"> <img class="card-img-top img-fluid" :src="'https://cimg.newspark.ca/i/'+mediaItem.id+'/w/320/h/180/sc/1'" :alt="mediaItem.title" > </a> <a :href="'/entry/'+mediaItem.id+'-'+mediaItem.title" v-else> <div style="height:210px" class="border"> <i class="far fa-newspaper text-muted h1 p-3" style="font-size:128px"></i> </div> </a> <img :src="'https://cimg.newspark.ca/i/'+mediaItem.id+'/w/1280/t/0'" preload class="d-none lazyload" :data-src="'/i/'+mediaItem.id+'/w/1280/t/0'"> <div class="card-body"> <h5 class="card-title">{{ mediaItem.title }}</h5> <p class="card-text"><small class="text-muted">Uploaded {{mediaItem.upload | relativeTime}} by <a :href="'/member/'+mediaItem.uid" class="p-0 noUnderline primaryColor"><span v-if="(mediaItem.user_name!='' && !mediaItem.user_name.startsWith('not_set'))">{{mediaItem.user_name}}</span><span v-else-if="mediaItem.user_firstname!=''">{{mediaItem.user_firstname}}</span></a></small></p> <social-sharing class="p-0" :url="'https://www.sharetheexperience.org/entry/'+mediaItem.id" :title="mediaItem.title" description="mediaItem.message" inline-template :media="mediaItem.thumbUrl+'/15'"> <div class="p-0 d-block d-md-none"> <network network="linkedin"> <i class="fab fa-linkedin" style="color:#0077B5;"></i> </network> <network network="pinterest"> <i class="fab fa-pinterest-square " style="color:#E4001A"></i> </network> <network network="reddit"> <i class="fab fa-reddit-square" style="color:#FF4500"></i> </network> <network network="twitter"> <i class="fab fa-twitter-square" style="color:#1DA1F2"></i> </network> <network network="whatsapp"> <i class="fab fa-whatsapp-square" style="color:#1BD741"></i> </network> <network network="facebook"> <i class="fab fa-facebook-square" style="color:#4267B2"></i> </network> </div> </social-sharing> </div> <div class="card-footer p-1"> <p class="card-text text-muted">{{ mediaItem.commentcount }} <i class="far fa-comments" alt="comments"></i> {{ mediaItem.hits}} <i class="far fa-eye text-primary"></i> <span class='text-black float-end'><a href=# @click.prevent="showImg(index)" class='text-dark'><i aria-hidden="true" class="fas fa-expand-arrows-alt"></i></a></span></p> </div> <div class="d-block d-md-none text-right p-2" :id="'comment'+mediaItem.id"> <form :name="'comment'+mediaItem.id+'form'"> <textarea id='comment' name="message" class="form-control p-1 w-100" v-model="comment[index]" placeholder="Comment"></textarea> <button type="button" class="btn btn-danger btn-sm mt-1" data-toggle="modal" data-target="#loginModal">Login to Post</button> </form> </div> </div> </div> <div v-if="files.length==0"> <h2 class='mt-4 fw-lighter'> No entries yet. Be the first to enter!</h2> <div class="p-5"> <a href="/login" class="btn btn-lg btn-primary">Register or sign in</a> </div> </div> </div> <div class="row mt-3"> <div class="col-12 text-center "> <button v-if="files.length<totalItems" type="button" @click.prevent="loadMoreMedia()" class="btn btn-primary w-100">Load More</button> </div> </div> </div> <div class="loadContainer text-danger pl-5" v-bind:class="[ loading == 1 ? 'd-block' : 'd-none' ]"> <div class="loader">Loading...</div> </div> </div> <div class="col-12 col-md-3 text-center"> <div class="container-fluid sticky-top"> <div class="row"> <div class="col-12"> <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-inner"> </div> </div> </div> </div> <div class="p-2"> </div> </div> </div> </div> </div> </div> <div class="container m-auto p-0"> <div class="mt-0 container p-0 footerColors" id="footer"> <div class="row p-4"> <div class="col-12 col-md-3"> <h3 class="fw-light primaryColor"></h3> <div> <div class="_form_24" style="width:300px"></div><script src="https://recreationgov.activehosted.com/f/embed.php?id=24" type="text/javascript" charset="utf-8"></script> </div> </div> <div class="col-12 col-md-3"> <h3 class="fw-light primaryColor"> </h3> <div> </div> </div> <div class="col-12 col-md-3"> <h3 class="fw-light primaryColor"> </h3> <div> </div> </div> <div class="col-12 col-md-3"> <h3 class="fw-light primaryColor"> </h3> <div> <a href="/privacy">Privacy Policy</a><br /> <a href="/rules">Rules</a><br /> <a href="/faq">FAQ</a> </div> </div> </div> </div> <div class="container-fluid p-4 text-center copyRight"> 漏 2024 Copyright: Share The Experience </div> </div> </div> <script src="//www.sharetheexperience.org/a/js/contest/3p/vue-recaptcha.js"></script> <script> Vue.use(VueVideoPlayer); Vue.use(SocialSharing); Vue.use(infiniteScroll); Vue.use(VueDragDrop); var commentList = Vue.component('comment-list', { props: { itemId: Number, id:Number,depth:Number,loggedIn:Boolean }, template: '<div v-bind:class="{\'ps-0\' : depth==0, \'ps-4\': depth>0}"><div v-for="(comment,index) in comments"><div class="row mt-2" > <div class="col-md-0 mt-2 text-center"><img :src="\'/services/useravatar/\'+comment.uid+\'/small\'" class="img-fluid d-none w-100"> </div> <div class="col-md-12"> <div class="row"> <div class="col-12 p-0"> <span><a :href="\'/member/\'+comment.uid" class="noUnderline fw-light primaryColor">{{comment.user_firstname}} {{comment.user_lastname}}</a><span class="text-muted"> - {{comment.upload | relativeTime}}</span></span> <div class="w-100 text-secondary ps-3">{{comment.message}}</div> </div> </div> <div class="row m-0"><div class="col-12 text-muted">{{comment.votecount}}<i @click.prevent="upVoteComment(comment.id)" class="fas p-2 fa-chevron-up " role="button"></i><i @click.prevent="downVoteComment(comment.id)" class="fas p-2 fa-chevron-down" role="button"></i><a href=# @click.prevent="selected=comment.id" class="p-2 noUnderline primaryColor">Reply</i></a><a href=# @click.prevent="reportOffensive(comment.id)" class="text-muted p-2 small noUnderline">Report</a></div></div><div class="row" v-if="selected==comment.id"><div class="col-12"><textarea v-model="commentText" class="mt-1 form-control"></textarea><button v-if="loggedIn==1" type="button" class="btn btn-sm btn-primary mt-2 float-end" @click.prevent="postReply(comment.id,comment.uid,comment.user_firstname,comment.user_lastname)">Post Reply </button><a v-else href="/login" class="btn btn-primary btn-sm float-end mt-2">Login</a></div></div></div></div><comment-list :key="updateCommentList" v-if="comment.commentcount>0" :logged-in="loggedIn" :depth="depth+1" :id="index" :item-id="comment.id" class="ms-3" @refresh-comment="refreshComments"></comment-list></div></div>', data: function() { return { updateCommentList:0, comments:[], selected:0, options: [ ], newProperties:{}, commentId:this.itemId, comment:{}, commentText:'' }; }, computed: { hasComments: function() { if ( this.comment.children && this.comment.children.length ) { return true; } return false; } }, filters: { createLinks: function (inputText) { var replacedText, replacePattern1, replacePattern2, replacePattern3; //URLs starting with http://, https://, or ftp:// replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim; replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>'); //URLs starting with "www." (without // before it, or it'd re-link the ones done above). replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim; replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>'); //Change email addresses to mailto:: links. replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim; replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>'); return replacedText; }, relativeTime: function (value) { if (!value) return ''; moment.locale('en'); var time = moment.tz(value, "America/Toronto"); return moment(time).fromNow();; }, minTime: function(value) { var a = value.split(':'); // split it at the colons var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); if (seconds < 3600 ) { var measuredTime = new Date(null); measuredTime.setSeconds(seconds); // specify value of SECONDS return measuredTime.toISOString().substr(14, 5); } return value; }, }, methods: { refreshComments: function() { contestv5.refreshComments(0); }, reportOffensive: function (commentId) { var self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':"media.reportOffensive", 'vhost': vhost, 'mid': commentId }).then(function(response) { if(response.data.status == true ) { swal("Success", "Thanks for your help.","success"); } }); }); }, upVoteComment: function(commentId) { var self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.vote', 'mid': commentId, 'vote':1 } ).then(function(response) { if(response.data.status == false ) { swal("Error!",response.data.result,'error'); } else { swal("Thank You!", "Thanks for your vote!"); } }).catch (function(error) { console.log(error)}); }); }, downVoteComment: function(commentId) { var self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.vote', 'mid': commentId, 'vote':0 } ).then(function(response) { if(response.data.status == false ) { swal("Error!",response.data.result,'error'); } else { swal("Thank You!", "Thanks for your vote!"); } }).catch (function(error) { console.log(error)}); }); }, postReply: function(commentId,uid,fn,ln) { if (this.commentText =='') { swal("Error", "Can't post empty comment. ", 'error'); return false; } var self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.insertTextFile', 'vhost': vhost, 'fileData': { 'parentid':commentId, 'channel':33516, 'context':'comment', 'message':self.commentText } }).then(function(response) { if(response.data.status == false ) { swal("Error", "Problem posting your comment", 'error'); } else { console.log('Replied'); swal("Success", "Reply successfully posted.", 'success'); self.commentText=''; contestv5.refreshComments(); console.log('Replied'); self.selected=0; } }).catch ( function(error) { console.log(error)}); }); }, getComments: function(mediaId) { const date = new Date(); date.setDate(date.getDate() - 364) const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.getFiles', 'vhost': vhost, 'noCache': 1, "fields": ['hiden','parentid','commentcount','votecount','user_avatar','uid','user_firstname','user_email','user_lastname','commentcount','message','upload','metadata','filetype','thumbUrl','status','moderationstatus'], 'noCache':1, 'filters':{ parentid:mediaId, context:"comment", moderationStatus:self.moderation, startTime:date.toISOString(), status:[1,2,3] } }).then(function (response) { if(response.data.status == false ) { swal("Error", response.data.result,'error'); return false; } self.comments = response.data.result.data; }).catch(function(e) { console.log(e); }); }); }, }, created: function() { this.getComments(this.commentId); } }); var autoCompleteComponent = Vue.component('autocomplete', { props: { placeHolderText: String, onKeyUp: Function, onSelected: Function, resultItems: Array, autoCompleteProgress: Boolean, required: Boolean, itemText: String, itemId: String }, data() { return { keywordSearch: '' } }, template: ` <div class="autocomplete"> <input type="text" :required="required" :placeholder="placeHolderText" v-model="keywordSearch" class="form-control" :class="{ 'loading-circle' : (keywordSearch.length > 10), 'hide-loading-circle': resultItems.length > 0 || resultItems.length == 0 && !autoCompleteProgress }" @keyup="!autoCompleteProgress ? onKeyUp(keywordSearch) : ''"/> <ul class="autocomplete-results list-group" v-if="resultItems.length > 0"> <li class="autocomplete-result list-group-item" v-for="(item,i) in resultItems" :key="i" @click="keywordSearch='';onSelected(item)"> {{ item.properties.LongLabel }} </li> </ul> </div> ` }); var router = new VueRouter({ mode: 'history', routes: [] }); var contestv5 = new Vue({ router:router, el:'#contestv5', components: { Multiselect: window.VueMultiselect.default, 'vue-recaptcha': VueRecaptcha, 'l-map': window.Vue2Leaflet.LMap, 'l-popup': window.Vue2Leaflet.LPopup, 'l-marker': window.Vue2Leaflet.LMarker, 'l-tile': window.Vue2Leaflet.LTileLayer }, data: { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attribution">CARTO</a>', autoCompleteFieldId: "id", autoCompleteProgress:false, autoCompleteResult:[], autoCompleteText: "text", hideRegister:0, avatar: null, startingCenter: mapCenter, center: mapCenter, comment:'', comments:[], commentText:'', contactus:{}, credentials:{}, cropped:null, currentPage:1, defaultIcon: L.icon({ iconUrl: 'https://assets.newspark.ca/2/v5/gfx/bluemarker.png', shadowUrl: 'https://assets.newspark.ca/2/v5/gfx/shadow.png', iconSize: [25, 41], shadowSize: [41,41], iconAnchor: [25, 41], shadowAnchor: [25, 41], popupAnchor: [-3, -76] }), dataDone:0, emailReset:'', errorText:'', fields:["geo_latitude","geo_longitude",'thumbUrl','user_firstname', 'user_name','user_lastname','title','uservote','message','commentcount','votecount','hits','upload','filetype','tags','context','username','status','moderationstatus','rating','commentcount','groups','uid','user_email','channel_name','channel','nometadata'], fileInfo:{}, fileList:[], canUpload:1, filters:{}, fileProgress:{}, files:[], friends:[], groupIds: [], groupOptions:[], hiddenFiles:[], awaitingApproval:[], index:0, loadMore:0, mapCenter:'', marker:null, markers:{}, moderation:"approved", media:{}, newData:{metadata:{user:{}},groupid:[]}, profile:{}, newPassword:'', newProperties:{}, pageArray:[], pageSize:12, percentage:0, lostPassword:0, placeHolderInputText:'Enter address', playerOptions: { autoplay: false, fluid:true, muted: false, controls:true, language: 'en', sources:[], }, queueSize:0, selectedLocation:'', selectedOption:0, profileSelectedOption:0, selectedGroup:null, sortMode:0, showError:0, errorMessage:{}, wrongReq:0, signup:{meta:{}}, sort:'UPLOAD DESC', totalItems:0, totalPages:0, totalSize:0, transferPercentage:0, transferred:[], userFiles:[], uploading:0, uploadLimit:0, uploadButton:0, visible: false, imgs:[], vCode:[], updateCommentList:0, url:'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png', zoom: 3, }, computed: { player: function() { return this.$refs.videoPlayer.player }, sortHeader: function() { if (this.sortMode==0) { return 'Recent';} if (this.sortMode==1) { return 'Most Views';} if (this.sortMode==2) { return 'Most Comments';} if (this.sortMode==3) { return 'Most Votes';} } }, filters: { relativeTime: function (value) { if (!value) return ''; moment.locale('en'); var time = moment.tz(value, "America/Toronto"); return moment(time).fromNow();; }, numberFormat: function (value) { if (!value) return '' return parseFloat(value).toLocaleString('en'); }, truncateString: function (value) { if (value.length <= 100) { return value } return value.slice(0, 100) + '...'; } }, filters: { fileSize: function(value) { // return value; var UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; var STEP = 1024; value = parseFloat(value, 10); for (var i = 0; i < UNITS.length; i++) { if (value < Math.pow(STEP, i)) { if (UNITS[i - 1]) { return (value / Math.pow(STEP, i-1)).toFixed(2) + UNITS[i-1]; } return value + UNITS[i]; } } return (value / Math.pow(STEP, i-1)).toFixed(2) + UNITS[i-1]; }, }, watch: { sortMode: function(val) { if (val==0) { this.sort='UPLOAD DESC';} if (val==1) { this.sort="HITS DESC";} if (val==2) { this.sort="commentcount DESC";} if (val==3) { this.sort="votecount DESC";} this.getMedia(0); }, fileList: function(val) { if (this.uploadLimit>0 && this.totalUploads+val.length>this.uploadLimit) { this.canUpload=0; swal("Error", "You are or will exceeed the amount of eligible entries",'error'); } else { this.canUpload=1; } }, dataDone: function(val) { for(let i=0;i<this.fileList.length;i++) { let reader = new FileReader; let file = this.fileList[i]; reader.readAsDataURL(file); } this.$forceUpdate(); }, }, methods: { contactSupport: function() { const self=this; new Promise(function(resolve,reject) { axios.post('/services/json',{ "method":"vhost.emailSupport", "vhost": vhost, "from":self.contactus.email, "message":self.contactus.name+"\n"+self.contactus.message }).then(function (response) { if (response.data.status) { self.contactus={}; swal("E-Mail Sent", "Thank you for your e-mail",'success'); } else { swal("E-Mail Not Sent", response.data.result,'error'); } }); }); }, checkUserOrEmail: function(type) { var email=''; var userName=''; if (type == 0 ) { if ( typeof this.signup.user == 'string' && this.signup.user.length<1) { this.showError=0; return false; } var regex = new RegExp(/[^A-Za-z0-9\_\-\.\@]/gm); if (regex.test(this.signup.user)) { this.errorText = 'User name contains invalid characters. Please use only these characters: A-Za-z0-9_\-.@ '; this.showError=1; return false; } else { this.showError=0; } userName=this.signup.user; } else { if ( typeof this.signup.email == 'string' && this.signup.email.length<4) { return false; } email = this.signup.email; } const self=this; new Promise(function(resolve,reject) { axios.post('/services/json',{ "method":"users.verifyUserEmail", "vhost": vhost, "username":userName, "email":email }).then(function (response) { switch (response.data.result) { case -1: self.errorText = 'User name already in use'; self.showError=1; break; case -2: self.errorText = 'E-mail address already in use'; self.showError=1; break; default: self.showError=0; break; } }); }); }, setHomeTab: function(type,sort,collection=0) { for (var member in this.filters) delete this.filters[member]; console.log(type); console.log(sort); console.log(collection); if(type=='collection') { this.filters.collection=collection; this.filters.moderationStatus=this.moderation; } else { this.filters={ 'parentid': 0, 'channel': 33514, 'context': 'generic', 'startTime': '1 year ago', 'moderationStatus': this.moderation,'hidden':'SHOWN', 'status': [3], 'filetype': [1,2,3,4] }; this.sort=sort; } this.getMedia(0); }, onPlayerPlay(player) { this.paused=false; // console.log('player play!', player) }, onPlayerPause(player) { this.paused=true; console.log('player pause!', player) this.thumbnailTS = Math.floor(player.currentTime()*1000)/1000; }, onPlayerEnded(player) { // console.log('player ended!', player) }, onPlayerLoadeddata(player) { // console.log('player Loadeddata!', player) }, onPlayerWaiting(player) { // console.log('player Waiting!', player) }, onPlayerPlaying(player) { // console.log('player Playing!', player) }, onPlayerTimeupdate(player) { this.thumbnailTS = Math.floor(player.currentTime()*1000)/1000; // console.log('player Timeupdate!', player.currentTime()) }, onPlayerCanplay(player) { // console.log('player Canplay!', player) }, onPlayerCanplaythrough(player) { // console.log('player Canplaythrough!', player) }, // or listen state event playerStateChanged(playerCurrentState) { // console.log('player current update state', playerCurrentState) }, // player is ready playerReadied(player) { }, fileSelected: function (event) { const files = event.target.files let filename = files[0].name const fileReader = new FileReader() fileReader.addEventListener('load', () => { this.imageUrl = fileReader.result }) fileReader.readAsDataURL(files[0]) this.avatar = files[0] this.uploadButton=1; }, uploadAvatar: function() { Vue.set(this,'uploading',1); var avatarInfo = {}; const self=this; new Promise(function(resolve,reject) { axios.post('/services/json',{ "method":"media.getUploadUrl", "vhost": vhost, "fileData": { 'filename':self.avatar.name, 'contenttype':self.avatar.type, 'title':'Avatar', 'message':'User Avatar', 'channel':33520, }, "v2":1 }).then(function (response) { if (response.data.status == true ) { var uploadUrl = response.data.result.url; var mediaId = response.data.result.id; axios.put(uploadUrl,self.avatar,{onUploadProgress:(function(pEvent) { if (pEvent.lengthComputable) { self.transferPercentage = parseInt((pEvent.loaded / self.avatar.size)*100) } } )}).then(function (response) { if(response.status == 200 ) { axios.post('/services/json',{ "method":"media.uploadCompleted", "setAvatar":true, "id": mediaId }).then(function (resp) { swal("Upload Complete","Avatar uploaded", 'success'); self.getMemberInfo(); self.uploading=0; self.uploadButton=0; self.$refs.avatarInput.value = '' }).catch(function(e) { swal("Upload Failed",e,'error'); }); } else { swal("Upload Failed",response.status,'error'); } }).catch(function(e) { swal("Upload Failed",e,'error'); }); } else { self.uploading = 0; swal("Upload Failed",response.data.result,'error'); } }).catch(function(e) { swal("Upload Failed",e,'error'); }); }); }, confirmFriend: function(uid) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'friends.confirmFriend', 'uid':uid }).then(function (response) { if(response.data.status == false ) { swal("Error", response.data.result,'error'); return false; } swal("Success", "Friendship confirmed", "success"); self.getMemberFriends(currentUserId); }).catch(function(e) { console.log(e); }); }); }, followUser: function(uid1) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'friends.addFriend', 'uid1':uid1 }).then(function (response) { if(response.data.status == false ) { swal("Error", response.data.result,'error'); return false; } swal("Success", "Now following user", "success"); }).catch(function(e) { console.log(e); }); }); }, unFollowUser: function(uid1) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'friends.removeFriend', 'uid1':uid1 }).then(function (response) { if(response.data.status == false ) { swal("Error", response.data.result,'error'); return false; } swal("Success", "Now following user", "success"); }).catch(function(e) { console.log(e); }); }); }, refreshComments: function(val) { this.updateCommentList++; this.getFileInfo(subPage); }, getComments: function(mediaId) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.getFiles', 'vhost': vhost, 'noCache': 1, "fields": ['parentid','commentcount','votecount','user_avatar','uid','user_firstname','user_email','user_lastname','commentcount','message','upload','metadata','filetype','thumbUrl','status','moderationstatus'], "childFields": ['votecount','user_email','user_firstname','user_lastname','commentcount','message','upload','metadata',"uid","user_avatar",'metadata','filetype','thumbUrl','status','moderationstatus'], "includeChildMedia": 1, "childFilters": {"context":"comment", "moderationStatus":self.moderation,"status":[1,2,3]}, noCache:1, 'filters':{ parentid:mediaId, context:"comment", startTime:'1 year ago', moderationStatus:self.moderation, status:[1,2,3] } }).then(function (response) { if(response.data.status == false ) { swal("Error", response.data.result,'error'); return false; } self.comments = response.data.result.data; }).catch(function(e) { console.log(e); }); }); }, showImg:function (index=0) { this.index = index this.visible = true }, handleHide:function () { this.visible = false }, postComment: function(mediaId,uid,fn,ln) { if (this.commentText =='') { swal("Error", "Can't post empty comment. ", 'error'); return false; } var self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.insertTextFile', 'vhost': vhost, 'fileData': { 'parentid':mediaId, 'channel':33516, 'context':'comment', 'message':self.commentText } }).then(function(response) { if(response.data.status == false ) { swal("Error", "Problem posting your comment", 'error'); } else { swal("Success", "Comment successfully posted.", 'success'); self.commentText=''; self.updateCommentList++; self.getFileInfo(subPage); } }).catch ( function(error) { console.log(error)}); }); }, voteMedia: function(mediaId) { var self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.vote', 'mid': mediaId, 'vote':1 } ).then(function(response) { if(response.data.status == false ) { console.log(response.data.result); swal("Error!", response.data.result, 'error'); } else { swal("Thank You!", "Thanks for your vote, every vote matters!"); self.getFileInfo(mediaId); } }).catch (function(error) { console.log(error)}); }); }, likeMedia: function(mediaId) { var self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.rateFile', 'id': mediaId, 'rating':10 } ).then(function(response) { if(response.data.status == false ) { console.log(response.data.result); } else { swal("Thank You!", "Thanks for showing you care!"); self.media[i].votecount++; self.media[i].uservote=10; } }).catch (function(error) { console.log(error)}); }); }, logout: function() { var self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'users.logout' } ).then(function(response) { location.reload(); }).catch (function(error) { console.log(error)}); }); }, getGroups: function() { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'groups.getGroups', 'vhost': vhost, 'filters':{ 'parentGroupID':741006 } }).then(function (response) { if (response.data.status==true) { self.groupOptions=response.data.result; } }); }); }, setUploadGroup: function(val) { if(typeof val.id !='undefined') { this.selectedGroup=val; this.newData.groupid.push(val.id); } else { this.selectedGroup=val; this.newData.groupid=val.map(x => x.id); } console.log(this.newData.groupid); }, showMedia: function(mediaId) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.makeShown', 'id':mediaId }).then(function (response) { if(response.data.result != true ) { swal("Error", response.data.result,'error'); return false; } else { self.getFileInfo(mediaId); swal("Success", "Media now public",'success'); return true; } }).catch(function(e) { console.log(response); });; }); }, updateFile: function(mediaId) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.updateFile', 'id': mediaId, 'newProperties':self.newProperties }).then(response => { if(response.data.status == false ) { swal("Error!", response.data.result,'error'); } else { swal("Success!", "Your entry has been updated!"); location.reload(true); } }).catch ( error => console.log(error)); }); }, trashFile: function(mediaId) { const self = this; new Promise(function(resolve,reject) { swal({ title: "Are you sure ?", text: "Are you sure you want to delete this entry?", icon: "warning", buttons: [ 'Cancel', 'Yes, I am sure!' ], dangerMode: true, }).then(function (response) { if(response) { axios.post('/services/json',{ 'method':'media.trashFile', 'vhost': vhost, 'id': mediaId }).then(function (response) { window.location.href='/'; }).catch(function(e) { swal('Error',e,'error'); }); } }); }); }, hideMedia: function(mediaId) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.makeHidden', 'id':mediaId }).then(function (response) { if(response.data.result != true ) { swal("Error", response.data.result,'error'); return false; } else { self.getFileInfo(mediaId); swal("Success", "Media now hidden",'success'); return true; } }).catch(function(e) { swal("Error", e.message,'error'); });; }); }, getFileInfo: function(mediaId) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.getFileInfo', 'id':mediaId, 'noCache':1, 'options':{ 'want_exif':1, 'want_system':1, 'want_status':1, 'want_request':1, 'want_xmp':1, 'want_total_comments':1, 'want_iptc':1, } }).then(function (response) { if(response.data.status == false ) { swal("Error", response.data.result,'error'); return false; } self.media = response.data.result; self.imgs=['/i/'+self.media.id+'/w/1280/t/0']; if (self.media.geo_latitude!=null) { var tmp={}; self.center= L.latLng(self.media.geo_latitude,self.media.geo_longitude), tmp.position = [self.media.geo_latitude,self.media.geo_longitude]; tmp.title="<h5>"+self.media.title+"</h5>"; tmp.icon=self.defaultIcon; self.markers.mediaLocation=tmp; } if (self.media.filetype==2) { self.playerOptions.sources.push({type:"video/mp4",src:self.media.thumbUrl+"/22"}); self.playerOptions.poster=self.media.thumbUrl+"/11"; } }); }); }, getMemberInfo: function() { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'users.getLoggedInUser' }).then(function (response) { if (response.data.status) { self.profile=response.data.result; } }); }); }, updateMemberInfo: function () { const self = this; var newProps={}; var permittedFields=['firstname','lastname','website','email','city','state','postalcode','country','address1','address2','description']; for (let i=0;i<permittedFields.length;i++) { if (typeof self.profile[permittedFields[i]] !='undefined') { newProps[permittedFields[i]]=self.profile[permittedFields[i]]; } } new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'users.updateUserInfo', 'newProperties':newProps }).then(function (response) { if (response.data.status) { swal("Success", "Your profile has been updated.",'success'); } else { swal("Error", response.data.result,'error'); } }); }); }, getMemberFriends: function(uid) { if ( uid > 1 ) { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'friends.getMyFriends' }).then(function (response) { self.friends=response.data.result; }); }); } }, getMemberMedia: function(uid,type) { const self = this; const date = new Date(); date.setDate(date.getDate() - 364) var filters={'channel':33514, 'uid':uid,'hidden':'SHOWN','status':[1,2,3], startTime:'1 year ago',}; if ( type == 1 ) { filters={'channel':33514, 'uid':uid,'hidden':'HIDDEN','status':[1,2,3], startTime:'1 year ago',}; } else if (type == 2) { filters={'channel':33514, 'uid':uid,'hidden':'ALL','moderationStatus':0,'status':[1,2,3], startTime:'1 year ago',}; } new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.getFiles', 'vhost':vhost, 'fields':self.fields, 'filters':filters, 'limit':200, 'startTime':date.toISOString(), 'noCache':1, }).then(function (response) { if ( type == 1 ) { if (response.data.status==true) { self.hiddenFiles=response.data.result.data; } } else if (type == 2) { if (response.data.status==true) { self.awaitingApproval=response.data.result.data; } } else { self.userFiles=response.data.result.data; self.markers=[]; var tmpMarkers=[]; if (typeof self.userFiles != 'undefined' ) { for(let i=0; i<self.userFiles.length;i++) { if (self.userFiles[i].geo_latitude!=null) { var item = self.userFiles[i]; var tmp={}; tmp.position = [item.geo_latitude,item.geo_longitude]; tmpMarkers.push([item.geo_latitude,item.geo_longitude]); tmp.title="<h5>"+item.title+"</h5>"; tmp.icon=self.defaultIcon; self.markers.push(tmp); } } if (tmpMarkers.length>0 && typeof self.$refs.map!='undefined') { self.$refs.map.mapObject.fitBounds(tmpMarkers) } } } }); }); }, removeFile: function (index) { Vue.delete(this.fileList,index); }, setLocation: function(item){ this.autoCompleteProgress = false; this.autoCompleteResult = []; this.mapCenter=item.properties.LongLabel; this.newData.geo_latitude=item.properties.Y; this.newData.geo_longitude=item.properties.X; this.center = L.latLng(item.properties.Y,item.properties.X); var geocodeService = L.esri.Geocoding.geocodeService(); const self=this; geocodeService.reverse().latlng(this.center).run(function (error, result) { if (error) { swal("Map Error", error, 'error'); return; } self.marker=self.center; var tmp={} tmp.position = self.center; tmp.title="<h5>New Location</h5>This will override the user specified location."; tmp.icon=self.defaultIcon; self.markers.newMarker=tmp; if (result.address.LongLabel) { self.keywordSearch = self.mapCenter = result.address.LongLabel; } if (result.address.City != '' ) { self.selectedLocation=result.address.City+", "+result.address.Region; } else if (result.address.PlaceName != '' ) { self.selectedLocation= result.address.PlaceName +", "+result.address.Region; } else if (result.address.Subregion != '' ) { self.selectedLocation= result.address.Subregion +", "+result.address.Region; } else { self.selectedLocation= result.address.LongLabel; } }); }, addMarker: function(event) { Vue.set(this.newData,'geo_latitude', event.latlng.lat); Vue.set(this.newData,'geo_longitude', event.latlng.lng); this.center = this.marker = event.latlng; var tmp={}; tmp.position = [event.latlng.lat, event.latlng.lng]; tmp.title="<h5>New Location</h5>This will override the user specified location."; tmp.icon=this.defaultIcon; this.markers.newMarker=tmp; this.updateSearchField(tmp.position); }, updateSearchField: function(location) { const self=this; console.log(L); var geocodeService = L.esri.Geocoding.geocodeService(); geocodeService.reverse().latlng(location).run(function (error, result) { if (error) { swal("Map Error", error); return; } if (result.address.LongLabel) { self.keywordSearch = self.mapCenter = result.address.LongLabel; if (result.address.City != '' ) { self.selectedLocation=result.address.City+", "+result.address.Region; } else if (result.address.PlaceName != '' ) { self.selectedLocation= result.address.PlaceName +", "+result.address.Region; } else if (result.address.Subregion != '' ) { self.selectedLocation= result.address.Subregion +", "+result.address.Region; } else { self.selectedLocation= result.address.LongLabel; } } }); }, startUpload: function (groupRequired = 0 ) { if(typeof checkMap != 'undefined') { if(this.mapCenter=='') { swal("Missing Location", "Please tell us where your entry was taken.",'error'); return false } } if (this.uploadLimit>0 && this.totalUploads+this.fileList.length>this.uploadLimit) { swal("Error - Limit Reached", "You will need to remove some entries before continuing",'error'); } this.uploading = 1; const self = this; if(typeof self.newData.groupid == 'undefined' || self.newData.groupid.length==0) { if (groupRequired == 1 ) { swal("Missing Category", "Please select a catetegory for your entry.",'error'); return false } else { self.newData.groupid.push(741006); } } if (this.fileList.length>0) { this.fileList.forEach(function (file,index) { self.fileInfo[file.name]=self.newData; self.fileInfo[file.name].contenttype=file.type; self.fileInfo[file.name].filename=file.name; new Promise(function(resolve,reject) { self.queueSize++; self.totalFileSize+=file.size axios.post('/services/json',{ "method":"media.getUploadUrl", "vhost": vhost, "fileData": { 'filename':file.name, 'contenttype':file.type, 'title':self.newData.title, 'message':self.newData.message, 'geo_latitude':self.newData.geo_latitude, 'geo_longitude':self.newData.geo_longitude, 'tags':self.newData.tags, 'metadata':self.newData.metadata, 'groupid':self.newData.groupid, 'channel':33514, }, "v2":1 }).then(function (response) { if (response.data.status == true ) { var uploadUrl = response.data.result.url; var mediaId = response.data.result.id; axios.put(uploadUrl,file,{onUploadProgress:(function(pEvent) { if (pEvent.lengthComputable) { self.fileProgress[file.name] = pEvent.loaded; let totalSent = self.fileProgress ? Object.values(self.fileProgress).reduce((sum, num) => sum + num, 0) : 0 self.transferPercentage = parseInt(Math.round((totalSent / self.totalSize)*100)); } } )}).then(function (response) { if(response.status == 200 ) { axios.post('/services/json',{ "method":"media.uploadCompleted", "id": mediaId }).then(function (resp) { self.queueSize--; if (self.queueSize == 0 ) { self.fileList=[]; self.uploading=0; self.transferPercentage=0; self.newData=[] self.newData={metadata:{user:{}}}; // self.$refs.fileInputList.files=[]; swal("Upload Complete","Files have uploaded successfully", 'success'); location.reload(true); }; }).catch(function(e) { swal("Upload Failed",e.message,'error'); }); } else { swal("Upload Failed",response.status,'error'); } }).catch(function(e) { swal("Upload Failed",e.message,'error'); }); } else { self.uploading = 0; swal("Upload Failed",response.data.result,'error'); } }).catch(function(e) { swal("Upload Failed",e.message,'error'); }); }); }); } else { new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.insertTextFile', 'vhost': vhost, 'fileData': { 'title':self.newData.title, 'message':self.newData.message, 'geo_latitude':self.newData.geo_latitude, 'geo_longitude':self.newData.geo_longitude, 'tags':self.newData.tags, 'metadata':self.newData.metadata, 'groupid':self.newData.groupid, 'channel':33514, } }).then(function(response) { swal("Success", "Thanks for your submission", 'success'); location.reload(); }).catch ( function(error) { swal("Submission Failed",error.message,'error'); }); }); self.uploading=0; } }, handleFileList: function () { event.preventDefault(); const files = this.$refs.fileInputList.files; for (let i = 0; i < files.length; i++) { var file = files.item(i); files[i].previewImage = null let reader = new FileReader; reader.onload = e => { files[i].previewImage = e.target.result this.dataDone++; } files[i].percentage = 0 ; reader.readAsDataURL(files[i]); this.totalSize+=files[i].size; if((this.fileList.length + this.totalUploads<=this.uploadLimit) || this.uploadLimit==0) { this.fileList.push(files[i]); } } }, clearForm: function() { this.newData={}; this.groups=[]; }, handleDrop: function(data, event) { event.preventDefault(); const files = event.dataTransfer.files; for (let i = 0; i < files.length; i++) { var file = files.item(i); files[i].previewImage = null let reader = new FileReader; reader.onload = e => { files[i].previewImage = e.target.result this.dataDone++; } files[i].percentage = 0 ; reader.readAsDataURL(files[i]); this.totalSize+=files[i].size; this.fileList.push(files[i]); } }, lookupLocation: function(keywordEntered) { if (keywordEntered.length>10 && !this.autoCompleteProgress ) { console.log(keywordEntered); this.autoCompleteProgress = true const self = this; new Promise(function(resolve,reject) { L.esri.Geocoding.geocode({ requestParams: { maxLocations:5 } }) .text(keywordEntered) .run(function(error, results, response) { self.autoCompleteResult=results.results; self.autoCompleteProgress = false; }); }); } }, setNewPassword: function(){ const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'users.setPassword', 'vhost':vhost, 'password':self.newPassword, 'email':self.emailReset, 'verificationCode':self.vCode.join("") }).then(function (response) { if (response.data.status==false) { swal("Error", response.data.result, 'error'); } if(response.data.result==false) { swal("Error", "Password reset failed", 'error'); } swal("Success", "Password changed successfully, please login", 'success'); self.lostPassword=0; }) }); }, submitPasswordForm: function (token) { const self = this; var bodyFormData = new FormData(); bodyFormData.append('fm_token', token); bodyFormData.append('email', self.emailReset); new Promise(function(resolve,reject) { axios.post('/action/v2/lostpassword',bodyFormData ).then(function (response) { }) }); }, enforceRequirement: function(key,val,reqValue,errorText) { this.wrongReq=0; if(val != reqValue) { this.wrongReq=1; this.errorMessage[key]=errorText; } }, login: function() { const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'users.confirmCredentials', 'username':self.credentials.email, 'password':self.credentials.password, 'vhost':vhost, 'isEmail':true, 'returnUserInfo':true, 'login':true }).then(function (response) { if (response.data.status==false) { swal("Error", response.data.result, 'error'); return false; } if(response.data.result==false) { swal("Error", "Login failed", 'error'); return false; } if (typeof response.data.result.sessiontoken !='undefined') { console.log('login'); Vue.$cookies.config('30d') $cookies.set("SABRE_ID",response.data.result.sessiontoken); window.location.href='/'; return true; } swal("Error", "Login failed", 'error'); return false; }) }); }, onCaptchaVerified: function (recaptchaToken) { const self = this; self.$refs.recaptcha.reset(); new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'users.register', 'vhost':vhost, 'login':true, 'recaptchaToken':recaptchaToken, 'userData':self.signup }).then(function (response) { console.log(response); if (response.data.status==true) { swal("Successful Registration", "Thank you for becoming a member..", 'success'); Vue.$cookies.config('30d') $cookies.set("SABRE_ID",response.data.result.sessiontoken); window.location.href='/'; return true; } if(response.data.status==false) { swal("Error", response.data.result, 'error'); return false; } }); }); }, onCaptchaExpired: function () { this.$refs.recaptcha.reset(); }, register: function() { if(this.$refs.recaptcha != undefined){ this.$refs.recaptcha.execute(); } }, loadMoreMedia: function() { this.loadMore=1; this.currentPage++; this.getMedia(this.currentPage-1); }, getPage: function(page) { this.getMedia(page-1); this.currentPage=page; }, getMedia: function(page) { this.loading=1; const self = this; new Promise(function(resolve,reject) { axios.post('/services/json',{ 'method':'media.getFiles', 'vhost':vhost, 'fields':self.fields, 'filters':self.filters, 'startTime':'1 year ago', 'start':self.pageSize*page, 'limit':self.pageSize, 'sort':self.sort, 'noCache':1, }).then(function (response) { self.loading=0; if (response.data.status == false ) { swal("Error", response.data.result, 'error'); } else { self.totalItems = response.data.result.totalCount; self.totalPages = Math.ceil(self.totalItems/self.pageSize); if (self.loadMore == 1) { for (let i = 0; i < response.data.result.data.length; i++){ self.files.push(response.data.result.data[i]); self.imgs.push('/i/'+response.data.result.data[i].id+'/w/1280/t/0'); } self.loadMore=0; } else { self.files=response.data.result.data; if(self.totalPages>10) { self.pageArray=[]; for(let i=self.currentPage;i<self.currentPage+5;i++) { self.pageArray.push(i); } self.pageArray.push("."); self.pageArray.push("."); self.pageArray.push("."); for(let i=self.totalPages-5;i<self.totalPages;i++) { self.pageArray.push(i); } } else { for(let i=1;i<self.currentPage+5;i++) { self.pageArray.push(i); } } } self.markers=[]; var tmpMarkers=[]; for(let i=0; i<self.files.length;i++) { self.imgs.push('/i/'+self.files[i].id+'/w/1280/t/0'); if (self.files[i].geo_latitude!=null) { var item = self.files[i]; var tmp={}; tmp.position = [item.geo_latitude,item.geo_longitude]; tmpMarkers.push([item.geo_latitude,item.geo_longitude]); tmp.title="<h5>"+item.title+"</h5>"; tmp.icon=self.defaultIcon; self.markers.push(tmp); } } if (tmpMarkers.length>0 && typeof self.$refs.map != 'undefined') { self.$refs.map.mapObject.fitBounds(tmpMarkers); } } }); }); } }, created: function() { this.filters={ 'parentid': 0, 'channel': 33514, 'context': 'generic', 'startTime': '1 year ago', 'moderationStatus': "approved",'hidden':'SHOWN', 'status': [3], 'filetype': [1,2,3,4] }; if(typeof totalUploads != 'undefined') { this.totalUploads=totalUploads; } else { this.totalUploads=0; } if(typeof uploadLimit != 'undefined') { this.uploadLimit=uploadLimit; } if(typeof signup != 'undefined') { let defaultFields = ['country']; if(typeof signup['country']!= undefined) { this.signup['country']=signup['country']; } } if (typeof moderation !='undefined') { this.moderation=moderation; this.filters.moderationStatus=this.moderation; } if (basePage == 'member' || basePage == 'fbprofile') { this.getMemberMedia(subPage,0); this.getMemberMedia(subPage,1); this.getMemberMedia(subPage,2); this.getMemberFriends(currentUserId); this.getMemberInfo(); } else if (basePage == 'gallery') { if(typeof subPage != 'undefined') { this.filters.groupid=subPage; this.getMedia(0); } } else if (basePage == 'entry' && deletedMedia==0) { this.getMemberMedia(userId,0); this.getComments(subPage); this.getFileInfo(subPage); } else { var q = this.$route.query.q; if (q) { this.filters.query=q; this.filters.startTime='10 years ago'; } if (basePage == 'enter') { this.getGroups(); } else { if (typeof defaultID == 'undefined' || defaultID == 0) { this.getMedia(0); } else { this.setHomeTab(defaultType,defaultSort,defaultID); } } } } }); $('.slickGal').slick({ dots: true, autoplay:false, infinite: false, speed: 300, slidesToShow: 3, slidesToScroll: 3, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 2, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script>  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(["setDocumentTitle", document.domain + "/" + document.title]); _paq.push(["setCookieDomain", "www.sharetheexperience.org"]); _paq.push(["setDomains", ["www.sharetheexperience.org"]]); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://data.newspark.ca/"; _paq.push(['setTrackerUrl', u + 'js/tracker.php']); _paq.push(['setSiteId', '8']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'js/tracker.php'; s.parentNode.insertBefore(g, s); })(); </script>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZZT71X2CL6"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-ZZT71X2CL6'); </script> </body> </html>

CINXE.COM

Share the Experience 2024