Вторник, 01 марта 2022 02:45

ImageFlow Gallery, jQuery Dialog Popup and Bootstrap 5 in Ruby on Rails 7

Оцените материал
(3 голосов)

Перед вами конспект (или же концепт, как угодно), задача которого - помочь осмыслить и освоить (в первую очередь автору) новые возможности отличного фреймворка Ruby on Rails, появившиеся в Rails 7.

Тюнинг движков cms Скрипты для сайтов, расширения для cms Вебмастеринг, создание сайтов Интернет-магазины. Prestashop, osCommerce, VamShop, VirtueMart Программирование в среде 1С IT security, компьютерная безопасность Локальные сети, Windows и Linux

Попробуем сегодня водрузить на седьмые рельсы весьма эффектную галерею изображений ImageFlow, добавив к ее функционалу новое свойство: всплывающие окна на основе jQuery UI. Полностью готовый rails-app, как всегда, можно найти в гитхабе автора.

 

Увидеть на гитхабе.

Базовый HTML, использованный для построения всплывающих окон jquery-ui галереи изображений ImageFlow на основе фреймворка Ruby on Rails 7, для лучшего понимания - можно взглянуть на форуме.

 

Начинаем. Тем, кто захочет потренироваться в кодинге, используя этот tutorial, понадобятся актуальные (хотя бы более-менее) версии следующего ПО (сразу предупреждаю, работаю я на линуксе, про винду даже не спрашивайте, я ее не знаю / не помню):

 

Dev banner 2

 

$ ruby -v
ruby 2.7.4p191 (2021-07-07 revision a21a3b7d23) [x86_64-linux]
$ bundle -v
Bundler version 2.3.5
$ npm -v
8.5.1
$ yarn -v
1.22.17
$ psql --version
psql (PostgreSQL) 12.10

 

Работаем:

 

mkdir image_gallery && cd image_gallery
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '7.0.2.2'" >> Gemfile
bundle install
bundle exec rails new . --force --css=bootstrap -d=postgresql
bin/rails db:create  
bin/rails db:migrate
rails g controller Imagegallery index

 

Сразу уточню: PostgreSQL указываю в опциях в целях возможности запушить сделанное на Heroku, также попросту в силу привычки. Optional.

 

NB. Очень рекомендую удалить turbo... а впрочем, дело ваше. :)

yarn remove @hotwired/turbo-rails

 

Открываем страничку загрузки jquery-ui, убираем все галки из чекбоксов, отмечаем Dialog. При желании есть возможность повыбирать стили, открыв страничку Themes, а можно этого не делать, воспользовавшись стандартной темой; далее загружаем и распаковываем архив, который нам вскорости понадобится.

И да, можно было бы, наверное, как-то так:

 

yarn add jquery-ui

 

, но в силу ряда причин рекомендую так не делать. Установите этим способом лишь jquery:

 

yarn add jquery

 

OK, далее:

 

mkdir app/javascript/src

 

, и во вновь созданную директорию помещаем два файла:

 app/javascript/src/jquery.js

import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery

 

, также jquery-ui.js, который возьмете в корне директории загруженного только что архива. И теперь приведите application.js к следующему:

 app/javascript/application.js

// Entry point for the build script in your package.json
import "./controllers"
import * as bootstrap from "bootstrap"
import "./src/jquery"
import "./src/jquery-ui"

 

 Теперь стили. Эти два файла нужно поместить в app/assets/stylesheets:

imageflow.css

@charset "utf-8";

/* ImageFlow Settings
==================================== */
@media screen, projection {
	.imageflow {
		overflow:hidden;
		position:relative; 
		text-align:left;
		visibility:hidden;
		width:100%;
	}
	.imageflow img {
		border:none;
		position:absolute;
		top:0px;
		visibility:hidden;
		-ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the IE7 */
	}
	.imageflow p {
		margin:0 auto;
		text-align:center;
	}
	.imageflow .loading {
		border:1px solid white;
		height:15px;
		left:50%;
		margin-left:-106px;
		padding:5px;
		position:relative;
		visibility:visible;
		width:200px;
	}
	.imageflow .loading_bar {
		background:#fff;
		height:15px;
		visibility:visible;
		width:1%;
	}
	.imageflow .navigation{
		z-index:10000;
	}
	.imageflow .caption {
		font-weight:bold;
		position:relative; 
		text-align:center;
		z-index:10001;
	}
	.imageflow .scrollbar {
		border-bottom:1px solid #b3b3b3;
		position:relative; 
		visibility:hidden;
		z-index:10002;
		height:1px;
	}
	.imageflow .slider {
		background:url(slider.png) no-repeat;
		height:14px;
		margin:-6px 0 0 -7px;
		position:absolute;
		width:14px;
		z-index:10003;
	}
	.imageflow .slideshow {
		cursor:pointer;
		height:14px;
		margin:20px 0 0 20px;
		position:absolute;
		width:14px;
		z-index:10003;
	}
	.imageflow .slideshow.pause {
		background:url(button_pause.png) no-repeat;
	}
	.imageflow .slideshow.play {
		background:url(button_play.png) no-repeat;
	}
	.imageflow .images {
		overflow:hidden;
		white-space:nowrap;
	}
	.imageflow .button {
		cursor:pointer;
		height:17px;
		position:relative;
		width:17px;
	}
	.imageflow .previous {
		background: url(button_left.png) top left no-repeat;
		float:left;
		margin: -7px 0 0 -30px;
	}
	.imageflow .next {
		background: url(button_right.png) top left no-repeat;
		float:right;	
		margin:-7px -30px 0 30px;
	}
}

imageflow1.css

#xStep {
	background-image: url(background.jpg);
	background-repeat: no-repeat;
	background-position: 50% top;
}

#xStep {
	height: 670px !important;
}

#xStep_images {
	height: 585px !important;
	top: 96px;
	position: relative;
}

#xStep_navigation {}

 

 , и добавьте к ним jquery-ui.css, который - правильно - также находится в архиве. Файл application.bootstrap.scss должен теперь выглядеть следующим образом:

 

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
@import "jquery-ui";
@import "imageflow";
@import "imageflow1";

 

Теперь: 

 

mkdir public/js
mkdir public/images
mkdir public/images/slides

 

Практически последние усилия: переносим нашу деятельность в каталог public, куда придется скопировать несколько графических файлов: button_left.png, button_right.png, button_pause.png, button_play.png, slider.png, также background.jpg; все это оптимально взять из соответствующего репо моего гитхаба. А в только что созданный public/images копируем все, что найдете в директории images все того же архива: поверьте, пригодится. Каталог slides заполняется картинками, можно взять для начала мои.

Сохраняем в каталоге public/js эти три файла:

imageflow.js

(Это очень длинный файл, возьмите в моем репо или на сайте проекта ImageFlow.)

imageflow1.js

domReady(function()
{
var iflow = new ImageFlow();
iflow.init({ ImageFlowID: 'xStep', xStep: 300, reflections: false, slideshow: true, slideshowAutoplay: false, opacity: true, circular: true, glideToStartID: false, opacityArray: [9,4,3,1,1], onClick: jQuery_modal });
}); 

jQuery_modal.js

var jQ = $.noConflict();
	function jQuery_modal(){
		if ( 0 == jQ(this).attr('longdesc').indexOf('#') ){
			jQ(jQ(this).attr('longdesc')).dialog({ height: 450, width: 600, modal: true });
		}
		else{
			jQ("#dialog-modal").text(jQ(this).attr('longdesc'));
			jQ("#dialog-modal").dialog({ height: 240, modal: true });
		}
	}

 

Далее:

 

mkdir app/services
touch app/services/get_images.rb

 

, содержимое файла приводим к следующему: 

 

class GetImages
  def self.get_image_paths(d)
    target_folder_path = File.join(Rails.root, d)
    Dir.children(target_folder_path)
  end
 end

 

И нам осталось лишь отредактировать вьюху:

app/views/imagegallery/index.html.erb

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <div id="dialog-modal" style="display: none"></div>
      <div id="xStep" class="imageflow">
      <% @result.each_with_index do |slide, index| %>
        <img alt="<%= File.basename(slide, '.jpg') %>" src="/images/slides/<%= slide %>" 
        longdesc="#<%= index %>" width="300" height="200">
      <% end %>
      </div>
      <% @result.each_with_index do |slide, index| %>
        <div id="<%= index %>" style="display: none"><img src="/images/slides/<%= slide %>" 
          width="500" height="333" />
        </div>
      <% end %>
    </div>
  </div>
</div>

<script src="/js/imageflow.js"></script>
<script src="/js/imageflow1.js"></script>
<script src="/js/jQuery_modal.js"></script>

 

, контроллер:

app/controllers/imagegallery_controller.rb

class ImagegalleryController < ApplicationController
  def index
    @result = GetImages.get_image_paths("/public/images/slides")
  end
end

 

, и не забыть про роутинг:

config/routes.rb

Rails.application.routes.draw do
  get 'imagegallery/index'
  root 'imagegallery#index'
end

 

Запускаем и любуемся:

 

$ ./bin/dev
06:33:52 web.1  | started with pid 5268
06:33:52 js.1   | started with pid 5269
06:33:52 css.1  | started with pid 5270
06:33:57 js.1   | yarn run v1.22.17
06:33:57 css.1  | yarn run v1.22.17
06:33:57 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --watch
06:33:57 css.1  | $ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
06:34:00 js.1   | [watch] build finished, watching for changes...
06:34:05 css.1  | Sass is watching for changes. Press Ctrl-C to stop.
06:34:05 css.1  | 
06:34:06 web.1  | => Booting Puma
06:34:06 web.1  | => Rails 7.0.2.2 application starting in development 
06:34:06 web.1  | => Run `bin/rails server --help` for more startup options
06:34:08 web.1  | Puma starting in single mode...
06:34:08 web.1  | * Puma version: 5.6.2 (ruby 2.7.3-p183) ("Birdie's Version")
06:34:08 web.1  | *  Min threads: 5
06:34:08 web.1  | *  Max threads: 5
06:34:08 web.1  | *  Environment: development
06:34:08 web.1  | *          PID: 5268
06:34:08 web.1  | * Listening on http://127.0.0.1:3000
06:34:08 web.1  | * Listening on http://[::1]:3000
06:34:08 web.1  | Use Ctrl-C to stop

 

Уфффффф... расположить div-ы на странице, размеры картинок подредактировать, стили всплывающего окна, все такое прочее - это сами. Крайне несложно настраивается в конфигах.

Последнее изменениеЧетверг, 03 марта 2022 18:58

Оставить комментарий

Добавьте ваш комментарий

Text To Speech

All sorts of things

Комментарии в блоге

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.