Laravel blade - show fa-icon dependable on file type - laravel-blade

I have this foreach loop to list out all the files
#foreach ($event->event_files as $f => $file)
<div class="col-sm-2">
{{$file->name}}
</div>
#endforeach
And what i want to make is a preview icon for every file so that it looks like this:
I have the icons and i have the file type extensions....i just don't know how to connect all of this in a foreach loop.
Any ideas?

make array in controller:
$icons = [
'pdf' => 'pdf',
'doc' => 'word',
'docx' => 'word',
'xls' => 'excel',
'xlsx' => 'excel',
'ppt' => 'powerpoint',
'pptx' => 'powerpoint',
'txt' => 'text',
'png' => 'image',
'jpg' => 'image',
'jpeg' => 'image',
];
and send it to view with
return view('edit', compact('icons'));
and in blade
#foreach ($event->event_files as $f => $file)
<div class="col-sm-2 text-center">
<i class="fa fa-file-{{$icons[$file->type]}}-o fa-5x text-center"/></i>
<div class="clearfix"></div>
{{$file->name}}
</div>
#endforeach
and you will get something like this:

Related

Kartik fileInput CSS overrides other stylesheets

I have a form which contains kartik fileInput. This is how my form looks like:
<?php $form = ActiveForm::begin([
'id' => 'login-form',
'layout' => 'horizontal',
'fieldConfig' => [
'horizontalCssClasses' => [
'label' => 'col-sm-4',
'offset' => 'col-sm-offset-2',
'wrapper' => 'col-sm-15'
],
],
]); ?>
<div class="form-label-group">
<?= $form->field($model, 'model')->textInput(['autofocus' => true, 'class' => 'form-control', 'id' => 'inputEmail'])->label('PHONE MODEL:') ?>
</div>
<div class="form-label-group">
<?= $form->field($model, 'name')->textInput(['class' => 'form-control', 'id' => 'inputEmail'])->label('PHONE MODEL NAME:') ?>
</div>
<div class="form-label-group">
<?= $form->field($model, 'price')->textInput(['class' => 'form-control', 'id' => 'inputEmail'])->label('PRICE:') ?>
</div>
<div class="form-label-group">
<?= $form->field($model, 'description')->textarea(['class' => 'form-control', 'id' => 'inputEmail'])->label('DESCRIPTION:') ?>
</div>
<?php echo $form->field($model, 'file[]')->widget(FileInput::classname(), [
'options' => ['accept' => 'image/*','multiple' => true]
]); ?>
<?= Html::submitButton('ADD', ['class' => 'btn btn-lg btn-block add-btn mt-4']) ?>
<?php ActiveForm::end(); ?>
I have my Kartik CSS/JS in the same asset as my other stylesheets. This is my asset:
<?php
namespace app\assets;
use yii\web\AssetBundle;
class DashboardAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/dashboard/c3.min.css',
'css/dashboard/dashboard1.css',
'css/dashboard/morris.css',
'css/dashboard/style.css',
'//fonts.googleapis.com/css?family=Lobster&display=swap',
// Kartik fileInput
'css/kartik-fileInput/fileinput.css',
'css/kartik-fileInput/theme.css'
];
public $js=[
'js/dashboard/bootstrap.min.js',
'js/dashboard/c3.min.js',
'js/dashboard/custom.min.js',
'js/dashboard/d3.min.js',
'js/dashboard/dashboard1.js',
'js/dashboard/jquery-3.2.1.min.js',
'js/dashboard/jquery.sparkline.min.js',
'js/dashboard/morris.min.js',
'js/dashboard/perfect-scrollbar.jquery.min.js',
'js/dashboard/popper.min.js',
'js/dashboard/raphael-min.js',
'js/dashboard/sidebarmenu.js',
'js/dashboard/waves.js',
// Kartik fileInput
'js/kartik-fileInput/file.js',
'js/kartik-fileInput/es.js',
'js/kartik-fileInput/fileinput.js',
'js/kartik-fileInput/fr.js',
'js/kartik-fileInput/piexif.js',
'js/kartik-fileInput/sortable.js',
'js/kartik-fileInput/theme.js',
'js/kartik-fileInput/theme2.js'
];
//if this asset depends on other assets you may populate below array
public $depends = [
];
}
The problem is that when I echo out the fileInput, it messes entire form's CSS up. After commenting the
<?php echo $form->field($model, 'file[]')->widget(FileInput::classname(), ['options' => ['accept' => 'image/*','multiple' => true]]); ?> part, the styles are back to normal. How can I fix this problem so the fileInput doesn't overwrite custom CSS?
This is how my form looks like before/after adding the fileInput widget.
Before: https://imgur.com/wAdgeHz
After: https://imgur.com/yqe8yM8
Try setting
Yii::$app->params['bsDependencyEnabled'] = false
in your params.php file. This will prevent the loading of bootstrap css and js asset files.
source: http://demos.krajee.com/widget-details/fileinput#override-bootstrap-cssjs

Growl Widget Kartik with AdminLTE template

How i can intregate Growl Widget Kartik Yii2 with AdminLTE Template. When i used the widget not show the animation and position defined from Controller.
CompraController.php
... if ($flag) {
$transaction->commit();
Yii::$app->getSession()->setFlash('success', [
'type' => 'success',
'duration' => 5000,
'icon' => 'glyphicon glyphicon-ok',
'message' => ' Compra Registrada ;)',
'title' => 'Registro Compra',
'positonY' => 'top',
'positonX' => 'right'
]);
return $this->redirect(['index']);
}
main.php
... <?php foreach (Yii::$app->session->getAllFlashes() as $message):; ?>
<?php
echo Growl::widget([
'type' => (!empty($message['type'])) ? $message['type'] : 'danger',
'title' => (!empty($message['title'])) ? Html::encode($message['title']) : 'Title Not Set!',
'icon' => (!empty($message['icon'])) ? $message['icon'] : 'fa fa-info',
'body' => (!empty($message['message'])) ? Html::encode($message['message']) : 'Message Not Set!',
'showSeparator' => true,
'delay' => 1, //This delay is how long before the message shows
'pluginOptions' => [
'delay' => (!empty($message['duration'])) ? $message['duration'] : 3000, //This delay is how long the message shows for
'placement' => [
'from' => (!empty($message['positonY'])) ? $message['positonY'] : 'top',
'align' => (!empty($message['positonX'])) ? $message['positonX'] : 'right',
]
],
'useAnimation'=>true
]);
?>
<?php endforeach; ?>
When i use the normal template of Yii2 works fine:
But when i use the AdminLTE template, every option is trated like a different notification:
Apparently the AdminLTE Template it has its own notification methods that prevent the execution of Growl Widget. I remove the line:
<?= Alert::widget() ?> in:
<section class="content">
<?= Alert::widget() ?>
<?= $content ?>
</section>
from the file views/layout/content.php and works fine.

Can their be actioncontroller and no view for button in yii

I have a the register button which I have created in cgridview I need to know whether can we have action in controller buuton and no view for that particular action for that button in yii
view user
<?php echo CHtml::link('Advanced Search','#',array('class'=>'search-button')); ?>
<div class="search-form" style="display:none">
<?php $this->renderPartial('_search',array(
'model'=>$model,
)); ?>
</div><!-- search-form -->
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'product-grid',
'dataProvider'=>$model->countregister($_GET['id']),
'enablePagination' => true,
'filter'=>$model,
'columns'=>array(
'name',
'email',
array(
'class'=>'CButtonColumn',
'template'=>'{Register}{update}{view}',
'buttons'=>array(
'Register'=>array(
'label'=>'Register',
.'url'=>Yii::app()->createUrl('register/create',array( 'email'=>$data->email) )
)
),
),
),
)); ?>
controller user
public function actionCreate($email)
{
$model=$this->loadModel($email);
if($_SESSION['userid'])
{
$this->redirect('product/create',array( //line 1
'model'=>$model,'id'=>$model->productid,
));
}
//$this->redirect(array('display','id'=>$model->productid));
$this->redirect(array('user/login'));
}
i don get error but then the below line not the url iam looking
/localhost/test/index.php/register/create/product/create
it should be
/localhost/test/index.php/product/create/id/1
i think there's something wrong in line 1
Please let me know how do i resolve this
change this
$this->redirect('product/create',array( //line 1
'model'=>$model,'id'=>$model->productid,
to
$this->redirect(Yii::app()->createUrl('product/create',array( //line 1
'id'=>$model->productid))
You can parametrise your individual CButtonColumn instances:
array(
'class' => 'CButtonColumn',
'template' => '{Register}{view}{update}',
'buttons' => array(
'Register' => array(
'label' => 'Register',
'url'=>Yii::app()->createUrl('register/create', array('email' => $data->email)),
'visible'=>'$data->entries == 0',
),
'view' => array(
'visible'=>'$data->entries > 0',
)
)
),
But to answer you question after you updated your response (I was already typing it out)
You can use the raw type:
'type'=>'raw',
and the url becomes something like :
'url'=>'Yii::app()->createUrl("register/create",array( "email"=>$data->email) )'
thx to #let-me-see
source: http://www.yiiframework.com/wiki/106/using-cbuttoncolumn-to-customize-buttons-in-cgridview/#hh2
this works
$this->redirect(array('product/create','id'=>$model->productid));

WordPress Radio Boxes - selects only the last one

So I have a form as shown bellow. its a bit long. It contains three radio boxes. Every time I select one, doesn't matter which, and then hit submit, the last radio element shows up as selected instead of the one I clicked. I var dump the option (in this case aisis_core['display_rows']) and it will say the value of the radio element i selected instead of the current on selected.
So I select lists, it will show lists but the radio box selected is no_posts. Can some one tell me what I am doing wrong?
<form action="options.php" method="post">
<input type='hidden' name='option_page' value='aisis_options' /><input type="hidden"
name="action" value="update" /><input type="hidden" id="_wpnonce" name="_wpnonce"
value="f0385965c6" /><input type="hidden" name="_wp_http_referer" value=
"/WordPressDev/wp-admin/admin.php?page=aisis-core-options&settings-updated=true" />
<fieldset>
<div class="control-group">
<label class="radio"><input type="radio" id="rows" class="display" name=
"aisis_core[display_rows]" value="display_rows" checked="checked" /> Display
posts as rows. </label>
<div class="control-group">
<label class="radio"><input type="radio" class="display" name=
"aisis_core[display_rows]" value="list" checked="checked" /> Display posts a
list. </label>
</div>
<div class="control-group">
<label class="radio"><input type="radio" id="noDisplay" class="display" name=
"aisis_core[display_rows]" value="no_posts" checked="checked" /> Display no
posts.</label>
<div class="no_posts_section borderBottom">
<div class="well headLine">
<h1>Display No Rows</h1>
<p>If you choose to display no rows please give me a url of the page or
content you would like to display instead.</p>
<p class="text-info"><strong>Note:</strong> Formatting of said content is
up you. All we do is display it.</p>
</div>
<div class="control-group">
<div class="controls">
<input type="url" name="aisis_core[index_page_no_posts]" value=
"http://google.ca" placeholder="Url" />
</div>
</div>
</div>
<div class="control-group">
<div class="form-actions">
<input type="submit" class="btn btn-primary btn-large" />
</div>
</div>
</div>
</div>
</fieldset>
</form>
The function I am using from wordpress is:
checked('radio_box_value', isset($options['display_rows']), false)
Note: radio_box_value is replaced with what ever the value of the radio box is.
In this case only the last radio box has the "checked" in it's tag, when it should be which ever one I chose.
How are the elements being created?
The following is how I create the elements, they print out what you see above in the html for the radio buttons. These are done similar to, but not exactly, zend framework.
Its pretty straight forward what were doing, create the element, add the options to the element and then return it.
I hope this gives a better picture as to how these are being created.
protected function _radio_rows_element(){
$options = get_option('aisis_core');
echo $options['display_rows'];
$radio_element = array(
'name' => 'aisis_core[display_rows]',
'value' => 'display_rows',
'class' => 'display',
'id' => 'rows',
'checked' => checked('display_rows', isset($options['display_rows']) && $options['display_rows'] == 'display_rows', false),
'label' => ' Display posts as rows. <a href="#radioRows" data-toggle="modal">
<i class="icon-info-sign"> </i></a>'
);
$radio = new CoreTheme_Form_Elements_Radio($radio_element, $this->sub_section_rows_array());
return $radio;
}
protected function _radio_list_element(){
$options = get_option('aisis_core');
echo $options['display_rows'];
$radio_element = array(
'name' => 'aisis_core[display_rows]',
'value' => 'list',
'class' => 'display',
'checked' => checked('list', isset($options['display_rows']) && $options['display_rows'] == 'list', false),
'label' => ' Display posts a list. <a href="#radioLists" data-toggle="modal">
<i class="icon-info-sign"> </i></a>'
);
$radio = new CoreTheme_Form_Elements_Radio($radio_element);
return $radio;
}
protected function _radio_no_posts_element(){
$options = get_option('aisis_core');
echo $options['display_rows'];
$radio_element = array(
'name' => 'aisis_core[display_rows]',
'value' => 'no_posts',
'class' => 'display',
'id' => 'noDisplay',
'checked' => checked('no_posts', isset($options['display_rows']) && $options['display_rows'] == 'no_posts', false),
'label' => ' Display no posts.</a>'
);
$radio = new CoreTheme_Form_Elements_Radio($radio_element, $this->_sub_section_now_posts_array());
return $radio;
}
"checked" function seems to need the value as second parameter as is explained here http://codex.wordpress.org/Function_Reference/checked
Try like this:
protected function _radio_rows_element(){
$options = get_option('aisis_core');
echo $options['display_rows'];
$radio_element = array(
'name' => 'aisis_core[display_rows]',
'value' => 'display_rows',
'class' => 'display',
'id' => 'rows',
'checked' => checked('display_rows', (isset($options['display_rows']))?$options['display_rows']:'', false),
'label' => ' Display posts as rows. <a href="#radioRows" data-toggle="modal">
<i class="icon-info-sign"> </i></a>'
);
$radio = new CoreTheme_Form_Elements_Radio($radio_element, $this->sub_section_rows_array());
return $radio;
}
protected function _radio_list_element(){
$options = get_option('aisis_core');
echo $options['display_rows'];
$radio_element = array(
'name' => 'aisis_core[display_rows]',
'value' => 'list',
'class' => 'display',
'checked' => checked('list',(isset($options['display_rows']))?$options['display_rows']:'', false),
'label' => ' Display posts a list. <a href="#radioLists" data-toggle="modal">
<i class="icon-info-sign"> </i></a>'
);
$radio = new CoreTheme_Form_Elements_Radio($radio_element);
return $radio;
}
protected function _radio_no_posts_element(){
$options = get_option('aisis_core');
echo $options['display_rows'];
$radio_element = array(
'name' => 'aisis_core[display_rows]',
'value' => 'no_posts',
'class' => 'display',
'id' => 'noDisplay',
'checked' => checked('no_posts', (isset($options['display_rows']))?$options['display_rows']:'', false),
'label' => ' Display no posts.</a>'
);
$radio = new CoreTheme_Form_Elements_Radio($radio_element, $this->_sub_section_now_posts_array());
return $radio;
}
This will not give warning when isn't declared the variable $options['display_rows'] (that as you said is a possibility in your case) and will pass the value to the WordPress function to compare with.
You'll want to check the value in the checked condition, not you're just checking if any value is being selected, which is always true after a submit
change
checked('display_rows', isset($options['display_rows']), false)
to:
checked('display_rows', isset($options['display_rows']) && $options['display_rows'] == 'display_rows', false),
and for the list to:
checked('display_rows', isset($options['display_rows']) && $options['display_rows'] == 'list', false),
I did manage to write this:
public function set_element_checked($value, $option, $key){
$options = get_option($option);
if(isset($options[$key]) && $options[$key] == $value){
return 'checked';
}
}
which does exactly what I want. compare the element value to that of the $option[$key] and if they match return checked. can be called via:
'checked' => set_element_checked('display_rows', 'aisis_core', 'display_rows');

Drupal with Knockout Javascript

I'm trying to get Knockout.js to work with Drupal. Seems like the Knockout calls inside a Drupal template file is not reading any of my Knockout calls. Has anyone gotten these two to work together?
You probably forgot all about this but I got it to work by including the js inline in the footer:
$header = array(
'type' => 'file'
);
$footer = array(
'type' => 'file',
'scope' => 'footer'
);
drupal_add_js(drupal_get_path('theme', 'MyTheme'). '/js/knockout.js', $header);
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
drupal_add_js('var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function() {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
',
array('type' => 'inline', 'scope' => 'footer', 'weight' => 1)
);
If you found a way to do it from a file let me know, this is no good having to do it this way.
Edit: nevermind, it works if you include the file at the footer:
drupal_add_js(drupal_get_path('theme', 'MyTheme'). '/js/MyKnockoutScript.js', $footer);

Resources