Шаг 10. Страница созданных пользователем изображений в профиле

andrey-v · Jun 3, 2015 · 57862a3 · 57862a3
1 parent fde588a
commit 57862a3
Show file tree

Hide file tree

Showing 8 changed files with 329 additions and 0 deletions.
diff --git a/tpls/actions/profile/action.profile.created_photos.tpl b/tpls/actions/profile/action.profile.created_photos.tpl
@@ -0,0 +1,67 @@
+ {* Тема оформления Experience v.1.0  для Alto CMS      *}
+ {* @licence     CC Attribution-ShareAlike   *}
+
+{extends file="_profile.tpl"}
+
+{block name="layout_profile_submenu"}
+    {include file='menus/menu.profile_created.tpl'}
+{/block}
+
+{block name="layout_profile_content"}
+    <script>
+        jQuery(function () {
+            jQuery('#js-profile-user-photos').altoImageManager({
+                profile: {$oUserProfile->getId()}
+            });
+        });
+    </script>
+
+    <div id="js-profile-user-photos" class="panel panel-default user-friends sidebar flat">
+
+        <div class="panel-body">
+
+            <div class="row">
+                <div class="col-sm-10">
+                    <h3 class="modal-title">Фотографии <span id="aim-pages-container"></span></h3>
+                </div>
+                <div class="col-sm-2">
+                    <ul class="image-categories-nav list-unstyled list-inline list-no-border pull-right">
+                        <li id="backTopics" style="display: none;">
+                            <a class="image-categories-nav-back-topics" href="#">
+                                <i class="glyphicon glyphicon-arrow-left"></i>
+                            </a>
+                        </li>
+                        <li id="backTalks" style="display: none;">
+                            <a class="image-categories-nav-back-talks" href="#">
+                                <i class="glyphicon glyphicon-arrow-left"></i>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="image-categories-nav-refresh" href="#">
+                                <i class="glyphicon glyphicon-refresh"></i>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="row">
+                <div id="image-categories-tree-container" class="col-md-12 mab24">&nbsp;</div>
+            </div>
+
+            <div class="panel-content">
+                <script id="aim-pages-template" type="template/javascript">
+                    &nbsp;-&nbsp; {$aLang.insertimg_page} %page% {$aLang.insertimg_from} %pages%
+                </script>
+
+                <div id="image-container">
+                    {include "actions/profile/created_photos/inject.images.topic.tpl" pre=true}
+                </div>
+            </div>
+
+
+        </div>
+
+    </div>
+
+
+{/block}
diff --git a/tpls/actions/profile/created_photos/inject.categories.tpl b/tpls/actions/profile/created_photos/inject.categories.tpl
@@ -0,0 +1,2 @@
+{menu id='profile_images' class='js-image-categories-tree list-inline list-unstyled'}
+<br/>
diff --git a/tpls/actions/profile/created_photos/inject.images.blog.tpl b/tpls/actions/profile/created_photos/inject.images.blog.tpl
@@ -0,0 +1,64 @@
+<script type="text/javascript">
+    (function($){
+        "use strict";
+        function setPrettyPhoto() {
+            $("a[rel^='prettyPhoto']").prettyPhoto({
+                social_tools:'',
+                show_title: false,
+                slideshow:5000,
+                deeplinking: false
+            });
+        }
+
+        setPrettyPhoto();
+
+    }(jQuery));
+</script>
+
+<div id="aim-page-images" class="media-list row">
+    {if $aResources}
+    {foreach $aResources as $oItem}
+        <div class="media col-md-12 mat0 mab12">
+            <a href="{$oItem->GetImgUrl()}" class="pull-left hover-look150" rel="prettyPhoto[pp_gal]" onclick="return false;">
+                <img class="bor100 transition8"  src="{$oItem->GetImgUrl('200x200crop')}" alt="image"/>
+            </a>
+
+            <div class="media-body">
+                {if isset($aBlogs[$oItem->getTargetId()])}
+                {$oBlog=$aBlogs[$oItem->getTargetId()]}
+                    <h6 class="media-heading">
+                        <a href="{$oBlog->getUrlFull()}">{$oBlog->getTitle()}</a>
+                    </h6>
+                    <div class="media-text text-muted">
+                        <em>{$oBlog->getDescription()|strip_tags|truncate:1300:'...'}</em>
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {/foreach}
+
+        <div class="clearfix" id="aim-images-nav" style="display: none;">
+            <br/>
+            <button id="images-next-page" class="refresh-tree btn pull-right btn-default btn-sm" disabled >
+                {$aLang.next_page}
+            </button>
+
+            <button id="images-prev-page" class="btn btn-default btn-sm pull-right" disabled >
+                {$aLang.prev_page}
+            </button>
+        </div>
+    {else}
+        <script>
+            $(function(){
+                $('.image-loading').pulse({
+                    backgroundColor : '#FFFFFF'
+                }, {
+                    duration : 3250,
+                    pulses   : 5,
+                    interval : 800
+                });
+            })
+        </script>
+        <div class="bg-warning image-loading text-center">{$aLang.select_category}</div>
+    {/if}
+</div>
diff --git a/tpls/actions/profile/created_photos/inject.images.talk.tpl b/tpls/actions/profile/created_photos/inject.images.talk.tpl
@@ -0,0 +1,32 @@
+<ul id="aim-page-images" class="media-list">
+    {if $aTalks}
+        {foreach $aTalks as $oItem}
+            <li class="media">
+                <div class="media-body">
+                        <h5 class="media-heading">
+                            <a href="#"
+                               class="aim-talk-photoset"
+                               data-talk-id="{$oItem->getId()}"
+                               onclick="return false;">({$oItem->getImagesCount()}) {$oItem->getTitle()}</a>
+                        </h5>
+                        <div class="media-text">
+                            {$oItem->getText()|strip_tags|truncate:1000:'...'}
+                        </div>
+                </div>
+            </li>
+        {/foreach}
+
+        <div class="clearfix" id="aim-images-nav" style="display: none;">
+            <br/>
+            <button id="images-next-page" class="refresh-tree btn pull-right btn-default btn-sm" disabled >
+                {$aLang.next_page}
+            </button>
+
+            <button id="images-prev-page" class="btn btn-default btn-sm pull-right" disabled >
+                {$aLang.prev_page}
+            </button>
+        </div>
+    {else}
+        {$aLang.select_category}
+    {/if}
+</ul>
diff --git a/tpls/actions/profile/created_photos/inject.images.topic.tpl b/tpls/actions/profile/created_photos/inject.images.topic.tpl
@@ -0,0 +1,74 @@
+<script type="text/javascript">
+    (function($){
+        "use strict";
+        function setPrettyPhoto() {
+            $("a[rel^='prettyPhoto']").prettyPhoto({
+                social_tools:'',
+                show_title: false,
+                slideshow:5000,
+                deeplinking: false
+            });
+        }
+
+        setPrettyPhoto();
+
+    }(jQuery));
+</script>
+
+<div id="aim-page-images" class="media-list row">
+    {if $aTopics}
+        {foreach $aTopics as $oItem}
+            <div class="media col-md-{if count($aTopics)==1}12{else}6{/if} mat0 mab12">
+                {$sImagePath=$oItem->getPhotosetMainPhotoUrl(true)}
+                {if $sImagePath}
+                <a href="{$sImagePath}" class="pull-left hover-look150" rel="prettyPhoto[pp_gal]" onclick="return false;">
+                    <img class="bor100 transition8" src="{$oItem->getPhotosetMainPhotoUrl(true, '100x100crop')}" alt="image"/>
+                </a>
+                {/if}
+                <div class="media-body">
+                        <h6 class="media-heading">
+                            <a href="#"
+                               class="aim-topic-photoset"
+                               data-topic-id="{$oItem->getId()}"
+                               onclick="return false;"><strong>({$oItem->getImagesCount()})</strong> {$oItem->getTitle()}</a>
+                        </h6>
+                        <div class="media-text text-muted">
+                            {if count($aTopics)==1}{$g=300}{else}{$g=70}{/if}
+                            <em>{$oItem->getTextShort()|strip_tags|truncate:$g:'...'}</em>
+                        </div>
+                </div>
+            </div>
+        {/foreach}
+
+        <div class="clearfix" id="aim-images-nav" style="display: none;">
+            <br/>
+            <button id="images-next-page" class="refresh-tree btn pull-right btn-default btn-sm" disabled >
+                {$aLang.next_page}
+            </button>
+
+            <button id="images-prev-page" class="btn btn-default btn-sm pull-right" disabled >
+                {$aLang.prev_page}
+            </button>
+        </div>
+    {else}
+        {if $pre}
+        <script>
+            $(function(){
+                $('.image-loading').pulse({
+                    backgroundColor : '#FFFFFF'
+                }, {
+                    duration : 3250,
+                    pulses   : 5,
+                    interval : 800
+                });
+            })
+        </script>
+        {*<div class="bg-warning image-loading">{$aLang.topic_photoset_upload_title}</div>*}
+        <div class="bg-warning image-loading text-center"><i class="fa fa-5x fa-spin fa-circle-o-notch"></i></div>
+        {else}
+        <div class="bg-warning image-loading text-center">
+            {$aLang.insertimg_not_found}
+        </div>
+        {/if}
+    {/if}
+</div>
diff --git a/tpls/actions/profile/created_photos/inject.images.tpl b/tpls/actions/profile/created_photos/inject.images.tpl
@@ -0,0 +1,48 @@
+{if $oTopic}
+    <h5>{$oTopic->getTitle()}</h5>
+{/if}
+<div id="aim-page-images">
+    {if $aResources}
+
+        <script>
+
+            //noinspection JSUnresolvedFunction
+            $(function () {
+                function setPrettyPhoto() {
+                    $("a[rel^='prettyPhoto']").prettyPhoto({
+                        social_tools:'',
+                        show_title: false,
+                        slideshow: 5000,
+                        deeplinking: false
+                    });
+                }
+
+                setPrettyPhoto();
+
+            })
+        </script>
+        <div class="masonry-container">
+            {foreach $aResources as $oItem}
+                <div class="masonry-item col-md-4">
+                    <a href="{$oItem->GetImgUrl()}" rel="prettyPhoto[pp_gal]" onclick="return false;">
+                        <img src="{$oItem->GetImgUrl('240x240')}" class="img-thumbnail" alt="image"/>
+                    </a>
+                </div>
+            {/foreach}
+        </div>
+
+        <div class="clearfix" id="aim-images-nav" style="display: none;">
+            <br/>
+            <button id="images-next-page" class="refresh-tree btn pull-right btn-default btn-sm" disabled >
+                {$aLang.next_page}
+            </button>
+
+            <button id="images-prev-page" class="btn btn-default btn-sm pull-right" disabled >
+                {$aLang.prev_page}
+            </button>
+        </div>
+
+    {else}
+        {$aLang.select_category}
+    {/if}
+</div>
diff --git a/tpls/actions/profile/created_photos/inject.images.user.tpl b/tpls/actions/profile/created_photos/inject.images.user.tpl
@@ -0,0 +1,36 @@
+<script type="text/javascript">
+    (function($){
+        "use strict";
+        function setPrettyPhoto() {
+            $("a[rel^='prettyPhoto']").prettyPhoto({
+                social_tools:'',
+                show_title: false,
+                slideshow:5000,
+                deeplinking: false
+            });
+        }
+
+        setPrettyPhoto();
+
+    }(jQuery));
+</script>
+
+<div id="aim-page-images">
+    {if $aResources}
+            {foreach $aResources as $oItem}
+                <div class="col-md-6">
+                    <div class="thumbnail">
+                        <a href="{$oItem->GetImgUrl()}" rel="prettyPhoto[pp_gal]" onclick="return false;">
+                            <img class="transition8" src="{$oItem->GetImgUrl('350fit')}" alt="image"/>
+                        </a>
+
+                        <div class="caption text-center">
+                            {$aLang["aim_target_type_{$oItem->getTargetType()}"]}
+                        </div>
+                    </div>
+                </div>
+            {/foreach}
+    {else}
+        {$aLang.select_category}
+    {/if}
+</div>
diff --git a/tpls/menus/menu.profile_created.tpl b/tpls/menus/menu.profile_created.tpl
@@ -6,6 +6,12 @@
                 <a href="{$oUserProfile->getProfileUrl()}created/topics/">{$aLang.topic_title}  {if $iCountTopicUser} ({$iCountTopicUser}) {/if}</a>
             </li>
 
+
+            <li class="{if $sMenuSubItemSelect=='photos'}active{/if}">
+                <a href="{$oUserProfile->getProfileUrl()}created/photos/">{$aLang.user_menu_publication_photos}  {if $iPhotoCount} ({$iPhotoCount}) {/if}</a>
+            </li>
+
+
             <li {if $sMenuSubItemSelect=='comments'}class="active"{/if}>
                 <a href="{$oUserProfile->getProfileUrl()}created/comments/">{$aLang.user_menu_publication_comment}  {if $iCountCommentUser} ({$iCountCommentUser}) {/if}</a>
             </li>