NHP Theme Options Framework using Wordpress 3.5 Media Manager - wordpress

Could anyone help me make a new field type for NHP Theme Options Framework based on "upload" type so that it would use the new "Media Manager" that Wordpress uses since 3.5 instead of Media Uploader. This would be very useful for use with sliders.
Maybe this post would be helpful.

you're in luck i needed this same functionality. I managed to do it by looking at the code and applying the same override techniques as the the old media manager.
In fact i've written a tutorial about it here.
Here's the javascript code:
(function($){
var doc = {
ready: function(){
// initialize only if our button is in the page
if($('#btn_browse_files').length > 0){
slider.init();
}
}
},
slider = {
// the following 2 objects would be our backup containers
// as we will be replacing the default media handlers
media_send_attachment: null,
media_close_window: null,
init: function(){
// bind the button's click the browse_clicked handler
$('#btn_browse_files').click(slider.browse_clicked);
},
browse_clicked: function(event){
// cancel the event so we won't be navigated to href="#"
event.preventDefault();
// backup editor objects first
slider.media_send_attachment = wp.media.editor.send.attachment;
slider.media_close_window = wp.media.editor.remove;
// override the objects with our own
wp.media.editor.send.attachment = slider.media_accept;
wp.media.editor.remove = slider.media_close;
// open up the media manager window
wp.media.editor.open();
},
media_accept: function(props, attachment){
// this function is called when the media manager sends in media info
// when the user clicks the "Insert into Post" button
// this may be called multiple times (one for each selected file)
// you might be interested in the following:
// alert(attachment.id); // this stands for the id of the media attachment passed
// alert(attachment.url); // this is the url of the media attachment passed
// for now let's log it the console
// not you can do anything Javascript-ly possible here
console.log(props);
console.log(attachment);
},
media_close: function(id){
// this function is called when the media manager wants to close
// (either close button or after sending the selected items)
// restore editor objects from backup
wp.media.editor.send.attachment = slider.media_send_attachment;
wp.media.editor.remove = slider.media_close_window;
// nullify the backup objects to free up some memory
slider.media_send_attachment= null;
slider.media_close_window= null;
// trigger the actual remove
wp.media.editor.remove(id);
}
};
$(document).ready(doc.ready);
})(jQuery);

fyi...http://reduxframework.com/ is a fork of NHP and has added 3.5 media loader and also fixed other areas of NHP.
I just switched over to and so far not to bad.

See the usage in our vafpress theme framework github code snippet:
media manager with WP < 3.5 fallback
in the code, there is also this variable (vp_wp.use_new_media_upload), that you will need to 'expose' into your JS code via wp_localize_script, that variable needed to state whether the Wordpress you're running is under 3.5 or not, if it's under 3.5 then it's should not use the new media manager, and use the old method using thickbox media-upload.php iframe.

NHP has just merged with Redux Framework and Redux 3.0 has been released. It can be run as a Wordpress Plugin or Embedded within a theme. You should really give the new version a try.
http://wordpress.org/plugins/redux-framework/
It has full Wordpress media 3.5 support, and then some. It not only stores the media URL, but also the ID and full-dimension size.
Seriously, check it out.

Related

Make a button of any language which has your user and pass embedded to make easy log in for particular website

I have 'several accounts' in a website which I always log in everyday. Now, I want it to be easy by just clicking buttons in order to log in a particular account. Is it possible? How can I do that?
If you have any experience using jQuery for DOM manipulation, it's fairly easy to do what you're asking using tampermonkey / greasemonkey
Basically you'd add a script that would trigger only on a particular domain. That script would import jQuery (just for ease of use) and append N buttons to the DOM. Using jQuery again, those buttons would have a given behavior that, in your case, fill the login and password input fields and submit the info.
// ==UserScript==
// #name Multilogin
// #version 0.1
// #match http://website.com/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
// #run-at document-start
// ==/UserScript==
jQuery(document).ready(function() {
jQuery('body').prepend('<button id="my1stID" data-login="brian1" data-password="asdfg" value="my1stID"/>');
jQuery('body').prepend('<button id="mi2ndID" data-login="brian2" data-password="asdfg2" value="my2ndID"/>');
jQuery('body').prepen('<button id="mi3rdID"...');
jQuery(document).on('click','my1stID',function() {
var login=jQuery(this).data('login');
var password=jQuery(this).data('password');
jQuery('#login_input').val(login);
jQuery('#password_input').val(password);
jQuery('#submit').click();
});
jQuery(document).on('click','mi2ndID',function() {
....
});
jQuery(document).on('click','mi3rdID',function() {
....
});
});
Take into consideration that storing your passwords in a script is very insecure and with my answer I'm giving you enough rope to hang yourself.

Framework7 starter page "pageInit" NOT WORKING

anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});

Can I enable users on Plone4 to show/hide the Portlet column on-the-fly

The Portlets in Plone are quite handy but I'd like to be able to provide some method to users to be able to temporarily hide/show the portlets column. That is, by clicking a button, the portlets column should collapse and you see the content page in full width. Then clicking again and the portlets panel on the left expands and the main content page width shrinks to accommodate.
I've observed the HTML ID of the portlets column is "portal-column-one" and I tried adding a button to the page that runs javascript to set the visibility property of that element to "hidden" but this seemed to have no effect. I was able to go into Firebug and add style="visibility:hidden;" to the "portal-column-one" element and it had the effect of making the region invisible w/o resizing the page.
I am using Plone 4.1. I have the site configured with navigation portlet on all pages except the main page which has Navigation, Review List and Recent Changes.
So it seems it must be possible to embed some javascript in the page (I was thinking of adding this to the plone.logo page which I've already customized). But I guess its more complicated than the few stabs I've made at it.
Thanks in advance for any advice.
Solution (Thanks to input from Ulrich Schwarz and hvelarde):
The solution I arrived at uses JavaScript to set CSS attributes to show/hide the Portlets Column (Left side) and expand the content column to fill the space the porlets column filled.
I started by customizing the Plone header template to add a link for the user to toggle the view of the Porlets column. I also put the necessary javascript functions in this header.
To customize the header, go to the following page (need to be logged in as Admin of your Plone site):
http://SERVER/SITE/portal_view_customizations/zope.interface.interface-plone.logo
Where:
SERVER is the address and port of your site (e.g. localhost:8080)
SITE is the short name of your Plone Site
To create this page:
Go to Site Setup (as Admin)
Go to Zope Management Interface
Click on "portal_view_customizations"
Click on "plone.logo" (or at least this is where I choose to put the button so it would be located just above the navigation Portlet)
Add the following to the page:
<script>
function getById(id) {
return document.getElementById(id);
}
function TogglePortletsPanel() {
var dispVal = getById('portal-column-one').style.display
if( dispVal == "none") { // Normal display
SetPortletsPanelState("inline");
} else { // Full Screen Content
SetPortletsPanelState("none");
}
}
function SetPortletsPanelState(dispVal) {
var nav = getById('portal-column-one');
var content = getById('portal-column-content');
if( dispVal == "none") { // Normal display
nav.style.display='none';
content.className='cell width-full position-0';
// Set cookie to updated value
setCookie("portletDisplayState","none",365);
} else { // Full Screen Content
nav.style.display='inline';
content.className='cell width-3:4 position-1:4';
// Set cookie to updated value
setCookie("portletDisplayState","inline",365);
}
}
function InitializePortletsPanelState() {
var portletDisplayState=getCookie("portletDisplayState");
//alert("portletDisplayState="+portletDisplayState)
if (portletDisplayState!=null) SetPortletsPanelState(portletDisplayState);
}
function setCookie(c_name,value,exdays) {
//alert(c_name+"="+value);
// cookie format: document.cookie = 'name=value; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var exp= ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + escape(value) + exp + "; path=/";
}
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name) return unescape(y);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {oldonload(); }
func();
}
}
}
addLoadEvent(InitializePortletsPanelState);
</script>
<a style="font-size:50%;" href="javascript:TogglePortletsPanel();">Toggle Portlets Panel</a>
6. Save the page
Notes:
I got the names of the plone div elements using Firebug.
I also used Firebug to experiment with different settings to speed up prototyping. For example, editing the HTML inline to verify settings do as expected.
There is a slight but of delay until the Left Portlet panel is hidden. This is only obvious on Safari for me (which is probably due to how fast it is) but not on Firefox or IE.
Maybe it's just a matter of setting the right property: you want display:none, not visibility:hidden.
But even then, the content area will probably not reflow automatically, you'll need to (dynamically) change the class on it as well.
Specifically, you'll need to put classes width-full and position-0 on portal-column-content, instead of width-1:2 and position-1:4.
This must be achieved client side by javascript (jquery).
You must first read documentation about the css grid framework used by plone: deco.gs. The website is down so, git clone this repo: https://github.com/limi/deco.gs and open pages in a webbrowser
Note: you just have to change css classes on the containers.
Try adi.fullscreen, it respects Plone's css-structure as Ulrich Schwarz thoughtfully mentioned.

extjs 4 designer 1.2 grid renderer

i m working with extjs designer 1.2. I have a button on panel that opens window on click. The window has grid for which i have applied renderer as following in js file . The problem is renderer works well when the window opens up for first time, but when i close window & reopen it, the effect goes off.
Ext.define('MyApp.view.TestWindow', {
extend: 'MyApp.view.ui.TestWindow',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
==========================================================================
Ext.define('MyApp.view.TestPanel', {
extend: 'MyApp.view.ui.TestPanel',
initComponent: function() {
var me = this;
me.callParent(arguments);
Ext.data.StoreManager.lookup('Test').load();
me.down('button[id=testbutton]').on('click',me.onTestBtnClick,me);
},
onTestBtnClick: function(){
var win = new Ext.create('MyApp.view.TestWindow');
win.show();
win.down('#testgrid').columns[0].renderer=function(val){
return '<span style="color:red;">' + val + '</span>';
}
}
});
Observation : When i use renderer in ui.js i.e. the file generated by exporting project from designer, i dont face above stated problem. What can be solution for this problem?
I've resolved similar issues caused by the closeAction config option of my Ext.Window (MyApp.view.TestWindow in your case) being set to hide, instead of destroy (Ext JS 4 default). Your illustrated button click event handler instantiates a new Ext.Window (MyApp.view.TestWindow in your case) every time it is fired. If these instances are not created and destroyed properly you may experience DOM ID contention and undesirable results.
If your goal is to persist such instances a better approach, regardless of the state of your current config options, would be for you to relocate your instantiation logic to a global scope and only manage the showing and hideing of this component in your button click event handler.
Because you have not provided the underlying MyApp.view.TestWindow logic, I am only left to assume that the root cause of your issue does pertain to a combination of either misconfigured config options and/or component instance management, ultimately resulting in components contending for the same DOM ID.
Another thing to be mindful of is the use of statically defined id config options. If you are statically defining an id config option on any component you must ensure that those components are either singletons, or their instances assigned in a global scope for reuse. Again, this all boils down to proper component management.
Lastly, it is also a possibility that the use of my suggestion does not reveal any glaring issues specific to your MyApp.view.TestWindow. If this is the case, inspect and ensure that none of the underlying MyApp.view.TestWindow child components (grid, column model, column, etc.) are culprit.
EDIT
Below is an example:
Ext.define('MyApp.view.TestPanel', {
extend: 'MyApp.view.ui.TestPanel',
initComponent: function() {
var me = this;
me.callParent(arguments);
Ext.data.StoreManager.lookup('Test').load();
me.down('button[id=testbutton]').on('click',me.onTestBtnClick,me);
me.testWindow = new Ext.create('MyApp.view.TestWindow');
me.testWindow.down('#testgrid').columns[0].renderer=function(val){
return '<span style="color:red;">' + val + '</span>';
}
},
onTestBtnClick: function(){
var me = this;
me.testWindow.show();
}
});

How to ignore "Content-Disposition: attachment" in Firefox

How can I cause Firefox to ignore the Content-Disposition: attachment header?
I find it absolutely annoying that I can't view an image in the browser, because it asks me to download it.
I don't want to download the file, I just want to view it in the browser. If the browser doesn't have a plugin to handle it, then it should ask to download.
E.g. I have Adobe Acrobat Reader installed as a plugin for Firefox. I click a link to a PDF, and it asks me to save it, when it should open in the browser using the plugin. This is the behaviour if the server does not send the Content-Disposition: attachment header in the response.
Firefox 3.6.6
Windows XP SP3
Legacy InlineDisposition 1.0.2.4 by Kai Liu can fix this problem.
In the Classic Add-ons Archive at:
caa:addon/inlinedisposition
The "Open in browser" extension is useful for formats supported natively by the browser, not sure about PDF.
Legacy version 1.18 (for users of browsers such as Waterfox Classic) is in the Classic Add-ons Archive at:
caa:addon/open-in-browser
I also found this tonight that totally prevents Firefox from littering your desktop with downloads. It's actually a redirect fix to the hidden /private/temp folder in MAC. Genius.
You can mimic the Windows behaviour simply by changing [Firefox's]
download directory to /tmp.
To do this, open Firefox's General preferences pane, under Save
Downloaded Files To select [choose].... In the dialog that appears,
hit Shift-Command-G to bring up the Go to Folder dialog.
In this dialog, simply type /tmp, hit OK, then hit Select in the
main window.
Well, that's the purpose of disposition type "attachment".
The default behavior (when the header is absent) should be to display in-line.
Maybe there's a configuration problem in your browser, or the Reader plugin?
For PDFs there is an addon called PDF-Download which overrides any attempt to download a PDF and lets the user decide how they want it downloaded (inline, save, external, etc). You could probably modify it to work for other filetypes too.
You could write a firefox extension that removes the disposition header for PDF files. This would be a fairly simple extension.
Since I was looking for a solution and no available add-on was actually working with my Firefox 31.0 (Ubuntu) I decided to try creating my own add-on.
The code if you want to archive a similar goal or just want to know how it works.
console.log("starting addon to disable content-disposition...");
//getting necessary objects
var {Cc, Ci} = require("chrome");
//creating the observer object which alters the Content-Disposition header to inline
var httpResponseObserver = {
//gets fired whenever a response is getting processed
observe: function(subject, topic, data) {
if (topic == "http-on-examine-response") {
var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
httpChannel.setResponseHeader("Content-Disposition", "inline", false);
}
},
//needed for this.observerServer.addObserver --> without addObserver will fail
get observerService() {
return Cc["#mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
},
//used to register with an observer
register: function() {
console.log("register with an observer to get response-events");
this.observerService.addObserver(this, "http-on-examine-response", false);
},
//used to unregister from the observer
unregister: function() {
console.log("unregister from observer");
this.observerService.removeObserver(this, "http-on-examine-response");
}
};
//gets called at enable or install of the add-on
exports.main = function(options, callbacks) {
console.log("content-dispostion main method got invoked");
//call register to make httpResponseObserver.observe get fired whenever a response gets processed
httpResponseObserver.register();
};
//gets called on disable or uninstall
exports.onUnload = function(reason) {
console.log("content-dispostion unloaded");
//unregister from observer
httpResponseObserver.unregister();
};
/*
//not needed!!! just test code for altering http-request header
var httpRequestObserver =
{
observe: function(subject, topic, data)
{
console.log("in observe...");
console.log("topic is: " + topic);
if (topic == "http-on-modify-request") {
var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
httpChannel.setRequestHeader("X-Hello", "World", false);
}
},
get observerService() {
return Cc["#mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
},
register: function()
{
this.observerService.addObserver(this, "http-on-modify-request", false);
},
unregister: function()
{
this.observerService.removeObserver(this, "http-on-modify-request");
}
};
httpRequestObserver.register();
*/
As an alternative you can get my xpi-File to directly install the add-on in Firefox. If you want to disable the "Content-Disposition" altering just deactivate the add-on ;-).
http://www.file-upload.net/download-9374691/content-disposition_remover.xpi.html

Resources