Skip to content

Commit

Permalink
AENV-330 - polish newscoop create/manage slideshow modal
Browse files Browse the repository at this point in the history
  • Loading branch information
takeit committed Apr 9, 2015
1 parent 752e038 commit 78a1843
Show file tree
Hide file tree
Showing 14 changed files with 1,004 additions and 61 deletions.
Binary file added newscoop/admin-style/images/add-images-arrow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified newscoop/admin-style/images/slide_delete.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added newscoop/admin-style/images/slideshow-item-drag.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
727 changes: 727 additions & 0 deletions newscoop/admin-style/slideshow.css

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion newscoop/application/layouts/scripts/modal.phtml
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@

<link rel="shortcut icon" href="<?php echo $this->baseUrl('/admin-style/images/7773658c3ccbf03954b4dacb029b2229.ico'); ?>" />

<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/admin_stylesheet_new.css'); ?>" />
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/admin_stylesheet.css'); ?>" />
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/content.css'); ?>" />
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/app.css'); ?>" />
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/table.css'); ?>" />
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/form.css'); ?>" />
Expand All @@ -15,6 +18,7 @@
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/lists.css'); ?>" />
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/modal-window.css'); ?>" />
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/slideshow-list.css'); ?>" />
<link rel="stylesheet" href="<?php echo $this->baseUrl('/admin-style/slideshow.css'); ?>" />
<?php echo $this->headStyle(); ?>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
Expand All @@ -23,7 +27,7 @@
<script type="text/javascript" src="<?php echo $this->baseUrl('/js/backbone.js'); ?>"></script>
<?php echo $this->headScript(); ?>
</head>
<body class="modal-window">
<body id="next" class="iframe expanded">
<?php echo $this->layout()->content; ?>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
* @copyright 2011 Sourcefabric o.p.s.
* @license http://www.gnu.org/licenses/gpl-3.0.txt
*/

use Newscoop\Annotations\Acl;
use Newscoop\Image\Rendition;
use Newscoop\Package\PackageService;
Expand Down Expand Up @@ -50,7 +49,7 @@ public function createAction()
$slideshows[] = $slideshow;
$this->_helper->service('package')->saveArticle(array(
'id' => $this->_getParam('article_number'),
'slideshows' => array_map(function($slideshow) { return array('id' => $slideshow->getId()); }, $slideshows),
'slideshows' => array_map(function ($slideshow) { return array('id' => $slideshow->getId()); }, $slideshows),
));
}
$this->_helper->redirector('edit', 'slideshow', 'admin', array(
Expand All @@ -59,11 +58,13 @@ public function createAction()
));
}

$this->view->type = 'create';
$this->view->form = $form;
$this->view->images = $this->_helper->service('image')->findByArticle($this->_getParam('article_number'));
}

public function editAction()
{
{
$translator = \Zend_Registry::get('container')->getService('translator');
$slideshow = $this->getSlideshow();
$form = new Admin_Form_Slideshow();
Expand All @@ -88,7 +89,7 @@ public function editAction()
}

public function addItemAction()
{
{
$translator = \Zend_Registry::get('container')->getService('translator');
$slideshow = $this->getSlideshow();
$image = $this->_helper->service('image')->find(array_pop(explode('-', $this->_getParam('image'))));
Expand All @@ -110,14 +111,15 @@ public function addMultipleItemsAction()
$slideshow = $this->getSlideshow();

$items = array();
foreach($this->_getParam('images') as $key => $value) {
foreach ($this->_getParam('images') as $key => $value) {
$image = $this->_helper->service('image')->find($value);
try {
$item = $this->_helper->service('package')->addItem($slideshow, $image);
$items[] = $this->view->slideshowItem($item);
} catch (\InvalidArgumentException $e) {}
} catch (\InvalidArgumentException $e) {
}
}

$this->_helper->json($items);
}

Expand Down Expand Up @@ -192,7 +194,7 @@ private function getSlideshow()
/**
* Set slideshow renditions
*
* @param Zend_Form $form
* @param Zend_Form $form
* @return void
*/
private function setSlideshowRenditions(\Zend_Form $form)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,27 @@ class Admin_View_Helper_SlideshowsJson extends Zend_View_Helper_Abstract
/**
* Provides slideshows formated for json
*
* @param array $slideshows
* @param int $width
* @param int $height
* @param array $slideshows
* @param int $width
* @param int $height
* @return array
*/
public function SlideshowsJson(array $slideshows, $width = 150, $height = 150)
{
$view = $this->view;
return array_map(function($slideshow) use ($width, $height, $view) {

return array_map(function ($slideshow) use ($width, $height, $view) {
return (object) array(
'id' => $slideshow->getId(),
'headline' => $view->escape($slideshow->getHeadline()),
'itemsCount' => $slideshow->getItemsCount(),
'slug' => $slideshow->getSlug(),
'items' => array_map(function($item) use ($width, $height) {
'items' => array_map(function ($item) use ($width, $height) {
return (object) array(
'caption' => $item->getCaption(),
'thumbnail' => $item->getRendition()->getPreview($width, $height)->getThumbnail($item->getImage(), Zend_Registry::get('container')->getService('image')),
);
}, array_filter($slideshow->getItems()->toArray(), function($item) { return $item->isImage(); })),
}, array_filter($slideshow->getItems()->toArray(), function ($item) { return $item->isImage(); })),
);
}, $slideshows);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,12 @@ $(function() {
});
});
</script>
</div>
<div id="add-video">
<form method="<?php echo $this->form->getMethod(); ?>" action="<?php echo $this->url(array(
'action' => 'add-video-item',
)); ?>"><div class="add-video">
<input type="text" name="url" title="<?php echo $translator->trans("Add video url (e.g. http://vimeo.com/25083275 for Vimeo, http://youtu.be/1XsPVO61e9w for YouTube)", array(), 'article_images'); ?>" placeholder="<?php echo $translator->trans('Video URL', array(), 'article_images'); ?>" /> <button><?php echo $translator->trans('Add video', array(), 'article_images'); ?></button>
</div></form>
</div>

Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="rendition-preview" style="width: <?php echo $this->preview->getWidth(); ?>px; height: <?php echo $this->preview->getHeight(); ?>px;">
<div class="rendition-preview" style="width: <?php echo $this->preview->getWidth(); ?>px;">
<?php if ($this->thumbnail !== null) {
echo $this->thumbnail->getImg($this);
} ?>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,39 +1,44 @@
<?php
<?php
$translator = \Zend_Registry::get('container')->getService('translator');
$this->headScript()->appendFile($this->baseUrl('js/views/PaginatorView.js'));
$this->headScript()->appendFile($this->baseUrl('js/views/PaginatorView.js'));
$this->headLink()->appendStylesheet($this->baseUrl('/admin-style/slideshow.css'));
?>

<header>
<h1><?php echo $translator->trans('Attach slideshows', array(), 'article_images'); ?></h1>
<div id="app">
<button id="attach-slideshows-button" class="prime"><?php echo $translator->trans('Done'); ?></button>
<div id="modal-top">
<div class="toolbar fixed-top" id="app">
<h1><?php echo $translator->trans('Attach').'/'.$translator->trans('Detach').' '.$translator->trans('Slideshows', array(), 'articles'); ?>
<span style="float: right;">
<button id="attach-slideshows-button" class="prime"><?php echo $translator->trans('Done'); ?></button>
</span>
</h1>
</div>
</header>

<section class="dark">
<ul id="article-slideshows" class="list-view grid slideshow-list"></ul>
</div>
<h2 class="attached-slideshow"><?php echo $translator->trans('Attached Slideshows', array(), 'article_images'); ?></h2>
<section>
<ul id="article-slideshows" class="slideshow attached"></ul>
</section>


<section>
<div style="margin: 8px;"></div>
<div class="search-wrapper">
<form method="post" action="<?php echo($this->url(array(
'module' => 'admin',
'controller' => 'slideshow',
'action' => 'attach',
))); ?>">
<div style="margin-left: 10px;">
<div class="search">
<input type="text" placeholder="<?php echo($translator->trans('Search')); ?>" name="q" value="<?php if ($this->q) echo $this->escape($this->q); ?>">
<input type="submit" value="<?php echo($translator->trans('Search')); ?>">
</div>
</form>
<nav></nav>
</div>
</section>

<nav></nav>


<section>
<ul id="slideshow-list" class="list-view grid slideshow-list"></ul>
</section>

<script type="text/template" id="slideshow-template">
<h3 class="title"><%= headline.substring(0, 22) %><% if (headline.length > 22) { %>..<% } %></h3>
<small>(<?php echo $translator->trans('Items: ', array(), 'article_images'); ?><%= itemsCount %>)</small>
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1,174 @@
<?php echo $this->form; ?>
<?php $this->headLink()->appendStylesheet($this->baseUrl('/admin-style/image_management.css')); ?>
<?php $this->headLink()->appendStylesheet($this->baseUrl('/admin-style/slideshow.css')); ?>
<?php
$translator = \Zend_Registry::get('container')->getService('translator');
$this->placeholder('bodyId')->set('next');
$this->placeholder('bodyClass')->set('iframe expanded');
?>
<div class="content">
<form id="edit_slideshow_form" method="<?php echo $this->form->getMethod(); ?>">
<div id="modal-top">
<div class="toolbar fixed-top">
<div class="save-button-bar"></div>
<h1>
<?php echo $translator->trans('Create Slideshow', array(), 'article_images'); ?>
<span style="float: right;">
<input type="submit" style="margin: 0;" value="<?php echo $translator->trans('Create'); ?>" class="save-button">
</span>
</h1>
</div>
</div>
<div class="slideshow-headline">
<input type="text" class="<?php echo $this->form->headline->hasErrors() ? ' error' : ''; ?>" name="headline" value="<?php echo $this->escape($this->form->headline->getValue()); ?>" title="<?php echo $translator->trans('Slideshow headline', array(), 'article_images'); ?>" placeholder="<?php echo $this->form->headline->hasErrors() ? implode(", ", $this->form->headline->getMessages()) : $translator->trans('Slideshow name...', array(), 'article_images'); ?>"/>
<?php echo $this->form->rendition->setDecorators(array(
'ViewHelper',
'Errors',
'Label'
)); ?>
</div>

<h2 class="slideshow-images"><?php echo $translator->trans('Slideshow images', array(), 'article_images'); ?></h2>

<ul id="slideshow-items" class="slideshow">

</ul>

<script>
/**
* Set order of items
*
* @return void
*/
function setOrder() {
$.post("<?php echo $this->url(array(
'module' => 'admin',
'controller' => 'slideshow',
'action' => 'set-order',
'format' => 'json',
)); ?>", {
order: $('#slideshow-items').sortable('toArray'),
}, function (data, textStatus) {
}, 'json');
}

var draggableOptions = {
revert: true,
connectToSortable: 'ul.slideshow',
opacity: 0.8,
helper: 'clone',
cursor: 'move'
};

$(function() {
$('.slideshow').sortable({
placeholder: 'placeholder',
<?php if ($this->slideshow) { ?>
receive: function(event, ui) {
var imageId = ui.item.attr('id');
$.post("<?php echo $this->url(array(
'module' => 'admin',
'controller' => 'slideshow',
'action' => 'add-item',
'format' => 'json',
)); ?>", {
image: imageId,
}, function (data, textStatus) {
if (data.error_message) {
$('#slideshow-items #' + imageId).detach();
alert(data.error_message);
return;
}

$('#slideshow-items #' + imageId).replaceWith(data.item);
setOrder();
}, 'json');
},
update: setOrder,
cursor: 'move'
<?php } ?>
});

<?php if ($this->slideshow) { ?>
$('.thumbnails li').draggable(draggableOptions);
<?php } ?>

$('#slideshow-items .remove').live('click', function(e) {
e.preventDefault();
var link = $(this);
$.post(link.attr('href') + '?format=json', function (data, textStatus) {
link.closest('li').detach();
});
});

$('#select-image').tabs();

$('#add-sellected-to-gallery').click(function(){
var images = [];
$('.thumbnails li figure input:checkbox[name=checked-images[]]:checked').each(function(index, element){
images.push($(element).val());
});

// ping for connection
callServer('ping', [], function(json) {
flashMessage('<?php echo $translator->trans('Processing...', array(), 'home'); ?>');
$.post("<?php echo $this->url(array(
'module' => 'admin',
'controller' => 'slideshow',
'action' => 'add-multiple-items',
'format' => 'json',
)); ?>", {
images: images
}, function() {
window.location.reload();
});
}); // /ping
})

$('#select-all-images').click(function(e){
$('.thumbnails li figure input:checkbox[name=checked-images[]]').attr('checked', true);
e.preventDefault();
});

$('.expand-btn').click(function (){
$('body#next').toggleClass('expanded');
});
});
</script>


<div class="expand-btn"><?php echo $translator->trans('Add items to slideshow', array(), 'article_images'); ?></div>
<div id="select-image" class="tabs popup-tabs">
<ul>
<?php if (!empty($this->images)) { ?><li><a href="#attached-images"><?php echo $translator->trans('Attached images', array(), 'article_images'); ?></a></li><?php } ?>
<li><a href="#media-archive"><?php echo $translator->trans('Media Archive', array(), 'article_images'); ?></a></li>
<li class="ui-state-default ui-corner-top">
<a href="#add-video"><?php echo $translator->trans('Add video', array(), 'article_images'); ?></a>
</li>
</ul>

<?php if (!empty($this->images)) { ?>
<div id="attached-images">
<ul class="thumbnails">
<?php foreach ($this->images as $image) { ?>
<li id="image-<?php echo $image->getId(); ?>">
<figure>
<div><?php echo $this->thumbnail($image->getPath(), 150, 150, 'fit')->getImg($this); ?></div>
<input type="checkbox" id="default-<?php echo $image->getId(); ?>" name="checked-images[]" value="<?php echo $image->getId(); ?>" title="<?php echo $translator->trans('Mark image', array(), 'article_images'); ?>" />
<figcaption><label for="default-<?php echo $image->getId(); ?>"><?php echo $image->getWidth(), 'x', $image->getHeight(); ?></label></figcaption>
</figure>
</li>
<?php } ?>
</ul>
<div class="add-images">
<button id="add-sellected-to-gallery" class="button"><?php echo $translator->trans('Add selected images to slideshow', array(), 'article_images'); ?></button>
<button id="select-all-images" class="button"><?php echo $translator->trans('Select all images', array(), 'article_images'); ?></button>
</div>
</div>
<?php } ?>

<div id="media-archive">
<?php echo $this->imageArchive(); ?>
</div>
</div>
</form>
</div>
Loading

0 comments on commit 78a1843

Please sign in to comment.