FrontendHandler는 html 문서가 출력할 때 필요한 다양한
태그와js, css파일을 지정된 위치에 추가하고 관리하는 역할을 합니다.
FrontendHandler는 현재 9가지 형태의 태그를 지원합니다.
## 브라우저 타이틀 태그 지정하기
title 메소드를 사용하십시오.
php
XeFrontend::title('브라우저 타이틀입니다');
## body 태그의 class 지정하기
bodyClass 메소드를 사용하십시오.
php
body에 'profile' class지정
XeFrontend::bodyClass('profile');
## js 파일 로드하기
### 기본 사용법
js 메소드를 사용하여 스크립트 파일을 로드할 수 있습니다.
이때, appendTo, prependTo 메소드를 사용하면, 로드하는 위치를
, 태그 내에 위치시킬 수 있습니다.
반드시 마지막에는 load 메소드를 사용해야 합니다.
php
xe.js파일을 head의 하단에 로드함.
XeFrontend::js('assets/core/common/js/xe.js')->appendTo('head')->load();
xe.js파일을 body의 상단에 로드함.
XeFrontend::js('assets/core/common/js/xe.js')->prependTo('body')->load();
### 우선순위 지정
만약 스크립트 파일을 로드할 때, 반드시 먼저 로드돼야 하는
다른 스크립트 파일이 있다면 before 메소드를 사용하여 지정할 수 있습니다.
반대의 경우, after 메소드를 사용하십시오.
php
bootstrap.js이 로드된 이후에 xe.js파일이 로드되도록 우선순위 지정
XeFrontend::js('assets/core/common/js/xe.js')
->before('assets/vendor/bootstrap/js/bootstrap.js')
->appendTo('body')->load();
### 언로드
이미 로드된 스크립트 파일이라도 unload 메소드를 사용하여 언로드할 수 있습니다.
php
로드된 xe.js파일을 언로드함.
XeFrontend::js('assets/core/common/js/xe.js')->unload();
## css 파일 로드하기
css 파일도 js 스크립트 파일과 사용법이 동일합니다.
단 appendTo, prependTo 메소드를 지원하지 않습니다.
php
xe.css파일을 로드함. 반드시 bootstrap.css가 로드된 다음에 로드되도록 우선순위를 지정
XeFrontend::js('assets/core/common/css/xe.css')->appendTo('body')->before('assets/vendor/bootstrap.css')->load();
## meta 태그 추가
meta 메소드를 사용하여 meta 태그를 지정할 수 있습니다.
meta 태그의 attribute를 지정하기 위해
name, charset, property, httpEquiv, content를 지원합니다.
php
등록하려는 meta 태그의 별칭 등록.
$alias = 'my.viewport';
XeFrontend::meta($alias)->name('viewport')
->content('width=device-width, initial-scale=1.0')->load();
> alias는 다른 곳에서 내가 입력한 meta 태그를 언로드할 때 key로 사용합니다.
## custom html 태그 추가하기
html 메소드를 사용하면 자유롭게 원하는 코드를 추가할 수 있습니다.
php
$alias = 'myscript';
script 코드를 하단에 추가
XeFrontend::html($alias)->content('
')->appendTo('body')->load();
unload, before
## icon 파일 로드하기
icon 메소드를 사용할 수 있습니다.
php
XeFrontend::icon($iconUrl)->load();
public function create(Request $request, WidgetBoxHandler $handler, FrontendHandler $frontend)
{
$id = $request->get('id');
if (!$request->user()->isAdmin()) {
throw new AccessDeniedHttpException();
}
$widgetbox = $handler->find($id);
if ($widgetbox) {
throw new IDAlreadyExistsException();
}
$frontend->css('assets/vendor/bootstrap/css/bootstrap.min.css')->loadAsync();
return apiRender('widgetbox.create', compact('id'));
}
/**
* Add meta tag
*
* @param string $key item key
* @param string|array $contents meta content
* @return void
*/
protected function addMeta($key, $contents)
{
$contents = (array) $contents;
foreach ($contents as $content) {
$content = array_key_exists($key, $this->cuts) ? $this->substr($content, $this->cuts[$key]) : $content;
$content = in_array($key, $this->needHost) ? $this->prependHost($content) : $content;
// $this->frontend->meta($this->makeName())
$this->frontend->meta()->property($this->metaItems[$key])->content($content)->load();
}
}
/**
* loadIcon
*
* @param FrontendHandler $frontendHandler frontend handler
* @return void
*/
protected function loadIcon(FrontendHandler $frontendHandler)
{
$siteConfig = app('xe.site')->getSiteConfig();
if ($siteConfig['favicon'] !== null) {
$iconFile = $this->app->make('xe.storage')->get($siteConfig['favicon']);
if ($iconFile !== null) {
$iconUrl = $this->app->make('xe.media')->make($iconFile)->url();
$frontendHandler->icon($iconUrl)->load();
}
}
}
/**
* loadIcon
*
* @param FrontendHandler $frontendHandler frontend handler
* @return void
*/
protected function loadIcon(FrontendHandler $frontendHandler)
{
$siteConfig = app('xe.site')->getSiteConfig();
$icon = $siteConfig->get('favicon.path');
if ($icon !== null) {
$frontendHandler->icon($icon)->load();
}
}
/**
* For UI object display
*
* @return string
*/
public function render()
{
$this->frontend->js('https://www.google.com/recaptcha/api.js')->appendTo('head')->load();
return '<div class="g-recaptcha" data-sitekey="' . $this->siteKey . '"></div>';
}
public function testOutput()
{
$tags = $this->getTagList();
$frontend = new FrontendHandler($tags);
$output = $frontend->output('js', 'body.prepend');
}
/**
* For UI object display
*
* @return string
*/
public function render()
{
$this->frontend->js('assets/core/common/js/captcha.naver.js')->load();
$key = $this->issue();
return $this->view->make('captcha.naver', ['key' => $key, 'img' => $this->getImgSrc($key), 'name' => $this->getInputName()])->render();
}